Installation

To start using the D., you need to install the required packages and configure your project.

Installation via CLI

Before you run the command, make sure you have tailwind installed. If you don't, just see here how to install it.

This command's gonna nuke your tailwind config and css file. So, run it in a fresh project, not in an old one. Otherwise, you'll have to manually add the needed files.

Kick things off by running this command:

npx justd-cli@latest init

Next up, tell it your source. If you're rocking Next.js, pick Next.js. If Laravel with Inertia.js is your jam, go with Laravel. Not using either? Just hit up the other option.

After that, just run add [component-name] to drop the component in your project. No need to install everything at once. Need a file-trigger? Just add it up. Even if it requires a button, this command's got you covered. Just install what you need now. Otherwise, hit up the docs and do it manually. Here's how to add a combo-box:

npx justd-cli@latest add combo-box

This command will install all the required components like:

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

If ya wanna drop in group components, check the docs, they bundle all the goodies into one namespace, like collections, overlays, forms, etc. So you can slap 'em in all at once like this:

npx justd-cli@latest add overlays

With that command, you'll get all the components in the overlays namespace like this:

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

Or you might wanna pick the components you wanna toss in. Just add 'em without any arguments. You'll get a list of components to select, using arrow keys and spacebar.

npx justd-cli@latest add

The command above will show you list like this:

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

Right now, the CLI can only drop one component at a time. So if you try add note card, it'll only add the note component. If you wanna upgrade it to handle multiple components, feel free to make a PR.

React Server Component

By default, the primitive gets dropped in the components/ui folder of your project. It packs all the must-have functions for your components, like cn for className and composeTailwindRenderProps. But heads up, you can't rock it in server components. So, if you wanna flex that cn class outside the built-in squad, you gotta whip up a file that only holds that function, like this:

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

If I were you, I'd stash this in a file named classes.ts in the utils folder. Then, whenever I need to roll with it, I'll import it like this:

import { cn } from '@/utils/classes'
 
export default function page() {
  return (
    <span className={cn('...')}/>
  )
}

Manual Installation

To get started with the design system, you gotta install these packages:

npm i react-aria-components tailwindcss-react-aria-components

Next, grab Tailwind Variant, Tailwind Merge, and clsx for those sweet utility functions.

npm i tailwind-variants tailwind-merge clsx

Then, snag the animation package for handling animations and Paranoid for icons:

npm i @irsyadadl/paranoid tailwindcss-animate framer-motion

CSS

First up, tweak your root CSS file. For example, if you're rockin' Laravel, it's resources/css/app.css, and you gotta add this code:

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

Variables

Below that, you gotta drop in the following code:

Default Utilities

Add this for the default set of utilities:

React Aria Components

And finally, toss in this for react-aria-components:

.react-aria-Button,
.react-aria-Dialog { outline: none; }
 
.react-aria-DropIndicator[data-drop-target] {
  outline: 1px solid hsl(var(--primary));
}

Tailwind Configuration

You need wrap your tailwind config with withTV from tailwind-variants, also you need to plug the plugins we've just installed.

Primitive

And next, you can copy the code below and paste it into your dopest component folder.

Simple Import

Yup, that's slick 'cause the index.ts file in your ui folder plays the connect-the-dots game. Even if button and badge are chillin' in different files, you can scoop them up in one go like this:

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

Aight, so here’s the lowdown: your ui folder’s rockin’ an index.ts file, right? This bad boy bundles up all your components for easy access. Just pull 'em in like this, no sweat!

ui/index.ts

If you ain’t usin’ all them bits, just ditch the ones you don’t need. Later on, when you got a fresh component, just slide it into the lineup. Easy peasy!

TS Config

Then, you gotta drop this into your tsconfig.json file:

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

TS Config with src Folder

Just make sure you're rockin' the paths property right when you got a src folder in your project. If you wanna mess with the ui folder, just line up your paths proper like this:

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