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.
Variants
StyleX extracts every rule to a static CSS file at build time — no runtime style injection.
StyleX extracts every rule to a static CSS file at build time — no runtime style injection.
StyleX extracts every rule to a static CSS file at build time — no runtime style injection.
Sizes
StyleX extracts every rule to a static CSS file at build time — no runtime style injection.
StyleX extracts every rule to a static CSS file at build time — no runtime style injection.
StyleX extracts every rule to a static CSS file at build time — no runtime style injection.
Install
zsh — accordion
1bunx stylexblocks add accordionUsage — Base UI
accordion.tsx
1234567891011121314151617181920212223242526import { Accordion } from "#components/ui/base-ui/accordion.tsx";
export function Example() { return ( // size/variant resolve once on Root; every part inherits them via // context. Item captures the engine's open state through the render // prop, so the indicator rotates without extra wiring. <Accordion.Root defaultValue={["compile"]} variant="outline" size="md"> <Accordion.Item value="compile"> <Accordion.Header> <Accordion.Trigger> How are styles compiled? <Accordion.ItemIndicator> <ChevronIcon /> </Accordion.ItemIndicator> </Accordion.Trigger> </Accordion.Header> <Accordion.Panel> <Accordion.ItemBody> StyleX extracts every rule to static CSS at build time. </Accordion.ItemBody> </Accordion.Panel> </Accordion.Item> </Accordion.Root> );}