Yugen UI

Community

Build Yugen UI together

Yugen UI is open source. A bug report, a block or a translated page all make the library better for the next person.

Ways to get involved

Contribute code

Fix bugs, add components or blocks. Read CONTRIBUTING.md and Design.md before opening a PR.

Report a bug

Describe how to reproduce it, plus the theme, brand, text direction and browser you use. Screenshots speed things up.

Suggest a feature

Describe your problem before proposing a solution. Good components start from a real need.

Q&A

Ask about usage, Next.js integration, custom themes… in the open, so everyone can find the answers.

Translate the docs

The docs are in Vietnamese and English. Component pages and many concept pages have no English version yet; one page per PR is plenty.

Share a block

One file in src/docs/block-library is all it takes: sign-in, pricing, dashboards…

How the project works

Where work is tracked, what it goes through and where to start.

Planning

Every release is a GitHub milestone. Priorities, sizes and the order of work live in the GitHub Project.

Open the Project

Branches and releases

PRs go to next; next moves to main for a release. yugen-ui uses Changesets, one release every 2–4 weeks. The CLI ships separately with a cli@X.Y.Z tag.

Release process

Where the code lives

Components: src/components/ui. Docs pages: src/docs/concepts, src/docs/registry. Blocks and templates: src/docs/block-library, src/docs/template-library. Copy follows wiki › Writing.

CONTRIBUTING.md

Picking up work

Issues labelled good first issue are a good start. Comment on the issue before you begin so two people don't do the same work.

good first issue

Start contributing

Five minutes to run the docs site on your machine.

npm install
npm run dev            # docs at http://localhost:5173
npm run typecheck      # strict TypeScript
npm run lint:classes   # Tailwind classes must be canonical
npm run build:lib      # build the npm package into dist/
  • New component: a folder in src/components/ui/<Name> plus a docs entry in src/docs/registry.
  • New block: a single file in src/docs/block-library.
  • Check Light / Dark / High contrast and LTR / RTL before opening a PR.

Roadmap

By release, updated Nov 09, 2026. It can change with community feedback.

Now

1.0.0 · major

Stable API. No fixed date: ships when the readiness checklist is done.

  • PlannedAPI review, deprecations removed, decision on upper-case spacing #65
  • DoneSEO: path URLs, prerendered pages, sitemap #63
  • PlannedForm: validation and an error summary #162
  • PlannedBlock library 2.0 (marketing, app, commerce), installable with the CLI #163
  • PlannedCodemods 0.x → 1.0 (yugen migrate) for the renamed props #164
  • PlannedYugen-owned prop types for Calendar and Resizable (no third-party types in public props) #371
  • PlannedCSS layering: tokens in @layer theme, opt-in token groups, no global reset from styles.css #354
  • PlannedThe date stack as an optional peer (yugen-ui/dates) #356
  • PlannedNative inputs for Checkbox, Switch and RadioGroup #357

Next

Backlog

Not scheduled yet.

  • PlannedRegister @yugen in the shadcn registry index #68
  • PlannedUnder consideration: Figma kit, Sakura icon set

Shipped: What's new · Full board: GitHub Project · ROADMAP.md

Built with Yugen UI

No projects featured yet

Using Yugen UI? Send a screenshot and a one-line description to be featured here.

Feature your project

Code of conduct

The community follows the Contributor Covenant 2.1 (CODE_OF_CONDUCT.md).

  • Respect everyone, at every skill level and in every language.
  • Critique the issue, not the person.
  • Put accessibility first: end users are diverse.
  • Give clear credit when reusing ideas or code.

Contributors

trandat1114Author & maintainer

Merged pull requests, bug reports, ideas and reviews are all credited on the Contributors page.

See all contributors

FAQ

No. Yugen UI is inspired by Microsoft Fluent 2's token system and component behavior, but it's an independent project by trandat1114 and isn't endorsed by Microsoft.

Yes. Yugen UI is MIT licensed: use, modify and redistribute it, commercially too, as long as you keep the copyright notice.

The npm package suits you if you want easy updates. Copying the source (with @yugen-ui/cli or the shadcn CLI) suits you if you need to customize components deeply. Both share the same tokens, so you can mix them.

yugen-ui ships roughly every 2–4 weeks. Each release's target date is in the Roadmap section and on the GitHub Project.

Not officially. Yugen relies on Tailwind v4's CSS-first configuration (@theme, @utility). If you don't use Tailwind, import the precompiled styles.css.

Open a discussion describing the use case, reference images and accessibility requirements. New components need a docs page and copyable examples, and must follow Design.md.

Credits

  • Microsoft Fluent 2: token structure, scales and component behavior (inspiration).
  • shadcn/ui: the copy-the-source model and component catalog.
  • Radix UI: primitives for behavior and accessibility.
  • Fluent System Icons (MIT): the icon set.
  • Tailwind CSS v4: the utility engine.
  • cmdk, react-day-picker, react-resizable-panels: foundation libraries.