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 Radix primitives, styled with Tailwind CSS v4, and animated with Framer 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
Three commands take you from zero to a working component.
1. Initialize shadcn in your project
2. Install the UI.MD base theme
This adds the OKLCH color tokens, custom type scale, and spacing variables to your CSS.
3. Add a component
Usage
Import from your local components directory.
import { Button } from "@/components/ui/button"
export function Example() {
return <Button variant="outline">Click me</Button>
}