LokiUI

1. Get your API Key

After purchasing LokiUI Pro, go to your Dashboard to generate your API key.

Set it as an environment variable:

export LOKIUI_PRO_TOKEN=loki_your_api_key_here

Or add to your .env.local:

LOKIUI_PRO_TOKEN=loki_your_api_key_here

2. Add registry to components.json

The components.json file holds configuration for your project, and allows easy installation of any components.

Note: The `components.json` file is optional

It is only required if you're using the CLI to add components to your project. If you're using the copy and paste method, you don't need this file.

You can create a components.json file in your project by running the following command:

bunx --bun shadcn@latest init

npx shadcn@latest init

pnpm dlx shadcn@latest init

Then, add the LokiUI Pro registry to your components.json:

{
    "registries": {
        "@lokiui-pro": {
            "url": "https://pro.lokiui.com/api/r/{name}",
            "headers": {
                "X-API-Key": "${LOKIUI_PRO_TOKEN}"
            }
        }
    }
}

3. Install utilities

All components use Tailwind CSS v4, so ensure it's installed in your project. Many components also use the cn utility function—install it with the following command:

bunx --bun shadcn@latest add @lokiui-pro/utils

npx shadcn@latest add @lokiui-pro/utils

pnpm dlx shadcn@latest add @lokiui-pro/utils

4. That's it!

We use lucide-icons for most components that include icons, along with some shadcn/ui components. These dependencies will be automatically installed when using the CLI.

For example to add particle-button component to your project:

bunx --bun shadcn@latest add @lokiui-pro/particle-button

npx shadcn@latest add @lokiui-pro/particle-button

pnpm dlx shadcn@latest add @lokiui-pro/particle-button

While we provide a convenient 'copy' button for the code, we strongly recommend using the CLI for installing components, as it ensures all necessary files are included.

Add to your page and it works!

import ParticleButton from "@/components/lokiui/particle-button";

export default function Page() {
    return <ParticleButton />;
}

5. Optional dependencies

Some components require additional libraries, listed at the bottom of each component. Make sure to install them to ensure the component works properly.

6. Monorepo

For monorepo shadcn/ui CLI contains the option -c to specify the path to your workspace:

bunx --bun shadcn@latest add @lokiui-pro/particle-button -c ./apps/www

npx shadcn@latest add @lokiui-pro/particle-button -c ./apps/www

pnpm dlx shadcn@latest add @lokiui-pro/particle-button -c ./apps/www