Introduction
Get started with UI.MD, a shadcn-compatible component registry you install and own.
What is UI.MD?
UI.MD is my personal design system, distributed as a shadcn custom registry. It's a curated set of UI components built on Base UI primitives, styled with Tailwind CSS v4, and animated with Motion.
Every component installs directly into your project as source code: no package dependency, no upstream to stay in sync with. You own the code and edit it freely.
The design system ships an OKLCH color palette with automatic light and dark mode, a custom typography scale with finer granularity than Tailwind defaults, and shared layout tokens for consistent card and modal structures.
Quick start
Two commands take you from zero to the whole system.
1. Initialize shadcn in your project
These components are built on Base UI, the shadcn CLI's default style, so no extra flags are needed.
2. Install the whole kit
One command installs every component, the color and type tokens, the design rules your coding agent should follow, and the checker that enforces them. This is the way in: start here so your project is on the system from the first render. Want only the theme? The installation guide covers installing base on its own.
Usage
Import from your local components directory:
import { Button } from "@/components/ui/button"
export function Example() {
return <Button variant="outline">Click me</Button>
}