Installation
Set up UI.MD in your project and install your first component.
Setup
Two steps get the full design system into your project.
1. Initialize shadcn
Sets up the shadcn CLI and creates a components.json config in your project root.
radix-nova or new-york). I built these components on Radix. The Base UI style (base-nova) rewrites Radix props during install, so it isn't supported yet.2. Install the base theme
Adds the OKLCH color tokens, custom type scale, and spacing variables to your CSS. All UI.MD components expect these tokens to be present.
Adding components
Install any component by pointing the CLI at its registry URL.
The CLI downloads the component source into your components/ui/ directory and installs any npm dependencies it needs (Radix primitives, cva, etc.).
Swap button for any component name to install that one instead. Every component page has a copy-paste install command.
Install by namespace
Register the namespace once, then install any component by name.
Add the registry to the registries field in your components.json:
{
"registries": {
"@uimd": "https://ui.mattdowney.com/r/{name}.json"
}
}Then install any component by name, no URL needed:
What's available
The registry includes components, utilities, and a base theme.
Usage
Import from your local components directory and use like any React component.
import { Button } from "@/components/ui/button"
export function Example() {
return <Button variant="outline">Click me</Button>
}