Installation

How to install dependencies and add components to your project.

Open in

Note: Unlumen UI uses the same installation process as shadcn/ui. Components are added directly to your codebase via the shadcn CLI.

Initialize shadcn/ui

Run the init command to create a new project with shadcn/ui or setup an existing one.

Add Components

Run the add command to add a component to your project.

Configure Pro CLI Authentication

Pro component installs use the same Polar license key you use on /activate.

  1. Add your license key to your project .env.local.
UNLUMEN_LICENSE_KEY=0UNLU_...
  1. Configure the @unlumen-ui registry in your project's components.json.

Recommended object format (Authorization header):

{
  "registries": {
    "@unlumen-ui": {
      "url": "https://ui.unlumen.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${UNLUMEN_LICENSE_KEY}"
      }
    }
  }
}

If shadcn generated @unlumen-ui as a simple string in a new project, this format also works:

{
  "registries": {
    "@unlumen-ui": "https://ui.unlumen.com/r/{name}.json?token=${UNLUMEN_LICENSE_KEY}"
  }
}
  1. Install any Pro component with the same CLI command pattern.

Free components still work without authentication. Only Pro slugs require a valid license key, provided either through the Authorization header or the token query parameter.

Import Components

Import the component into your project.

import { FloatingTooltip } from "@/components/unlumen-ui/floating-tooltip";

export default function Home() {
  return (
    <FloatingTooltip.Provider>
      <FloatingTooltip.Trigger content="Hello">
        <button>Hover me</button>
      </FloatingTooltip.Trigger>
    </FloatingTooltip.Provider>
  );
}

Built by Léo from Unlumen :3

Last updated: 4/29/2026