GodUI

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 an open-source collection of animated components built with React, TypeScript, Tailwind CSS v4 and Motion. It has two parts:

• Components: animated versions of the shadcn/ui components, with the same files, exports and props. Their motion animates only transform, opacity and filter, so it runs on the GPU.
• Lab: expressive, experimental components beyond the shadcn catalog.

GodUI is distributed as a shadcn registry. The CLI copies each component into your project, so you own the source. If you already use shadcn/ui, add the @godui registry and install components by name.

What you get

• You own the code: the shadcn CLI copies components into your codebase instead of installing a versioned dependency.
• Drop-in for shadcn/ui: installing @godui/dialog replaces components/ui/dialog.tsx with an animated version, and existing imports keep working.
• GPU-only motion: core components animate only transform, opacity and filter. CI fails any change that animates layout or paint.
• Tailwind v4 tokens: themed with CSS variables. Light and dark modes work without extra config.
• TypeScript: every component and its props are typed.

Installation

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

1. Create or set up a project:

pnpm dlx shadcn@latest init

2. Add the GodUI registries to the registries field of your components.json (one-time setup). @godui serves the animated shadcn/ui drop-ins; @godui-lab serves Lab, GodUI's expressive, experimental pieces beyond the shadcn catalog:

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

Lab used to be called Extras: an existing "@godui-extras" entry pointing at https://godui.design/r/extras/{name}.json keeps working.

3. Add any component by name:

pnpm dlx shadcn@latest add @godui/dialog

This replaces components/ui/dialog.tsx with the animated version and merges the godui-motion tokens into your global stylesheet. Lab components install the same way from the second registry, into components/godui/:

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

To skip step 2, install with the full registry URL: pnpm dlx shadcn@latest add https://godui.design/r/lab/magic-button.json

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

Quick start

Core components keep shadcn's import paths:

import { Button } from "@/components/ui/button";

export function Demo() {
  return <Button>Get Started</Button>;
}

Lab components import from components/godui/:

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

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

Components

Components covers the shadcn/ui catalog: accordion, dialog, dropdown menu, select, sidebar, tabs and the rest. Lab groups its pieces by category: buttons, text, overlays, navigation, layout, effects, glass, backgrounds, visualizations, inputs, AI and collaboration.

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: animated shadcn/ui drop-ins (core)
│   └── lab/           # @godui/lab: expressive, experimental pieces (maintained as-is)
├── registry.json      # core shadcn registry definition (source of truth)
└── registry-lab.json  # Lab registry, served from /r/lab (/r/extras still works)

Contributing

New components, bug fixes, docs and ideas are welcome. Read the Contributing Guide and follow the Code of Conduct.

License

MIT © Lucas Bassetti

Star History

---

Built by Lucas Bassetti and contributors.

Star the repo · godui.design