Beta Version

AI Native UI Toolkit for React Apps

Copy accessible components into your Next.js codebase with design tokens, CLI workflows, and MCP-ready docs that agents can follow.

npx vayu-ui-cli@latest create my-app
Components

50+

Hooks

35+

MCP Tools

15+

SKILL.md

5+

Base Theme
Accent Color

Form Controls

Input, Select, Checkbox, Radio, Slider, Switch & more

Live ComponentsInteractive
controls

Keep it calm, useful, and visibly component-driven.

Selections
Layout
Options

Persist changes locally as you type

Collage density24 — 76
Ready to generate
All form controls are live and interactive. Try changing values above.
New update available
A new version of the design system is ready to be installed.
Schedule
Pickers
Time

Disable time selection

Schedule saved
Your event preferences are stored locally.
Profile
Active

Rugved Patel

Admin

Lead Engineer

0/120
Team

Get updates about team activity

Data
Tree + Upload
app
landing
Hero.tsx
blocks.tsx
global.css
Upload

Drop files here

or browse from your device

Max 10MB per file

Tasks
Reorder
Press Space to grab, arrow keys to move, Space to drop, Escape to cancel.

Input components

Text, Select, Checkbox

Press Space to grab, arrow keys to move, Space to drop, Escape to cancel.

Layout panels

Resizable & Draggable

Press Space to grab, arrow keys to move, Space to drop, Escape to cancel.

Display widgets

Card, Badge, Avatar

Press Space to grab, arrow keys to move, Space to drop, Escape to cancel.

Date & Time pickers

Calendar integration

Details

Overlays
Dialog

Persist dialog preferences

What are overlays?
Hover for info
Another tip
Click to interact
Popovers stay open until you click outside.
Tabs
Content

npx vayu-ui-cli@latest add button

Details

Vayu UI is an AI-optimized React component library with 50+ components, 35+ hooks, and full Tailwind v4 token support. Each component follows the compound component pattern for maximum flexibility and composability.

Preserve keyboard support and clean contrast.

Loading
Skeleton
LoadingLoading data...
Preview
Resizable Workspace
Layout

Sidebar

Tokens, navigation, and quick actions.

Preview

Drag the handles to reshape the composition.

Notes

Keep the collage lively, but not noisy.

Stepper
Progress
Step 1 of 3, completed.

Configure

Set up controls

Step 2 of 3, active.

Preview

See live output

Step 3 of 3, inactive.

Ship

Export assets

Data Table
Grid
Status
Project
Users
ActiveVayu UI1.2k
BetaDocs340
ArchivedV189
ActiveStudio4.5k
ErrorAPI Gateway12
ActiveAnalytics850

Why Vayu UI

Structured for AI. Built for humans.

AI-Readable Architecture

Components use predictable patterns and structured documentation that AI coding agents understand natively.

Own Your Code

Components live in your codebase. No vendor lock-in, no forced upgrades, no runtime dependencies.

CLI + MCP Server

CLIMCP

Scaffold with npx vayu-ui-cli@latest add. AI tools integrate via the MCP server for context-aware generation.

50+ Components, 35+ Hooks

Buttons, cards, modals, tables, forms, navigation, data display — plus reusable logic patterns.

Accessible Accessible

Every component meets accessibility standards. Keyboard navigation, screen reader support, and focus management built in.

Tailwind CSS v4

Design tokens that auto-switch between light and dark mode. Customize everything from a single CSS file.

Start building in minutes

Install the CLI, add components, and ship.

Create (1-shot boilerplate)

npx vayu-ui-cli@latest create my-app

Install to existing project

npx vayu-ui-cli@latest init
npx vayu-ui-cli@latest install-mcp
npx vayu-ui-cli@latest add button card

And many more components

ButtonCardInputBadgeTabsSwitchTooltipModalTableSelectAvatarSkeletonDrawerAlertCarouselSliderAccordionContextMenuPopoverTree
VayuUI

© 2026 Vayu UI. Open source.

GitHub