Glin UI

Setup in five steps

Getting Started

Install the package, import the tokens, add the Tailwind preset, and render your first component. Commands follow the package manager you pick.

Works with your stack

Brand marks belong to their owners and are shown for compatibility, via thesvg.org.

Framework Setup

Choose your framework. The steps below update to match.

App Router. Import the theme CSS before the Tailwind directives.

  1. Install

    Skip this if you already have a project. Otherwise create one, then add the packages.

    pnpm create next-app@latest my-app -- --ts --tailwind --eslint --app
    pnpm add @glinui/ui @glinui/tokens

  2. Import tokens

    Load theme.css once. It defines every CSS variable the components and the preset read.

    app/globals.css
    @import "@glinui/tokens/theme.css";
    


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

  3. Add the Tailwind preset

    Register @glinui/tokens/tailwind-preset so utilities such as bg-surface-1, shadow-elev-2 and rounded-card resolve to the tokens.

    // tailwind.config.ts
    import type { Config } from "tailwindcss"
    import glinPreset from "@glinui/tokens/tailwind-preset"
    


    const config: Config = {
      presets: [glinPreset],
      darkMode: "class",
      content: [
        "./src/**/*.{ts,tsx}",
        "./node_modules/@glinui/ui/dist/**/*.{js,mjs}"
      ]
    }
    


    export default config
    <section className="rounded-card border border-line-soft bg-surface-1 p-6 shadow-elev-2">
      <h2 className="text-h3 text-foreground">Tokens through Tailwind</h2>
      <p className="text-muted">bg-surface-1, shadow-elev-2, rounded-card</p>
    </section>

  4. Use a component

    app/page.tsx
    // app/page.tsx
    import { Button } from "@glinui/ui"
    


    export default function Page() {
      return (
        <main className="p-10">
          <Button>Ship it</Button>
        </main>
      )
    }

  5. Copy for AI

    Every component page has a Copy prompt button that gives your editor agent the install command, props and a usage example. Animations have prompts too.

Registry Workflow

Prefer owning the source instead of importing a package? Use the CLI registry to copy a component into your app and edit it directly.

Add from Registry

pnpm dlx @glinui/cli@latest add button
pnpm dlx @glinui/cli@latest add data-table

Ownership pattern

# Adds source files directly to your app
pnpm dlx @glinui/cli@latest add button



# Example result:
# components/ui/button.tsx
# lib/utils.ts

Registry vs package

Comparison of the package and registry install paths
PackageRegistry
How you get codeImport from @glinui/uiCLI copies source into your repo
UpdatesBump the package versionRe-run the CLI and merge the diff
CustomizationProps, variants, and Tailwind classesEdit the files directly
Best forFast start, shared look across appsHeavy customization, full ownership

Troubleshooting

Components render unstyled or without shadows

The theme CSS is missing or loaded after Tailwind. Import @glinui/tokens/theme.css once at the app entry, and in Next.js place the @import line above the @tailwind directives.

Tailwind classes like bg-surface-1 or shadow-elev-2 do nothing

Add the preset to tailwind.config and make sure theme.css is imported so the variables exist. The preset only maps utilities to CSS variables, it does not define them.

Classes used inside @glinui/ui are purged in production

Add ./node_modules/@glinui/ui/dist/**/*.{js,mjs} to the Tailwind content array so utilities used by the components are generated.

bg-surface-1/50 loses its opacity

Opacity modifiers use color-mix, which needs a browser with color-mix support. Update the browser target, or use a plain surface token.

Dark mode does not switch

Tokens switch on the .dark class on the html element. Set darkMode: "class" in Tailwind and toggle the class from your theme provider.

Keep going