UIX
Sign in Start free
Docs menu

Installation

Pick the path that matches what you have. Each one reads the same saved design system by its id.

Before you start

You need a saved design system and its id. If you don’t have one yet, make one at /generate and save it (see the quick start). The id is the last part of the Studio address, /s/<id>.

The React paths also need:

  • Node 18 or newer
  • React 18 or 19
  • Tailwind CSS v4. The CLI stops if it finds Tailwind v3.

New React app

Start from an empty folder. The CLI makes a Vite, React and TypeScript app with Tailwind v4 and your system already in it.

  1. Create the app

    Run this where you keep your projects. my-app is the folder it makes; it must be new or empty.

    Terminal
    npx uix-ui@latest new my-app <id>

    No saved system yet? Start from a free preset instead, with no id:

    Terminal
    npx uix-ui@latest new my-app --theme terracotta-drafting

  2. What it does

    It creates the Vite app, installs packages, adds Tailwind CSS and its Vite plugin, pulls your theme and tokens, adds the Button and Card components, and writes a sample src/App.tsx that uses them.

  3. Start it

    Open the address it prints. Edit src/App.tsx to build with your system.

    Terminal
    cd my-app
npm run dev

Existing React app

For Vite, Next.js, Astro, Remix or any React app that already has Tailwind v4.

  1. Pull your system

    Run this in your project folder. Name the components you want after the id, or leave them out and add them later.

    Terminal
    npx uix-ui@latest pull <id> button card

  2. Check what changed

    It writes components.json, the theme in src/styles/uix.css, your tokens in src/styles/tokens/, a cn() helper in src/lib/utils.ts and the components in src/components/ui/. It also adds the theme import to your main CSS file and saves your id in uix.json. Without a src folder, files go in the project root.

  3. Use the components

    Import them like any other component. Their colors, corners and fonts come from your system.

    src/App.tsx
    import { Button } from "@/components/ui/button";

export default function App() {
  return <Button>Save</Button>;
}

  4. Stay in sync

    After you change the system in Studio, run this in the same folder. It does nothing if the version hasn’t changed.

    Terminal
    npx uix-ui sync

Files you already have are kept. Add --overwrite to replace them. See the CLI reference for every command and option.

Any website

For plain HTML, WordPress, Webflow or any page where you can add a stylesheet. No build step.

  1. Link the CSS

    Paste this into the page’s <head>.

    index.html
    <link rel="stylesheet" href="https://useuix.com/s/<id>.css">

  2. Use the variables

    Every color, font, space and radius is a CSS variable. Use the semantic names, so dark mode works on its own.

    styles.css
    .card {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

  3. Done

    The page picks up your changes when you save in Studio. Dark mode follows the visitor’s device, or set data-theme="dark" on <html>. See Themes and dark mode.

Just the files

Run pull in a folder without a package.json and it writes plain files instead: uix/uix.css and your token JSON files in uix/. Link the CSS from any page:

Terminal
npx uix-ui@latest pull <id>
index.html
<link rel="stylesheet" href="uix/uix.css">

AI app builders

  • Lovable, Bolt, v0: in Studio, open Use it → AI tools, press Copy prompt and paste it into the tool’s chat.
  • Claude Code, Cursor and other agents: connect the MCP server, or add the AI Pack files to your repo.