All componentsoutlinesubtleenclosedsmmdlg
Accordion
Vertically stacked disclosure panels with outline, subtle, and enclosed variants.
StyleX extracts every rule to a static CSS file at build time — no runtime style injection.
Apply any palette theme to a subtree and every token-aware style updates automatically.
Semantic tokens use light-dark(), so components adapt without extra code.
Variants
StyleX extracts every rule to a static CSS file at build time — no runtime style injection.
Apply any palette theme to a subtree and every token-aware style updates automatically.
Semantic tokens use light-dark(), so components adapt without extra code.
StyleX extracts every rule to a static CSS file at build time — no runtime style injection.
Apply any palette theme to a subtree and every token-aware style updates automatically.
Semantic tokens use light-dark(), so components adapt without extra code.
StyleX extracts every rule to a static CSS file at build time — no runtime style injection.
Apply any palette theme to a subtree and every token-aware style updates automatically.
Semantic tokens use light-dark(), so components adapt without extra code.
Sizes
StyleX extracts every rule to a static CSS file at build time — no runtime style injection.
Apply any palette theme to a subtree and every token-aware style updates automatically.
Semantic tokens use light-dark(), so components adapt without extra code.
StyleX extracts every rule to a static CSS file at build time — no runtime style injection.
Apply any palette theme to a subtree and every token-aware style updates automatically.
Semantic tokens use light-dark(), so components adapt without extra code.
StyleX extracts every rule to a static CSS file at build time — no runtime style injection.
Apply any palette theme to a subtree and every token-aware style updates automatically.
Semantic tokens use light-dark(), so components adapt without extra code.
Install
zsh — accordion
1bunx stylexblocks add accordionUsage — Ark UI
accordion.tsx
123456789101112131415161718192021222324import { Accordion } from "#components/ui/ark-ui/accordion.tsx";
export function Example() { return ( // size/variant resolve once on Root; every part inherits them via // context. Keyboard navigation and expansion come from the machine; the // indicator rotates off the machine's data-state. <Accordion.Root defaultValue={["compile"]} collapsible variant="outline" size="md"> <Accordion.Item value="compile"> <Accordion.ItemTrigger> How are styles compiled? <Accordion.ItemIndicator> <ChevronIcon /> </Accordion.ItemIndicator> </Accordion.ItemTrigger> <Accordion.ItemContent> <Accordion.ItemBody> StyleX extracts every rule to static CSS at build time. </Accordion.ItemBody> </Accordion.ItemContent> </Accordion.Item> </Accordion.Root> );}