Installation

All components in Jack UI are built with Tailwind CSS v4, so make sure Tailwind CSS is already configured in your project.

Jack UI also uses shared utility functions and helpers. Install them using the CLI below:

bunx shadcn@latest add https://jackui.com/r/utils.json

npx shadcn@latest add https://jackui.com/r/utils.json

pnpm dlx shadcn@latest add https://jackui.com/r/utils.json

Install any component directly using the CLI.

Example: installing the spark-button component.

bunx shadcn@latest add https://jackui.com/r/spark-button.json

npx shadcn@latest add https://jackui.com/r/spark-button.json

pnpm dlx shadcn@latest add https://jackui.com/r/spark-button.json

Then use it inside your app:

import SparkButton from "@/components/jackui/spark-button";

export default function Page() {
  return <SparkButton label="Get Started" />;
}

Blocks and templates are complete production-ready UI sections built with multiple components.

To install a block, use the CLI.

Example: installing the pricing block.

bunx shadcn@latest add https://jackui.com/r/pricing.json

npx shadcn@latest add https://jackui.com/r/pricing.json

pnpm dlx shadcn@latest add https://jackui.com/r/pricing.json

Then use it in your page:

import Pricing from "@/components/jackui/pricing";

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

Some components may require additional packages like:

Required dependencies are listed on each component page and installed automatically when supported by the CLI.

If you're using a monorepo, pass the -c flag with your app path.

bunx shadcn@latest add https://jackui.com/r/spark-button.json -c ./apps/web

npx shadcn@latest add https://jackui.com/r/spark-button.json -c ./apps/web

pnpm dlx shadcn@latest add https://jackui.com/r/spark-button.json -c ./apps/web

We strongly recommend using the CLI instead of manually copying code.

Benefits:

Start building beautiful, modern, production-ready interfaces with Jack UI.