dnbls/ui

Opinionated components built on Base UI and designed for copy-paste.

Goals

Ship fast with polished defaults
Own the code, not the dependency
Accessible primitives via Base UI
Semantic tokens over hardcoded values

Stack

Base UI — unstyled, accessible primitives
Tailwind CSS v4 — utility-first styling
CVA — variant management
Hugeicons — icon set

Getting Started

Create a Next.js app with Tailwind v4, then install the theme:

1. Install theme, fonts, and provider

pnpm dlx shadcn@latest add https://ui.dnbls.com/r/theme.json

pnpm dlx shadcn@latest add https://ui.dnbls.com/r/fonts.json

pnpm dlx shadcn@latest add https://ui.dnbls.com/r/theme-provider.json

2. Update globals.css

@import "tailwindcss";
@import "../styles/theme.css";

3. Update layout.tsx

import { fontSans, fontMono } from "@/lib/fonts";
import { ThemeProvider } from "@/components/theme-provider";
import "./globals.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`${fontSans.variable} ${fontMono.variable} font-sans`}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

4. Add components

pnpm dlx shadcn@latest add https://ui.dnbls.com/r/button.json

Browse

Use the sidebar to explore foundations and components. The Kitchen Sink shows components composed together.