Get started with MiniDev UI

Installation#

You need React 18 or newer and Tailwind CSS v4. Pick whichever way of adding components you prefer. They all produce the same code.

npm i minidev-ui-kit @base-ui/react class-variance-authority clsx tailwind-merge lucide-react

const nextConfig = {
  transpilePackages: ["minidev-ui-kit"],
}

export default nextConfig

Then add the tokens to your global stylesheet. If you copy files instead of installing the package, copy styles.css from any component's docs page.

@import "tailwindcss";
@import "minidev-ui-kit/styles.css";

/* Let Tailwind see the classes inside the package */
@source "../node_modules/minidev-ui-kit";

Browse by category#

Every component lives in one category hub with install commands, notes and answers to common questions.

New to the stack? Start with the custom shadcn registry guide or build a landing page in Next.js.

Usage#

import { Button } from "minidev-ui-kit/ui/button"
import { PlanCard } from "minidev-ui-kit/ui/plan-card"

export default function Billing() {
  return (
    <section className="grid gap-4 sm:grid-cols-2">
      <PlanCard />
      <Button size="lg">Upgrade to Team</Button>
    </section>
  )
}

Theming#

Components never reference a colour directly. They speak in semantic tokens like surface, fg-muted and accent, defined once in CSS. Change a variable and everything that uses it updates, with no rebuild.

Dark mode#

Dark mode is the dark class on the root element. Tokens are redefined, components are not. To avoid a flash on load, set the class before first paint:

<html lang="en" suppressHydrationWarning>
  <head>
    <script dangerouslySetInnerHTML={{ __html: `(function(){try{var t=localStorage.getItem("theme");var d=t?t==="dark":matchMedia("(prefers-color-scheme: dark)").matches;if(d)document.documentElement.classList.add("dark")}catch(e){}})()` }} />
  </head>
  <body>{children}</body>
</html>

For AI agents#

Principles#

Hairline structure

1px lines and a top highlight draw every surface. Blur shadows are reserved for overlays.

Tokens, not hex

Semantic OKLCH tokens only. The same file works in any brand and both themes.

Every state, designed

Hover, focus, pressed, busy, invalid and disabled are drawn, and none of them shift layout.

Accessible by default

Behaviour comes from Base UI: focus management, keyboard support and ARIA are handled.