Documentation
Learn how to discover, install, and use design skills with your AI agents. TokenUI provides a curated collection of UI components and patterns.
Quick Start
Get started in seconds. No installation required—just use npx to run the CLI directly.
Add any skill to your project instantly
npx tokenui.sh add <skill-name>Browse all available skills on the homepage, or search for specific components like "button", "card", "modal", or "form".
What are Skills?
Skills are self-contained UI components, design patterns, and coding conventions that help you build consistent interfaces. Each skill includes:
UI Components
Ready-to-use React components with styling, animations, and accessibility built-in.
Design Tokens
Colors, typography, and spacing scales that ensure visual consistency.
Code Patterns
Best practices and conventions for writing maintainable React code.
AI-Optimized
Structured for AI agents to understand and implement correctly.
How It Works
Browse the Gallery
Explore skills by category or search for specific components. Preview live examples before installing.
Install with CLI
Use the CLI to add skills to your project. The CLI handles dependencies, file structure, and configuration automatically.
npx tokenui.sh add buttonUse in Your Project
Import and use components like any other React component. Customize styling using Tailwind classes or CSS variables.
Publishing Designs
Have a design system or component you want to share? Publish it to the TokenUI gallery so others can discover and use it.
Share Your Work
Upload screenshots, code, and documentation for your design.
Track Downloads
See how many developers are using your skills.
Click the Publish button in the navigation to submit your design. Fill out the form with your design details, upload a preview screenshot, and submit. All submissions are reviewed before appearing in the gallery.