Manual Installation

Add dependencies to your project manually.

Add Tailwind CSS

Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.

Follow the Tailwind CSS installation instructions to get started.

Add dependencies

Add the following dependencies to your project:


pnpm add tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react tw-animate-css

Configure path aliases

Configure the path aliases in your tsconfig.json file.

tsconfig.json

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

Configure styles

Add the following to your styles/globals.css file.

globals.css

@import "tailwindcss";
@import "tw-animate-css";
 
@custom-variant dark (&:is(.dark \*));
 
@theme {
    --color-primary: oklch(0.528 0.2539 282.58);
    --color-primary-accent: oklch(0.94 0.0271 295.05);
    --color-primary-focus: oklch(0.9169 0.0383 295.46);
    --color-primary-border: oklch(0.6784 0.1708 290.38);
    --color-primary-hover: oklch(0.5768 0.2279 286.25);
    --color-primary-text: oklch(0.528 0.2539 282.58);
 
    --color-success: oklch(0.6334 0.171 148.65);
    --color-success-accent: oklch(0.9685 0.0336 157.66);
    --color-success-focus: oklch(0.9489 0.0556 156.34);
    --color-success-border: oklch(0.7761 0.2117 148.55);
    --color-success-hover: oklch(0.6901 0.1748 149.64);
    --color-success-text: oklch(0.5388 0.1339 149.74);
 
    --color-error: oklch(0.64 0.22 26.04);
    --color-error-accent: oklch(0.9465 0.0252 17.61);
    --color-error-focus: oklch(0.9133 0.0414 17.93);
    --color-error-border: oklch(0.719 0.1751 22.5);
    --color-error-hover: oklch(0.6786 0.2095 24.66);
    --color-error-text: oklch(0.5716 0.2125 27.27);
 
    --color-warning: oklch(0.8016 0.1705 73.27);
    --color-warning-accent: oklch(0.9622 0.0384 83.83);
    --color-warning-focus: oklch(0.946 0.0574 85.03);
    --color-warning-border: oklch(0.7318 0.1522 75.09);
    --color-warning-hover: oklch(0.8342 0.1594 79.51);
    --color-warning-text: oklch(0.5461 0.1088 77.73);
 
    --color-info: oklch(0.6092 0.2041 255.8);
    --color-info-accent: oklch(0.949 0.0213 245.85);
    --color-info-focus: oklch(0.9135 0.0358 249.52);
    --color-info-border: oklch(0.829 0.0811 248.83);
    --color-info-hover: oklch(0.6722 0.1615 251.56);
    --color-info-text: oklch(0.6092 0.2041 255.8);
 
    --color-bg: oklch(1 0 0);
    --color-fill1: oklch(0.9843 0.0011 197.14);
    --color-fill2: oklch(0.9677 0.0027 286.35);
    --color-fill3: oklch(0.9368 0.0029 264.54);
    --color-fill4: oklch(0.904 0.0055 274.96);
 
    --color-fg: oklch(0.2738 0.0093 276.77);
    --color-fg-secondary: oklch(0.527 0.0238 276.59);
    --color-fg-tertiary: oklch(0.6683 0.0194 275.5);
    --color-fg-disabled: oklch(0.7366 0.0159 277.76);
    --color-fg-inverse: oklch(1 0 0);
 
    --color-border: oklch(0.904 0.0055 274.96);
    --color-alpha: color-mix(in srgb, oklch(0.144 0.0028 247.09), transparent 88%);
    --color-soft: oklch(0.9368 0.0029 264.54);
    --color-soft-alpha: color-mix(in srgb, oklch(0.144 0.0028 247.09), transparent 92%);
 
    --color-elevation-negative: oklch(0.9677 0.0027 286.35);
    --color-elevation-level1: oklch(1 0 0);
    --color-elevation-level2: oklch(1 0 0);
 
    --color-white-inverse: oklch(1 0 0);
    --color-black-inverse: oklch(0.144 0.0028 247.09);
 
    --color-fill1-alpha: color-mix(in srgb, oklch(0.1452 0.0021 286.13), transparent 98%);
    --color-fill2-alpha: color-mix(in srgb, oklch(0.1452 0.0021 286.13), transparent 96%);
    --color-fill3-alpha: color-mix(in srgb, oklch(0.1452 0.0021 286.13), transparent 92%);
    --color-fill4-alpha: color-mix(in srgb, oklch(0.1452 0.0021 286.13), transparent 88%);
}
 
.dark {
    --color-primary: oklch(0.528 0.2539 282.58);
    --color-primary-accent: oklch(0.2622 0.0915 289.13);
    --color-primary-focus: oklch(0.2827 0.1227 284.67);
    --color-primary-border: oklch(0.528 0.2539 282.58);
    --color-primary-hover: oklch(0.5768 0.2279 286.25);
    --color-primary-text: oklch(0.6784 0.1708 290.38);
 
    --color-success: oklch(0.6334 0.171 148.65);
    --color-success-accent: oklch(0.271 0.0537 151.74);
    --color-success-focus: oklch(0.3887 0.0924 150.55);
    --color-success-border: oklch(0.5388 0.1339 149.74);
    --color-success-hover: oklch(0.6901 0.1748 149.64);
    --color-success-text: oklch(0.7761 0.2117 148.55);
 
    --color-error: oklch(0.64 0.22 26.04);
    --color-error-accent: oklch(0.2567 0.0648 22.77);
    --color-error-focus: oklch(0.2973 0.0922 24.71);
    --color-error-border: oklch(0.4423 0.146 25.48);
    --color-error-hover: oklch(0.6786 0.2095 24.66);
    --color-error-text: oklch(0.719 0.1751 22.5);
 
    --color-warning: oklch(0.8016 0.1705 73.27);
    --color-warning-accent: oklch(0.2663 0.0372 84.34);
    --color-warning-focus: oklch(0.3744 0.0636 81.14);
    --color-warning-border: oklch(0.5461 0.1088 77.73);
    --color-warning-hover: oklch(0.8342 0.1594 79.51);
    --color-warning-text: oklch(0.8342 0.1594 79.51);
 
    --color-info: oklch(0.6092 0.2041 255.8);
    --color-info-accent: oklch(0.2544 0.0418 249.78);
    --color-info-focus: oklch(0.3147 0.0668 250.78);
    --color-info-border: oklch(0.5067 0.1401 252.67);
    --color-info-hover: oklch(0.6722 0.1615 251.56);
    --color-info-text: oklch(0.6722 0.1615 251.56);
 
    --color-bg: oklch(0.144 0.0028 247.09);
    --color-fill1: oklch(0.1652 0.0062 285.7);
    --color-fill2: oklch(0.1881 0.006 285.81);
    --color-fill3: oklch(0.2314 0.0078 274.6);
    --color-fill4: oklch(0.2738 0.0093 276.77);
 
    --color-fg: oklch(0.9843 0.0011 197.14);
    --color-fg-secondary: oklch(0.6683 0.0194 275.5);
    --color-fg-tertiary: oklch(0.562 0.0249 277.15);
    --color-fg-disabled: oklch(0.4585 0.0198 274.46);
    --color-fg-inverse: oklch(0.2314 0.0078 274.6);
 
    --color-border: oklch(0.2738 0.0093 276.77);
    --color-alpha: color-mix(in srgb, oklch(1 0 0), transparent 88%);
    --color-soft: oklch(0.2314 0.0078 274.6);
    --color-soft-alpha: color-mix(in srgb, oklch(1 0 0), transparent 92%);
 
    --color-elevation-negative: oklch(0 0 0);
    --color-elevation-level1: oklch(0.1881 0.006 285.81);
    --color-elevation-level2: oklch(0.2314 0.0078 274.6);
 
    --color-white-inverse: oklch(0.144 0.0028 247.09);
    --color-black-inverse: oklch(1 0 0);
 
    --color-fill1-alpha: color-mix(in srgb, oklch(1 0 0), transparent 98%);
    --color-fill2-alpha: color-mix(in srgb, oklch(1 0 0), transparent 96%);
    --color-fill3-alpha: color-mix(in srgb, oklch(1 0 0), transparent 92%);
    --color-fill4-alpha: color-mix(in srgb, oklch(1 0 0), transparent 88%);
}
 
@layer base {
    {
        border-color: var(--color-border);
    }
 
    body {
        @apply font-body bg-bg text-fg;
        --heading-font: "Geist", system-ui, sans-serif;
        --body-font: "Inter", system-ui, sans-serif;
    }
 
    button,
    [role="button"],
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: auto;
    }
 
    button[class*="bg-gradient"],
    [role="button"][class*="bg-gradient"] {
        will-change: background-image;
    }
 
}
 
@utility font-heading {
    font-family: var(--heading-font);
}
 
@utility font-body {
    font-family: var(--body-font);
}
 
@utility heading-1 {
    @apply font-heading text-[2.25rem] font-bold leading-[2.75rem];
 
    @media (width >=theme(--breakpoint-sm)) {
    	font-size: 3rem;
    	line-height: 3.5rem;
    }
 
    @media (width >=theme(--breakpoint-lg)) {
    	font-size: 4rem;
    	line-height: 4.5rem;
    }
}
 
@utility heading-2 {
    @apply font-heading text-[2rem] font-bold leading-[2.5rem];
 
    @media (width >=theme(--breakpoint-sm)) {
    	font-size: 2.5rem;
    	line-height: 3rem;
    }
 
    @media (width >=theme(--breakpoint-lg)) {
    	font-size: 3rem;
    	line-height: 3.5rem;
    }
}
 
@utility heading-3 {
    @apply font-heading text-[1.875rem] font-bold leading-[2.375rem];
 
    @media (width >=theme(--breakpoint-sm)) {
    	font-size: 2.25rem;
    	line-height: 2.75rem;
    }
 
    @media (width >=theme(--breakpoint-lg)) {
    	font-size: 2.5rem;
    	line-height: 3rem;
    }
 
}
 
@utility heading-4 {
    @apply font-heading text-[1.75rem] font-bold leading-[2.25rem];
 
    @media (width >=theme(--breakpoint-sm)) {
    	font-size: 1.875rem;
    	line-height: 2.375rem;
    }
 
    @media (width >=theme(--breakpoint-lg)) {
    	font-size: 2rem;
    	line-height: 2.5rem;
    }
 
}
 
@utility heading-5 {
    @apply font-heading text-[1.5rem] font-bold leading-[2rem];
 
    @media (width >=theme(--breakpoint-sm)) {
    	font-size: 1.5rem;
    	line-height: 2rem;
    }
 
    @media (width >=theme(--breakpoint-lg)) {
    	font-size: 1.5rem;
    	line-height: 2rem;
    }
}
 
@utility heading-6 {
    @apply font-heading text-[1.25rem] font-bold leading-[1.75rem];
 
    @media (width >=theme(--breakpoint-sm)) {
    	font-size: 1.25rem;
    	line-height: 1.75rem;
    }
 
    @media (width >=theme(--breakpoint-lg)) {
    	font-size: 1.25rem;
    	line-height: 1.75rem;
    }
 
}
 
@utility body-15 {
    @apply font-body text-[0.9375rem] leading-[1.375];
}
 
@utility text-sm-p {
    @apply font-body text-sm leading-[1.25rem];
}
 
@utility body-13 {
    @apply font-body text-[0.8125rem] leading-[1.125rem];
}
 
@utility no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
 
    &::-webkit-scrollbar {
    	display: none;
    	/* Chrome, Safari and Opera */
    }
}

Add a cn helper

lib/utils.ts

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
export function cn(...inputs: ClassValue[]) {
	return twMerge(clsx(inputs))
}

Create a components.json file

Create the file in root of your project

components.json

{
	"$schema": "https://radianos.com/schema.json",
	"aliases": {
		"components": "@/components",
		"utils": "@/lib/utils",
		"ui": "@/components/ui",
		"animated": "@/components/animated",
		"lib": "@/lib",
		"hooks": "@/hooks"
	},
	"hasSrcDir": true
}

Now you are good to go and you can add components.