Accordion

Accordion defines how EnterUI handles expandable sections for related content, including default structure, accessible states, and token-driven styling.

#Default usage

<Accordion type="single" collapsible defaultValue="tokens">
  <AccordionItem value="tokens">
    <AccordionTrigger>Token-first styling</AccordionTrigger>
    <AccordionContent>Component states read from FroggDesign variables.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="overrides">
    <AccordionTrigger>Override strategy</AccordionTrigger>
    <AccordionContent>Use variables first, then className for local cases.</AccordionContent>
  </AccordionItem>
</Accordion>

#Import

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@froggdesign/enter-ui-react";

#Accessibility

Accordion uses Radix semantics for headers, triggers, content visibility, and keyboard behavior.

#API

• Accordion accepts Radix root props such as type, value, defaultValue, and collapsible.
• AccordionItem requires value.
• Trigger and content support className.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.