Shadcn Accordion Single Expand

A basic single-expand accordion. Built with the Accordion component. A free, open source shadcn accordion example you can install with npx shadcn@latest add @reui/c-accordion-1 and edit as your own code.

A basic single-expand accordion

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: The minimal pattern: 3 questions with one answer open at a time and the first open on load

When to use

Help and FAQ sections where each question opens its own answer
Settings, plans, product details and onboarding steps grouped into sections that expand on demand
Lists of people or records that open to show detail, such as team members and roles

When not to use

Several answers that can stay open at the same time: use the Accordion Plus Minus Icons example
One block of extra content shown and hidden by a single trigger: use the Collapsible component
A complete questions section for a landing page, with heading and support prompt: use the FAQ blocks
Switching between views of the same space where exactly one is always shown: use the Tabs component

Agent notes

Replace items with your questions; keep each value unique, since defaultValue opens items by it
The base twin takes multiple and an array defaultValue; the radix twin takes type, and defaultValue is a string only when type is single
A closed AccordionContent ships no text in the server HTML of either twin unless kept mounted, so crawlers without JS never read it

Markdownhttps://reui.io/components/accordion/c-accordion-1.md

MCPget_example("c-accordion-1")

Installnpx shadcn@latest add @reui/c-accordion-1

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Accordion Single Expand

Accordion

About Shadcn Accordion Single Expand

What You Can Build With Shadcn Accordion Single Expand

Composes Accordion, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-accordion-1
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Accordion Examples

Plus Minus Icons Accordion with plus/minus indicators
Bordered Rounded Accordion with borders and rounded corners
In Card Accordion embedded within a Card
Disabled Items Accordion with disabled items and highlighted state
Icons & Badges Advanced accordion with custom icons and badges
In Frame Accordion items integrated within Frame and FramePanel
Nested Nested accordion example with bordered items
User List User list accordion with avatars and role indicators
Rotating Arrow Accordion with rotating arrow indicator
Setup Steps Accordion component for onboarding or setup steps with icons, badges, and QR codes

Related Shadcn Component Categories

Alert
Open-source shadcn alert components for status messages, warning banners, and destructive notices.
Alert Dialog
Open-source shadcn alert dialog components for delete confirmations, destructive actions, and critical decisions.
Aspect Ratio
Open-source shadcn aspect ratio components for responsive media, image galleries, and video previews.
Attachment
Open-source shadcn attachment components for chat composers, upload states, and file previews.
Autocomplete
Open-source shadcn autocomplete components for smart search, typeahead inputs, and suggestion lists.
Avatar
Open-source shadcn avatar components for user profiles, team directories, and comment threads.

Frequently Asked Questions

When should I use Shadcn Accordion Single Expand?

Use it for the minimal pattern: 3 questions with one answer open at a time and the first open on load.

Shadcn Accordion as a whole fits:

Help and FAQ sections where each question opens its own answer
Settings, plans, product details and onboarding steps grouped into sections that expand on demand
Lists of people or records that open to show detail, such as team members and roles

For several answers that can stay open at the same time, use the Accordion Plus Minus Icons example. For one block of extra content shown and hidden by a single trigger, use the Collapsible component. For a complete questions section for a landing page, with heading and support prompt, use the FAQ blocks. For switching between views of the same space where exactly one is always shown, use the Tabs component.

How do I install Shadcn Accordion Single Expand?

Run npx shadcn@latest add @reui/c-accordion-1. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Accordion Single Expand free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Accordion Single Expand use?

It composes Accordion. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.