Intent UI Blocks Docs: Installation

A detailed guide to help you set up Intent UI Blocks, seamlessly integrate it into your workflow, and start building effortlessly.

Introduction

Intent UI Blocks is a powerful toolkit designed to simplify the development of responsive, accessible, and visually stunning web applications. It offers a comprehensive collection of components, utilities, and tools, empowering developers to create high-quality, user-focused interfaces with ease. At its core, Intent UI Blocks leverages React Aria Components for its primitives and Tailwind CSS for styling.

CLI

If you're interested in setting up Intent UI Blocks quickly and easily, check out the CLI documentation.

Choose Your Framework

Intent UI Blocks integrates seamlessly into any React project, regardless of the framework you’re using.

Manual Setup

If you prefer not to use the CLI or haven’t found the right framework for your project, you can set up Intent UI Blocks manually.

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

npm i react-aria-components tailwindcss-react-aria-components tailwind-variants tailwind-merge clsx @intentui/icons tailwindcss-animate

CSS

Intent UI Blocks relies on Tailwind CSS for styling. To customize the look and feel of the components, you’ll need to include specific variables.

And that’s it! Once configured, Intent UI Blocks takes care of everything else for you.

Font

If you have a font installed locally, such as Inter, you can use the following CSS to apply your local font:

@supports (font-variation-settings: normal) {
  :root {
    font-family: Inter, sans-serif;
    font-optical-sizing: auto;
  }
}
 
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('Inter.woff2') format('woff2');
}
 
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('Inter-Italic.woff2') format('woff2');
}

Ensure that the src: url('Inter.woff2') in your CSS points to the correct directory where your font file is located. For example, if the font is in a folder named fonts, reference it like this: src: url('fonts/Inter.woff2').

Next.js includes a default font called Geist. You can configure it in your layout like this:

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});
 
const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

Now, open your app/globals.css file and add the following:

@theme {
  --font-sans: var(--font-geist-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-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace';
  ...
}

The Recommended font can be found here.

Simple Import / Aliases

In this setup, all components are imported from the ui folder. This is possible because of the index.ts file within the ui folder, which consolidates all exports from that folder.

export * from "./primitive"
export * from "./area-chart"
export * from "./avatar"
export * from "./badge"
export * from "./breadcrumbs"
export * from "./button"
export * from "./button"
export * from "./calendar"
export * from "./card"
export * from "./carousel"
export * from "./chart"
export * from "./chart"
// and so on...

To enable this functionality, you need to add the appropriate path to the tsconfig.json file. But it depends on your directory structure. This example is if you're using Laravel:

If you're using Next.js, the components are typically located in either the src/components or app/components directory. Depending on your project's structure, you might need to adjust the path to match your setup.

Additionally, if you're using Vite, you must also configure the path in the vite.config.js file: