Skip to content

getting-started.md

Latest commit

 

History

History
128 lines (87 loc) · 2.41 KB

getting-started.md

File metadata and controls

128 lines (87 loc) · 2.41 KB
Raw

Getting started

Requirements

  • Node.js >=20 (or Bun with a Node-compatible runner)
  • A project directory (CLI can create a minimal package.json on init)
  • Network access to a registry CDN, or a local registry URL

No Vite, React, or specific bundler is required.

Install / run

You do not need a global install. Prefer one-shot runners:

# npm
npx ui8kit@latest --help

# Bun
bunx ui8kit@latest --help

# After adding as a devDependency
npm i -D ui8kit
npx ui8kit --help

Global (optional):

npm i -g ui8kit
ui8kit --version

First project in five minutes

1. Initialize

From your app root:

npx ui8kit init --yes --framework react --dir src

This creates:

  • ui8kit.config.json — project contract
  • Canonical folders under src/ (lib, utils, components/ui, blocks, …)
  • Optionally pulls core registry items (registry:lib / utils / variants) when the CDN is reachable

Skip core fetch (offline / custom later):

npx ui8kit init --yes --framework none --dir src --skip-core

2. Inspect environment

npx ui8kit info
npx ui8kit info --cdn
npx ui8kit info --json

3. Browse the registry

npx ui8kit list
npx ui8kit list --json

4. Install a component

npx ui8kit add button

Files are written under {dir}/… (default src/), preserving nested paths from the registry item target / path.

Preview without writing:

npx ui8kit add button --dry-run

5. Compare with upstream

npx ui8kit diff button
npx ui8kit diff --json

Point Tailwind at kit files

Because sources live in your repo, include the install root in Tailwind content / @source:

// tailwind.config.js (v3)
content: ["./src/**/*.{js,ts,jsx,tsx,svelte,vue}"]
/* Tailwind v4 */
@source "../src/**/*.{js,ts,jsx,tsx,svelte,vue}";

Adjust paths if dir is web/src or internal.

Global CLI flags

Available on every command:

Flag Meaning
-c, --cwd <dir> Run as if started in that directory
-v, --verbose Extra diagnostic logs
--no-cache Bypass ~/.ui8kit/cache for registry fetches

Example:

npx ui8kit --cwd ./apps/web add button --no-cache

Next steps