Installation

GodUI is a design system built with Tailwind CSS v4 and React, distributed as a shadcn registry. Components are copied straight into your project — you own the source.

Note: We have the exact same installation process as shadcn/ui. If you already use shadcn, you only need to add the @godui registry (step 2).

1. Create project

Run the init command to create a new project or to set up an existing one:

pnpm dlx shadcn@latest init

2. Add the GodUI registry

Add the @godui namespace to the registries field of your components.json (one-time setup):

components.json

{
  "registries": {
    "@godui": "https://godui.design/r/{name}.json"
  }
}

3. Add components

You can now add any GodUI component by name:

pnpm dlx shadcn@latest add @godui/magic-button

This copies the component into components/godui/ and merges the GodUI theme tokens and component styles into your global stylesheet automatically.

Prefer zero configuration? Skip step 2 and install with the full registry URL: pnpm dlx shadcn@latest add https://godui.design/r/magic-button.json.

Typography (bring your own font)

GodUI is font-agnostic. The theme ships a neutral system font stack as the default, so components look right with zero setup. To use any font, override --font-sans (and optionally --font-mono / --font-serif) in your global stylesheet — everything inherits it.

globals.css

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

Optional: Geist (the GodUI brand font)

The docs site uses Geist. To match it in a Next.js app, install geist and point --font-sans / --font-mono at its variables:

pnpm add geist

app/layout.tsx

import { GeistMono, GeistSans } from "geist/font";

export default function RootLayout({ children }) {
  return (
    <html className={`${GeistSans.variable} ${GeistMono.variable}`}>
      <body>{children}</body>
    </html>
  );
}

globals.css

:root {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

Dark mode

The theme supports light and dark via the .dark class on a parent element (typically <html>). Toggle it with your framework's theme switcher.

<html class="dark">
  <!-- dark theme tokens apply -->
</html>

Browse the Magic Button docs for a live preview.