Start building.

Use antiflex/ui in your React app, or explore the full workspace.

Copy components into your project

Start with React 19 and Tailwind CSS 4 configured in your project. The antiflex installer copies editable source, tokens, styles, and self-hosted fonts into your app. Node.js 22.18 or newer is required.

The current alpha includes all 50 component families. Run the versioned antiflex installer:

This website previews the latest workspace styling and motion. The published alpha retains its released styles; build from the current workspace below to use the updates before the next npm release.

npx antiflex-ui@0.1.0-alpha.2 init --css src/index.css
npx antiflex-ui@0.1.0-alpha.2 add button text-field

Prefer a local development dependency? Download antiflex-ui 0.1.0-alpha.2, then install it in your app:

npm install -D antiflex-ui@0.1.0-alpha.2
npx antiflex init --css src/index.css
npx antiflex add button text-field

Initialization installs local tokens, Tailwind mappings, component styles, and Fontsource dependencies for DM Sans, Anybody, and Space Mono. Use --skip-install if you prefer to install font dependencies yourself.

'use client';

import { Button } from './components/antiflex/button';
import { TextField } from './components/antiflex/text-field';

export function ProjectForm() {
  return <form onSubmit={(event) => event.preventDefault()}>
    <TextField label="Project name" name="project" required />
    <Button type="submit">Save changes</Button>
  </form>;
}

Defaults are src/components/antiflex and src/styles/antiflex when your app has a src directory; otherwise they are components/antiflex and styles/antiflex. Configuration is saved in antiflex.json.

Choose and own your source

npx antiflex list
npx antiflex add app-shell
# AppShell includes its Button dependency
npx antiflex add --all
npx antiflex add button --dry-run

These commands use the development dependency installed above. Edit copied components freely. Repeated installation skips identical files and preserves customized dependencies. Replacing an edited component requires --force; the previous file is backed up under .antiflex/backups.

Set data-theme="light" or data-theme="dark" on your document or a local theme boundary. CSS variables use --af-; component classes use af-. Semantic utilities include bg-surface, text-foreground, and border-border.

Run the workspace locally

Use Node.js 24 and pnpm 10. From the repository root:

corepack enable
pnpm install
pnpm dev

Open http://localhost:3000. Explore /examples for the gallery and /demo for the connected SaaS workspace.

Use workspace packages

Within this pnpm workspace, add @antiflex/ui and @antiflex/tokens as workspace:* dependencies. These are private workspace packages; the installer copies their source for independent applications.

import { Button } from '@antiflex/ui';
import '@antiflex/ui/styles.css';

@import "tailwindcss";
@import "@antiflex/tokens/tailwind";
@import "@antiflex/ui/styles.css";

Build an installer from source

pnpm installer:pack
# artifacts/antiflex-ui-0.1.0-alpha.2.tgz

Explore and verify

Open Storybook to inspect component states, controls, and both themes.

pnpm storybook
# http://localhost:6006
pnpm check
pnpm installer:smoke