Embossed UI

Search documentation

Search for a page or component.

Installation

Set up a project, install the style, then add components with the shadcn CLI.

Components install into any project the shadcn CLI supports: Next.js, Vite, React Router, TanStack Start, Astro and more.

Create a project

Create a project with the shadcn CLI. Pick the Base UI component library: these components are built on Base UI.

pnpm dlx shadcn@latest init

Already have a shadcn/ui project on Base UI? Skip this step. See shadcn's installation guides for framework-specific setup.

Install the style

The style holds the theme: the CSS variables for light and dark mode, the radius, and the Inter font. Install it once, before any component.

pnpm dlx shadcn@latest add https://ui.ikramhasan.com/r/style.json

It writes the variables into your global CSS file. Components also work with your own theme; see Theming.

Add components

Add components by URL:

pnpm dlx shadcn@latest add https://ui.ikramhasan.com/r/button.json

Components that build on others (a Dialog uses the Button) bring those along automatically.

Use them

app/page.tsx
import { Button } from "@/components/ui/button"
 
export default function Home() {
  return <Button>Click me</Button>
}

Use a namespace

Typing the full URL gets old. Register the registry under a namespace in your components.json:

components.json
{
  "registries": {
    "@ui": "https://ui.ikramhasan.com/r/{name}.json"
  }
}

Then add components by name:

pnpm dlx shadcn@latest add @ui/button @ui/dialog

See Registry for more on how the registry is served.

Switching from shadcn/ui

Components share shadcn's file names and APIs, so switching is reinstalling. Add a component from this registry with --overwrite and the file in components/ui is replaced in place:

pnpm dlx shadcn@latest add https://ui.ikramhasan.com/r/button.json --overwrite
IntroductionTheming