Collapsible Panels

Usage

Basic Collapsible Panel

---
import {CollapsiblePanel} from 'astro-nebula-ui'
---

<CollapsiblePanel title="Panel Title">
  Your content goes here
</CollapsiblePanel>

Your content goes here

Pre-expanded Panel

---
import {CollapsiblePanel} from 'astro-nebula-ui'
---

<CollapsiblePanel title="Already Expanded" expanded={true}>
  This starts open
</CollapsiblePanel>

This starts open

Outline Variant

---
import {CollapsiblePanel} from 'astro-nebula-ui'
---

<CollapsiblePanel title="Outline Style" variant="outline">
  Different visual style
</CollapsiblePanel>

Different visual style

Ghost Variant

---
import {CollapsiblePanel} from 'astro-nebula-ui'
---

<CollapsiblePanel title="Ghost Style" variant="ghost">
  Minimal styling
</CollapsiblePanel>

Minimal styling

Component Properties

The CollapsiblePanel component accepts the following properties:

Property	Type	Default	Description	Example
`title`	`string`	Required	The title text displayed in the panel header	`"Getting Started"`
`expanded`	`boolean`	`false`	Whether the panel starts in an expanded state	`true`
`variant`	`"default" \| "outline" \| "ghost"`	`"default"`	Visual style variant of the panel	`"outline"`
`theme`	`"auto" \| "light" \| "dark"`	`"auto"`	Force a specific theme (overrides auto-detection)	`"dark"`

Property Examples

Here are examples showing each property in use:

Basic Required Property

<CollapsiblePanel title="Basic Panel">
  Content goes here
</CollapsiblePanel>

All Properties Combined

<CollapsiblePanel
  title="Advanced Configuration"
  expanded={true}
  variant="outline"
  theme="dark"
>
  This panel starts expanded, uses outline styling, and forces dark theme
</CollapsiblePanel>

This panel starts expanded, uses outline styling, and forces dark theme

Variant Comparison

Variant	Description	Best Used For
`default`	Full styling with background and shadow	Primary content, main sections
`outline`	Transparent background with accent border	Secondary content, nested sections
`ghost`	Minimal styling, clean appearance	Subtle organization, FAQ sections

Theme Options

Theme	Behavior
`auto`	Automatically adapts to user’s system preference or Starlight theme
`light`	Forces light theme colors regardless of system preference
`dark`	Forces dark theme colors regardless of system preference

Markdown Content Support

The component supports rich Markdown content, including lists, formatting, and code blocks:

Simple Markdown List

---
import {CollapsiblePanel} from 'astro-nebula-ui'
---

<CollapsiblePanel title="Getting Started">
- Install the package
- Import the component
- Add to your Astro file
- Customize as needed
</CollapsiblePanel>

Install the package
Import the component
Add to your Astro file
Customize as needed

Rich Markdown with Formatting

---
import {CollapsiblePanel} from 'astro-nebula-ui'
---

<CollapsiblePanel title="Advanced Features" variant="outline">
- **Bold text** for emphasis
- *Italic text* for subtlety
- `Code snippets` for technical terms
- [Links](https://example.com) to external resources
- Multiple paragraphs with detailed explanations

You can also include regular paragraphs alongside lists for more comprehensive content.
</CollapsiblePanel>

Bold text for emphasis
Italic text for subtlety
Code snippets for technical terms
Links to external resources
Multiple paragraphs with detailed explanations

You can also include regular paragraphs alongside lists for more comprehensive content.

Nested Lists and Complex Content

---
import {CollapsiblePanel} from 'astro-nebula-ui'
---

<CollapsiblePanel title="Project Structure" variant="ghost">
## Frontend Development
- **React Components**
  - Functional components
  - Class components
  - Custom hooks
- **Styling Options**
  - CSS Modules
  - Styled Components
  - Tailwind CSS

## Backend Development
- **API Design**
  - RESTful endpoints
  - GraphQL schemas
  - Authentication
- **Database**
  - Schema design
  - Query optimization
  - Data migrations

### Code Example
\`\`\`js
const component = () => {
  return <div>Hello World</div>;
}
\`\`\`
</CollapsiblePanel>

Frontend Development

React Components
- Functional components
- Class components
- Custom hooks
Styling Options
- CSS Modules
- Styled Components
- Tailwind CSS

Backend Development

API Design
- RESTful endpoints
- GraphQL schemas
- Authentication
Database
- Schema design
- Query optimization
- Data migrations

Code Example

const component = () => {
  return <div>Hello World</div>;
}