VayuUI

Getting Started

Accessible, TypeScript-first, Tailwind CSS v4 component library — own the source.

Vayu UI

Vayu-UI is a token-driven design system built on Tailwind v4 with a clean canvas-* and content-* naming system, focused on scalable, layer-based theming using CSS variables. It also includes an ecosystem of MCP integrations, CLI tooling, and reusable SKILLS modules to streamline development, automation, and design consistency during AI-Native development.

Quick Start

# scaffold tokens + config into your project
npx vayu-ui-cli@latest init

# add MCP server
npx vayu-ui-cli@latest install-mcp

# add components and hooks
npx vayu-ui-cli@latest add button use-debounce
import { Button } from '@ui/component/Button';

export default () => <Button>Click me</Button>;

CLI

Use vayu-ui-cli to copy typed source files directly into your project:

npx vayu-ui-cli@latest list          # browse available items
npx vayu-ui-cli@latest add button    # copy a component
npx vayu-ui-cli@latest add use-debounce  # copy a hook

Explore

  • Design System — color tokens, layout layers, typography, effects
  • Components — all UI primitives and patterns
  • Hooks — browser, state, and utility hooks

On this page