Troubleshooting installs and builds

An animation doesn't play

Components with keyframe animations (Marquee, Shimmer Text, Rating, Typewriter, Date Picker and others) ship the @keyframes with the install, and the shadcn CLI writes them into the stylesheet named in your components.json (tailwind.css). If that path points at a file your app doesn't import, the keyframes never load.

• Check that components.json → tailwind.css is your global stylesheet, then run the add command again.
• Check your system isn't set to reduce motion — components stand still on purpose then (see reduced motion).

A Pro install answers 401 Unauthorized

The registry didn't receive a valid licence key. The message says which:

• "Add your licence key" — no key was sent. Put it in .env.local and add the @uxelith registry to components.json (both shown below). Install Pro items by name, @uxelith/data-table, not by URL: the CLI only sends the key to registries named in components.json.
• "That licence key isn't valid" — the key was revoked or mistyped. Create a new one in your account.

UXELITH_LICENSE_KEY=uxl_your_key_here

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

A Pro install answers 403 Forbidden

The key is valid but your Pro access has ended; the message gives the date. Everything you already installed keeps working. Buying again on the pricing page extends access from where it ended.

Module not found: motion/react or @/lib/utils

• motion/react: the component animates layout with Motion and the CLI normally installs it. If the install was interrupted, add it yourself: npm install motion.
• @/lib/utils: this file (the cn helper) is created by npx shadcn@latest init. Run init first, and check that the @/* path alias in tsconfig.json matches components.json.

“Functions cannot be passed directly to Client Components”

Interactive components are Client Components. A page that is a Server Component can pass them data, but not functions. Where a component accepts a function for formatting, it also accepts plain options — use those, or wrap the usage in your own file that starts with "use client".

// ✗ A function can't cross from a Server Component to a Client Component
<BarChart format={(v) => `$${v}`} … />

// ✓ Describe the format instead
<BarChart formatOptions={{ style: "currency", currency: "USD" }} … />

Dark mode doesn't change a component

Components follow the .dark class on <html>, as shadcn/ui does. If your app switches theme with a different selector or a data-theme attribute, define your dark variables for that selector too. See Theming.