Collapsible Card

1
2
3import type { ReactNode } from 'react';

import {

Installation#

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/collapsible-card.json

Usage#

import {
  CollapsibleCard,
  CollapsibleCardActions,
  CollapsibleCardContent,
  CollapsibleCardHeader,
  CollapsibleCardTitle,
  CollapsibleCardTrigger,
} from '@/components/layout/collapsible-card';

<CollapsibleCard>
  <CollapsibleCardHeader>
    <CollapsibleCardTitle>Layers</CollapsibleCardTitle>
    <CollapsibleCardActions>
      <CollapsibleCardTrigger />
    </CollapsibleCardActions>
  </CollapsibleCardHeader>
  <CollapsibleCardContent className="p-3">Background, shadow, text</CollapsibleCardContent>
</CollapsibleCard>

Use it for a card whose body the reader can hide, such as a code block's wrapper or a preview pane.

Composition#

CollapsibleCard
|-- CollapsibleCardHeader
|   |-- CollapsibleCardTitle
|   `-- CollapsibleCardActions
|       `-- CollapsibleCardTrigger
`-- CollapsibleCardContent

Variants#

1
2
3import type { ReactNode } from 'react';

import {

API reference#

CollapsibleCard#

Renders shadcn's Collapsible and takes every prop it takes, plus:

variant picks the surface, stamped on the root as data-variant: default the card surface, muted a borderless fill for a block nested in another card, plain no surface and a rule underneath for a titled group of rows in a panel, flush no surface at all for a block filling a surface its container draws. default and muted rule the body off from the header, on the body, so the header keeps its height as the card opens and closes. It opens by default (defaultOpen defaults to true, rather than Collapsible's own false). It sets data-slot="collapsible-card" and data-variant to its variant.

CollapsibleCardHeader#

Renders a div and takes every prop a div takes. The row above the body: a title, and the actions pushed to the far end when there are any. It sets data-slot="collapsible-card-header".

CollapsibleCardTitle#

Renders a div and takes every prop a div takes. The header's muted title; a direct svg child is sized as its leading icon. It sets data-slot="collapsible-card-title".

CollapsibleCardActions#

Renders a div and takes every prop a div takes. The header's trailing controls, such as a copy button and the CollapsibleCardTrigger. It sets data-slot="collapsible-card-actions".

CollapsibleCardTrigger#

Renders shadcn's CollapsibleTrigger, as a ghost, icon-sized Button, and takes every prop it takes. The button that opens and closes the body. Its default content is a chevron that turns over while the body is open and plays while the button is hovered or focused, and it is then named "Toggle content" unless an aria-label is given; children replace the chevron and name the button. It sets data-slot="collapsible-card-trigger".

CollapsibleCardContent#

Renders shadcn's CollapsibleContent and takes every prop it takes. The body that the trigger opens and closes; unmounted while closed. It pads nothing: a text body takes p-3, the small card's spacing, and a CodeBlockContent pads its own code. It sets data-slot="collapsible-card-content".

collapsibleCardVariants#

The variant variant: default (the default) adds the card ring and surface, muted a borderless muted fill, plain a bottom border only, flush no surface classes at all.