Collapsible

Un panneau qui se déplie sous son déclencheur.

BetaWhoa UI est en bêta : certains éléments peuvent encore changer. Un bug ? Écrivez-moi à hello@ugolin-olle.com.

collapsible.tsx

'use client';import { Button } from '@/components/ui/button';import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';export default function Demo() {  return (    <Collapsible className="w-72">      <CollapsibleTrigger render={<Button variant="outline" />}>Toggle details</CollapsibleTrigger>      <CollapsibleContent>        <p className="pt-3 text-sm text-muted-foreground">          Height and opacity transition together, and reversing mid-way retargets smoothly.        </p>      </CollapsibleContent>    </Collapsible>  );}

Animation

Hauteur et opacité transitent ensemble (240 ms en entrée, 180 ms en sortie).

Les jetons et les règles communes sont décrits sur la page Motion.

Installation

Le composant fait partie des primitives shadcn/ui sur Base UI.

bunx --bun shadcn@latest add collapsible

Ou depuis le paquet npm :

import { Collapsible } from '@whoa-studio/ui/collapsible';

Exports : Collapsible, CollapsibleTrigger, CollapsibleContent.