Installation

Before you start

Start with a React project that has Tailwind CSS v4 configured and its global stylesheet imported. If you need to set up a project first, choose a framework guide below.

Installation via CLI

Intent UI uses the shadcn CLI to add component source files and their dependencies to your project. Run the commands below from your project directory.

Initialize your project

For a project without a components.json file, initialize the configuration with the default Intent UI theme:

npx shadcn@latest init @intentui/theme-default

If your project already has a components.json file, add the theme to your existing setup instead:

npx shadcn@latest add @intentui/theme-default

The theme adds the CSS variables and styling dependencies used by Intent UI components. Check that the stylesheet configured in components.json is imported by your application.

Add your first component

Add a button:

npx shadcn@latest add @intentui/button

The CLI copies the component and its required utilities into your project and installs their dependencies.

Use the component

Import the button into a page or component:

import { Button } from "@/components/ui/button"

export default function Example() {
  return <Button>Get started</Button>
}

This example uses the @/components/ui alias. If you configured a different component location in components.json, adjust the import to match.

Start your development server and open the page to see your button. You can now edit its source, change its styles, or add more components.

Add more components

You can add several components in one command:

npx shadcn@latest add @intentui/select @intentui/text-field

To add every available component, use @intentui/all:

npx shadcn@latest add @intentui/all

Replace existing components

Use -o when you want to replace an existing component with the version from the registry. This overwrites the file, including any local changes.

npx shadcn@latest add @intentui/text-field -o

Choose a theme

The default theme is a starting point. To use another theme, add one of the following to your initialized project. Choose one command; you do not need to run them all.

npx shadcn@latest add @intentui/theme-blue
npx shadcn@latest add @intentui/theme-sky
npx shadcn@latest add @intentui/theme-indigo
npx shadcn@latest add @intentui/theme-emerald
npx shadcn@latest add @intentui/theme-teal
npx shadcn@latest add @intentui/theme-purple
npx shadcn@latest add @intentui/theme-pink
npx shadcn@latest add @intentui/theme-rose
npx shadcn@latest add @intentui/theme-green
npx shadcn@latest add @intentui/theme-lime
npx shadcn@latest add @intentui/theme-cyan

You can also customize the theme variables in your global stylesheet to match your design.

Manual installation

If you prefer to copy the source yourself, start with the React and Tailwind CSS v4 setup described above.

Install the styling dependencies

Install React Aria Components, the React Aria Tailwind plugin, Tailwind Variants, the cn class-name utility, and the animation styles:

npm install react-aria-components tailwindcss-react-aria-components tailwind-variants cn tw-animate-css

Some components require additional packages. Install the dependencies used by the components you copy. For components that import Heroicons, install:

npm install @heroicons/react

Add the stylesheet and utility

Copy the CSS into your global stylesheet and the cx utility into lib/primitive.ts. The utility combines class names and supports React Aria render props.

The stylesheet path depends on your framework. Import it from your application's entry point or root layout, and make sure your @/ alias resolves to the directory containing lib and components.

Copy a component

Open the documentation for the component you want and copy its source into your UI directory. Copy any local components, utilities, or hooks it imports as well, and adjust import paths to match your project.

For example, the button uses lib/primitive.ts. Once both files are in place, you can use the button example above.

Add hooks as needed

If a component imports @/hooks/use-mobile, copy this hook into your project:

With CLI installation, required registry dependencies are added automatically.

Fonts

Fonts are optional. You can keep your application's font or configure your own. The provided stylesheet references --font-inter for its sans-serif font and falls back to system fonts.

To use a local Inter font with CSS, add the font file to your public assets and define it in your global stylesheet:

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

If your framework provides font loading, you can use that instead and connect its font variable to --font-sans in your theme.