CLI

v0.1.3

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

Initialize

Set up tokens, Tailwind, 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

Terminal

npx 7onic init
npx 7onic add button card input

`npx 7onic init`

Initialize 7onic in your project. Detects Tailwind version, installs base dependencies, and creates configuration.

Terminal

npx 7onic init

What it does

Detect Tailwind version (tailwind.config.* exists → v3, CSS-only setup → v4)

Detect package manager (npm / pnpm / yarn / bun)

Install base dependencies (@7onic-ui/tokens, clsx, tailwind-merge, cva)

Add token imports to your CSS file

Create cn() utility function

Write 7onic.json configuration

`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

OptionalSetup Required (only for these components)

toast

Add Toaster to your root layout

// app/layout.tsx
<body>
  {children}
  <Toaster />
</body>

tooltip

Wrap your app with Tooltip.Provider

// app/layout.tsx
<Tooltip.Provider>
  {children}
</Tooltip.Provider>

`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": "src/app/globals.css"
  },
  "aliases": {
    "components": "@/components/ui",
    "utils": "@/lib/utils"
  }
}

tailwind.version

3 | 4

Tailwind CSS version (3 or 4)

tailwind.config

tailwind.config.ts

Tailwind v3 config file path (v4: not needed)

tailwind.css

src/app/globals.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.

accordionalertavatarbadgebreadcrumbbuttonbutton-groupcardchartcheckboxdividerdrawerdropdownicon-buttoninputmetric-cardmodalnavigation-menupaginationpopoverprogressradio-groupsegmentedselectskeletonsliderspinnerswitchtabletabstextareatoasttoggletoggle-grouptooltip

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

✓ 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