Getting started

Siteplane UI is a React UI kit for building with AI agents. Every component comes finished, with its states, motion and micro-interactions built in. Patterns, sections and templates combine them into whole screens, and a skill shows your agent how to use all of it. You install everything with the shadcn CLI, and the code lives in your project.

Set up with your agent

Open your coding agent, such as Claude Code, Codex or Cursor, in your application directory and send it this prompt. In an empty directory, it creates a Next.js application first.

Set up by hand

Run the commands from your application directory. They use pnpm; with npm, replace pnpm dlx with npx.

Set up the kit

Siteplane UI needs React 19, TypeScript, Tailwind CSS 4 and an @/* alias that points to src/*. Installation covers the complete setup for Next.js and Vite.

Create components.json in your application directory instead of running shadcn init. This is the complete file for Next.js; the Vite guide has the one for Vite:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks",
    "utils": "@/siteplane/system/utils/cn"
  },
  "registries": {
    "@siteplane": "https://ui.siteplane.io/registry/{name}.json"
  }
}

If your application already has a components.json, add the @siteplane entry to its registries instead.

Install your first component:

pnpm dlx shadcn@4.18.0 add @siteplane/button

Then make the kit stylesheet your global CSS. In a new Next.js application, replace the contents of src/app/globals.css with these two lines:

@import "../siteplane/system/styles/base.css";
@source "..";

An application with its own styles keeps them below the import, as Installation shows.

Install the skill

The skill shows your coding agent which component fits and how to combine them. Install it for your agent, for example Claude Code:

pnpm dlx skills@1.5.25 add https://ui.siteplane.io -a claude-code

For Codex or Cursor, use codex or cursor in place of claude-code. Keep -a when your agent runs the command. Started by an agent, the installer skips its prompts, and without -a it can install the skill for every agent it supports.

Try it

With the kit and the skill installed, give your agent its first task:

Build a settings page with a profile form and a team members table using Siteplane UI.

Customize and automate

Set shared size, density, radius, and locale, then adjust theme tokens or local styles. When you build with your agent, start from the agent setup and the application guidelines. Every page has a Markdown version: llms.txt indexes them, and llms-full.txt includes the complete examples.

Source and updates

Installed source belongs to your application. Review incoming changes before you overwrite local customizations; see installation and updates and known limitations. From 1.0, the API these docs describe is stable, and a renamed prop or part keeps working under its old name until the next major version; see Stability and deprecations.