Rails

How to install and use Kaida components in your Ruby on Rails application.

Installation

Install Tailwind CSS v4 in your Rails project:

Add to your Gemfile: ruby gem 'tailwindcss-rails', '4.0' gem 'tailwindcss-ruby', '4.0'
Run: bundle install
For more details: tailwindcss-rails documentation

Copy the theme CSS variables to your app/assets/stylesheets/application.tailwind.css or app/assets/stylesheets/tailwind/application.css.
Copy the component files into your project (e.g., app/javascript/components/).

Usage

Kaida components are divided into two types:

Components without JavaScript

Components like Button, Badge, Input, Card work with pure CSS/Tailwind. No JavaScript initialization needed — just copy the HTML:

<!-- app/views/components/_button.html.erb -->
<button
  name="button"
  type="button"
  class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-white dark:text-accent-900 border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-accent-900 border-accent-900 hover:bg-accent-700 hover:border-accent-700 focus:bg-accent-700 focus:border-accent-700 active:bg-accent-500 active:border-accent-500 dark:bg-white dark:border-white dark:hover:bg-accent-200 dark:hover:border-accent-200 dark:focus:bg-accent-200 dark:focus:border-accent-200 dark:active:bg-accent-400 dark:active:border-accent-400"
  title="Get started">
  Get started
</button>

Components with JavaScript

Components like Accordion, Toast, Dropdown require JavaScript initialization.

Basic initialization

Copy the JS file to app/javascript/components/ and import in your entry file:

// app/javascript/application.js
import { init_accordions } from './components/accordion';

document.addEventListener('DOMContentLoaded', () => {
  init_accordions();
});

Then use in your views:

<div data-accordion="open">
  <!-- accordion items -->
</div>

Important: Call init_accordions() only once on page load. Multiple calls will create duplicate instances.

Using with Turbo

If you're using Turbo Drive/Turbo Frames, reinitialize after Turbo navigation:

// app/javascript/application.js
import { init_accordions } from './components/accordion';

function initKaida() {
  init_accordions();
  // init_other_components();
}

// Initial load
document.addEventListener('DOMContentLoaded', initKaida);

// Turbo navigation
document.addEventListener('turbo:load', initKaida);

Using with Import Maps (Rails 7+)

// config/importmap.rb
pin "accordion", to: "components/accordion.js"

// app/javascript/controllers/application.js
import { Controller } from "@hotwired/stimulus"
import { init_accordions } from "accordion"

export default class extends Controller {
  connect() {
    init_accordions();
  }
}

Example

Here's a complete example using the Accordion component:

<!-- app/views/pages/faq.html.erb -->
<div data-accordion="open">
  <button
    type="button"
    data-accordion-trigger="#panel-0"
    aria-expanded="false"
    class="flex items-center justify-between gap-16px w-full pt-20px pb-20px px-24px text-h9 rtl:text-right border-t border-accent-200 dark:border-black-600 [&.active]:pb-12px will-change:padding-bottom [&>span]:will-change:opacity transition-all [&>span]:transition-all hover:[&>span]:opacity-70">
    <span>
      Text
    </span>
    <svg
      data-accordion-icon=""
      class="rotate-180 shrink-0"
      aria-hidden="true"
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M18 15L12 9L6 15"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </button>
  <div
    id="panel-0"
    class="hidden">
    <div class="px-24px pb-20px text-p2">
      <p>
        Description
      </p>
    </div>
  </div>
  
  <button
    type="button"
    data-accordion-trigger="#panel-1"
    aria-expanded="false"
    class="flex items-center justify-between gap-16px w-full pt-20px pb-20px px-24px text-h9 rtl:text-right border-t border-accent-200 dark:border-black-600 [&.active]:pb-12px will-change:padding-bottom [&>span]:will-change:opacity transition-all [&>span]:transition-all hover:[&>span]:opacity-70">
    <span>
      Text
    </span>
    <svg
      data-accordion-icon=""
      class="rotate-180 shrink-0"
      aria-hidden="true"
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M18 15L12 9L6 15"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </button>
  <div
    id="panel-1"
    class="hidden">
    <div class="px-24px pb-20px text-p2">
      <p>
        Description
      </p>
    </div>
  </div>
</div>

// app/javascript/application.js
import { init_accordions } from './components/accordion';

document.addEventListener('DOMContentLoaded', () => {
  init_accordions();
});

Key points:

No JS components (Button, Badge, Input, Card, etc.) — just copy HTML to ERB/HAML
JS components (Accordion, Toast, Dropdown, etc.) — initialize on DOMContentLoaded
Use standard HTML attributes in Rails views (class, not className)
Initialize once to avoid duplicates
Turbo: Reinitialize on turbo:load event
Import Maps: Pin components in config/importmap.rb
Stimulus: Can wrap initialization in Stimulus controllers
Data attributes (data-accordion, data-accordion-trigger, etc.) remain the same

On this page

Rails
Installation
Usage
Example