Expandable Card
Freev1.0.0A card that opens to a checklist of steps, with progress you can see while it's closed.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import * as React from "react";
import { ExpandableCard, type ExpandableStep } from "@/components/ui/notchset/expandable-card";
export function RolloutChecklist() {
const [steps, setSteps] = React.useState<ExpandableStep[]>([
{ label: "Run planner-core evals", meta: "88.9%", done: true },
{ label: "Canary at 5%", meta: "24H" },
{ label: "Promote to 100%" },
]);
return (
<ExpandableCard
kicker="Migration · Aug 14"
title="Atlas 3 Flash rollout"
steps={steps}
onStepChange={(i, done) => setSteps((s) => s.map((step, k) => (k === i ? { ...step, done } : step)))}
/>
);
}Props
title / kicker–ReactNodeThe header.
steps–{ id?, label, meta?, done? }[]The checklist; id keeps a step's state with it when steps change.
open / defaultOpen / onOpenChange–boolean / (open) => voidThe open state.
onStepChange–(index, done) => voidA step was checked or unchecked. Passing it makes the steps controlled: send steps back with the new done.
labels–{ progress, complete, justNow }The words; {done} and {n} are filled in.
Anatomy
- No primitive needed: one file serves both builds.
- The Notchset instrument parts: node, plate, glyph flip.
- Checking a step lights its node on the track; the header count flips digit by digit.
ExpandableCarddata-slot="expandable-card"The card.
Triggerdata-slot="expandable-card-trigger"The header button.
Source
components/ui/notchset/expandable-card.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://notchset.dev/r/expandable-card.jsonRadix
pnpm dlx shadcn@latest add https://notchset.dev/r/radix-nova/expandable-card.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @notchset registry added, @notchset/<name> picks for you.
Install by hand
- 1. No extra packages: React and Tailwind CSS v4 are enough.
- 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/expandable-card.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- A rollout, onboarding or review checklist that people come back to
Use something else when
- Plain content that opens: use Accordion
Mistakes to avoid
- Control steps by passing new done values; the card keeps the user's checks otherwise
Agents find it by
- expandable card, checklist card, rollout steps, progress checklist, collapsible card, Notchset
Where agents read it
- Guide for this component: https://notchset.dev/md/expandable-card.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://notchset.dev/api/mcp(setup)
Behaviour
Keyboard
- Enter / Space (header)
- Open or close
- Tab
- Through the steps
- Space (step)
- Check or uncheck
Accessibility
- The header is one button with aria-expanded and aria-controls
- Steps are checkboxes (role=checkbox, Space toggles)
- The count is a polite live region
Motion
- Open
- The body unfolds over 460ms; steps stagger in 40ms apart; the key sinks 2px and the chevron turns 180°
- Check
- The node blooms to r 2.4 over 360ms and the track extends over 420ms; the count flips
Responsive
- Fills its container; step labels truncate in their row.
- Rows grow to 44px on touch screens.
Performance
- Checking a step is local state and one CSS transition; the count flips only when it changes.
Changelog
v1.0.0 · 2026-10-02
First release
