Get StartedIntroduction

Introduction

SmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, and Motion.

Installation

To use SmoothUI components, you will need to install the following dependencies:

Terminal

npm install motion tailwindcss lucide-react clsx tailwind-merge

Color System

SmoothUI uses a carefully crafted color system with both light and dark variants. Add these colors to your tailwind.config.ts:

global.css

@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@theme {
  /* Colors: Dark mode */
  --color-dark-50: hsl(0 0% 8.5%);
  --color-dark-100: hsl(0 0% 11.0%);
  --color-dark-200: hsl(0 0% 13.6%);
  --color-dark-300: hsl(0 0% 15.8%);
  --color-dark-400: hsl(0 0% 17.9%);
  --color-dark-500: hsl(0 0% 20.5%);
  --color-dark-600: hsl(0 0% 31.2%);
  --color-dark-700: hsl(0 0% 43.9%);
  --color-dark-800: hsl(0 0% 49.4%);
  --color-dark-900: hsl(0 0% 62.8%);
  --color-dark-950: hsl(0 0% 93.0%);
  /* Colors: Light mode */
  --color-light-50: hsl(0 0% 99.0%);
  --color-light-100: hsl(0 0% 97.3%);
  --color-light-200: hsl(0 0% 95.1%);
  --color-light-300: hsl(0 0% 93.0%);
  --color-light-400: hsl(0 0% 90.9%);
  --color-light-500: hsl(0 0% 88.3%);
  --color-light-600: hsl(0 0% 77.6%);
  --color-light-700: hsl(0 0% 65.9%);
  --color-light-800: hsl(0 0% 60.4%);
  --color-light-900: hsl(0 0% 43.5%);
  --color-light-950: hsl(0 0% 9.0%);
}

Usage Tips

Here are some tips to get the most out of SmoothUI components:

All components support both light and dark modes out of the box
Use the provided color system for consistent theming
Components are built with motion for smooth animations
Each component can be customized using Tailwind classes
Check individual component documentation for specific customization options