What is TOUI ?

Token UI is a collection open-source copy-and-paste components built with React, Radix, Motion, Tailwind CSS.

Why Copy-and-Paste ?

• A growing trend adopted by modern developers.
• Zero dependencies to use it as-is or tweak freely.
• Customize and extend to fit your needs.
• Direct access to styles, behavior, and logic.

Prop-based Components

• AI-Optimized Design – Structured props system ensures easy AI interpretation and usability.
• Elegant Code API – No excessive Tailwind classes, resulting in cleaner JSX.
• Flexible Customization – Well-structured props allow dynamic UI adjustments.
• Modular & Reusable – Components are designed for scalability and reusability.
• Separation of Concerns – Clear distinction between logic and UI for maintainability.
• Global Theming – Supports consistent styling and theme customization across components via CSS variables.

Built for Production

TOUI's components and apps are built on proven foundations:

• React: The leading framework for building reactive component-driven user interfaces.
• Tailwind CSS: Modern and utility-first styling with fully customizable design system.
• TypeScript: Strong type safety, code autocompletion, and a better developer experience.
• Radix UI: Core components with enhanced flexibility using custom props.
• Shadcn UI: A library of components for building accessible web apps and design systems.
• Motion: Smooth and performant animations for a great user experience.
• Tanstack Table: Feature-rich managed table functionalities for advanced data handling.
• Zod & React Hook Form: Robust frontend and backend validation for secure data handling.
• React Hook Form: Performant, flexible and extensible forms with easy-to-use validation.

Next Steps

Ready to get started ? Head over to our Installation Guide to begin using TOUI in your project and accelerate your development.