DGit UI
Quiet, sharp React components for dashboards and sign-in screens, as a shadcn registry. shadcn add copies the source into your project, so you own it and can change it. React, Tailwind CSS v4, Radix UI, and lucide icons; MIT licensed.
Install
Add the registry to components.json, then add what you need:
{
"registries": {
"@dgit": "https://ui.dgit.co/r/{name}.json"
}
}npx shadcn add @dgit/theme @dgit/use-theme @dgit/account-menu @dgit/app-header
Components and blocks
- 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>'.