Siteplane UI

Overview

Siteplane UI is a React UI kit for building SaaS apps with AI coding agents. Every component ships with its states, light and dark modes, motion and micro-interactions built in, and keyboard and screen reader support comes from Base UI and React Aria. An included skill teaches agents such as Claude Code, Codex and Cursor which component fits and how to combine them.

The free components come with full source under the Siteplane UI License, which allows use in any project, including client work, but not resale as part of a UI kit or template. Pro patterns, sections and templates are offered separately. The kit needs React 19, TypeScript and Tailwind CSS 4.

Features

• Forms and selection: 19 components including input, OTP field, combobox, autocomplete, list box and form
• Overlays: Dialogs, alert dialogs, drawers, sheets, popovers, menus and preview cards
• Date and color: Calendar, date, date range, date-time and time pickers plus color picker and swatches
• Data display and charts: Tables, resource lists, filter bar, timeline, and bar, line, area and pie charts
• Navigation: Command menu, sidebar and dashboard shell
• Animated and glass: Animated buttons, icon morphs, theme toggles and blurred glass surfaces
• Agent setup: A skill, MCP and CLI guides, and an agent prompt that sets up a new Next.js app

Tech stack

• React 19, TypeScript, Tailwind CSS 4
• Base UI, React Aria
• Next.js or Vite

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @siteplane/component-name