Negocios

Accordion

Componente do shadcn/ui para revelar e recolher conteúdo por item, com suporte a abertura única ou múltipla.

Visão geral

O accordion já foi instalado em src/components/ui e segue a base visual do projeto.

Demo básica

O accordion organiza conteúdo denso em blocos recolhíveis sem quebrar a hierarquia da página.

Import

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

Estrutura base

O componente usa `Accordion` como root, `AccordionItem` para cada item, `AccordionTrigger` para o cabeçalho clicável e `AccordionContent` para o painel.

Variações e estados

O accordion não tem variantes visuais próprias aqui, então a documentação foca em comportamento e estados de uso.

Single + collapsible

Esse é o comportamento mais comum para páginas de suporte, FAQs e documentação.

Multiple + item desabilitado

Use `type="multiple"` quando as seções não competem entre si.

Padrão de implementação

Resumo das classes e snippets mais úteis para usar o componente no projeto.

Root

type="single" | type="multiple"

Define se abre um item por vez ou vários em paralelo.

Trigger

text-sm font-medium py-2.5

O trigger já vem pronto com foco visível, estados e ícone de expansão.

Content

text-sm pb-2.5

O painel usa animação de abertura e fechamento e aceita composição livre de conteúdo.

Accordion básico

<Accordion type="single" collapsible className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>Pergunta</AccordionTrigger>
    <AccordionContent>
      Resposta do item.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Accordion em grid de conteúdo

<section className="rounded-[10px] bg-[#ECECEC] px-[60px] py-[80px]">
  <div className="grid gap-6 xl:grid-cols-2">
    <div className="rounded-[10px] bg-[#FFFFFF] p-[30px]">
      <Accordion type="single" collapsible className="w-full">
        <AccordionItem value="item-1">
          <AccordionTrigger>Detalhes</AccordionTrigger>
          <AccordionContent>Conteúdo do bloco.</AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  </div>
</section>

Props e uso

Os principais pontos de uso da API instalada no projeto.

Props principais

type

"single" | "multiple"

Controla a quantidade de itens que podem ficar abertos ao mesmo tempo.

collapsible

boolean

No modo single, permite fechar o item aberto.

defaultValue

string | string[]

Define quais itens começam abertos.

disabled

boolean

Desabilita um item específico do accordion.

Acessibilidade

O componente já nasce acessível pela base do shadcn/Base UI, com estados de teclado, foco visível e atributos ARIA gerenciados internamente.

Use textos claros no `AccordionTrigger`, preserve a ordem lógica dos itens e evite esconder conteúdo crítico sem contexto.

Para conteúdo muito longo, prefira quebrar o painel em parágrafos ou listas em vez de um bloco único.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter