Expandable card

Give a dense card more room when requested.

npx shadcn@latest add @silicon-ui/expandable-card
disclosurelayout
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/expandable-card

Manually

  1. Install the dependencies.

    npm install lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/expandable-card/expandable-card.tsx
    • components/silicon-ui/expandable-card/expandable-card.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { ExpandableCard } from "@/components/silicon-ui/expandable-card/expandable-card";

API reference

PropTypeDefault
title*string—
children*ReactNode—
descriptionstring—
defaultExpandedbooleanfalse
width

Collapsed width cap in px. The card is centered and never wider than its container. Fills the container when omitted.

number—
expandedWidth

Expanded width cap in px, so the card can grow sideways into more room. Defaults to `width`.

number—

Also accepts the props of ComponentPropsWithoutRef<"article">, except title, children, onAnimationStart, onAnimationEnd, onAnimationIteration, onDrag, onDragStart, onDragEnd, onDragOver, onDragLeave, onDragEnter, onDragExit, onDrop.

Dependencies

npm
lucide-reactmotion
Registry
silicon-motion-tokens