Get started
DGit UI is a shadcn registry: shadcn add copies the source into your project. It expects a shadcn project (a components.json and cn in lib/utils) on Tailwind v4.
1. Add the registry
In components.json:
{
"registries": {
"@dgit": "https://ui.dgit.co/r/{name}.json"
}
}
2. Add the theme and what you need
npx shadcn add @dgit/theme @dgit/use-theme @dgit/account-menu @dgit/app-header
3. Wire the theme
Import the theme after Tailwind, and set the saved light or dark choice before the first paint:
@import "tailwindcss";
@import "./dgit.css";import { themeScript } from "~/lib/theme";
<head>
<script dangerouslySetInnerHTML={{ __html: themeScript }} />
</head>
Everything in the registry
- Theme: Neutral gray scale (light and dark), shadcn's color names on it, type scale, menu animation. Import after Tailwind.
- useTheme: System, light or dark, kept in localStorage and applied as <html data-theme>. Includes the first-paint script.
- Button: Pill buttons, 40px tall by default.
- Menu: A floating panel from a trigger: 12px corners, 36px rows, grows from the trigger. No positioning library.
- Account menu: Avatar button and menu: name and email, a system/light/dark switch, your links, log out.
- Page: PageHeader, Section, List (rounded rows), Notice, and ago() for relative times.
- Copy: CopyButton and CopyField (a monospace value with a copy button).
- Segmented: Two or three choices in one small pill.
- App header: Dashboard top bar: brand, pill navigation, and a slot for the account menu.
- Sidebar layout: Dashboard with a sidebar: drill-in groups and route layers that slide in with a back row, a top bar with a scope switcher and breadcrumbs, a drawer on phones.
- Sign-in page: Centered 384px column, 30px title, stacked 40px pill choices, code field, 'Signing in to <app>'.