StepCard

A card for one step of a multi-step setup. It carries its state permanently — a finished step stays finished and is still visible when you come back to the screen.

When to use it

A setup that is not done through one long form but in steps. Individual steps get finished on different days by different people, so each one needs its own frame and its own state.
A step whose content is a list or a nested table of what it produced — countries and currencies, attribute groups. That listing is what belongs in the card body, not form fields stacked one below the other.
An overview where it must be obvious at a glance what is already done. A finished step has a green header and a check mark instead of the number, so the state reads from a distance.
A step that keeps gathering more items over time. That is what the footer is for — a single “Add…” action below the card content.
A setup with many steps, where the finished ones would push the unfinished one below the fold. collapsible leaves a finished step as just its header, so the overview stays an overview.

When not to use it

A step that gets confirmed with a button. A step is done when it has what it needs — a “Done” button in the footer would introduce a second state unrelated to the card's content.
A wizard that shows one screen at a time and discards the previous step. This card is built on all the steps staying visible side by side.
Plain grouping of content with no ordering and no state. A numbered header and a check mark promise progress that does not actually exist there.
Highlighting an error or a warning. The card knows a single state — done or not; red and amber messages belong inside the content.

Properties

step: string — The step number, two digits (“02”). A finished step replaces it with a check mark.
kicker: string — The line above the title — mono uppercase, typically “Step 02”.
title: ReactNode — The step title. What the step configures, not what the user should do.
meta: ReactNode — A summary after the title — item count, unit (“2 / 2 active”). On a collapsible card it is the only thing a collapsed step leaves behind.
done: boolean — A finished step. Recolors the header and swaps the number for a check mark.
doneLabel: string — A translated status label for screen readers (“Done”). Without it the check mark is silent.
collapsible: boolean — Adds a collapse button to the header. Finished steps collapse on their own — including one that gets finished while you watch.
toggleLabel: string — A translated label for the collapse button (“Collapse step”). Without it the button is nameless to a screen reader.
children: ReactNode — The card body — typically a nested table or a list of what the step contains.
footer: ReactNode — A footer for adding another item, not for confirming the step.
testId: string — A test hook on the card root.