UI Skillbook
2

Accordion

A stack of related sections that expand and collapse, one at a time or several together.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-accordion and follow the Siteplane Accordion skill it prints for this task.

Paste this into your agent.

Accordion holds peer sections that people open on demand, such as FAQs or groups of settings. Long pages stay short and all headings stay visible.

Install

bashnpx shadcn@4.18.0 add @siteplane/accordion

Import it from @/siteplane/components/accordion. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Collapsible: Pick Collapsible instead for a single show-or-hide section with no siblings.
  • vs Tabs: Pick Tabs instead when the sections are peers people switch between and only one should show.

Rules

  • Turn on multiple to let several sections stay open. In both modes the value is an array of the expanded items.
  • Give each AccordionItem a stable value when you control the open items with value and onValueChange.
  • Keep other interactive controls out of AccordionTrigger; put them in the panel.
  • Tab moves between triggers and Enter or Space toggles them. Arrow keys do not move focus.
  • Skip it when people compare content across sections; closed sections hide that content.

Reference

  • Accordion docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Overlays & disclosure. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-accordion

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Accessible Focus Statesby UI Skillbook

Keep a visible, high-contrast focus indicator on every interactive element, without a generic browser outline or none at all.

Accessibility

Better Accessibilityby jakubkrehel

Review and improve focus states, keyboard support, ARIA, forms, screen readers, hit areas, and motion accessibility.

AccessibilityExternalGitHub stars: 9.2K

Build Primitiveby PrototyperAI

Build foundational UI primitives from scratch with strong ARIA, keyboard, focus, and state handling.

AccessibilityExternalGitHub stars: 7

Link Purposeby AccessLint

Compatibility listing for link-purpose installs from AccessLint's marketplace skill set.

AccessibilityExternalGitHub stars: 114

Back to Siteplane UI