Installation

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

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:

When you're run this command, it will ask a couple of questions. Like where's your components folder, utils, your main css file, and lastly is the theme you want like so:

? Enter the path to your components folder: components
? Enter the path to your utils folder: utils
? Where would you like to place the CSS file? app/globals.css
✔ UI folder already exists at components/ui
✔ Utils folder already exists at utils
? Select a theme: (Use arrow keys)
❯ Default
  Zinc
  Neutral
  Slate
  Gray
  Azure
  Sky
  Amber
  Violet
  Emerald
  Rose
  Turquoise
  Orange

After you select the theme, next you will be asked to select components you want to include.

? Select components to add: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯ ◯ aside
  ◯ avatar
  ◯ badge
  ◯ breadcrumbs
  ◯ button
  ◯ buttons
  ◯ calendar
  ◯ card
  ◯ carousel
  ◯ carousel

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:

If you hit any issues, make sure you check out the installation guide here.

This command will ensure all necessary components are installed:

✓ combo-box created
✓ select created
✓ dropdown created
✓ field created
✓ list-box created
✓ popover created
✓ button created

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

If you hit any issues, make sure you check out the installation guide here.

If you need to include grouped components, refer to the documentation which organizes related components under a single namespace, such as collections, overlays, and forms. This allows you to add them all at once, like so:

If you hit any issues, make sure you check out the installation guide here.

Using this command, you will install all components under the overlays namespace.

✓ button created
✓ dialog created
✓ modal created
✓ sheet created
✓ drawer created
✓ popover created
✓ tooltip created

Override

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

If you hit any issues, make sure you check out the installation guide here.

Select and Add Components

You might prefer to select the components you want to include by adding them without specifying any items. Just use the following command to add components:

If you hit any issues, make sure you check out the installation guide here.

This command will present a list of available components, which you can navigate and select using the arrow keys and spacebar.

? Select components to add: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
  proceed)
  ◯ dropdown
  ◯ dialog
  ◯ field
  ◯ forms
  ◯ collections
  ◯ date-and-time

Diff

You can see the differences between your current setup and the new one by using the following command:

You can see this tweet if you're not sure.

You can also doing a diff to specific components by using the following command:

Theme

Sometimes you want to change the theme of your project. You can do that by using the following command:

Starter Kit

I offer two starter kits, one for Next.js and one for Laravel. Choose the one that suits your project needs.

Here’s a swagged-out version of what you got:

Laravel

First up, make sure you got Composer chillin' on your system. Then, hit this command to spin up a fresh project:

Jump into your new crib with cd project-name, then install all the goods with npm i && npm run dev. Fire up your server with php artisan serve, and boom—you’re ready to roll.

Next.js

Get on that Just D hype with the Next.js Starter Kit. This bad boy is pre-loaded and ready to go. Kick off a new project with:

Remix

Remix caught your eye? Kick things off with the Remix Starter Kit, crafted by José Miguel. It’s like Next.js but with that Remix spin. Grab the repo here: justdlabs/remix. To get started, run the following command:

Astro

This starter is already in production, and you can check it out here. The repository is available here. To get started, run the following command:

Classes / CN

By default, components are saved in the components/ui folder of your project. These components include essential functions like cn for className handling and composeTailwindRenderProps. However, these functions are not compatible with server components. If you need to use cn outside of the typical environment, you should isolate it in a separate file like this:

import { twMerge } from 'tailwind-merge'
import { type ClassValue, clsx} from 'clsx'
 
export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))

Manual Installation

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

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

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

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Following that, include the animation package for managing animations and Paranoid for icons:

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

CSS

Start by adjusting your main CSS file. For example, if you are using Laravel, this would be resources/css/app.css. You should add the following code:

@tailwind base;
@tailwind components;
@tailwind utilities;

Variables

You can customize your colors using these variables. By default, Justd utilizes HSL colors, but you have the option to switch to RGB, HSL, or HSB.

Default Utilities

Include this for the default set of utilities:

@layer base {
  * {
    @apply border-border;
    font-feature-settings: 'cv11', 'ss01';
    font-variation-settings: 'opsz' 850;
  }
 
  body {
    @apply bg-bg text-fg;
  }
}

Tailwind Configuration

Configure your Tailwind setup by wrapping your tailwind config with withTV from tailwind-variants. Also, make sure to integrate the plugins we've just installed.

Primitive

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:

import { Button, VisuallyHidden, Badge } from 'ui'

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

If you're not using all those components, feel free to remove the ones you don't need. Later, when you introduce a new component, simply add it to your setup. It's straightforward!

TS Config

Next, incorporate the following settings into your tsconfig.json file:

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

TS Config with src Folder

Ensure you configure the paths property correctly if your project includes a src folder. If you want to organize the UI folder, adjust your paths accordingly like this:

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

Fonts

This is 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:

import { cn } from '@/utils/classes'
 
<body
className={cn(
  'min-h-svh font-sans antialiased',
  fontSans.variable,
)}
>

Then, you can use the variable in your tailwind config like this:

import { fontFamily } from 'tailwindcss/defaultTheme'
 
theme: {
  extend: {
    fontFamily: {
      sans: ['var(--font-sans)', ...fontFamily.sans],
    },
  },

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

InteliSense

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

Dark Mode

Justd 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