What makes it Swirski?+
Thick borders, punchy color, loud type and plain HTML behavior.
Can I customize it?+
Every piece accepts className and native element props.
Controls
Disclosure
Accordion
A disclosure component built on details and summary, with no client JavaScript required.
Component
09
Import
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@swirski/ui";Composition
Accordion
`-- AccordionItem
|-- AccordionTrigger
`-- AccordionContentPlayground
Usage
<Accordion>
<AccordionItem open>
<AccordionTrigger>What makes it Swirski?</AccordionTrigger>
<AccordionContent>
Thick borders, punchy color, loud type and plain HTML behavior.
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionTrigger>Can I customize it?</AccordionTrigger>
<AccordionContent>
Every piece accepts className and native element props.
</AccordionContent>
</AccordionItem>
</Accordion>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
Accordion.asChild | boolean | false | Generated from AccordionProps. |
Accordion.size | 'sm' | 'md' | 'lg' | "md" | Generated from AccordionProps. |
Accordion.tone | 'default' | "default" | Generated from AccordionProps. |
Accordion.variant | 'default' | 'compact' | "default" | Generated from AccordionProps. |
AccordionItem.size | 'sm' | 'md' | 'lg' | "md" | Generated from AccordionItemProps. |
AccordionItem.tone | 'default' | "default" | Generated from AccordionItemProps. |
AccordionItem.variant | 'default' | 'compact' | "default" | Generated from AccordionItemProps. |
AccordionTrigger.children | ReactNode | - | Summary label for the disclosure item. |
AccordionTrigger.size | 'sm' | 'md' | 'lg' | "md" | Generated from AccordionTriggerProps. |
AccordionTrigger.tone | 'default' | "default" | Generated from AccordionTriggerProps. |
AccordionTrigger.variant | 'default' | 'compact' | "default" | Generated from AccordionTriggerProps. |
AccordionContent.size | 'sm' | 'md' | 'lg' | "md" | Generated from AccordionContentProps. |
AccordionContent.tone | 'default' | "default" | Generated from AccordionContentProps. |
AccordionContent.variant | 'default' | 'compact' | "default" | Generated from AccordionContentProps. |
Accordion.className | string | - | Adds classes to the accordion wrapper. |
AccordionItem.open | boolean | false | Uses the native details open state. |
AccordionItem.className | string | - | Adds classes to the details element. |
AccordionTrigger.className | string | - | Adds classes to the summary element. |
AccordionContent.className | string | - | Adds classes to the content panel. |
...detailsProps | DetailsHTMLAttributes<HTMLDetailsElement> | - | Forwarded to each accordion item. |