Shadcn theme

Install

In any shadcn-configured project, run:

# shadcn v4+
npx shadcn@latest add https://design.shibin.co/registry/shibin.json

The CLI merges the registry’s CSS variables into your project stylesheet. It does not install React components, copy the static examples on this site, or load General Sans and Manrope. Existing shadcn components inherit the standard variables; add any missing primitives separately.

# example component setup, choose only what the project needs
npx shadcn@latest add button card dialog

Load the exact variable-normal General Sans face used on shibin.co and Manrope from Google Fonts in your application stylesheet:

/* official webfont sources, not installed by the registry */
@font-face {
  font-family: 'Shibin General Sans';
  src: url('https://cdn.fontshare.com/wf/LHQJ5KSAL7VGAEIDSTEXCCOIUKFLT2I6/GW57XUEG4ZBVMLZZTQZTGYPROITRRQ5W/JA3IZUEMJ2J6WWT2OQVJOAWDXO3YL4YG.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500&display=swap');

Non-shadcn projects

If the project isn’t using shadcn, grab the raw token declarations and import them from your entry stylesheet:

# raw token CSS
curl -O https://design.shibin.co/registry/shibin.css
# then in your entry CSS
@import './shibin.css';

The raw file defines custom properties only. It does not provide component classes or webfont imports; load the fonts above and map the variables into your own components.

What the registry adds

Beyond shadcn defaults

Two radius variants keep application UI consistent without turning every control into a capsule:

/* button / utility control */
<Button variant="outline" className="rounded-[var(--radius-button)]">Export</Button>

/* card / dialog — larger */
<Card className="rounded-[var(--radius-card)]">...</Card>

And one shadow token (the only shadow allowed in the whole system):

<Dialog className="shadow-[var(--shadow-dialog)]">...</Dialog>

Preview

See a static custom-CSS reference showing the token direction across buttons, forms, alerts, cards, a table, a dashboard fragment, and a dialog:

Files