🚧 This library (& docs) are under active development

Universal UI

A customizable, TailwindCSS-first, React UI Library.

Build beautiful & customizable interfaces with TailwindCSS-first React components.

Build features, not UI components

Scaffold your app in minutes, not hours

Universal UI is built with accessibility, performance, and DX in mind.

New components are added regularly, and you can always customize them to your needs.

Components are built with TailwindCSS, so you can easily customize them to your needs, without overriding styles with sketchy !important rules.

() => 
  <div className='grid gap-size-2y'>
    <InputGroup>
      <Input placeholder="First Name" />
      <Input placeholder="Last Name" />
    </InputGroup>
    <Button theme="brand">
      Send
    </Button>    
  </div>

() => 
  <div className='grid gap-size-2y'>
    <InputGroup>
      <Input placeholder="First Name" />
      <Input placeholder="Last Name" />
    </InputGroup>
    <Button theme="brand">
      Send
    </Button>    
  </div>

Powerful Primitives

TailwindCSS primitives for consistent interfaces

Comes with built-in TailwindCSS primitives for consistent styling across your project.
Primitives are built on var(--css-variables) and work with data-attributes.

See all primitives

bg-theme-pure

bg-theme-base

bg-theme-active

Theme:

Dark Mode out of the box

Interfaces that work in any theme

All components are fully compatible with light and dark mode.

If you want to force a specific theme, any section of your app can be forced into a certain theme with data-override="true".

Inverted Section

This entire section has been inverted to whatever the device theme is.

All components inside will respect the styling for it as well,
without props/context passed around.