Installation

Framework Guides

You can choose from a list of frameworks to get started with Intent.

Installation via CLI

Before executing the command, ensure that tailwind is installed. If not, follow the instructions here for installation.

Initial Setup

Begin by executing this command:

npx shadcn@latest init https://intentui.com/r/theme-default

We use shadcn CLI to manage the installation of Intent UI components.

Component config

After running the init command, a components.json file will appear in your project. This file holds your project's configuration, including settings for gray tones, paths, and more.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "@intentui/icons",
  "registry: {}
}

Now please add @intentui into registry like so

"registries": {
  "@intentui": "https://intentui.com/r/{name}"
}

And after that, you can start adding components to your project.

Add components

Next, use add [component-name] to include a specific component in your project. This allows for selective installation without the need for a full setup. If you need a file-trigger or even a button, this command facilitates that. Install only what you need, or refer to the documentation to manually include components. Here's how to add a combo-box:

npx shadcn@latest add @intentui/combo-box

Sometimes, you may want to add components individually, such as select and text-field. You can easily do this by using the following command:

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

Add all components

To add all components at once, use @intentui/all. This will install every available component in Intent UI in a single step.

npx shadcn@latest add @intentui/all

Overwrite

You can override the existing components by using the -o flag. This will overwrite the existing files with the new ones.

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

Formatter

Intent utilizes the Biome formatter for code formatting. To use the Biome formatter with Intent components, we recommend the following configuration:

Manual installation

To begin setting up the design system, start by installing these packages:

npm i react-aria-components tailwindcss-react-aria-components

Next, add Tailwind Variant, Tailwind Merge, and for utility functions:

npm i tailwind-variants tailwind-merge

Following that, include the Tailwind Animate for managing animations and Intent Icons for icons:

npm i @intentui/icons tw-animate-css

Style and Primitive

After installing the required packages, you can copy the CSS below into your global CSS file and move the primitives to your UI folder. Primitives serve as utilities for managing states, including focusRing, focusStyles, and focusButtonStyles.

Hooks

Hooks are only used in specific components like the Navbar, Sidebar, Popover, and Command Menu. If you're using the Intent CLI, it will handle this automatically; otherwise, download the file below.

Simple Import

Indeed, it's efficient because the index.ts file in your UI folder serves as a hub. Even if the button and badge components are in separate files, you can import them together easily. First, create a ui/index.ts file:

export * from "./sidebar";
export * from "./navbar";
export * from "./tree";
export * from "./table";
export * from "./text-field";
export * from "./button";
export * from "./card";
// ...

So, here's the scoop: your UI folder contains an index.ts file, right? This file consolidates all your components for straightforward access. Simply tell TypeScript where to find it and import them as needed, hassle-free!

If you're using a src folder, you can use the following config:

"paths": {
  "@/*": ["./src/*"],
  "ui": ["./src/components/ui"]
}

Fonts

This is currently using the Inter font. If you want to use a different font, you can define your font-family in your JS or CSS file.

Stylesheet

When you're working with a stylesheet, you can define your @font-face in your css file.

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

Next.js

If you're using Next.js, you don't event need css files. Just define your font in your layout file.

import localFont from 'next/font/local'

const fontSans = localFont({
  src: [{path: './fonts/Inter.woff2'}],
  variable: '--font-sans'
})

Then, apply the fontSans to the body tag like this:

<body
  className={`font-sans antialiased ${fontSans.variable}`}
/>

Then, you can use the variable in your main css file like this:

@theme {
  --font-sans: var(--font-inter-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
  "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: var(--font-geist-mono), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
  "Segoe UI Symbol", "Noto Color Emoji";

  // Your other variables
}

For more information, refer to the Tailwind documentation and Next.js documentation.

IntelliSense

If you want your development environment to be more intelligent, you can follow instructions here at Tailwind Variants.

Dark Mode

Intent supports dark mode out of the box. Every framework has its own way of implementing dark mode. So you better check the docs list below:

• Vite
• Inertia.js
• Next.js
• Remix
• Astro

Prologue

• Contribution Guide
• Release Notes