Installation

Lumi UI uses the `shadcn/ui` CLI for dependency management and component installation.

Initialize Project & Install Base Theme

Run the following command in your terminal:


pnpm dlx shadcn@latest init https://lumiui.dev/r/init.json

This command initializes your project, installs the necessary dependencies, and sets up the base Lumi UI theme. It also configures a necessary CSS isolation rule (e.g., root:isolete) in your global styles.

Configure Lumi UI Registry

Update your component.json file to include the Lumi UI component registry. This allows you to fetch Lumi UI components using the npx shadcn-ui add command.

Add the following entry to your configuration:

component.json

{
  // ... other configurations
  "registries": {
    "@lumi-ui": "https://lumiui.dev/r/{name}.json"
  }
  // ...
}

Apply Root Layout Wrapper

For the scoping and isolation (configured in Step 1) to work correctly, you must wrap your main application content in a div with the class name root.

Update your main layout file (e.g., layout.tsx or similar) as follows:

layout.tsx

  <body>
    <div className="root">{children}</div>
  </body>

This step ensures all Lumi UI styles are correctly scoped and isolated from the rest of your application. See portals from Base UI for more details.