jal-co/shieldcn

# GitHub Repository: jal-co/shieldcn

**URL:** https://github.com/jal-co/shieldcn
**Author:** jal-co
**Description:** Beautiful README badges, inspired by shields.io and styled like shadcn/ui.
**Homepage:** https://shieldcn.dev
**Language:** TypeScript

## Stats
- Stars: 858
- Forks: 38
- Open Issues: 18
- Commits: 199
- Created: 2026-04-22T22:16:53Z
- Updated: 2026-09-05T05:03:08Z
- Pushed: 2026-09-05T05:21:20Z

## README
<p align="center">
  <picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/header/graph.svg?title=shieldcn&amp;subtitle=EVERYTHING+for+your+readme&amp;logo=shieldcn&amp;logoColor=848484&amp;mode=dark&amp;align=left&amp;font=geist-mono&amp;border=false" /><img alt="shieldcn" src="https://shieldcn.dev/header/graph.svg?title=shieldcn&amp;subtitle=EVERYTHING+for+your+readme&amp;logo=shieldcn&amp;logoColor=848484&amp;mode=light&amp;align=left&amp;font=geist-mono&amp;border=false" /></picture>
</p>

<div align="center">

Before anyone reaches your docs, they land on your README, the front door of every open-source project. **shieldcn** makes that first impression count: badges, charts, headers, and sponsor walls, rendered as real [shadcn/ui](https://ui.shadcn.com) components. A [shields.io](https://shields.io) alternative.

<div align="center">

[Homepage](https://shieldcn.dev) · [Docs](https://shieldcn.dev/docs) · [Studio](https://shieldcn.dev/studio) · [𝕏](https://x.com/jalcowastaken)

</div>

</div>

<p align="center">
  <a href="https://github.com/jal-co/shieldcn"><picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/group/github/jal-co/shieldcn/stars+github/jal-co/shieldcn/license+github/jal-co/shieldcn/contributors+github/jal-co/shieldcn/last-commit.svg?variant=branded&amp;size=xs" /><img alt="shieldcn stats" src="https://shieldcn.dev/group/github/jal-co/shieldcn/stars+github/jal-co/shieldcn/license+github/jal-co/shieldcn/contributors+github/jal-co/shieldcn/last-commit.svg?variant=branded&amp;size=xs&amp;mode=light" /></picture></a>
</p>

<p align="center">
  <a href="https://vercel.com/oss"><picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/badge/Vercel_OSS_Program_Member.svg?variant=branded&amp;size=xs&amp;logo=vercel" /><img alt="Vercel OSS Program Member" src="https://shieldcn.dev/badge/Vercel_OSS_Program_Member.svg?variant=branded&amp;size=xs&amp;mode=light&amp;logo=vercel" /></picture></a>
  <a href="https://openpanel.dev?ref=justinlevine.me"><picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/badge/analytics%20by-openpanel.svg?variant=branded&amp;size=xs&amp;logo=openpanel" /><img alt="analytics by openpanel" src="https://shieldcn.dev/badge/analytics%20by-openpanel.svg?variant=branded&amp;size=xs&amp;mode=light&amp;logo=openpanel" /></picture></a>
  <a href="https://neon.com/?utm_source=shieldcn.dev"><picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/badge/powered%20by-Neon-37C38F.svg?variant=branded&amp;size=xs&amp;logo=neon&amp;logoColor=fff" /><img alt="Powered by Neon" src="https://shieldcn.dev/badge/powered%20by-Neon-37C38F.svg?variant=branded&amp;size=xs&amp;mode=light&amp;logo=neon&amp;logoColor=fff" /></picture></a>
</p>

## Usage

Drop a badge into any README and it renders as a real shadcn Button.

```md
![npm](https://shieldcn.dev/npm/react.svg)
![stars](https://shieldcn.dev/github/vercel/next.js/stars.svg)
![views](https://shieldcn.dev/views/repo/shieldcn/shieldcn.svg)
```

## Agent skill

Install the `shieldcn-badges` skill from [skills.sh](https://skills.sh) so your
coding agent can add shieldcn badges, charts, and headers to READMEs:

```bash
npx skills add jal-co/shieldcn -a claude-code # installs to Claude Code
npx skills add jal-co/shieldcn -a cursor # installs to Cursor
```

See [`skills/shieldcn-badges/SKILL.md`](skills/shieldcn-badges/SKILL.md) for
prompt examples and options.

## Star history

Hosted star charts use GitHub's privacy-safe weekly history API. Embed
`https://shieldcn.dev/chart/github/stars/{owner}/{repo}.svg` for any public
repository, or use `.png` and `.json` at the same path.

To commit a light/dark SVG pair to your repo, use the **shieldcn starchart**
GitHub Action:

```yaml
- uses: jal-co/shieldcn@v1
  with:
    theme: violet
    pull-request: true
```

PR mode needs `contents: write`, `pull-requests: write`, and permission for
Actions to create pull requests in repository settings.

[**GitHub Action docs →**](https://shieldcn.dev/docs/charts/star-history) ·
[action reference](packages/action/README.md)

<p align="center">
  <a href="https://github.com/jal-co/shieldcn/stargazers"><picture><source media="(prefers-color-scheme: dark)" srcset=".github/shieldcn/star-chart-dark.svg" /><img alt="Star history of jal-co/shieldcn" src=".github/shieldcn/star-chart-light.svg" /></picture></a>
</p>

## Sponsors

<p align="center">
  <picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/sponsors/jal-co.svg?title=false&amp;preset=transparent&amp;size=80&amp;names=false&amp;special=usenotra&amp;separator=line&amp;mode=dark&amp;border=false" /><img alt="sponsors" src="https://shieldcn.dev/sponsors/jal-co.svg?title=false&amp;preset=transparent&amp;size=80&amp;names=true&amp;special=usenotra&amp;separator=line&amp;mode=light&amp;border=false" /></picture>
</p>

## Contributors

<p align="center">
  <a href="https://github.com/jal-co/shieldcn/graphs/contributors"><picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/contributors/jal-co/shieldcn.svg?title=false&amp;preset=transparent&amp;border=false&amp;mode=dark" /><img alt="contributors" src="https://shieldcn.dev/contributors/jal-co/shieldcn.svg?title=false&amp;preset=transparent&amp;border=false&amp;mode=light" /></picture></a>
</p>

<div align="center">

[MIT](https://github.com/jal-co/shieldcn/blob/main/LICENSE) · Built by [Justin Levine](https://justinlevine.me) · [Contribute](https://github.com/jal-co/shieldcn)

</div>