Installation

Add editable components to your React application.

1. Initialize shadcn

Start with a React project using Tailwind CSS 4, then initialize shadcn to configure your aliases and theme variables.

pnpm dlx shadcn@latest init

2. Add a component

Use a component’s registry URL. Its package dependencies and related components are installed with it.

pnpm dlx shadcn@latest add https://ui.hyunjoon.net/r/button.json

3. Use and customize

import { Button } from "@/components/ui/button"

export function SaveButton() {
  return <Button>Save changes</Button>
}

Change the installed source and shared CSS variables to match your design. This registry uses Base UI’s render composition API.

Provider setup

Tooltip, Sidebar, and Message Scroller need their respective providers. Toast and Sonner need a mounted toaster. Each component page includes the required setup in its usage example.

Explore Button →