@arki/ui

Install

bun add @arki/[email protected]

Other package managers

npm install @arki/[email protected]
pnpm add @arki/[email protected]
yarn add @arki/[email protected]

Release health for @arki/[email protected]

Doc examples

No example report was recorded for this version.

Open gaps

6 release checks fail · 1 gap was found by demos

checkfile-llms-txt
checkfile-agents-md
checkfile-agent-guide
checkreadme-h2-order
checkpkg-engines
checkfiles-ship-dist-docs
No portable Tailwind consumption contract: a consumer must @source the package's src by f… found by drop-studio

Used by demos

No demo uses this package yet.

Runtimes

No engines field, so no runtime requirement is declared.

Benchmarks

No benchmarks are published for this version.

README

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.

@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.

License

MIT

Public imports

This version has no API index.