Introduction

dotUI is not a component library. It's how you build your own design system.

You know how this usually goes: you pick a component library, ship fast, and a few months later your app looks like every other app built with it. So you start fighting the library — overriding styles, wrapping components, patching decisions that were never yours to begin with.

Copy-paste libraries fixed part of this. You own the files now. But the design inside them is still someone else's: their colors, their radius, their spacing, their taste. Changing the code is easy — changing the system is not.

That's what dotUI is for. Everyone should be able to build a design system that actually feels like theirs — without a design team, and without spending months on it.

How it works

1. Compose your system at dotui.org/studio — colors, typography, icons, density, radius, and the style of each component.
2. Preview every change instantly, on real components.
3. Export it as code you own — into your codebase with the shadcn CLI, or straight into v0. More targets are coming.

What you get isn't our library with your colors on top. It's your design system, in your codebase, ready to change however you like.

What's inside

Every component is accessible out of the box, built on React Aria and styled with Tailwind CSS. The API is small and consistent: one Button for every trigger, one Popover for everything that floats, one Input for every field. Learn a component once and you know the whole library.

Docs that show, not tell

Every component page starts with a playground. Change a prop, watch the code and preview update. Read the prose only when you need it.

<Menu>
  <Button variant="secondary" className="w-fit">
    Open
  </Button>
  <Popover>
    <MenuContent>
      <MenuSection>
        <MenuSectionHeader>My Account</MenuSectionHeader>
        <MenuItem>Profile</MenuItem>
        <MenuItem>Billing</MenuItem>
        <MenuItem>Settings</MenuItem>
      </MenuSection>
      <Separator />
      <MenuItem>GitHub</MenuItem>
      <MenuItem>Support</MenuItem>
      <MenuItem isDisabled>API</MenuItem>
    </MenuContent>
  </Popover>
</Menu>

And below that, examples of components composed into real product UI:

Works great with AI

Because the API is consistent and predictable, AI agents pick it up fast: an agent that has written one component can write the next. And since you own the code, your tools can read it, understand it, and build on it.

Get involved

Found a bug? Have an idea? Open an issue on GitHub or DM @mehdibha on X. Contributions are welcome.