Accordion

Components/Overlay and disclosure

ImplementationHTML/CSS/JSArk/ZagReact · shadcn/Base UIAngular

Organizes related content into sections that can be expanded or collapsed.

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Functional preview

Running with the React source recipe distributed through shadcn and based on Base UI.

Loading functional preview…

Open the React · shadcn/Base UI playground

Anatomy

Configurações avançadas

Conteúdo expandido do painel.

1 2 3 4 5 6

1 .ds-accordion — group of related items.
2 .ds-accordion__item — visual container for each section.
3 .ds-accordion__trigger — button that toggles aria-expanded.
4 .ds-accordion__leading-icon — optional Lucide icon.
5 .ds-accordion__chevron — visual indicator for open/closed state.
6 .ds-accordion__panel — content slot associated with the trigger.

Default

Use a button for the trigger. The documentation helper synchronizes aria-expanded, hidden, and data-state; in product, keep the same contract.

Billing details

Invoices are generated on the first business day of each month and sent to account owners.

Security settings

Custom content

The panel is a slot. Compose complex content with public DS components instead of isolated internal classes.

Plano atual

Team Pro

Até 25 usuários, billing mensal e permissões avançadas.

Alterar plano

Disabled

Configuração bloqueada

Figma API

The live component set exposes Title, not Label. Use the public Figma property name for handoff and documentation; the CSS class remains .ds-accordion__title.

Property	Type	Repo equivalent
Title	TEXT	.ds-accordion__title
Content	TEXT	.ds-accordion__panel com texto simples
Content Slot	SLOT	Custom content inside .ds-accordion__panel.
Show Leading Icon	BOOLEAN	Render or omit .ds-accordion__leading-icon.
Leading Icon	INSTANCE_SWAP	Lucide icon with data-lucide.
State	VARIANT	Default, Hover, Focus, Disabled
Open	VARIANT	aria-expanded, hidden e data-state

Token mapping

Parte	CSS	Token atual
Item	.ds-accordion__item	component.accordion.item.{radius,border-width,bg,border-color}
Trigger	.ds-accordion__trigger	component.accordion.trigger.{height,padding,gap}
Title	.ds-accordion__title	component.accordion.trigger.content.color + typography body/md bold
Content	.ds-accordion__panel	component.accordion.content.{color,padding,gap}
Chevron	.ds-accordion__chevron	component.accordion.chevron.{size,color,stroke-width}
Leading icon	.ds-accordion__leading-icon	component.accordion.leading-icon.{size,color,stroke-width}
Focus ring	.ds-accordion__trigger:focus-visible	component.accordion.focus-ring.radius.default + component.focus-ring.*

Usage

When to use

Use Accordion when

Users need to compare or explore related sections, such as FAQs, grouped settings, progressive details, or secondary content that does not need to be fully visible at once.

Don't use Accordion when

Navigation switches primary views (use Tabs), the content is a command menu (use Menu/Action Menu), or the information must stay visible for decision making.

Best practices

Entrega

Endereço e janela de recebimento.

Pagamento

Faça

Group related content in collapsible sections with concise titles.

Visão geral

Informação essencial para decisão.

Não faça

Don't hide critical information in a closed accordion by default.

Related

Tabs Menu Card

React composition

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

<Accordion defaultValue={["billing"]}>
  <AccordionItem value="billing">
    <AccordionTrigger>Faturamento</AccordionTrigger>
    <AccordionContent>Gerencie os dados de cobrança.</AccordionContent>
  </AccordionItem>
</Accordion>

Implementation

Status

Beta

Distribution

Source via shadcn

Installation

Configure the namespace once in the React integration guide.

npm

npx shadcn@latest add @tis/accordion

pnpm

pnpm dlx shadcn@latest add @tis/accordion

yarn

yarn dlx shadcn@latest add @tis/accordion

bun

bunx --bun shadcn@latest add @tis/accordion

Public contract

Registry item

@tis/accordion

Provider

Base UI

Distribution

Source copied into the application

Status

Beta

Technical architecture

Open registry JSON

Inspect distributed source

Accessibility

Keyboard interaction

Key	Action
Tab	Moves focus between Accordion triggers and controls inside open panels.
Enter / Space	Toggles the panel associated with the focused trigger.
Arrow Up / Arrow Down	Moves focus between group triggers.
Home / End	Moves focus to the first or last trigger in the group.

Accessibility

Rule	Application
button	The trigger must be a real button, not a clickable div.
aria-expanded	Reflects the open/closed state on the trigger.
aria-controls	Points to the controlled panel id.
role="region"	Use on panels with enough content to merit a landmark, always with aria-labelledby.
hidden	Removes closed panels from the accessibility tree.
disabled	Removes unavailable triggers from interaction and the tab order.

Output responsibility

Preserve Base UI semantics and test real content, focus visibility, and accessible names in the consuming application.

Validation evidence

Covered by its independent Storybook output plus browser, responsive, keyboard, Axe, and bundle checks.

Open the stable reference