Section repliable

Une paire « déclencheur-panneau » destinée aux arborescences de fichiers, aux paramètres avancés et aux sections « Afficher plus » — avec un traitement néobrutaliste des bordures et des ombres.

Order #4189

StatusShipped

"use client"

import * as React from "react"

Le collapsible est le frère à section unique de l’accordéon : un déclencheur, un panneau, ouvert ou fermé. Construit sur le composant Base UI Collapsible et habillé du style néobrutaliste : bordures épaisses, ombres marquées et typographie affirmée.

À privilégier pour :

Arborescences de fichiers et navigation imbriquée — imbriquez des collapsibles pour déplier des dossiers (voir l’exemple d’arborescence ci-dessous).
Réglages avancés — gardez les options courantes visibles et repliez le reste derrière une bascule.
Contenu « Afficher plus » — longs changelogs, listes tronquées, détails facultatifs sur les pages denses.

Installation


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

Installez les dépendances suivantes :


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

Copiez et collez le code suivant dans votre projet.

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 }

Adaptez les chemins d’import à la structure de votre projet.

Utilisation

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>

Composition

Utilisez la composition suivante pour construire un Collapsible :

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

État contrôlé

Utilisez les props open et onOpenChange pour contrôler l’état.

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>
  )
}

Exemples

Simple

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

Panneau de réglages

Utilisez un bouton déclencheur pour révéler des réglages supplémentaires.

Radius

Set the corner radius of the element.

"use client"

import * as React from "react"

Arborescence de fichiers

Imbriquez des collapsibles pour construire une arborescence de fichiers.

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

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

RTL

Pour activer le RTL dans Neobrutalism, consultez le guide de configuration RTL.

الطلب #4189

الحالةتم الشحن

"use client"

import * as React from "react"

Accessibilité

Le collapsible suit le modèle WAI-ARIA Disclosure : le déclencheur est un vrai bouton câblé avec aria-expanded et aria-controls, si bien que les lecteurs d’écran annoncent si le panneau est ouvert.

Interactions clavier :

Touche	Action
`Tab` / `Shift + Tab`	Amène le focus sur le déclencheur / l’en éloigne
`Space` / `Enter`	Ouvre ou ferme le panneau

Référence API

Consultez la documentation Base UI pour en savoir plus.