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, skip straight to step 2.

1. Create project

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

bash

pnpm dlx shadcn@latest init

2. Add components

Add any GodUI component with its registry URL — no configuration required:

bash

pnpm dlx shadcn@latest add https://godui.design/r/magic-button.json

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

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.

css

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:

bash

pnpm add geist

tsx

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>
  );
}

css

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

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

Browse the Magic Button docs for a live preview.

Installation

1. Create project

2. Add components

Typography (bring your own font)

Optional: Geist (the GodUI brand font)

Dark mode

On this page