Skip to content

Frameworks

Install once, keep framework behavior accessible

Each adapter keeps the same component contract while respecting the routing, hydration, and form behavior of the host framework.

Choose your framework

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

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

Adapter contract

Every framework path has the same three checkpoints: token CSS, provider placement, and registry component ownership.

tsx
// 1. Import tokens in the framework global CSS entry.
@import "tailwindcss";
@import "@cooud-ui/tokens/styles.css";


// 2. Wrap the root UI tree in CooudUIProvider.
<CooudUIProvider asRoot defaultThemeName="aurora" defaultModeName="dark">
  {children}
</CooudUIProvider>


// 3. Add components through the registry.
pnpm dlx cooud-ui@latest add button card dialog form

Accessibility handoff

Framework integrations must preserve visible focus, route transition focus, dialog dismissal, and form error announcements. This is part of the adapter checklist, not optional polish.

Laravel note

For Laravel, create the app first with the Laravel installer, then run Cooud UI inside the Vite/Inertia or Blade frontend workspace.

Start with laravel new app, choose the frontend stack, then run cooud-ui init inside the project. Server validation errors should map into FieldError or equivalent visible form feedback.