Layout & containers
Card
The surface that holds a self-contained piece of content — a task, a project, a metric, a teammate. Cards compose the smaller primitives in this library into the units a board or dashboard is built from.
npx shadcn@latest add @orbit/cardAnatomy
A shared shell (surface, 1px border, 13px radius, soft shadow) plus composable parts: CardHeader with CardTitle and CardDescription, CardContent, CardFooter with an inset rule, and an optional full-bleed CardMedia banner.
Ship onboarding flow
Audit the current steps, then draft and build the v2 flow with the new empty states.
Compositions
The five arrangements from the spec — task, project, stat, member, and media — built entirely from Card parts plus badges, avatars, buttons, and progress from the library.
Ship onboarding flow
Audit the current steps, then draft and build the v2 flow with the new empty states.
Orbit
Priya Nair
What’s new in Orbit 2.0
A faster board, redesigned task cards, and the new automation rules.
Static & interactive
An interactive card lifts 2px, brightens its border, and deepens its shadow on hover — for cards that are themselves links or open a detail view. Leave it off for purely informational cards.
Orbit
Orbit
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| interactive | boolean | false | Hover lift, brighter border, deeper shadow, pointer cursor, and a focus-visible ring. Only for cards that navigate or open something. |
| padded | boolean | false | 16px padding on the shell for freeform content that doesn't use the parts. |
| …rest | HTMLAttributes<HTMLDivElement> | — | Everything else is forwarded to the root <div>, including ref — pass role, tabIndex, or onClick to make an interactive card operable. |
| Prop | Type | Default | Description |
|---|---|---|---|
| CardHeader | div | — | Leading block — 16px side padding, 15px top, 5px internal gap. Restyle to a row with className. |
| CardTitle | h3 | — | 600 14.5px/1.4 heading so the title leads the card for assistive tech. |
| CardDescription | p | — | 450 13px/1.55 supporting copy in the soft ink ramp. |
| CardContent | div | — | Body slot — tightens toward a preceding header, full 15px top padding when first. |
| CardFooter | div | — | Meta/action row separated by an inset 1px rule; space-between layout. |
| CardMedia | div | — | Full-bleed 104px banner above the content with centered children. |
Usage
Keep one idea per card
A card holds a single task, project, or metric — not a mix of unrelated content.
Nest cards inside cards
Stacked borders and shadows get noisy fast; use a divider or list row instead.
Reserve hover lift for clickable cards
Only set interactive when the whole card navigates — otherwise it implies an action that isn’t there.
Overload the footer with actions
One or two actions max; move the rest into an overflow menu.
Keyboard & accessibility
Wrap a standalone card in <article>. An interactive card should render as (or contain) a real link or button — pass role, tabIndex, and handlers via rest props — and shows the themed 3px focus ring. CardTitle renders a heading so the title leads the card.
Open task details
This whole card is a single button — Enter or Space activates it.