Carregando…

Accordion

Display

Collapsible accordion with single/multiple expansion, 3 variants, icon support and single-panel mode.

UnificadosAccordion Group Multi Accordion Collapsible

Accordion Group

Unificado

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for display/accordion-group

Multi Accordion

Unificado

Collapsible

Unificado

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for display/collapsible

Instalação via CLI

$ npx kikitocn add accordion

Interno:

@/lib/utils

Exemplo de uso

AccordionExample.tsx

import { 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.",
        },
      ]}
    />
  );
}

Props

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

Voltar para Display

Carregando…

Variants

default

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.

Full TypeScript support with exported prop types for every component.

Not reachable

separated

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.

Full TypeScript support with exported prop types for every component.

Not reachable

ghost

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.

Full TypeScript support with exported prop types for every component.

Not reachable

Multiple

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.

Full TypeScript support with exported prop types for every component.

import { 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