Accordion
Collapsible content panels for organizing and presenting information in a compact, progressive disclosure pattern. Supports squishy animations and configurable count badges.
Basic Usage
Gloss UI is a comprehensive design system and component library built for React applications. It provides a consistent, accessible, and beautiful set of UI components.
You can install Gloss UI using npm or yarn. Run
npm install @so.boss/gloss-ui to get started.Yes! All components are built with accessibility in mind, following WAI-ARIA guidelines and supporting keyboard navigation.
<Accordion>
<AccordionItem open>
<AccordionTrigger>What is Gloss UI?</AccordionTrigger>
<AccordionContent>
<div style={{ padding: 'var(--space-4)' }}>
Content goes here...
</div>
</AccordionContent>
</AccordionItem>
</Accordion>With Icons
Add icons inside accordion trigger children for better visual hierarchy.
Configure your application settings here.
Manage your profile information.
Set your notification preferences.
Multiple Items
Stack multiple accordion items for FAQ-style content sections.
Content for section 1
Content for section 2
Content for section 3
Controlled Mode
Use open and onOpenChange props for controlled state management.
This accordion is controlled externally. Use the button above to toggle it.
const [open, setOpen] = useState(false);
<AccordionItem
open={open}
onOpenChange={setOpen}
>
<AccordionTrigger>Controlled Section</AccordionTrigger>
<AccordionContent>Content here</AccordionContent>
</AccordionItem>Disabled State
This section can be toggled.
This section content.
Best Practices
Do
Use clear, descriptive trigger labels
Group related content together
Use defaultOpen for important sections
Add icons for better visual hierarchy
Don't
Nest too many levels of accordions
Hide critical information in collapsed sections
Use overly long trigger labels
Disable sections without clear indication why