CLI

v0.1.14

Copy source files into your project to add components. Modify internal logic and structure directly.

Initialize

Set up 7onic tokens, base deps, and cn() utility

Add Components

Copy .tsx source files to your project

Auto Dependencies

Radix UI and internal deps resolved automatically

TypeScript Required.tsx

TypeScript project required (tsconfig.json). CLI outputs .tsx files only.

Quick Start

Tailwind required first (see Tailwind setup below).

Terminal

npx 7onic init
npx 7onic add button card input

Tailwind setup

7onic CLI does not install Tailwind itself. Pick the command for your environment, then run 7onic init.

Next.js + Tailwind v4

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Need detailed config (postcss / vite / tailwind.config)? See Installation page

Vite + Tailwind v4

Terminal

npm install tailwindcss @tailwindcss/vite

Need detailed config (postcss / vite / tailwind.config)? See Installation page

Next.js + Tailwind v3

Terminal

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

Need detailed config (postcss / vite / tailwind.config)? See Installation page

Vite + Tailwind v3

Terminal

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

Need detailed config (postcss / vite / tailwind.config)? See Installation page

`npx 7onic init`

Auto-setup 7onic — detect environment, install deps, write CSS / utility / config

Terminal

npx 7onic init

What it does

Auto-detect Framework (Next.js / Vite), TypeScript, Tailwind

Auto-set Vite `@/` path alias

Install base deps (`@7onic-ui/tokens`, etc.)

Add token imports to CSS file

Clean up Next.js / Vite boilerplate (`.bak` backup)

Generate `cn()` utility and `7onic.json`

What 7onic init does NOT do

Tailwind itself is your responsibility — see the Tailwind setup cards above

Install Tailwind packages
Generate Tailwind config files (`postcss.config`, `tailwind.config`)
Register Vite plugin (`tailwindcss()` in `vite.config.ts`)

`npx 7onic add`

Copy component source files to your project. Dependencies are resolved automatically.

Terminal

npx 7onic add button
npx 7onic add button card input modal
npx 7onic add --all

Tailwind v4

When adding components via CLI in Tailwind v4 projects (Next.js / Vite), the @source directive is auto-injected into your CSS file. No manual setup required.

OptionalSetup Required (only for these components)

toast

Add Toaster to your root layout

// app/layout.tsx (Next.js)
<body>
  {children}
  <Toaster />
</body>

// src/main.tsx (Vite)
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
    <Toaster />
  </StrictMode>
)

tooltip

Wrap your app with TooltipProvider

// app/layout.tsx (Next.js)
<body>
  <TooltipProvider>
    {children}
  </TooltipProvider>
</body>

// src/main.tsx (Vite)
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <TooltipProvider>
      <App />
    </TooltipProvider>
  </StrictMode>
)

`7onic.json`

Created by init. Controls where components are placed and how Tailwind is configured.

{
  "$schema": "https://7onic.design/schema/7onic.json",
  "tailwind": {
    "version": 4,
    "css": "app/globals.css"
  },
  "aliases": {
    "components": "@/components/ui",
    "utils": "@/lib/utils"
  }
}

tailwind.version

3 | 4

Tailwind CSS version (3 or 4)

tailwind.config

tailwind.config.js

Tailwind v3 config file path (v4: not needed)

tailwind.css

Next.js: app/globals.css
Vite: src/index.css

Main CSS file for token imports

aliases.components

@/components/ui

Where components are copied to

aliases.utils

@/lib/utils

Where cn() utility lives

Available Components

Run npx 7onic add --all to add all components at once.

Chart aliases: bar-chart, line-chart, area-chart, pie-chart all resolve to chart.

Dependency Resolution

When a component depends on another, both are copied automatically.

add button

button+button-group

add button-group

button-group+button

add icon-button

icon-button+button+button-group

add input

input+field

add chart

chart(bar / line / area / pie)

add pie-chart

chart(alias)

add card

card

Flags

--tailwind v3|v4Set Tailwind version for init (default: auto-detect)

--allAdd all components (recharts opt-out prompt)

--yes, -ySkip confirmation prompts (use defaults)

--overwriteOverwrite existing files

npm vs CLI

npm

npm install @7onic-ui/react @7onic-ui/tokens

✓ Zero setup — import and use immediately
✓ Automatic updates via npm
✓ Best for using components as-is

CLI

npx 7onic add button

✓ Full source code ownership
✓ Modify internal logic, props, and structure
✓ Best when you need to change how components work