Installation

1. Install utilities

All xUI components use Tailwind CSS v4, so make sure it's set up in your project.

We also use the cn utility function for classNames—you can install it like this:

bunx shadcn@latest add  https://x-ui-self.vercel.app/r/utils.json

And then use it in your code like this:

import Card01 from "@/components/xui/card/Card01";

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

Note: CLI ensures all required files are included. Don't skip it unless you're a fan of chaos.

Now use it like this:

/**
 * BackgroundPaths depends on 1 other components,
 * all auto-installed via CLI.
 */
import BackgroundPaths from "@/components/xui/background-paths";

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

4. Optional dependencies

Some components might require extra packages (e.g. @radix-ui/react-slot, clsx, etc.). These will be mentioned in the docs for each component—don’t skip them unless you enjoy debugging at 2AM.

5. Using with Monorepo

If you're using a monorepo, pass the path to your app using -c like so:

bunx shadcn@latest add https://x-ui-self.vercel.app/r/card-01.json -c ./apps/www