How it works

From empty repo to shipped UI.

Install, theme, compose, ship — with a glimpse of each step.

  1. CLI · React · Tailwind

    Install what you need

    CLI drop-in — one command, files in your project.

    terminal

    # add a block

    npx @sonojs/ui@latest add button

    + components/ui/button.tsx

  2. Presets · Tokens

    Lock the look once

    Presets and tokens keep light and dark coherent.

    Tokens

    primary

    card

    muted

    fg

  3. Components · Blocks

    Compose the product

    Stack primitives or start from a block — then shape it.

    DashboardLive

  4. QA · Launch

    Ship with confidence

    Check breakpoints and focus, wire data, push.

    • Mobile + desktop checked
    • Keyboard path verified
    • Data wired to API

Ready to start? The foundation is waiting.

Get startedExplore blocks