Installation / Intent UI

Prologue

Contribution Guide Release Notes Upgrade Guide

Getting Started

Introduction Installation Client Side Routing

Dark Mode

Inertia.js Next.js Vite

Buttons

Button File Trigger Toggle Group Toggle

Collections

Choice Box Dropdown Grid List List Box Menu Table Tag Group Tree

Colors

Color Area Color Field Color Pickerupdated Color Slider Color Swatch Picker Color Swatch Color Thumb Color Wheel

Controls

Command Menu Context Menu Keyboard Slider Switch Toolbar

Date And Time

Calendar Date Field Date Picker Date Range Picker Range Calendar Time Field

Drag And Drop

Drop Zone

Forms

Checkbox Group Checkbox Field Form Input Otp Number Field Radio Group Search Field Tag Field Text Field Textarea

Layouts

Container Navbar Sidebar

Media

Avatar Carousel

Navigation

Breadcrumbs Disclosure Group Disclosure Link Pagination Tabs

Overlays

Dialog Drawer Modal Popover Sheet Tooltip

Pickers

Combo Box Multiple Select Select

Statuses

Badge Loader Meter Note Progress Bar Progress Circle Skeleton Toast

Surfaces

Card Description List Heading Separator Show More

Utilities

Visually Hidden

Visualizations

Area Chart Bar Chart Bar List Chart Line Chart Pie Chart Tracker

Installation

Install the necessary packages and set up your project. This tool automates the process, streamlining your setup with no extra steps required.

Framework Guides

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

LaravelLaravel is a PHP framework for building web applications.

Next.jsNext.js is a React framework for building server-side rendered applications.

ViteVite is a tool for building frontend applications in a fraction of the time.

TanStack RouterTanStack Router is a framework for building server-side rendered applications.

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 @intentui/theme-default

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

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:

Loading source code...

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.

Loading source code...

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.

Loading source code...

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
}