Introduction
React components for Tailwind CSS v4, with light, dark and high-contrast themes and RTL support. Use the npm package or copy the source into your project.
What is Yugen UI?
幽玄 (yūgen) is a quiet, deep kind of beauty that suggests more than it says. Yugen UI follows that idea: restrained and clear.
Yugen UI is a set of React components written in TypeScript. It runs on React 19 with Tailwind CSS v4, or with a precompiled CSS file if you don't use Tailwind. All components share one set of tokens, so changing the theme, brand color or text direction doesn't require touching components.
Choose how to use it
All three share the same tokens and themes, and you can mix them in one project.
| Option | Good when | Updating |
|---|---|---|
| npm packagenpm i yugen-ui | You want to start right away and rarely change components. | npm update yugen-ui |
| @yugen-ui/clinpx @yugen-ui/cli add button | You need to edit component source in your project. | Rerun add --overwrite and review the diff |
| shadcn CLInpx shadcn@latest add … | Your project already uses shadcn/ui. | Rerun add, as with shadcn/ui |
Full commands and version requirements are in Quick start.
Principles
Three token layers
Raw value → role → Tailwind class. Components only use classes, so changing the theme means changing tokens, not components.
Accessible
Works with a keyboard and screen readers, has a clear focus ring, text meets 4.5:1 contrast, and state is never shown by color alone.
Themes set with attributes
data-theme, data-brand and dir go on <html> for the whole app, or on a region through YugenProvider.
Examples you can paste
Examples on component pages are type-checked automatically against imports from yugen-ui.
Versions and license
Yugen UI is before 1.0. A minor release may contain breaking changes, always listed in What's new; a patch release only fixes bugs. The full rules are in Versioning.
MIT license. Report bugs in GitHub Issues, ask questions and share ideas in Discussions.
Credits
Yugen UI is made by trandat1114. The token structure and component behavior are inspired by Microsoft Fluent 2; the source distribution model comes from shadcn/ui. Complex behavior builds on Radix UI, cmdk, react-day-picker and react-resizable-panels. Icons: Fluent System Icons (MIT).