Setup Card

A finish-setting-up card for a sidebar footer: a pastel media header, a circular badge floating on its lower edge, the copy, and a footer with a step-progress ring.

tsx

1import {
2  SetupCard,
3  SetupCardMedia,
4  SetupCardTitle,
5  SetupCardDescription,
6  SetupCardFooter,
7  SetupCardSteps,
8} from "@pestoui/core"

Onboarding progress

The media has no background of its own — pass one of the gradient-* utilities in className. SetupCardSteps draws the ring and the “2 of 4” beside it.

Finish setting up

Connect a channel and publish your first agent.

2 of 4

Small, with a dismiss action

size="sm" tightens the padding and shortens the media. action on the media pins a control to its top-right corner.

Invite your team

Agents work better with reviewers.

3 of 4

Props

Prop	Type	Default	Description
size	"sm" \| "default"	"default"	On SetupCard. Padding, media height and badge size.
badge	ReactNode	—	On SetupCardMedia. A circular mark centred on the seam between the media and the body. Decorative.
action	ReactNode	—	On SetupCardMedia. An overlaid control, pinned to the top-right corner and forced to a pill.
className	string	—	On SetupCardMedia. Where the gradient-* background goes.
current	number	—	On SetupCardSteps. Required. Steps completed; clamped to 0–max by the ring.
max	number	—	On SetupCardSteps. Required. Total number of steps.
srLabel	string	"Setup progress"	On SetupCardSteps. Names the count for assistive tech, read ahead of the visible “2 of 4”.

PreviousSeparator Next Share Panel

Pesto UI · 117 documented components