card

registry:ui

container with ascii borders and unicode pattern backgrounds

installation

npx shadcn@latest add https://asciicn.fldr.zip/r/card.json

usage

import Card, {
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/registry/ascii/card";

<Card>
  <CardHeader>
    <CardTitle>card title</CardTitle>
    <CardDescription>card description</CardDescription>
  </CardHeader>
  <CardContent>
    your content here
  </CardContent>
  <CardFooter>
    footer content
  </CardFooter>
</Card>

examples

basic card

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

card title

a simple card with header and content

this is the main content area of the card. it can contain any kind of content you want to display.

border variants

single border

using single-line box drawing characters

┌─┐│└─┘ characters

double border

using double-line box drawing characters

╔═╗║╚═╝ characters

pattern variants

default pattern

░ light shade

················································································································································································································································································································································································································

dots pattern

· dot characters

▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒

dense pattern

▒ medium shade

with title and footer

system info

os:darwin 25.0.0

shell:/bin/fish

uptime:7 days

press [esc] to close

interactive card

action card

card with interactive elements

this card demonstrates how to include interactive elements like buttons and badges.

newfeatured

design details

card uses ascii box-drawing characters for borders and unicode block patterns for backgrounds:

▸single-line borders: ┌─┐│└─┘├┤┬┴┼
▸double-line borders: ╔═╗║╚═╝╠╣╦╩╬
▸background patterns: ░ (light), · (dots), ▒ (dense)

patterns repeat 400x at 10% opacity behind content with z-index layering

character set

single borders:

┌ ┬ ┐ ├ ┼ ┤ └ ┴ ┘ ─ │

double borders:

╔ ╦ ╗ ╠ ╬ ╣ ╚ ╩ ╝ ═ ║

patterns:

░ ▒ ▓ · ∙

props

prop

type

default

description

variant

string

"single"

border style

title

string

header title

footer

ReactNode

footer content

pattern

string

"default"

background pattern