Getting started

1-Command Automatic Setup (Recommended)

Scaffold and verify @shavin/ui configuration in any React or Next.js app in one command. The CLI automatically installs the package, injects Tailwind presets, imports global CSS, and configures VS Code snippets:

npx @shavin/ui init

Manual Setup (Four Steps)

Install "@shavin/ui"
Configure Tailwind Preset
Import Styles
Verify Setup

1. Install

npm i @shavin/ui

2. Tailwind preset

Add the @shavin/ui/tailwind-preset to your tailwind.config.ts so your application resolves all semantic token utilities:

// tailwind.config.ts
import preset from "@shavin/ui/tailwind-preset";

export default {
  presets: [preset],
  content: ["./src/**/*.{ts,tsx}", "./node_modules/@shavin/ui/src/**/*.{ts,tsx}"],
};

3. Import Styles

Add the design system stylesheet import to your project's root CSS file:

/* Add to your existing app stylesheet (e.g. globals.css / global.css) */
@import "@shavin/ui/styles.css";

4. Verify

Run the diagnostic check to verify that all Tailwind presets and stylesheets are wired correctly:

npx shavin-ui-check-setup

Need custom branding typography? Check our dedicated Custom Fonts Guide to map custom display & body font variables.