Carregando…Carregando…Carregando…Carregando…Collapsible accordion with single/multiple expansion, 3 variants, icon support and single-panel mode.
$ npx kikitocn add accordion@/lib/utilsimport { Accordion } from "@/components/ui/cn/accordion/Accordion";
export function AccordionExample() {
return (
<Accordion
items={[
{
title: "O que é Kikito CN?",
content: "Uma biblioteca de 196+ componentes React prontos para uso.",
},
{
title: "Precisa de configuração?",
content: "Rode npx kikitocn init e o CLI cuida do resto.",
},
]}
/>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
items* | AccordionItemDef[] | — | Lista de painéis: { value, label, icon?, children, disabled? } |
value | string | string[] | undefined | Painel(is) aberto(s) (controlled) |
defaultValue | string | string[] | undefined | Painel(is) inicial(is) (uncontrolled) |
multiple | boolean | false | Permite múltiplos painéis abertos ao mesmo tempo |
onChange | (value: string | string[]) => void | undefined | Callback quando a seleção muda |
variant | 'default' | 'separated' | 'ghost' | 'default' | Estilo visual do accordion |
default
Copy the component file into your project and import it. No external dependencies required.
separated
Yes — all components use Tailwind CSS with design tokens. Override via className or CSS variables.
ghost
Full TypeScript support with exported prop types for every component.
multiple=true — all panels can be open
Copy the component file into your project and import it. No external dependencies required.
Yes — all components use Tailwind CSS with design tokens. Override via className or CSS variables.