Collapse

Collapsible content panels for FAQs, accordions, and expandable sections.

Import

import { Collapse } from 'asterui'

Examples

Basic Collapse

Simple collapsible panels.

</>

What is AsterUI?

AsterUI is a React component library built on DaisyUI and Tailwind CSS.

How do I install it?

Run npm install asterui to get started.

Is it free?

Yes, AsterUI is open source and free to use.

import { Collapse } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'What is AsterUI?',
      children: 'AsterUI is a React component library built on DaisyUI and Tailwind CSS.',
    },
    {
      key: '2',
      label: 'How do I install it?',
      children: 'Run npm install asterui to get started.',
    },
    {
      key: '3',
      label: 'Is it free?',
      children: 'Yes, AsterUI is open source and free to use.',
    },
  ]
  
  return (
      <Collapse items={items} defaultActiveKey={['1']} />
    )
}

export default App

Accordion

Only one panel can be open at a time.

</>

Section 1

Content for section 1. Click another section to close this one.

Section 2

Content for section 2. Only one section can be open.

Section 3

Content for section 3. This is accordion behavior.

import { Collapse } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'Section 1',
      children: 'Content for section 1. Click another section to close this one.',
    },
    {
      key: '2',
      label: 'Section 2',
      children: 'Content for section 2. Only one section can be open.',
    },
    {
      key: '3',
      label: 'Section 3',
      children: 'Content for section 3. This is accordion behavior.',
    },
  ]
  
  return (
      <Collapse items={items} accordion defaultActiveKey="1" />
    )
}

export default App

Borderless

Collapse without borders.

</>

Panel 1

Content without borders for a cleaner look.

Panel 2

Great for FAQ sections or sidebars.

import { Collapse } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'Panel 1',
      children: 'Content without borders for a cleaner look.',
    },
    {
      key: '2',
      label: 'Panel 2',
      children: 'Great for FAQ sections or sidebars.',
    },
  ]
  
  return (
      <Collapse items={items} bordered={false} />
    )
}

export default App

Nested Content

Collapse with rich nested content.

</>

Getting Started

Follow these steps to get started:

1. Install the package
2. Import components
3. Start building

Read Docs

Advanced Usage

Learn about advanced patterns and customization options.

import { Collapse, Button, Space } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'Getting Started',
      children: (
        <Space direction="vertical" size="sm">
          <p>Follow these steps to get started:</p>
          <ol className="list-decimal list-inside">
            <li>Install the package</li>
            <li>Import components</li>
            <li>Start building</li>
          </ol>
          <Button color="primary" size="sm">Read Docs</Button>
        </Space>
      ),
    },
    {
      key: '2',
      label: 'Advanced Usage',
      children: 'Learn about advanced patterns and customization options.',
    },
  ]
  
  return (
      <Collapse items={items} />
    )
}

export default App

Ghost Mode

Transparent background for minimal appearance.

</>

Transparent Background

Ghost mode removes the background color.

Clean Look

Great for minimalist designs.

import { Collapse } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'Transparent Background',
      children: 'Ghost mode removes the background color.',
    },
    {
      key: '2',
      label: 'Clean Look',
      children: 'Great for minimalist designs.',
    },
  ]
  
  return (
      <Collapse items={items} ghost bordered={false} />
    )
}

export default App

Plus/Minus Icon

Use plus/minus icons instead of arrows.

</>

Plus/Minus Icon

This panel uses plus/minus icons instead of arrows.

Another Panel

Click the plus icon to expand.

import { Collapse } from 'asterui'

function App() {
  const items = [
    {
      key: '1',
      label: 'Plus/Minus Icon',
      children: 'This panel uses plus/minus icons instead of arrows.',
    },
    {
      key: '2',
      label: 'Another Panel',
      children: 'Click the plus icon to expand.',
    },
  ]
  
  return (
      <Collapse items={items} icon="plus" />
    )
}

export default App

API

Collapse

Property	Description	Type	Default
items	Collapse panel items	CollapseItemType[]	-
activeKey	Controlled active panel keys	string | number | (string | number)[]	-
defaultActiveKey	Initial active panel keys	string | number | (string | number)[]	-
accordion	Only one panel open at a time	boolean	false
bordered	Show border around panels	boolean	true
ghost	Transparent background style	boolean	false
size	Size variant	'sm' | 'md' | 'lg'	'md'
icon	Icon type for expand indicator	'arrow' | 'plus' | 'none'	'arrow'
expandIconPlacement	Icon placement	'start' | 'end'	'start'
onChange	Change handler	(activeKey: (string | number)[]) => void	-
data-testid	Test ID for the component	string	'collapse'
className	Additional CSS classes	string	-

CollapseItemType

Property	Description	Type	Default
key	Unique identifier for the panel	string | number	-
label	Panel header content	React.ReactNode	-
children	Panel body content	React.ReactNode	-
extra	Extra element in the header corner	React.ReactNode	-
showArrow	Whether to show the expand icon	boolean	true
collapsible	Collapsible mode	'header' | 'icon' | 'disabled'	-
className	Custom class name for this panel	string	-

Accessibility

• Panel headers are keyboard accessible with Enter and Space
• Uses aria-expanded to indicate panel state
• Uses aria-disabled for disabled panels
• Panels expose data-state for testing and styling