Installation

How to install Kaida in your application.

Follow this steps:

1. Install Tailwind CSS v4.
2. Copy-paste our Tailwind CSS theme.
3. Copy-paste the components into your project.

JS

For components that require JavaScript, include the package via CDN and initialize the corresponding script.

Tailwind CSS theme

@theme {
  --breakpoint-sm: 576px;
  --breakpoint-md: 992px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1600px;
  --breakpoint-2xl: 2000px;

  --spacing-2px: 2px;
  --spacing-4px: 4px;
  --spacing-8px: 8px;
  --spacing-12px: 12px;
  --spacing-16px: 16px;
  --spacing-20px: 20px;
  --spacing-24px: 24px;
  --spacing-32px: 32px;
  --spacing-48px: 48px;
  --spacing-64px: 64px;
  --spacing-96px: 96px;
  --spacing-128px: 128px;
  --spacing-192px: 192px;
  --spacing-256px: 256px;
  --spacing-576px: 576px;
  --spacing-992px: 992px;
  --spacing-1200px: 1200px;
  --spacing-1280px: 1280px;
  --spacing-1600px: 1600px;
  --spacing-2000px: 2000px;

  --radius-2px: 2px;
  --radius-4px: 4px;
  --radius-8px: 8px;
  --radius-12px: 12px;
  --radius-16px: 16px;
  --radius-20px: 20px;
  --radius-24px: 24px;
  --radius-32px: 32px;
  --radius-48px: 48px;
  --radius-64px: 64px;
  --radius-96px: 96px;
  --radius-128px: 128px;
  --radius-192px: 192px;
  --radius-256px: 256px;

  --color-yellow-50: #FDF8E2;
  --color-yellow-100: #FFF1AD;
  --color-yellow-200: #FDE572;
  --color-yellow-300: #FDDC35;
  --color-yellow-400: #F5CE00;
  --color-yellow-500: #DEAD12;
  --color-yellow-600: #BD870E;
  --color-yellow-700: #9C670E;
  --color-yellow-800: #7A4D10;
  --color-yellow-900: #7A4D10;
  --color-red: #F75B51;
  --color-red-50: #FDF2F2;
  --color-red-100: #FFDADA;
  --color-red-200: #FFBFBF;
  --color-red-300: #FF8888;
  --color-red-400: #FF5A5A;
  --color-red-500: #DE3C3C;
  --color-red-600: #B52121;
  --color-red-700: #9C1D1D;
  --color-red-800: #7A1515;
  --color-red-900: #591010;
  --color-green-50: #EBF9F3;
  --color-green-100: #CAF2E1;
  --color-green-200: #96E9C6;
  --color-green-300: #5BD69E;
  --color-green-400: #2BC585;
  --color-green-500: #0AB16B;
  --color-green-600: #019356;
  --color-green-700: #007041;
  --color-green-800: #005934;
  --color-green-900: #004025;
  --color-blue-50: #F2F4FF;
  --color-blue-100: #D9DFFF;
  --color-blue-200: #BFCAFF;
  --color-blue-300: #8799F7;
  --color-blue-400: #5B73EE;
  --color-blue-500: #3C57E5;
  --color-blue-600: #1F3AC5;
  --color-blue-700: #0E27A6;
  --color-blue-800: #041A86;
  --color-blue-900: #001166;
  --color-black: #1D1D1F;
  --color-black-50: #F5F5F5;
  --color-black-100: #E6E6E9;
  --color-black-200: #D9D9DE;
  --color-black-300: #C5C5CD;
  --color-black-400: #ABADB8;
  --color-black-500: #8A8C97;
  --color-black-600: #70727C;
  --color-black-700: #5D606C;
  --color-black-800: #46474D;
  --color-black-900: #2D2E33;
  --color-white: #FFFFFF;

  --text-h1: 4.5rem;
  --text-h1--line-height: 1.6;
  --text-h1--letter-spacing: -0.05em;
  --text-h1--font-weight: 700;
  --text-h2: 4rem;
  --text-h2--line-height: 1.6;
  --text-h2--letter-spacing: -0.05em;
  --text-h2--font-weight: 700;
  --text-h3: 3rem;
  --text-h3--line-height: 1.6;
  --text-h3--letter-spacing: -0.05em;
  --text-h3--font-weight: 700;
  --text-h4: 2.5rem;
  --text-h4--line-height: 1.6;
  --text-h4--letter-spacing: -0.05em;
  --text-h4--font-weight: 700;
  --text-h5: 2rem;
  --text-h5--line-height: 1.6;
  --text-h5--letter-spacing: -0.05em;
  --text-h5--font-weight: 700;
  --text-h6: 1.75rem;
  --text-h6--line-height: 1.6;
  --text-h6--letter-spacing: -0.04em;
  --text-h6--font-weight: 700;
  --text-h7: 1.5rem;
  --text-h7--line-height: 1.6;
  --text-h7--font-weight: 700;
  --text-h8: 1.25rem;
  --text-h8--line-height: 1.6;
  --text-h8--font-weight: 700;
  --text-h9: 1rem;
  --text-h9--line-height: 1.6;
  --text-h9--font-weight: 700;
  --text-h10: 0.875rem;
  --text-h10--line-height: 1.6;
  --text-h10--font-weight: 700;
  --text-h11: 0.75rem;
  --text-h11--line-height: 1.2;
  --text-h11--font-weight: 700;
  --text-p1: 1.25rem;
  --text-p1--font-weight: 400;
  --text-p2: 1rem;
  --text-p2--font-weight: 400;
  --text-p3: 0.875rem;
  --text-p3--font-weight: 400;
  --text-p4: 0.75rem;
  --text-p4--font-weight: 400;
  --text-u1: 1.125rem;
  --text-u1--line-height: 1.75;
  --text-u1--font-weight: 400;
  --text-u2: 0.875rem;
  --text-u2--line-height: 1.85;
  --text-u2--font-weight: 400;
  --text-u3: 0.75rem;
  --text-u3--line-height: 1.85;
  --text-u3--font-weight: 400;
  --text-u4: 0.625rem;
  --text-u4--line-height: 1.85;
  --text-u4--font-weight: 400;
  --text-btn1: 1.25rem;
  --text-btn1--line-height: 1.6;
  --text-btn1--font-weight: 500;
  --text-btn2: 1.125rem;
  --text-btn2--line-height: 1.6;
  --text-btn2--font-weight: 500;
  --text-btn3: 1rem;
  --text-btn3--line-height: 1.6;
  --text-btn3--font-weight: 500;
  --text-btn4: 0.875rem;
  --text-btn4--line-height: 1.6;
  --text-btn4--font-weight: 500;
}

Rails

To install Tailwind CSS v4 in Rails App, run the following command in your project:

gem 'tailwindcss-rails', '4.0'
gem 'tailwindcss-ruby', '4.0'
bundle install