7onicDESIGN SYSTEM

Installation

How to install and use 7onic UI components in your project.

Install

@7onic-ui/react

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. After installing, configure the imports below. Get Tailwind

Import

Tailwind v4

No config needed
your-styles.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";

The @source directive adds component Tailwind classes to the scan target. Adjust the path to match your project structure.

Tailwind v3

CSS + Preset
your-styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@import '@7onic-ui/tokens/css/all.css';
Individual imports
@tailwind base;
@tailwind components;
@tailwind utilities;

@import '@7onic-ui/tokens/css/variables.css';
@import '@7onic-ui/tokens/css/themes/light.css';
@import '@7onic-ui/tokens/css/themes/dark.css';
tailwind.config.js
module.exports = {
  presets: [
    require('@7onic-ui/tokens/tailwind/v3-preset')
  ],
  content: [
    './node_modules/@7onic-ui/react/dist/**/*.{js,mjs}',
  ],
}

The preset uses theme.extend, so your existing Tailwind classes are preserved. Semantic color opacity modifiers (bg-primary/50 etc.) are also supported in v3 via RGB channel variables.

Body StyleRecommended
Add to your body element. Ensures correct background and text color across light and dark modes.
layout.html
<body class="bg-background text-foreground">
Next.js App Router: When using as a client component, add 'use client' at the top of your file.

Fonts

Aa

Fonts Setup Guide

Font installation and multi-language configuration

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

Usage

How to import and use components. Two import styles are supported: Namespace and Named.

Namespace (Recommended)

Recommended
namespace.tsx
import { Card, Button } from '@7onic-ui/react'

<Card>
  <Card.Header>
    <Card.Title>Project Settings</Card.Title>
    <Card.Description>Manage your project configuration.</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>Content here</p>
  </Card.Content>
  <Card.Footer>
    <Button variant="outline">Cancel</Button>
    <Button>Save</Button>
  </Card.Footer>
</Card>

Import only the root component and access sub-components via dot notation.

Named Export (Compat)

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

Traditional Named Exports are still supported. Existing code will continue to work.

Standalone components (Button, Input, Badge, etc.) only need a single import — no Namespace required.

Requirements

PackageVersion
react≥ 18.0.0
react-dom≥ 18.0.0
tailwindcssv3 or v4
@7onic-ui/tokensRequired (install together)

Package Contents

Composed of two packages. Components and tokens can be managed separately.

@7onic-ui/react

UI component library — dist/ distribution

index.js
CJS
index.mjs
ESM
index.d.ts
Types
import { Button, Card, Modal } from '@7onic-ui/react'
@7onic-ui/tokens

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

CSS

4

variables, light, dark, all

Tailwind

3

v3-preset, v4-theme, v4

JS / Types

4

CJS, ESM, .d.ts, JSON

CLI

1

sync-tokens

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