Accordion

Stacked sections in one frame. A panel unfolds from its header's bottom keyline while the header stays still, and the caret turns. Headers are headings, Tab moves between them, and find-in-page opens a closed panel that holds the match.

Loading the live example…

"use client"

import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "@/components/keyline/ui/accordion"

const POLICIES = [
  {
    value: "returns",
    title: "Returns",
    meta: "30 days",
    body: "Unopened cases come back within 30 days for a full refund. Darryl collects them on the next delivery run, so nobody needs to drive to the warehouse.",
  },
  {
    value: "delivery",
    title: "Delivery",
    meta: "Free over 20 cases",
    body: "Orders of 20 cases or more are delivered free anywhere in Lackawanna County. Smaller orders pay a flat $25, or the client can pick them up at the loading dock.",
  },
  {
    value: "discounts",
    title: "Volume discounts",
    meta: "Up to 12%",
    body: "Reps can take up to 8% off an order of 100 cases without asking. Anything past that, up to 12%, needs Michael's signature, which he'll give if you ask nicely.",
  },
]

export function BranchPolicies() {
  return (
    <Accordion multiple defaultValue={["returns"]}>
      {POLICIES.map((p) => (
        <AccordionItem key={p.value} value={p.value}>
          <AccordionTrigger meta={p.meta}>{p.title}</AccordionTrigger>
          <AccordionPanel>
            <p className="m-0 max-w-[60ch] text-[14px] leading-6">{p.body}</p>
          </AccordionPanel>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

Installation

npx shadcn@latest add @keyline-ui/accordion

Run it where your components.json is. The first time, map the @keyline-ui registry: one command, in Installation.

Usage

import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "@/components/keyline/ui/accordion"

<Accordion multiple defaultValue={["returns"]}>
  <AccordionItem value="returns">
    <AccordionTrigger meta="30 days">Returns</AccordionTrigger>
    <AccordionPanel>…</AccordionPanel>
  </AccordionItem>
</Accordion>

Props

Prop	Type	Default	Description
`multiple`	`boolean`	`false`	On `Accordion`: let several panels stay open.
`value · defaultValue`	`string[]`	`—`	The open items, controlled with `onValueChange`.
`layout`	`"control" \| "cell"`	`"control"`	`cell` puts the rows straight into an enclosing frame.
`meta · description`	`ReactNode`	`—`	On `AccordionTrigger`: text before the caret, and a line under the title.
`level`	`2 – 6`	`3`	On `AccordionTrigger`: the header's heading level.
`flush`	`boolean`	`false`	On `AccordionPanel`: no inset, for content with its own cells.

Built on Base UI Accordion. For one disclosure on its own, use Collapsible.