Skip to content
Junco
Junco
Free and open source, MIT

One design system.
Four ways to use it.

Tokens, components, blocks and pages for React and Tailwind v4. Use plain CSS classes, utilities, copy-in source or an installed package. They all read the same tokens, so they mix in one app.

Get started Browse components
npm i junco @junco/tailwind

Start simple. Go deeper when you need to.

The same button, four ways. Every level reads the same tokens, so a semantic .btn and an installed <Button> always match.

01Semantic classeslike daisyUI
<button class="btn btn-primary">
  Deploy
</button>
02Utilitieslike Tailwind
<button className="
  h-9 rounded-control px-3.5
  bg-primary text-sm
  text-primary-foreground">
  Deploy
</button>
03Copy-inlike shadcn/ui
npx @junco/cli add button
# yours to edit, still updatable
npx @junco/cli update button
04Installedlike HeroUI
import { Button } from "junco";

<Button isLoading>Deploy</Button>

Real components, not screenshots.

Everything below is live. Type in the form, tab through it, open the select, flip to dark mode. Then pick a new accent and watch the whole site follow.

All 32 components

Project settings

Used in URLs. No spaces.

Every branch gets a URL.

Deployments

  • main

    a1f9c2e · 2m ago

    Ready

  • feat/billing

    7be03d1 · 5m ago

    Building

  • fix/nav

    c44e81a · 1h ago

    Failed

  • main

    09ad7f3 · 3h ago

    Ready

Details

⌘K

Make it yours

Contrast checksAll pass 4.5:1
  • Text on primary (light)4.67:1 pass
  • Primary on page (light)4.60:1 pass
  • Primary on surface (light)4.81:1 pass
  • Text on primary (dark)4.88:1 pass
  • Primary on page (dark)4.91:1 pass
  • Primary on surface (dark)4.66:1 pass
Pick a color to re-theme the site.

Whole pages, motion and 3D.

Start from a finished screen instead of a blank file. Every page is built from the same components, so it already matches the rest of your app.

@junco/blocksBlocks and pagesLanding, pricing, dashboards, settings and auth. Typed props, fake data, variants and slots.
@junco/motionMotionReveal, tickers, marquees, spotlights and beams, all on one motion switch.
@junco/three3DShader gradients, particles, a globe and a model viewer. Lazy, theme aware, with fallbacks.

The parts other libraries leave out.

Accessible by default

Keyboard patterns from WAI-ARIA, focus rings that only show for keyboards, axe in the test suite, and 4.5:1 contrast enforced on every token pair.

Copied code that updates

Own the source like shadcn, then pull upstream fixes with junco update. A three-way merge keeps your edits.

One variable themes it

Change --primary and everything follows, in light and dark. The theme builder picks lightness that stays readable.

Motion with one switch

Durations and easings are tokens. data-motion turns all of it down, and reduced-motion always wins.

Built for agents

An MCP server, llms.txt and shadcn-compatible registry JSON, so AI tools build with real components.

Free. All of it.

MIT licensed. Components, blocks, pages and templates. No pro tier, no license keys.

Your next project, already designed.

Install it in two minutes. Change one variable to make it yours.

Get startedBuild a theme