Skip to content
Uxelith
Sign in

Install Uxelith components

Uxelith components install through the shadcn CLI. The source is copied into your project, so you can read and change every line.

Requirements

  • Node.js 20 or newer
  • React 19
  • Tailwind CSS v4
  • A project initialised with shadcn/ui
  1. 1

    Create a project (or use yours)

    Skip this if you already have a Next.js app with Tailwind CSS.

    terminal
    npx create-next-app@latest my-app --ts --tailwind --app
  2. 2

    Initialise shadcn/ui

    This creates components.json, the cn() helper and the theme variables our components read.

    terminal
    npx shadcn@latest init
  3. 3

    Add a component

    Pick any free component and run its install command. Dependencies are installed for you.

    $ pnpm dlx shadcn@latest add https://uxelith.com/r/spotlight-card.json
  4. 4

    Use it

    app/page.tsx
    import { SpotlightCard } from "@/components/spotlight-card"

export default function Page() {
  return (
    <SpotlightCard className="p-6">Hello, Uxelith</SpotlightCard>
  )
}

    Browse everything in the catalog.

Pro

Installing Pro items

Pro components and blocks install with the same CLI, through the @uxelith registry and your licence key. Connect each project once:

  1. 1

    Create a licence key

    In your account, create a key and put it in .env.local. Keep it out of Git; in CI, add it as a secret.

    .env.local
    UXELITH_LICENSE_KEY=uxl_your_key_here
  2. 2

    Add the Uxelith registry

    Add this to components.json. The CLI fills in the key from your environment and sends it only to Uxelith.

    components.json
    {
  "registries": {
    "@uxelith": {
      "url": "https://uxelith.com/api/v1/registry/{name}.json",
      "headers": {
        "Authorization": "Bearer ${UXELITH_LICENSE_KEY}"
      }
    }
  }
}
  3. 3

    Install by name

    Pro items and their dependencies install like any other component.

    terminal
    npx shadcn@latest add @uxelith/data-table

    No Pro yet? See plans.