Skip to content

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

Free

Multi-Level Accordion with Icons for Ark UI

Workspace sections with category icons that open to guides, and each guide opens on its own.

Documents, Projects, Workspace settings, and Team members, each led by an icon. Documents starts open and lists guides such as Uploading files. Each guide opens on its own.

Use it for docs grouped by category. If every guide should be one click apart, use Tabs. In React, Ark UI does not open a guide when its section opens.

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="w-full max-w-md -space-y-px"
  defaultValue={["documents"]}
>
  {sections.map((section) => (
    <AccordionItem
      className="overflow-hidden border bg-background first:rounded-t-lg last:rounded-b-lg"
      key={section.value}
      value={section.value}
    >
      <AccordionTrigger className="px-4 py-3 hover:no-underline">
        <span className="flex items-center gap-2">
          <section.icon
            aria-hidden="true"
            className="size-4 shrink-0 text-muted-foreground"
          />
          {section.title}
        </span>
      </AccordionTrigger>
      <AccordionContent className="p-0">
        {section.guides.map((guide) => (
          <Collapsible
            className="border-t bg-accent px-4 py-3"
            key={guide.title}
          >
            <CollapsibleTrigger className="group flex gap-2 text-start font-medium">
              <ChevronDownIcon
                aria-hidden="true"
                className="mt-0.5 size-4 shrink-0 opacity-60 transition-transform duration-200 group-aria-expanded:rotate-180"
              />
              {guide.title}
{/* The rest of the file is under Installation. */}

FAQ

Which icons are on the parent rows?

Documents uses FileTextIcon, Projects uses FolderIcon, Workspace settings uses SettingsIcon, and Team members uses UsersIcon. Each is size-4, text-muted-foreground and aria-hidden, in a gap-2 row on AccordionTrigger.

Do the nested guides get those icons too?

No. Each guide is a Collapsible with a ChevronDownIcon on CollapsibleTrigger. The icon uses group-aria-expanded:rotate-180 and duration-200.

How are the guide rows styled?

AccordionContent is p-0. Each Collapsible has border-t and bg-accent, and CollapsibleContent uses ps-6 with text-sm text-muted-foreground.

Why does Documents start open?

defaultValue={["documents"]} opens Documents on first render. The string matches that item's value.

Do the guides start open?

No. Each Collapsible renders closed until its trigger is pressed. Documents starts open, so Uploading files and Sharing a document show as titles.

How do I let several parent sections 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.

API Reference

Accordion

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

Collapsible

No extra props in this demo. The rest is on the Collapsible page.

All 21 accordion examples