@refractgroup/ui — the Refract Interaction Standard

The Refract Design System as a React component library, published as @refractgroup/ui. One package, token-driven, built on Tailwind CSS v4. You import components from @refractgroup/ui — everything they're built on is bundled as internal dependencies you never touch.

Install

npm i @refractgroup/ui

Requires React 19 and Tailwind CSS v4 (with @tailwindcss/postcss).

Set up Tailwind + tokens

In your global stylesheet:

@import "tailwindcss";
@import "tw-animate-css";
@import "@refractgroup/ui/styles.css";

/* Tailwind v4 doesn't scan node_modules by default — point it at the package
   so the classes the components use get generated (adjust the relative path). */
@source "../node_modules/@refractgroup/ui/dist";

Without the @import "@refractgroup/ui/styles.css" (the token layer) and the @source line, components render unstyled.

Use

import { Button, Card, Input, Dialog } from "@refractgroup/ui";

export default function Page() {
  return <Button size="lg">Ship it</Button>;
}

Entry points:

| Import from | Contains | |---|---| | @refractgroup/ui | Primitives — button, input, select, dialog, card, table, chart… (64) | | @refractgroup/ui/molecules | stat, combobox, form-field, search-input… (17) | | @refractgroup/ui/motion | dock, command-palette, tilt-card, drawer… | | @refractgroup/ui/organisms | data-table, page-header, settings-panel… | | @refractgroup/ui/patterns | app-shell, dashboard-grid, list-detail… |

Re-brand

Override the base tokens after importing — every component re-skins from them:

@import "@refractgroup/ui/styles.css";

:root {
  --brand: #DB6E30;   /* primary + hover ramps derive from this */
  --radius: 0.625rem; /* rounded-sm/md/lg/xl scale off this */
}

Dark mode ships in the token layer (add the .dark class to a root element, or use next-themes). Reduced-motion and accessibility are handled inside the components.

What's bundled (you don't install these yourself)

Radix UI (accessibility primitives), Motion (animation), lucide-react (icons), and per-component libraries (recharts, cmdk, sonner, vaul, embla, react-day-picker, react-hook-form, …) are declared as dependencies of this package and installed automatically. You only ever import from @refractgroup/ui.

Maintainer notes

Build from the design-system source: npm install then npm run build (tsup → dist/, ESM + type declarations, each entry marked "use client"). styles/refract-tokens.css is the token layer, generated from the DS globals.css.