Card

Installation

pnpm dlx saastro add card

cd apps/ui
REGISTRY_URL=http://localhost:3456/r node ../../packages/saastro/dist/index.js add card --yes

pnpm add tailwind-variants

Usage

---
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui-saastro/card"
---

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

Examples

Basic

<Card>
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Your notifications will appear here.</p>
  </CardContent>
</Card>

With Action

Use CardAction to add an action button in the header.

---
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardAction,
  CardContent,
} from "@/components/ui-saastro/card"
import { Button } from "@/components/ui-saastro/button"
---

<Card>
  <CardHeader>
    <CardTitle>Team Members</CardTitle>
    <CardDescription>Manage your team members.</CardDescription>
    <CardAction>
      <Button variant="outline" size="sm">Add Member</Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <p>Team member list...</p>
  </CardContent>
</Card>

With Footer

<Card>
  <CardHeader>
    <CardTitle>Account</CardTitle>
    <CardDescription>Make changes to your account here.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Account settings form...</p>
  </CardContent>
  <CardFooter class="flex justify-between">
    <Button variant="outline">Cancel</Button>
    <Button>Save</Button>
  </CardFooter>
</Card>

With Border Separator

Add border-b to header or border-t to footer for visual separation.

<Card>
  <CardHeader class="border-b">
    <CardTitle>Settings</CardTitle>
  </CardHeader>
  <CardContent>
    <p>Settings content...</p>
  </CardContent>
  <CardFooter class="border-t">
    <Button>Save Changes</Button>
  </CardFooter>
</Card>

Components

Card

The main container with background, border, and shadow.

CardHeader

Container for the title, description, and optional action.

CardTitle

The main heading of the card.

CardDescription

Secondary text providing additional context.

CardAction

Optional action element positioned in the header (top-right).

CardContent

Main content area of the card.

CardFooter

Footer area, typically for actions or metadata.

Props

All components accept standard HTML attributes plus:

Accessibility

• Use semantic heading levels in CardTitle when appropriate
• Ensure sufficient color contrast for text content
• Consider using <article> element for standalone cards