07 · Code
Shadcn theme
The full design system, packaged as an installable shadcn/ui theme. Drop it into any React, Next.js, Remix, or Vite + React project and inherit every brand token, radius, chart color, and sidebar var with one command.
Install
In any shadcn-configured project, run:
# shadcn v4+
npx shadcn@latest add https://design.shibin.co/registry/shibin.json
This writes the full token set into your stylesheet. Components (Button, Card, Dialog, etc.) inherit automatically from the CSS vars.
Non-shadcn projects
If the project isn’t using shadcn, grab the raw CSS and import it from your entry stylesheet:
# raw CSS drop-in curl -O https://design.shibin.co/registry/shibin.css # then in your entry CSS @import './shibin.css';
What’s in it
Surfaces
Warm cream #F8F7F2, one derivative #F1EFE9 for hover + disabled
Primary
Deep indigo #1C1856. The one brand accent; reused for info state
Semantic palette
Earthy: terracotta destructive, sage success, warm saffron warning
Chart scale
7 colors: 4 semantic hues + 3 indigo tints for multi-series
Radii (hybrid)
10px base, 16px cards, pill (9999px) for primary CTAs
Typography
Inter everywhere, ui-monospace for tabular figures
Theme modes
Light only. No dark mode by brand rule
Shadows
None, except a single soft lift on dialogs
Beyond shadcn defaults
Three radius variants ship alongside the standard --radius. Use them directly in your components to keep the brand pill shape on primary CTAs:
/* primary CTA — pill */ <Button className="rounded-[var(--radius-pill)]">Get started</Button> /* utility / icon button — tighter */ <Button variant="outline" className="rounded-[var(--radius-button-utility)]">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 every token applied to real shadcn surfaces (buttons, form, alerts, cards, table, dashboard fragment, dialog):
Live preview
Every theme decision rendered on a Shopify AI Hub sample dashboard.