GodUI

Motion UI Collection for Modern Interfaces.

Built with React, TypeScript, Tailwind CSS v4, and Motion — distributed as a shadcn registry, so components are copied straight into your project and you own every line.

Documentation · Components · Installation · Contributing

---

Overview

GodUI is a collection of open-source, animated UI components for Design Engineers. Built with React, TypeScript, Tailwind CSS v4, and Motion, and distributed as a shadcn registry — so the components are copied straight into your project and you own every line.

If you already use shadcn/ui, GodUI drops in with the exact same workflow: add the @godui registry, then pull components by name.

✨ What you get

• You own the code. Components are installed into your codebase via the shadcn CLI — not hidden behind a versioned dependency.
• Motion-first. Every component ships with polished, performant animation out of the box.
• shadcn-native. Same install flow as shadcn/ui. If you already use shadcn, just add the @godui registry.
• Tailwind v4 tokens. Themed with CSS variables — light and dark modes work with zero extra config.
• Type-safe. Full TypeScript types for every component and its props.

📦 Installation

GodUI is distributed as a shadcn registry. Components are copied straight into your project — you own the source.

1. Create or set up a project:

pnpm dlx shadcn@latest init

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

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

3. Add any 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

See the full installation guide for typography and dark-mode setup.

🚀 Quick start

Once a component is installed, import and use it:

import { MagicButton } from "@/components/godui/magic-button";

export function Demo() {
  return <MagicButton size="lg">Get Started</MagicButton>;
}

🧩 Components

A growing collection of animated components, organized by category — buttons, text, overlays, navigation, layout, effects, glass, backgrounds, visualizations, inputs, and more.

Browse all components →

🛠️ Local development

GodUI is a pnpm + Turborepo monorepo. Requires Node >= 20.19.0 and pnpm 10.x.

# Clone
git clone https://github.com/LucasBassetti/godui.git
cd godui

# Install dependencies
pnpm install

# Start everything (docs + storybook) in dev
pnpm dev

# Build the shadcn registry from registry.json
pnpm build:registry

# Run tests
pnpm test

# Lint & format with Biome
pnpm check        # check
pnpm check:fix    # check and auto-fix

📁 Project structure

godui/
├── apps/
│   ├── docs/          # Documentation site (Next.js + Fumadocs)
│   └── storybook/     # Component showcase (Storybook)
├── packages/
│   └── components/    # @godui/components — the component library
└── registry.json      # shadcn registry definition (source of truth)

🤝 Contributing

Contributions are welcome — new components, bug fixes, docs, and ideas. Read the Contributing Guide to get started, and please follow our Code of Conduct.

📄 License

MIT © Lucas Bassetti

---

Built by Lucas Bassetti and contributors.

If GodUI helps you ship, consider starring the repo ⭐ · godui.design