Introduction

dotUI is a design-system builder. You compose your system at dotui.org/create — colors, typography, icons, density, radius, per-component styles — preview every change on live components, and export code you own: into your codebase via the shadcn CLI, or straight into v0, with more targets planned.

Open code alone doesn't get you there: you own the files, but the decisions inside them are still someone else's. dotUI makes the decisions yours. The output is not our library with your colors — it is your design system.

const invoices = /* ... */;
const statusVariant = /* ... */;
const formatCurrency = /* ... */;

<TableContainer>
  <Table aria-label="Invoices">
    <TableHeader>
      <TableColumn isRowHeader>Invoice</TableColumn>
      <TableColumn>Status</TableColumn>
      <TableColumn>Method</TableColumn>
      <TableColumn className="text-right">Amount</TableColumn>
    </TableHeader>
    <TableBody>
      {invoices.map((invoice) => (
        <TableRow key={invoice.id}>
          <TableCell className="font-medium">{invoice.id}</TableCell>
          <TableCell>
            <Badge
              appearance="subtle"
              variant={statusVariant[invoice.status]}
            >
              {invoice.status}
            </Badge>
          </TableCell>
          <TableCell>{invoice.method}</TableCell>
          <TableCell className="text-right tabular-nums">
            {formatCurrency(invoice.amount)}
          </TableCell>
        </TableRow>
      ))}
    </TableBody>
    <TableFooter>
      <TableRow>
        <TableCell colSpan={3}>Total</TableCell>
        <TableCell className="text-right tabular-nums">
          {formatCurrency(total)}
        </TableCell>
      </TableRow>
    </TableFooter>
  </Table>
</TableContainer>

API philosophy

Composition

The API is built on composition: each component maps to a single DOM element, so you can style every element and control DOM order to implement any pattern. Every component also ships default children, so you only write the composition when you need to change it.

<Input placeholder="hello@example.com" />

The same primitives recompose into every component in the library: an Input becomes a TextField, a DateField, a DatePicker; the same list becomes a Select, a Combobox, a command palette; the same menu opens from a button, a right click, or an @-mention. Around ten primitives cover a dozen components, with zero parallel APIs.

Reusable primitives

Most libraries claim composability and then ship parallel APIs for the same pattern: MenuPopover, ComboboxPopover, SelectPopover for one popover; MenuTrigger, DialogTrigger, PopoverTrigger for one button. You end up memorizing four names for every concept.

dotUI has one of each:

• Popover — one component for menus, dialogs, selects, and comboboxes.
• Button — one component for every trigger.
• Input — one component for text, search, and number fields.
• Label — one component everywhere a label appears.

Learn a primitive once; it works across the entire library.

The foundational layer

dotUI is built on React Aria Components, styled with Tailwind CSS v4 and tailwind-variants, and themed by an OKLCH color engine.

We evaluated the alternatives for the behavior layer. Radix is effectively unmaintained. Base UI is promising but young, and missing features dotUI relies on. React Aria is battle-tested, comprehensive, and unstyled all the way down — a foundation that disappears behind whatever design system you build on it.

Documentation

The docs show rather than tell. Every component page opens with an interactive playground: change a prop, and the code and preview update in real time. Play with the props; read the prose only when you need it.

<Menu>
  <Button variant="default" 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>

Below the playground, examples show components composed into real product UI:

Built for AI

dotUI is built for humans and AI. The API is consistent and predictable across the library: an agent that has seen one trigger, one field, or one overlay has seen them all. Fewer APIs to learn means fewer APIs to get wrong — an agent that has written one component can write the next.

Get involved

Open an issue on GitHub for feedback, bugs, or feature requests, or DM @mehdibha on X. Contributions are welcome.