Skip to content

Installation

Install Cooud UI in the path that matches your project

Use Create for visual preset work, then run the CLI inside any project — new or existing — to wire tokens, providers, and config.

Recommended for new projects

Use /create to build a preset visually, then copy the setup command generated for your framework and package manager.

Starting point

Use Cooud Create

Build a preset visually, save it, and generate the setup snippets for your stack.

Open Create

Use Stack Builder

Compose a full-stack app and export a scaffolding command, KICKOFF.md, and stack.json.

Open Stack Builder

Use the CLI

Run init inside your project to wire tokens, providers, and config.

Read CLI docs

Choose your framework

Add tokens, providers, and components to an app you already created.

Choose framework

Use Create

Build your preset visually, preview the result, save it locally, and generate the command for your stack.

Open Create

Use the CLI

Create the app with your framework's official tool, then run init inside it. The CLI is framework-agnostic and acts on the current directory.

Initialize the current project

bash
pnpm dlx cooud-ui@latest init

Works in any project — including next, vite, tanstack-start, react-router, astro, and laravel apps.

Add components

After init, copy components from the registry into your app. Imports are rewritten to your local aliases.

Copy components into your app

bash
pnpm dlx cooud-ui@latest add button card dialog

Choose your framework

Each adapter documents where the provider, token import, and accessibility handoff should live.

Next.js

App Router, RSC-safe provider placement, metadata, and route-level themes.

npx create-next-app@latest app && cd app && npx cooud-ui@latest init
  • Provider in app/layout.tsx
  • tokens imported in globals.css
  • focus restores on navigation

Vite

SPA setup with a root provider, CSS token import, and fast registry adds.

npm create vite@latest app && cd app && npx cooud-ui@latest init
  • Provider wraps <App />
  • semantic tokens in src/index.css
  • keyboard traps tested

TanStack Start

File routes, server functions, and persistent theme state across route transitions.

npm create @tanstack/start@latest app && cd app && npx cooud-ui@latest init
  • Root route owns provider
  • pending UI keeps accessible names
  • router focus handoff

React Router

Framework mode with route modules, loader-friendly forms, and progressive UX.

npx create-react-router@latest app && cd app && npx cooud-ui@latest init
  • Root.tsx owns provider
  • forms expose field errors
  • links keep visible focus

Astro

Island components with shared CSS tokens and isolated interactive surfaces.

npm create astro@latest app && cd app && npx cooud-ui@latest init
  • client islands import UI only where needed
  • no duplicate provider trees
  • static content remains semantic

Laravel

Blade or Inertia setup with Vite, shared token CSS, and server-rendered forms.

laravel new app && cd app && npx cooud-ui@latest init
  • Vite entry imports tokens
  • Blade/Inertia root owns provider
  • server errors map to FieldError