Accordion - EnterUI

Core ComponentsUpdated May 3, 2026

#Default usage

Component states read from FroggDesign variables.

#Usage

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

export function Example() {
  return (
    <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>
  );
}

#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.

Edit this page