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:

Hover over to the CLI documentation to learn more about the other commands.

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"
}

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:

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

Overwrite

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

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:

Make sure you also install the composed components and the required packages for the component to function properly.

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

Make sure you also install the composed components and the required packages for the component to function properly.

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

Make sure you also install the composed components and the required packages for the component to function properly.

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...

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:

ui/index.ts

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!

Loading source code...

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:

Prologue

Flexible blocks and templates

Use ready-made blocks to craft unique pages without starting from scratch.

blocks.intentui.com

Introduction

Client Side Routing