Expandables
Reference for creating collapsible content sections using Expandable and ExpandableGroup components.
Overview
Create collapsible content sections that users can expand and collapse. Use ExpandableGroup to organize multiple expandables together.
Common use cases:
- FAQ sections with collapsible answers
- Optional configuration details
- Advanced settings or features
- Grouped related information
This expandable starts open by default and contains helpful information for new users.
Expandable
Use Expandable to create individual collapsible content sections.
<Expandable title="Click to expand" default-open="false">
Add your content here...
</Expandable>
Default open
<Expandable title="Getting Started Guide" default-open="true">
This expandable starts open by default.
</Expandable>
This expandable starts open by default.
Rich content
Expandables can contain any content including headings, lists, code blocks, and other components:
<Expandable title="API Configuration" default-open="false">
## Environment Variables
Set these variables in your `.env` file:
- `API_KEY` - Your API authentication key
- `API_URL` - Base URL for API calls (default: `https://api.example.com`)
```bash
# Example .env file
API_KEY=your-secret-key
API_URL=https://api.example.com
```
<Callout kind="warning">
Never commit API keys to version control.
</Callout>
</Expandable>
Attributes
Header text displayed in the expandable button (default: "Click to expand").
Initial state: "true" (open) or "false" (closed). Defaults to "false".
ExpandableGroup
Use ExpandableGroup to organize multiple expandables together. Provides consistent spacing and visual grouping.
<ExpandableGroup>
<Expandable title="Installation" default-open="true">
Install the package using your preferred package manager:
```bash
npm install documentation-ai
```
</Expandable>
<Expandable title="Configuration" default-open="false">
Create a configuration file in your project root:
```json
{
"name": "My Documentation",
"theme": "light",
"sidebar": true
}
```
</Expandable>
<Expandable title="Deployment" default-open="false">
Deploy your documentation using our CLI:
```bash
npm run deploy
```
</Expandable>
</ExpandableGroup>
Install the package using your preferred package manager:
npm install documentation-ai
Attributes
No attributes - ExpandableGroup is a simple wrapper for grouping multiple Expandable components with consistent styling.
Common patterns
- FAQ sections - Descriptive titles with most important item open by default
- Configuration options - Group related settings using ExpandableGroup
- Documentation sections - Nested content typically stays within two levels
- Progressive disclosure - Show essential information first, details in expandables