Setup Guide
Getting Started
Choose your framework, install packages with your preferred package manager, import tokens, and ship your first screen in minutes.
Install
Add `@glinui/ui` and `@glinui/tokens`.
Import Tokens
Load `theme.css` once at app entry.
Ship Components
Compose atoms and primitives fast.
Base Install
pnpm add @glinui/ui @glinui/tokensRegistry Workflow
Prefer file ownership instead of package imports? Use the Glin CLI registry flow to copy component source into your app and customize directly.
Add from Registry
Copies component files into your project.
pnpm dlx @glinui/cli@latest add buttonpnpm dlx @glinui/cli@latest add data-tableOwnership Pattern
Source is local, so edits are yours.
Shell
1# Adds source files directly to your app2pnpm dlx @glinui/cli@latest add button34# Example result:5# components/ui/button.tsx6# lib/utils.ts
Framework Setup
Next.js
App Router with full Glin UI component support
1. Create project
pnpm create next-app@latest my-app -- --ts --tailwind --eslint --app2. Install packages
pnpm add @glinui/ui @glinui/tokens3. Import tokens
CSS
1/* app/globals.css */2@import "@glinui/tokens/theme.css";
4. Render your first UI
TSX
1// app/page.tsx2import { Button } from "@glinui/ui"34export default function Page() {5 return (6 <main className="p-10">7 <Button variant="glass">Ship it</Button>8 </main>9 )10}
5. Start development server
pnpm devRecommended for production apps using the full React component library.
Sanity Checklist
- Tokens are imported once at the app root (`theme.css`).
- First component renders without custom CSS overrides.
- Package-manager command tabs match your local tooling.