Installation

Install as a package and customize with props and tokens. Get automatic updates via npm update.

Install

@7onic-ui/reactv0.3.6

Terminal

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

# yarn
yarn add @7onic-ui/react @7onic-ui/tokens

# pnpm
pnpm add @7onic-ui/react @7onic-ui/tokens

Tailwind required: Tailwind v3 or v4 is required. Pick your environment in the Setup section below.

Setup

Set up for your environment in the order below.

If Tailwind is already set up, only the Edit CSS step (v3: also merge tailwind.config presets/content)

Vite + Tailwind v4

Step 1. Install the Tailwind packages

Terminal

npm install tailwindcss @tailwindcss/vite

Step 2. Add one import line and one plugins entry to your existing vite.config.ts (do not overwrite the whole file).

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite' // ← add this line

export default defineConfig({
  plugins: [react(), tailwindcss()], // ← add tailwindcss()
})

Step 3. Vite's default styles (demo only) can conflict with UI libraries. If you haven't customized them, clean up the example blocks below.

src/index.css— View blocks to delete

src/index.css

:root {
  font: 18px/145% system-ui, sans-serif;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* dark color tokens */
  }
}

#root {
  width: 1126px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

body {
  margin: 0;
}

h1, h2 {
  font-family: system-ui, sans-serif;
  font-weight: 500;
  color: var(--text-h);
}

/* + h1, h2 (size), p, code etc. — delete every other element/universal rule */

Step 4. Add the imports below to your CSS file

src/index.css

@import "tailwindcss";
@import '@7onic-ui/tokens/tailwind/v4.css';

@source "../node_modules/@7onic-ui/react/dist";

Individual imports

@import "tailwindcss";
@import '@7onic-ui/tokens/css/variables.css';
@import '@7onic-ui/tokens/css/themes/light.css';
@import '@7onic-ui/tokens/css/themes/dark.css';
@import '@7onic-ui/tokens/tailwind/v4-theme.css';

@source "../node_modules/@7onic-ui/react/dist";

Next.js + Tailwind v4

Step 1. Install the Tailwind packages

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Step 2. Create a new file postcss.config.mjs in the same folder as your package.json and paste the code below

postcss.config.mjs

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

Step 3. Add the imports below to your CSS file

app/globals.css

@import "tailwindcss";
@import '@7onic-ui/tokens/tailwind/v4.css';

@source "../node_modules/@7onic-ui/react/dist";

Individual imports

@import "tailwindcss";
@import '@7onic-ui/tokens/css/variables.css';
@import '@7onic-ui/tokens/css/themes/light.css';
@import '@7onic-ui/tokens/css/themes/dark.css';
@import '@7onic-ui/tokens/tailwind/v4-theme.css';

@source "../node_modules/@7onic-ui/react/dist";

Tips. If your existing styles get overridden or rendering breaks, wrap the conflicting element/universal rules in `@layer base { ... }`.

app/globals.css— View example

app/globals.css

@layer base {
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
}

Vite + Tailwind v3

Step 1. Install Tailwind v3 with related packages, then run init -p to auto-generate the config files

Terminal

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

Step 2. Add the 7onic preset and content paths to your tailwind.config.js.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  presets: [
    require('@7onic-ui/tokens/tailwind/v3-preset'),
  ],
  content: [
    './node_modules/@7onic-ui/react/dist/**/*.{js,mjs}',
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
}

Step 3. Vite's default styles (demo only) can conflict with UI libraries. If you haven't customized them, clean up the example blocks below.

src/index.css— View blocks to delete

src/index.css

:root {
  font: 18px/145% system-ui, sans-serif;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* dark color tokens */
  }
}

#root {
  width: 1126px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

body {
  margin: 0;
}

h1, h2 {
  font-family: system-ui, sans-serif;
  font-weight: 500;
  color: var(--text-h);
}

/* + h1, h2 (size), p, code etc. — delete every other element/universal rule */

Step 4. Add the imports below to your CSS file

src/index.css

@import '@7onic-ui/tokens/css/all.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

Individual imports

@import '@7onic-ui/tokens/css/variables.css';
@import '@7onic-ui/tokens/css/themes/light.css';
@import '@7onic-ui/tokens/css/themes/dark.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

Next.js + Tailwind v3

Step 1. Install Tailwind v3 with related packages, then run init -p to auto-generate the config files

Terminal

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

Step 2. Add the 7onic preset and content paths to your tailwind.config.js.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@7onic-ui/tokens/tailwind/v3-preset'),
  ],
  content: [
    './node_modules/@7onic-ui/react/dist/**/*.{js,mjs}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
}

Step 3. Add the imports below to your CSS file

app/globals.css

@import '@7onic-ui/tokens/css/all.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

Individual imports

@import '@7onic-ui/tokens/css/variables.css';
@import '@7onic-ui/tokens/css/themes/light.css';
@import '@7onic-ui/tokens/css/themes/dark.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

Official docs: tailwindcss.com

Fonts

Fonts Setup Guide

Font installation and multi-language configuration

Components use the token font-sans. Configure fonts in Design Tokens > Installation > Fonts.

Usage

Import & Usage

example.tsx

import {
  Card, CardHeader, CardTitle, CardDescription,
  CardContent, CardFooter, Button,
} from '@7onic-ui/react'

<Card>
  <CardHeader>
    <CardTitle>Project Settings</CardTitle>
    <CardDescription>Manage your project configuration.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Content here</p>
  </CardContent>
  <CardFooter>
    <Button variant="outline">Cancel</Button>
    <Button>Save</Button>
  </CardFooter>
</Card>

Requirements

Package	Version
`react`	≥ 18.0.0
`react-dom`	≥ 18.0.0
`tailwindcss`	v3 or v4
`@7onic-ui/tokens`	Required (install together)

Package Contents

Two packages — components and tokens can be managed separately

@7onic-ui/react

UI component library — dist/ distribution

index.js / .mjs / .d.tsCJS + ESM + Types

Main

chart.js / .mjs / .d.ts@7onic-ui/react/chart

Chart

llms.txtAI Integration

import { Button, Card, Modal } from '@7onic-ui/react'import { Chart } from '@7onic-ui/react/chart'

@7onic-ui/tokens

Design tokens — CSS variables, Tailwind presets, JS, CLI, AI

CSS

variables, light, dark, all

Tailwind

v3-preset, v4-theme, v4

JS / Types

CJS, ESM, .d.ts, JSON

CLI / AI

sync-tokens, llms.txt

figma-tokens.jsonSSOT→ npx sync-tokens auto-generates all files

figma-tokens.json → npx sync-tokens auto-generates all files

Package Contents

Token Sync

Customize your design

Changes to tokens are automatically reflected in component styles.

FigmaJSONsync-tokensCSS + Components

$ npx sync-tokensToken Sync