Card

Pro

shadcn's card in Candor's theme.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/card

Brings in: utils

Usage

TSX · The example above

"use client"

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

export default function Example() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Add region to customers</CardTitle>
        <CardDescription>Migration 0142 on Acme API Staging</CardDescription>
        <CardAction>
          <Button variant="ghost" size="sm">
            View diff
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent className="text-sm">
        Adds a nullable <code className="font-mono text-xs">region</code> column and backfills 18,240 rows. Tests passed on Staging.
      </CardContent>
      <CardFooter className="gap-2">
        <Button size="sm">Request approval</Button>
        <Button size="sm" variant="outline">
          Discard
        </Button>
      </CardFooter>
    </Card>
  )
}