Accordion

Installation

npx nuecrea-ui add accordion

Usage

import * as Accordion from '@/components/ui/accordion';

const items = [
  {
    value: 'shipping',
    title: 'How long does shipping take?',
    body: 'Orders ship within 2 business days.',
  },
  { value: 'returns', title: 'Can I return an item?', body: 'Yes, within 30 days of delivery.' },
  { value: 'gift', title: 'Do you offer gift wrapping?', body: 'Not yet.', disabled: true },
  { value: 'support', title: 'How do I contact support?', body: 'Email help@example.com.' },
];

export default function AccordionStory() {
  return (
    <main className="grid max-w-md gap-8">
      <Accordion.Root defaultValue={['shipping']}>
        {items.map((item) => (
          <Accordion.Item
            key={item.value}
            value={item.value}
            disabled={item.disabled}
          >
            <Accordion.Header>
              <Accordion.Trigger>{item.title}</Accordion.Trigger>
            </Accordion.Header>
            <Accordion.Panel>{item.body}</Accordion.Panel>
          </Accordion.Item>
        ))}
      </Accordion.Root>

      <Accordion.Root multiple disabled defaultValue={['locked']}>
        <Accordion.Item value="locked">
          <Accordion.Header>
            <Accordion.Trigger>Locked section</Accordion.Trigger>
          </Accordion.Header>
          <Accordion.Panel>Hidden content.</Accordion.Panel>
        </Accordion.Item>
      </Accordion.Root>
    </main>
  );
}

API reference