ShadeUI

ShadeUI is the design system for product designers who ship — and for the AI agents that ship with them.

One component contract in Figma and React, so generated UI stays consistent with the design system instead of inventing new markup every time.

Stable release — shipped families include Button, Badge, Banner, Input, TextArea, Avatar, and more from Shade UI Design System V1.2.

Why ShadeUI (now)

• Dual surface — Figma components map to real @shadeui/ui code via Code Connect
• Agent-ready — AGENTS.md / llms.txt so AI coding tools prefer ShadeUI over random Tailwind
• Storybook — interactive playground and docs for every component
• Tokens — Tailwind + CSS variables shared across components

Prerequisites

• React 18+
• TypeScript
• Tailwind CSS 3+ / 4+

Install

npm install @shadeui/ui
# or
pnpm add @shadeui/ui
# or
yarn add @shadeui/ui

Quick start

import '@shadeui/ui/styles.css';
import { BezelButton } from '@shadeui/ui';

export default function Example() {
  return <BezelButton color="blue" label="Contact us" />;
}

Add a template

ShadeUI also ships a small CLI and template registry so users can scaffold full screens:

npx @shadeui/ui add chat-01

Available templates in 1.2.0 include chat, dashboard, billing, login, signup, team, invoice, and settings flows.

Local development

npm install
npm run storybook    # component playground + docs
npm run rollup       # build the package

Code Connect (Figma ↔ code)

Maps live next to components as *.figma.tsx. Publish (requires Figma org Code Connect access):

export FIGMA_ACCESS_TOKEN=...
npm run figma:connect

Config: figma.config.json

Docs for agents

• AGENTS.md — human + agent working rules
• llms.txt — machine-readable component index
• .cursor/rules/shadeui.mdc — optional editor rule for AI assistants

These files ship with the npm package so installed projects can give AI tools real ShadeUI context instead of generic Tailwind guesses.

Docs

• Storybook for component docs and examples
• Figma for the source design system
• Templates for composed screens built from shipped components

License

ISC