badge

labels with unicode block character backgrounds

installation

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

usage

import Badge from "@/registry/ascii/badge";

<Badge>default</Badge>
<Badge variant="primary">primary</Badge>

examples

design details

badge uses unicode block characters as texture backgrounds:

• ▸░ light shade (default, secondary, outline)
• ▸▒ medium shade (destructive)
• ▸▓ dark shade (primary)
• ▸· dot pattern (outline)

pattern repeats 200x at reduced opacity with content layered on top

character set

props