Accordion
Freev1.0.0The shadcn Accordion with numbered rows, for FAQs and settings sections.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { Accordion } from "@/components/ui/notchset/accordion";
export function AccordionExample() {
return (
<Accordion items={[{ id: "run", title: "What counts as a run?", content: "One request from start to finish." }]} />
);
}Props
Accordion–as the primitivevalue, defaultValue, onValueChange; Base UI multiple, or Radix type and collapsible.
items–{ id, title, content, meta? }[]The whole list in one line.
AccordionContent meta–ReactNodeA mono line under the answer.
Anatomy
- Same parts as shadcn's Accordion.
- Base UI and Radix builds: your components.json picks one.
- The Notchset instrument language: rail, node, settle.
Accordiondata-slot="accordion"The list.
AccordionItemdata-slot="accordion-item"One item.
AccordionTriggerdata-slot="accordion-trigger"The heading button.
AccordionContentdata-slot="accordion-content"The panel.
Source
components/ui/notchset/accordion.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://notchset.dev/r/accordion.jsonRadix
pnpm dlx shadcn@latest add https://notchset.dev/r/radix-nova/accordion.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @notchset registry added, @notchset/<name> picks for you.
Install by hand
- 1. Add the packages
pnpm add @base-ui/react@^1 - 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/accordion.tsx
- lib/beautiful-ui/notchset/accordion.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Questions and answers, settings groups, long explanations people scan
- A drop-in for shadcn's Accordion (same parts and props)
Use something else when
- One section that opens: use Expandable Card or Collapsible
- Navigation between views: use Tabs
Mistakes to avoid
- Keep answers short; a long one belongs on its own page
Agents find it by
- accordion, faq, collapsible list, disclosure, questions and answers, shadcn accordion, Notchset
Where agents read it
- Guide for this component: https://notchset.dev/md/accordion.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://notchset.dev/api/mcp(setup)
Behaviour
Keyboard
- ↑ ↓ / Home / End
- Move between triggers
- Enter / Space
- Open or close
Accessibility
- The Base UI or Radix accordion: buttons in headings, aria-expanded, a region per panel
- Arrow keys, Home and End move between triggers
- The index and node are decorative
Motion
- Open
- The panel opens over 420ms cubic-bezier(.16,1,.3,1) (closes 260ms); the rail traces down 520ms after 80ms and its node blooms; the answer fades and settles 6px
- Node
- The plus's vertical bar folds to a minus over 300ms
- Hover
- The title nudges 3px
Responsive
- Fills its container; long titles wrap under their index.
- Triggers grow to 44px on touch screens.
Performance
- The primitive mounts each panel only while open; the rail and node are CSS transitions.
Changelog
v1.0.0 · 2026-10-02
First release
