Justd Blocks Docs: Installation

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

Introduction

Justd 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, Justd Blocks leverages React Aria Components for its primitives and Tailwind CSS for styling.

CLI

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

Choose Your Framework

Justd 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 Justd Blocks manually.

CSS

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

Classes

You may notice the use of the cn function in some blocks or components. This function is designed to combine and merge Tailwind CSS classes seamlessly.

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: