Card

AtomThrive, no shadcn equivalent

A floating panel with its title in a divided header.

components/atoms/card.tsx
Use it for
The one panel a step lives in: sign-in, introduce yourself.
Not for
Grouping inside a page that is already a card.

States

Welcome to Thrive

Body content

Default

Usage

import { Card } from '@/components/atoms/card';

<Card title="Welcome to Thrive" className="max-w-110">
  …
</Card>

Props

Card props
PropTypeDefaultDescription
titlestring—The heading. Required.
titleAs'h1' | 'h2''h1'h1 when the card is the page; h2 under a page heading.
...restComponentProps<'section'>—className sets its width.

Accessibility

  • The title is a real heading, so the card shows up in heading navigation.