Pular para o conteúdo
1.6k

Recolhível

Um conjunto de botões e painéis para árvores de arquivos, configurações avançadas e seções “ver mais” — com aquele estilo neobrutalista de bordas e sombras.

"use client"

import * as React from "react"

O collapsible é o irmão de seção única do acordeão: um gatilho, um painel, aberto ou fechado. Construído sobre o componente Base UI Collapsible e estilizado seguindo a receita neobrutalista: bordas grossas, sombras duras e tipografia em negrito.

Use quando:

  • Árvores de arquivos e navegação aninhada — aninhe collapsibles para expandir pastas (veja o exemplo de árvore de arquivos abaixo).
  • Configurações avançadas — mantenha as opções comuns visíveis e dobre o resto atrás de um botão de alternância.
  • Conteúdo “ver mais” — changelogs longos, listas truncadas, detalhes opcionais em páginas densas.

Instalação

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/collapsible.json
npx shadcn@latest add https://neobrutalism.com/r/base/collapsible.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/collapsible.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/collapsible.json

Instale as seguintes dependências:

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Copie e cole o código a seguir no seu projeto.

components/ui/collapsible.tsx
"use client"

import { Collapsible as CollapsiblePrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Collapsible({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}

function CollapsibleTrigger({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
  return (
    <CollapsiblePrimitive.CollapsibleTrigger
      data-slot="collapsible-trigger"
      {...props}
    />
  )
}

function CollapsibleContent({
  className,
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
  return (
    <CollapsiblePrimitive.CollapsibleContent
      data-slot="collapsible-content"
      // Radix publishes the measured height as
      // `--radix-collapsible-content-height`; the collapsible-down/up keyframes
      // interpolate against it for a real slide open/close.
      className={cn(
        "overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up",
        className
      )}
      {...props}
    />
  )
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent }

Atualize os caminhos de importação de acordo com a configuração do seu projeto.

Uso

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects. No attribution
    required.
  </CollapsibleContent>
</Collapsible>

Composição

Use a seguinte composição para construir um Collapsible:

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

Estado controlado

Use as props open e onOpenChange para controlar o estado.

import * as React from "react"
 
export function Example() {
  const [open, setOpen] = React.useState(false)
 
  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <CollapsibleTrigger>Toggle</CollapsibleTrigger>
      <CollapsibleContent>Content</CollapsibleContent>
    </Collapsible>
  )
}

Exemplos

Básico

import { ChevronDownIcon } from "@/registry/icons/__lucide__"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"

Painel de configurações

Use um botão de gatilho para exibir configurações adicionais.

"use client"

import * as React from "react"

Árvore de arquivos

Aninhe vários collapsibles para construir uma árvore de arquivos.

import { ChevronRightIcon, FileIcon, FolderIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

RTL

Para ativar o suporte a RTL no Neobrutalism, consulte o guia de configuração de RTL.

"use client"

import * as React from "react"

Acessibilidade

O collapsible segue o padrão Disclosure do WAI-ARIA: o gatilho é um botão de verdade conectado com aria-expanded e aria-controls, então leitores de tela anunciam se o painel está aberto.

Interações de teclado:

TeclaAção
Tab / Shift + TabMove o foco para o gatilho e para fora dele
Space / EnterAbre ou fecha o painel

Referência da API

Consulte a documentação do Base UI para obter mais informações.