dixyUI
0.1 beta · Now on npm

Components with character.

Accessible React components with 32 starter themes that change the whole feel of your product. Try one on this page.

Get started See it in real apps

Beta on npm. APIs may still change before 1.0.

Try a starterOriginal Dixy
Customise
Original Dixy applied.

Loading scene…

Real Dixy components. Change the starter to restyle them.

components, each with a live playground
96
starter themes over one component API
32
focus, keyboard and ARIA underneath
Base UI
of Tailwind: plain CSS in cascade layers
0 KB
BUILT WITH DIXY

Real products, not just buttons.

Complete screens made only from Dixy's public components. They open in the starter you picked.

  • Fernpay

    A personal finance app with cash flow, cards, budgets and settings. Opens in Original Dixy.

    TableChartDialogTabs

  • Shader lab

    Live backdrops paired with each starter.

  • Wren

    An AI chat app built from the Dixy AI parts.

  • Kitchen sink

    All 96 components on one page.

  • Theme playground

    Mix a starter, then export the code.

ACCESSIBILITY

Character on the surface. Access underneath.

Read the accessibility notes
  • Keyboard on every component

    Focus order, arrow keys, Escape and typeahead come from Base UI. Themes only change paint.

  • Focus you can always see

    A focus ring that never relies on shadow alone, in every starter.

  • Contrast checked per theme

    Text and controls are tested against their real surfaces, in light and dark.

  • Respects your settings

    Reduced motion, larger text, right-to-left and forced colours.

Target: WCAG 2.2 AA. Automated checks cover selected behaviour; manual screen-reader review is part of each release.

Try it with your keyboard

A demo form. Nothing is sent.

WHY DIXY

Character without compromise.

Themes are data

The parts of the theme you are looking at right now:

Material
matte
Frame
none
Body
inter
Heading
grotesk

Plain CSS, layered

One stylesheet of variables in cascade layers. No Tailwind compiler, and your own styles always win.

Tuned, not hard-coded

Density, radius and motion are theme settings with sensible defaults. Reduced motion always wins over decoration.

Character
64
SHIP IT

Same theme, in your app.

Starters are separate packages and stylesheets, so you only pay for the one you import. The playground exports a full preset with your own changes.

app.tsx
import "@dixy-ui/react/styles.css";
import { Theme } from "@dixy-ui/react";

<Theme appearance="light" accentColor="purple">
  <App />
</Theme>

96 components, documented

Every one has a live playground, props table and accessibility notes.

Browse all
START BUILDING

Make one that feels like you.

Install the beta, pick a starter, then change the material, the frame and the type until it's yours.

Get started Open the playground
terminal
$ pnpm add @dixy-ui/react@beta @dixy-ui/themes@beta
✓ 2 packages added

// app.tsx
import { Theme } from "@dixy-ui/react";
32 starters · now wearing Original Dixy