Prodular UI

Installation

One command sets up a project. Every component lands in your repo as source code, ready to read and change.

  1. Run init

    In any React project with Tailwind CSS v4. It sets up shadcn with Base UI if the project does not have it yet, adds the Prodular registry, installs the tokens and styles, and wires the theme font and data-theme into your layout.

    npx prodular-ui init

  2. Add your license

    Free components install without it. The token is saved in your user config and in the project's .env.local.

    npx prodular-ui login

  3. Add components and blocks

    npx prodular-ui add prompt-input data-table dashboard

    See everything with npx prodular-ui list. Switch theme any time with npx prodular-ui theme iris.

Without the CLI

Prodular UI uses the open shadcn registry format, so the shadcn CLI works too. Add the registry to components.json, then add items with the @prodular prefix.

components.json
{  "registries": {    "@prodular": {      "url": "https://ui.prodular.co/r/{name}.json",      "headers": { "Authorization": "Bearer ${PRODULAR_UI_TOKEN}" }    }  }}
npx shadcn@latest add @prodular/prodular-ui @prodular/button

Import the stylesheet after Tailwind and set a theme on the root element.

app/globals.css
@import "tailwindcss";@import "tw-animate-css";@import "shadcn/tailwind.css";@import "../styles/prodular-ui.css";
app/layout.tsx
import { Geist, Geist_Mono } from "next/font/google"
const geist = Geist({ subsets: ["latin"], variable: "--font-geist" })const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono" })
export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en" data-theme="graphite" className={`${geist.variable} ${geistMono.variable}`}>      <body>{children}</body>    </html>  )}