@arki/ui

React component library for ARKI apps: Base UI primitives styled with Tailwind v4 semantic tokens. Forms, overlays, navigation, data display, charts — one import per component.

Source-first package. @arki/ui ships TypeScript source (src/*.tsx) as its runtime entry plus .d.ts declarations. Your bundler compiles it: Vite, TanStack Start, Next.js and Bun all do. Plain Node without a bundler is not supported.

Installation

bun add @arki/ui @arki/design-systems @arki/theme react react-dom

Peer dependencies: react and react-dom 19.

Setup

Components read semantic tokens (--background, --primary, --muted, …) from a design system. Pick one from @arki/design-systems and let Tailwind see the component classes:

/* src/styles/global.css */
@import 'tailwindcss';
@import '@arki/design-systems/atelier/fonts.css';
@import '@arki/design-systems/atelier/tokens.css';
@import '@arki/design-systems/atelier/theme-bridge.css';
 
/* Tailwind must scan the component sources; adjust the path to where the package is installed. */
@source '../node_modules/@arki/ui/src';

Usage

import { Button } from '@arki/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@arki/ui/card';
import { cn } from '@arki/ui/cn';
 
export function Example() {
  return (
    <Card className={cn('max-w-md')}>
      <CardHeader>
        <CardTitle>Tidal Mug</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Add to cart</Button>
      </CardContent>
    </Card>
  );
}

Every component is its own subpath (@arki/ui/dialog, @arki/ui/select, @arki/ui/table, @arki/ui/chart, …). See the exports map in package.json for the full list.

Related packages

• @arki/design-systems — tokens, Tailwind bridge and fonts for atelier, workbench, arena.
• @arki/theme — light / dark / system provider and no-flash script.
• @arki/icons — icon sets behind one React entry point.
• @arki/react-hooks — the hooks the components use, reusable on their own.

Benchmarks

Bundle size of the same components from @arki/ui and from popular React component libraries. Mantine, MUI and Radix Themes are the common full-featured choices.

Measured on Node 22.13.1 (Darwin 27.0.0 arm64, Apple M2 Max (12 cores)) · @arki/bench 0.0.1 (mitata 1.0.34) · publish, seed 1592639052 · commit 34146416b3 (uncommitted changes) · 2026-10-13.

Versions: @arki/bench 0.0.1 · @arki/ui 0.1.4 · @mantine/core 7.17.4 · @mui/material 9.5.0 · @radix-ui/themes 3.3.0 · mitata 1.0.34.

Button, JavaScript only

Rows marked different contract do other work: they are measured and shown, never ranked.

Dialog, JavaScript only

Rows marked different contract do other work: they are measured and shown, never ranked.

Form set (Button, Input, Select, Checkbox), JavaScript only

Rows marked different contract do other work: they are measured and shown, never ranked.

Button, complete styled

Dialog, complete styled

Form set (Button, Input, Select, Checkbox), complete styled

Notes

• Styling is not equal, so there are two kinds of group. JavaScript only counts the components without styles; a rival that needs a stylesheet or styles itself at runtime is measured but never ranked (differs). complete styled adds the CSS a user must also ship, and ranks everything.
• @arki/ui is Base UI primitives styled with Tailwind classes. Its CSS comes from your app Tailwind build. In the complete styled groups it is a Tailwind v4 build of the classes found in the measured component files (found by Tailwind’s own scanner), with preflight and the workbench tokens and theme bridge. Fonts are left out. A real app adds the classes of its own code on top.
• Mantine and Radix Themes ship one stylesheet for the whole library (styles.css), not a per-component one, so their complete rows include the CSS of every component. MUI styles components at runtime with Emotion, so its JavaScript includes the styling engine and it has no stylesheet.
• Mantine Modal and MUI/Radix Dialog are the nearest equivalents of the @arki/ui Dialog parts.

Reproduce: bunx arki-bench run --profile publish in the package directory.

License

MIT