All components
Card
Every hand-drawn card composition and size.
Sizes
Default size
Comfortable spacing for most content.

Sketchy borders drawn at the default scale.

Small size
Tighter spacing for dense layouts.

Sketchy borders drawn at the small scale.

With action
Sketch #12
Last edited a moment ago.

An action sits beside the header content.

With footer
Publish sketch
Share it with the rest of the team.

A footer anchors actions to the bottom of the card.

Paper texturesPatterns from Hero Patterns
Paper
Flecked, handmade paper grain.
Polka dots
Bullet-journal dot paper.
Hexagons
Honeycomb hexagon grid.
Graph
Engineering graph paper.
Plus
Scattered plus-sign paper.
Filled dots
Fine speckled dot paper.
Installation
Add Card with the shadcn CLI.
npx shadcn@latest add https://sketchcn.chuwii.com/r/card.json
Examples
Whole layouts built out of the card slots.
Sign-in card
Welcome back
Sign in to keep sketching.
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";

export function SignInCard() {
  return (
    <Card variant="graph" className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Welcome back</CardTitle>
        <CardDescription>Sign in to keep sketching.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <Input type="email" placeholder="[email protected]" />
        <Input type="password" placeholder="Password" />
      </CardContent>
      <CardFooter>
        <Button className="w-full">Sign in</Button>
      </CardFooter>
    </Card>
  );
}
Settings card
Notifications
Choose what lands in your inbox.
Weekly digests only, never more than one per week.
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Switch } from "@/components/ui/switch";

export function NotificationsCard() {
  const id = useId();

  return (
    <Card size="sm" className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Notifications</CardTitle>
        <CardDescription>Choose what lands in your inbox.</CardDescription>
        <CardAction>
          <Switch id={id} defaultChecked aria-label="Notifications" />
        </CardAction>
      </CardHeader>
      <CardContent className="text-muted-foreground text-sm">
        Weekly digests only, never more than one per week.
      </CardContent>
    </Card>
  );
}
Card as a link
Button
A hand-drawn Base UI button.
import { Link } from "@tanstack/react-router";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export function ComponentLinkCard() {
  return (
    <Link to="/components/$name" params={{ name: "button" }}>
      <Card className="h-full transition-transform hover:-translate-y-1">
        <CardHeader>
          <CardTitle className="flex items-center justify-between gap-2">
            Button
            <ArrowRight className="size-4" />
          </CardTitle>
          <CardDescription>A hand-drawn Base UI button.</CardDescription>
        </CardHeader>
      </Card>
    </Link>
  );
}