Primitives

Accordion

Sections that open in place: a category and its entries, a question and its answer. Each header is a heading with a button in it, and up and down move between headers. A trailing value, such as an Amount, is part of the header's name; actions sit beside the button, outside it, so a click on them does not toggle the section. The panel opens to its height in CSS.

view .md
Preview

  • rent2026-09-26−$1,800.00
  • groceries2026-09-25−$123.80

Installation
terminal
bash
npx @entrepta/cli@latest add accordion

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage
accordion.tsx
tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/entrepta/accordion"

<Accordion type="single" collapsible>
  <AccordionItem value="home">
    <AccordionTrigger
      trailing={<Amount value={-192380} tone="neutral" />}
      actions={<Button variant="ghost" size="icon-sm" aria-label="Edit home">…</Button>}
    >
      home
    </AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
</Accordion>
Props
PropTypeDefaultDescription
type"single" | "multiple"-One open at a time, or several. collapsible lets the open one close
value, defaultValue, onValueChangestring | string[]-Controlled or not
trailingReactNode-On AccordionTrigger: a value on the right
actionsReactNode-On AccordionTrigger: buttons beside it
headingLevel2 | 3 | 43On AccordionTrigger: the header's level in the page
Active theme: entrepta, dark mode.