Installation

Get started with UX4G by installing the required dependencies and setting up your project.

Prerequisites
Required

Make sure you have these tools installed before proceeding

Node.js 18+ installed
npm, yarn, or pnpm package manager
Next.js project with TypeScript
Tailwind CSS configured

Step 1: Install Dependencies

npm

npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge

pnpm

pnpm add @radix-ui/react-slot class-variance-authority clsx tailwind-merge

yarn

yarn add @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Step 2: Configure Tailwind CSS

Update your tailwind.config.ts file with the UX4G design tokens:

tailwind.config.ts

import type { Config } from "tailwindcss"

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          '50': '#F3F1FF',
          '100': '#EBE7FF',
          '200': '#D6CDFF',
          '300': '#BDB0FF',
          '400': '#9B8AFF',
          '500': '#7C66FF',
          '600': '#5D42FF',
          '700': '#4829E6',
          '800': '#3920B8',
          '900': '#2A178A',
        },
        secondary: {
          '50': '#F5F3FF',
          '100': '#EDE9FE',
          '200': '#DDD6FE',
          '300': '#C4B5FD',
          '400': '#A78BFA',
          '500': '#8B5CF6',
          '600': '#7C3AED',
          '700': '#6D28D9',
          '800': '#5B21B6',
          '900': '#4C1D95',
        },
        success: {
          '50': '#F0FDF4',
          '100': '#DCFCE7',
          '200': '#BBF7D0',
          '300': '#86EFAC',
          '400': '#4ADE80',
          '500': '#22C55E',
          '600': '#16A34A',
          '700': '#15803D',
          '800': '#166534',
          '900': '#14532D',
        },
        danger: {
          '50': '#FEF2F2',
          '100': '#FEE2E2',
          '200': '#FECACA',
          '300': '#FCA5A5',
          '400': '#F87171',
          '500': '#EF4444',
          '600': '#DC2626',
          '700': '#B91C1C',
          '800': '#991B1B',
          '900': '#7F1D1D',
        },
        warning: {
          '50': '#FFF7ED',
          '100': '#FFEDD5',
          '200': '#FED7AA',
          '300': '#FDBA74',
          '400': '#FB923C',
          '500': '#F97316',
          '600': '#EA580C',
          '700': '#C2410C',
          '800': '#9A3412',
          '900': '#7C2D12',
        },
        neutral: {
          '50': '#FAFAFA',
          '100': '#F5F5F5',
          '200': '#E5E5E5',
          '300': '#D4D4D4',
          '400': '#A3A3A3',
          '500': '#737373',
          '600': '#525252',
          '700': '#404040',
          '800': '#262626',
          '900': '#171717',
        },
      },
      fontSize: {
        'display-1': ['80px', { lineHeight: '100px', fontWeight: '500', letterSpacing: '0' }],
        'display-2': ['72px', { lineHeight: '88px', fontWeight: '500', letterSpacing: '0' }],
        'display-3': ['64px', { lineHeight: '80px', fontWeight: '400', letterSpacing: '0' }],
        'display-4': ['56px', { lineHeight: '72px', fontWeight: '500', letterSpacing: '0' }],
        'display-5': ['48px', { lineHeight: '56px', fontWeight: '500', letterSpacing: '0' }],
        'display-6': ['40px', { lineHeight: '48px', fontWeight: '500', letterSpacing: '0' }],
        'headline-1': ['40px', { lineHeight: '48px', fontWeight: '500', letterSpacing: '0' }],
        'headline-2': ['32px', { lineHeight: '40px', fontWeight: '500', letterSpacing: '0' }],
        'headline-3': ['28px', { lineHeight: '32px', fontWeight: '500', letterSpacing: '0' }],
        'headline-4': ['24px', { lineHeight: '28px', fontWeight: '500', letterSpacing: '0' }],
        'headline-5': ['20px', { lineHeight: '24px', fontWeight: '500', letterSpacing: '0' }],
        'headline-6': ['16px', { lineHeight: '20px', fontWeight: '500', letterSpacing: '0' }],
        'title-1': ['22px', { lineHeight: '28px', fontWeight: '500', letterSpacing: '0' }],
        'title-2': ['16px', { lineHeight: '24px', fontWeight: '500', letterSpacing: '+0.15px' }],
        'title-3': ['14px', { lineHeight: '20px', fontWeight: '500', letterSpacing: '+0.1px' }],
        'label-1': ['14px', { lineHeight: '20px', fontWeight: '500', letterSpacing: '+0.1px' }],
        'label-2': ['12px', { lineHeight: '16px', fontWeight: '500', letterSpacing: '+0.5px' }],
        'label-3': ['11px', { lineHeight: '16px', fontWeight: '500', letterSpacing: '+0.5px' }],
        'body-1': ['16px', { lineHeight: '24px', fontWeight: '400', letterSpacing: '+0.5px' }],
        'body-2': ['14px', { lineHeight: '20px', fontWeight: '400', letterSpacing: '+0.25px' }],
        'body-3': ['12px', { lineHeight: '16px', fontWeight: '400', letterSpacing: '+0.4px' }],
      },
      boxShadow: {
        'xs': '0px 1px 2px 0px rgba(0, 0, 0, 0.05)',
        's': '0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)',
        'md': '0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)',
        'l': '0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05)',
        'xl': '0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04)',
        '2xl': '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
        'primary-active': '0 0 0 4px rgba(93, 66, 255, 0.3)',
        'secondary-active': '0 0 0 4px rgba(124, 58, 237, 0.3)',
        'success-active': '0 0 0 4px rgba(22, 163, 74, 0.3)',
        'danger-active': '0 0 0 4px rgba(220, 38, 38, 0.3)',
        'warning-active': '0 0 0 4px rgba(234, 88, 12, 0.3)',
        'neutral-active': '0 0 0 4px rgba(115, 115, 115, 0.3)',
      },
    },
  },
  plugins: [],
}

export default config

Step 3: Update Global Styles

Update your app/globals.css file to include the UX4G font and base styles:

app/globals.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap');

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

@layer base {
  html:focus-within {
    scroll-behavior: smooth;
  }
  body {
    font-family: 'Noto Sans', sans-serif;
    color: rgb(17 24 39);
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
}

Step 4: Set Up Utilities

Create lib/utils.ts with the utility functions:

lib/utils.ts

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Step 5: Next Steps

Browse Components

Explore all available UX4G components and their usage examples.

View Components

Check Templates

See ready-to-use templates built with UX4G components.

View Templates

Troubleshooting

Common issues and solutions

Styles not applying?

Make sure your PostCSS configuration includes Tailwind CSS and Autoprefixer.

TypeScript errors?

Ensure your tsconfig.json includes the correct path mappings for the @ alias.

Need help?

Check our GitHub repository for issues and discussions.

Components