Installation

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

Note: GodUI installs exactly like shadcn/ui. If you already use shadcn, skip to 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 registries

Add both GodUI registries to the registries field of your components.json. Core components depend on @godui/godui-motion (the shared easings, keyframes and FLIP hook), so the @godui entry is required:

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

The Lab registry used to be called Extras. If your components.json still has "@godui-extras": "https://godui.design/r/extras/{name}.json", it keeps working: those URLs serve the same items as /r/lab.

3. Add components

Install any component by name:

pnpm dlx shadcn@latest add @godui/dialog

This overwrites components/ui/dialog.tsx with the animated version (same exports and props as shadcn/ui, so existing imports keep working) and merges the godui-motion tokens into your global stylesheet. Components it depends on, like @godui/button, come along.

Components from Lab, GodUI's expressive, experimental pieces beyond the shadcn catalog, install the same way from the second registry:

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

Typography (bring your own font)

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

: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

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

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

: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>

Then browse the Components.