Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Tab-Style Accordion with Left Chevron for React

Security questions as separate rounded cards, with the chevron before the title. Single sign-on starts open.

Four security questions, each a rounded card. The chevron sits before the title, and Do you support single sign-on? starts open.

Use it when the toggle should lead and each topic is its own card. A single security note can be an Alert. In React, Base UI does not remember which card was open.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Accordion anatomy: root, item, item trigger, item content, item indicator

Usage

<Accordion
  className="flex w-full max-w-md flex-col gap-2"
  defaultValue={["sso"]}
>
  {items.map((item) => (
    <AccordionItem
      className="overflow-hidden rounded-lg border bg-background"
      key={item.value}
      value={item.value}
    >
      <AccordionTrigger className="flex-row-reverse gap-3 px-4 py-3 hover:no-underline">
        <span className="flex-1 text-start">{item.title}</span>
      </AccordionTrigger>
      <AccordionContent className="px-4 ps-11 pb-4">
        <p className="text-muted-foreground">{item.content}</p>
      </AccordionContent>
    </AccordionItem>
  ))}
</Accordion>

FAQ

How are the sections separated?

Accordion is flex flex-col gap-2. Each AccordionItem has its own rounded-lg border, with no horizontal padding on the item.

How does the chevron move to the start of the card?

flex-row-reverse on AccordionTrigger places the built-in chevron before the title, with gap-3 between them. The trigger sets px-4 py-3 and hover:no-underline, and the title is flex-1 text-start.

Why does the answer use ps-11?

ps-11 lines the answer up under the title: the trigger padding, the chevron, and gap-3. The content also sets px-4 and pb-4.

Why does the single sign-on question start open?

defaultValue={["sso"]} opens the single sign-on question on first render. The string matches that item's value.

How do I let several items stay open at once?

One open item is the default. Add multiple to Accordion to let several stay open, and list every item that should start open in the defaultValue array.

Is keyboard navigation built in?

Yes. Each trigger is a button with aria-expanded and aria-controls, and Enter or Space toggles it. The arrow keys move between triggers, and Home and End jump to the first and last.

API Reference

Accordion

Sets defaultValue={["sso"]} and value={item.value}. The rest is on the Accordion page.

All 21 accordion examples