Stalk UI

Component

Card

Groups related content and actions on a single bordered surface.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/card

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Card.Root>
  <Card.Header>
    <Card.Title>Project settings</Card.Title>
    <Card.Description>Manage how this project is shared with your team.</Card.Description>
  </Card.Header>
  <Card.Content>Cards group related content and actions into one surface.</Card.Content>
</Card.Root>
Theme
<Card.Root>
  <Card.Header>
    <Card.Title>Invite people</Card.Title>
    <Card.Description>Add collaborators to this project.</Card.Description>
  </Card.Header>
  <Card.Content>An invite gives full edit access.</Card.Content>
  <Card.Footer>
    <Button size="sm">Send invite</Button>
    <Button size="sm" variant="outline">
      Cancel
    </Button>
  </Card.Footer>
</Card.Root>
Theme
<Card.Root variant="elevated">
  <Card.Header>
    <Card.Title>Billing</Card.Title>
    <Card.Description>You are on the Pro plan.</Card.Description>
    <Card.Action>
      <Button size="sm" variant="outline">
        Upgrade
      </Button>
    </Card.Action>
  </Card.Header>
  <Card.Content>Your plan renews on the 1st of each month.</Card.Content>
</Card.Root>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`variant``CardVariant`No-Surface treatment. \`outline\` is a bordered surface; \`elevated\` adds a shadow.

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`variant``outline`, `elevated`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/card.json`
  • Recipe: `card`
  • Files: `src/components/ui/card.tsx`