Accordion
Collapsible disclosure panels built on Radix Accordion primitive with ChevronDown 180-degree rotation convention.
// Radix — @radix-ui/react-accordion
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@shavin/ui";Default Accordion (Single Open)
Yes. It adheres to the WAI-ARIA Accordion pattern with keyboard arrow navigation.
<Accordion type="single" collapsible defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>Yes. It adheres to the WAI-ARIA Accordion pattern.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Is it styled with tokens?</AccordionTrigger>
<AccordionContent>Yes. Uses semantic role tokens for surface, hairline, and text colors.</AccordionContent>
</AccordionItem>
</Accordion>Ghost Variant (Ideal for Sidebar Navigation & Sub-menus)
<Accordion type="single" collapsible variant="ghost">
<AccordionItem value="pickers">
<AccordionTrigger>Pickers</AccordionTrigger>
<AccordionContent>
<div className="flex flex-col space-y-1">
<a href="/components/color-picker" className="text-xs text-fg-muted hover:text-fg">Color Picker</a>
<a href="/components/date-picker" className="text-xs text-fg-muted hover:text-fg">Date Picker</a>
</div>
</AccordionContent>
</AccordionItem>
</Accordion>Props Specification
| Prop | Type | Default |
|---|---|---|
| variant | "default" | "outline" | "ghost" | "default" |