PrimitiveAvailable

Accordion

Expandable sections with keyboard navigation and independent content panels.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/accordion.json

Usage

Import the component into your project and keep the source code under your control.

tsx
'use client';

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@/components/ui/accordion';

export default function Demo() {
  return (
    <Accordion className="w-full max-w-lg" defaultValue={['install']}>
      <AccordionItem value="install">
        <AccordionTrigger>How do I install a component?</AccordionTrigger>
        <AccordionContent>
          Start the local registry, then copy the installation command from the
          component documentation.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="ownership">
        <AccordionTrigger>Can I customize the source?</AccordionTrigger>
        <AccordionContent>
          Yes. Components are copied into your project so you can change them.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="disabled" disabled>
        <AccordionTrigger>Team settings (unavailable)</AccordionTrigger>
        <AccordionContent>Team settings.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

  • Check rest, hover, focus and selection/expansion. Current links and open content must be identified semantically.
  • Hover is not selection. Keep the active state when the pointer leaves.
  • Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

PropTypeDefaultDescription
string[][]Initially expanded item values.
booleantrueAllows more than one expanded item.

Accessibility

Rules that should remain intact when adapting the component to a product.

Triggers are buttons inside headings. Keep a meaningful heading level and unique item values.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.