An accordion component that allows users to expand and collapse content sections.
Loading demo: accordion-real-world
npx sdaia-ui@latest add accordion
import { Accordion } from "@/components/ui/accordion"1<Accordion2variant="light"3defaultExpanded4label={isRtl ? 'ما هي الهيئة السعودية للبيانات والذكاء الاصطناعي؟' : 'What is SDAIA?'}5>6{isRtl ? 'تأسست الهيئة السعودية للبيانات والذكاء الاصطناعي (سدايا) لقيادة مبادرات البيانات والذكاء الاصطناعي في المملكة دعمًا لرؤية 2030.' : 'The Saudi Data and Artificial Intelligence Authority (SDAIA) was established to drive data and AI initiatives across the Kingdom in support of Vision 2030.'}7</Accordion>
The default Light accordion style.
Loading demo: accordion-default
Use `style="Block"` for strong visual separation between panels.
Loading demo: accordion-block
Use `size="Large"` for spacious layouts and primary navigation.
Loading demo: accordion-large
Use `size="Medium"` for the default density. This is the default.
Loading demo: accordion-medium
Use `size="Small"` for compact panels and sidebars.
Loading demo: accordion-small
Use `state="Disabled"` to prevent the panel from expanding.
Loading demo: accordion-disabled
Props for the Accordion component.
Prop | Type | Default | Required |
|---|---|---|---|
direction | 'ltr' | 'rtl' | 'ltr' | optional |
size | 'sm' | 'md' | 'lg' | 'md' | optional |
variant | 'light' | 'light-compact' | 'block' | 'light' | optional |
state | 'default' | 'hovered' | 'pressed' | 'focused' | 'disabled' | - | optional |
iconAlignment | 'trailing' | 'leading' | 'trailing' | optional |
label | ReactNode | 'Accordion title' | optional |
expanded | boolean | - | optional |
defaultExpanded | boolean | false | optional |
disabled | boolean | false | optional |
onExpandedChange | (expanded: boolean) => void | - | optional |
preserveContentSpaceWhenCollapsed | boolean | false | optional |