Menu

I built a shields.io alternative that renders badges as shadcn/ui buttons
📰
0

I built a shields.io alternative that renders badges as shadcn/ui buttons

DEV Community·Justin Levine·about 1 month ago
#x5Bjo8dF
Reading 0:00
15s threshold

README badges have looked the same for a decade. Flat rectangles, basic colors, that shields.io aesthetic. They work, but if you're building a project with shadcn/ui or any modern component library, the badges are always the part that looks out of place. I wanted badges that looked like they belonged in the same design system as everything else. So I built shieldcn . What it does Every badge is a real shadcn/ui Button component rendered to SVG via Satori . Same Inter font, same border-radius, same padding, same color tokens per variant. You get a URL, you put it in your README, it looks like a button. ![ npm ]( https://shieldcn.dev/npm/react.svg ) ![ stars ]( https://shieldcn.dev/github/stars/vercel/next.js.svg ) ![ discord ]( https://shieldcn.dev/discord/1316199667142496307.svg ) Enter fullscreen mode Exit fullscreen mode All the shadcn Button variants work: default, secondary, outline, ghost, destructive. There's also a branded variant that pulls the icon's brand color automatically.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More