Carregando…Carregando…Carregando…Carregando…Multiple accordion panels with single or multi-open mode and intent variants.
$ npx kikitocn add accordion-groupimport { AccordionGroup } from "@/components/ui/cn/accordion-group/AccordionGroup";
export function AccordionGroupExample() {
return (
<AccordionGroup type="single" variant="default" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
items* | AccordionGroupItem[] | — | Painéis { id, trigger, content, disabled? } |
type | 'single' | 'multi' | 'single' | Quantos painéis podem abrir simultaneamente |
variant | 'default' | 'card' | 'flush' | 'default' | Estilo visual |
defaultOpen | string | string[] | — | IDs abertos por padrão |
value | string | string[] | — | IDs abertos (controlado) |
onChange | (value: string | string[]) => void | — | Callback ao abrir/fechar |
className | string | — | Classes CSS extras |
style | CSSProperties | — | Estilos inline pro container |
Single open (accordion)
Multiple open
A Tailwind v4 component library with semantic token aliases and zero CSS Modules.
Copy components to your ui/ directory, add the token bridge to globals.css, import cn() from @/lib/utils.
Default · card · flush