Installation
How to install behsse UI in your web project. It's fast, flexible, and reliable. Start by choosing your framework. Then simply follow the instructions to use behsse UI.
With your framework
Start by selecting your preferred framework. Then, follow the instructions to initialize behsseui in your project.
Manual
Initialize behsseui in an existing project to take advantage of all its features.
Add TailwindCSS
You need to install Tailwind CSS in your project.
Add dependencies
CLI
pnpm add tailwind-merge clsxConfigure path aliases
Configure the path aliases in your tsconfig.json
tsconfig.json
1{2 "compilerOptions": {3 "paths": {4 "@/*": ["./*"]5 }6 }7}Configure styles
Add the style to your project's global CSS file.
globals.css
1@import "tailwindcss";23@source "../ui/components/**/*.tsx";45@custom-variant dark (&:is(.dark *));67@theme inline {8 --color-background: var(--background);9 --color-foreground: var(--foreground);10 --font-sans: var(--font-geist-sans);11 --font-mono: var(--font-geist-mono);12 --color-sidebar-ring: var(--sidebar-ring);13 --color-sidebar-border: var(--sidebar-border);14 --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);15 --color-sidebar-accent: var(--sidebar-accent);16 --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);17 --color-sidebar-primary: var(--sidebar-primary);18 --color-sidebar-foreground: var(--sidebar-foreground);19 --color-sidebar: var(--sidebar);20 --color-chart-5: var(--chart-5);21 --color-chart-4: var(--chart-4);22 --color-chart-3: var(--chart-3);23 --color-chart-2: var(--chart-2);24 --color-chart-1: var(--chart-1);25 --color-ring: var(--ring);26 --color-input: var(--input);27 --color-border: var(--border);28 --color-destructive: var(--destructive);29 --color-accent-foreground: var(--accent-foreground);30 --color-accent: var(--accent);31 --color-muted-foreground: var(--muted-foreground);32 --color-muted: var(--muted);33 --color-secondary-foreground: var(--secondary-foreground);34 --color-secondary: var(--secondary);35 --color-primary-foreground: var(--primary-foreground);36 --color-primary: var(--primary);37 --color-popover-foreground: var(--popover-foreground);38 --color-popover: var(--popover);39 --color-card-foreground: var(--card-foreground);40 --color-card: var(--card);41 --radius-sm: calc(var(--radius) - 4px);42 --radius-md: calc(var(--radius) - 2px);43 --radius-lg: var(--radius);44 --radius-xl: calc(var(--radius) + 4px);45 --breakpoint-3xl: 1600px;4647 --animate-accordion-down: accordion-down 0.2s ease-out;48 --animate-accordion-up: accordion-up 0.2s ease-out;4950 --navbar-height: 3.5rem;51}5253@keyframes accordion-down {54 from {55 max-height: 0;56 opacity: 0;57 }58 to {59 max-height: 1000px;60 opacity: 1;61 }62}6364@keyframes accordion-up {65 from {66 max-height: 1000px;67 opacity: 1;68 }69 to {70 max-height: 0;71 opacity: 0;72 }73}7475/* Default Theme - Light */76:root,77[data-theme='default'] {78 --radius: 0.625rem;79 --background: oklch(1 0 0);80 --foreground: oklch(0.145 0 0);81 --card: oklch(1 0 0);82 --card-foreground: oklch(0.145 0 0);83 --popover: oklch(1 0 0);84 --popover-foreground: oklch(0.145 0 0);85 --primary: oklch(0.205 0 0);86 --primary-foreground: oklch(0.985 0 0);87 --secondary: oklch(0.97 0 0);88 --secondary-foreground: oklch(0.205 0 0);89 --muted: oklch(0.97 0 0);90 --muted-foreground: oklch(0.556 0 0);91 --accent: oklch(0.97 0 0);92 --accent-foreground: oklch(0.205 0 0);93 --destructive: oklch(0.577 0.245 27.325);94 --border: oklch(0.922 0 0);95 --input: oklch(0.922 0 0);96 --ring: oklch(0.708 0 0);97 --chart-1: oklch(0.646 0.222 41.116);98 --chart-2: oklch(0.6 0.118 184.704);99 --chart-3: oklch(0.398 0.07 227.392);100 --chart-4: oklch(0.828 0.189 84.429);101 --chart-5: oklch(0.769 0.188 70.08);102 --sidebar: oklch(0.985 0 0);103 --sidebar-foreground: oklch(0.145 0 0);104 --sidebar-primary: oklch(0.205 0 0);105 --sidebar-primary-foreground: oklch(0.985 0 0);106 --sidebar-accent: oklch(0.97 0 0);107 --sidebar-accent-foreground: oklch(0.205 0 0);108 --sidebar-border: oklch(0.922 0 0);109 --sidebar-ring: oklch(0.708 0 0);110}111112/* Default Theme - Dark */113.dark[data-theme='default'],114.dark:not([data-theme]) {115 --background: oklch(0.145 0 0);116 --foreground: oklch(0.985 0 0);117 --card: oklch(0.205 0 0);118 --card-foreground: oklch(0.985 0 0);119 --popover: oklch(0.205 0 0);120 --popover-foreground: oklch(0.985 0 0);121 --primary: oklch(0.922 0 0);122 --primary-foreground: oklch(0.205 0 0);123 --secondary: oklch(0.269 0 0);124 --secondary-foreground: oklch(0.985 0 0);125 --muted: oklch(0.269 0 0);126 --muted-foreground: oklch(0.708 0 0);127 --accent: oklch(0.269 0 0);128 --accent-foreground: oklch(0.985 0 0);129 --destructive: oklch(0.704 0.191 22.216);130 --border: oklch(1 0 0 / 10%);131 --input: oklch(1 0 0 / 15%);132 --ring: oklch(0.556 0 0);133 --chart-1: oklch(0.488 0.243 264.376);134 --chart-2: oklch(0.696 0.17 162.48);135 --chart-3: oklch(0.769 0.188 70.08);136 --chart-4: oklch(0.627 0.265 303.9);137 --chart-5: oklch(0.645 0.246 16.439);138 --sidebar: oklch(0.205 0 0);139 --sidebar-foreground: oklch(0.985 0 0);140 --sidebar-primary: oklch(0.488 0.243 264.376);141 --sidebar-primary-foreground: oklch(0.985 0 0);142 --sidebar-accent: oklch(0.269 0 0);143 --sidebar-accent-foreground: oklch(0.985 0 0);144 --sidebar-border: oklch(1 0 0 / 10%);145 --sidebar-ring: oklch(0.556 0 0);146}147148@layer base {149 * {150 @apply border-border outline-ring/50;151 }152 body {153 @apply bg-background text-foreground;154 }155}Create utils.ts files
Create a lib folder in the root directory of your project and create the utils.ts file with this code.
lib/utils.ts
1import { clsx, type ClassValue } from "clsx";2import { twMerge } from "tailwind-merge";34export function cn(...inputs: ClassValue[]) {5 return twMerge(clsx(inputs));6}Create behsseui.json files
Create a behsseui.json file in the root of your project.
behsseui.json
1{2 "$schema": "https://behsseui.dev/schema.json",3 "componentsDir": "./ui",4 "libDir": "./lib",5 "tailwind": {6 "css": "./app/globals.css"7 },8 "initialized": true9}