A small beginning.

A package, a theme, and room to make it yours.

Dixy is in public beta. APIs may still change between 0.x releases; every change is listed in each package's changelog.

Install

pnpm add @dixy-ui/react@beta
# optional: extra visual skins
pnpm add @dixy-ui/themes@beta

react and react-dom 19 are peer dependencies. motion 14 is optional and only needed for @dixy-ui/react/motion.

Import through the public API

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

export function App() {
  return (
    <Theme appearance="light" accentColor="violet" radius="md">
      <Button>Make something good</Button>
    </Theme>
  );
}

Add the stylesheet once

Import the stylesheet at the application root. Dixy ships CSS variables and component styles; consumers do not need a Tailwind compiler. CSS layers allow application styles to override library defaults.

For TanStack Start, the root route imports the stylesheet before rendering the page. Verify the production HTML includes styles before hydration.

Make room for overlays

Your application layout root should use isolation: isolate. Keep body positioned relatively so dialog backdrops can cover the scrolled viewport on iOS Safari. Avoid transforms on an overlay’s containing block.

body { position: relative; }
.app-root { isolation: isolate; }

Supported environments

• React 19, with client or server rendering.
• Browsers: Chrome/Edge 117+, Safari 16.2+, Firefox 121+. Dixy's styles use oklch(), color-mix(), :has(), container queries and subgrid. Some decorative glass blurs need Safari 18+ and fall back to a solid surface before that.
• Accessibility: WCAG 2.2 AA is the target. Base UI and React Aria provide the behaviour, and automated axe checks run in the test suite. Manual screen-reader, high-contrast and zoom testing is still in progress.

Contributing to Dixy

To work on Dixy itself, clone the repository and use Node 24+ with the pnpm version in the root package.json:

pnpm install
pnpm dev