Laravel

How to install and use Kaida components in your Laravel application.

Installation

Install Tailwind CSS v4 in your Laravel project:

For Laravel 11+: follow the official Laravel Tailwind guide
For Laravel 10: Laravel 10 Tailwind documentation
Or use Laravel Vite plugin

Copy the theme CSS variables to your resources/css/app.css.
Copy the component files into your project (e.g., resources/js/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:

<!-- resources/views/components/button.blade.php -->
<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">
  {{ $slot }}
</button>

Components with JavaScript

Components like Accordion, Toast, Dropdown require JavaScript initialization.

Basic initialization

Copy the JS file to resources/js/components/ and import in your entry file:

// resources/js/app.js
import { initAccordions } from './components/accordion';

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

Then use in your Blade views:

<div 
  class="list-none"
  data-accordion="open"
  role="list">
  <!-- accordion items -->
</div>

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

Using with Vite

Laravel 9+ uses Vite for bundling. Make sure to import your components:

// resources/js/app.js
import './bootstrap';
import { initAccordions } from './components/accordion';

document.addEventListener('DOMContentLoaded', () => {
  initAccordions();
  // init_other_components();
});

<!-- resources/views/layouts/app.blade.php -->
<head>
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Using with Livewire

For Livewire components, reinitialize after Livewire updates:

// resources/js/app.js
import { initAccordions } from './components/accordion';

function init_kaida() {
  initAccordions();
  // init_other_components();
}

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

// Livewire 3.x
document.addEventListener('livewire:navigated', init_kaida);

// Livewire 2.x
document.addEventListener('livewire:load', init_kaida);

Example

Here's a complete example using the Accordion component:

<!-- resources/views/faq.blade.php -->
<div class="list-none" data-accordion="open" role="list">
  <li role="listitem">
    <button
      id="header-0"
      type="button"
      data-accordion-trigger="#panel-0"
      aria-expanded="false"
      aria-controls="panel-0"
      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"
      role="region"
      aria-labelledby="header-0"
      class="hidden">
      <div class="px-24px pb-20px text-p2">
        <p>
          Description
        </p>
      </div>
    </div>
  </li>

  <li role="listitem">
    <button
      id="header-1"
      type="button"
      data-accordion-trigger="#panel-1"
      aria-expanded="false"
      aria-controls="panel-1"
      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"
      role="region"
      aria-labelledby="header-1"
      class="hidden">
      <div class="px-24px pb-20px text-p2">
        <p>
          Description
        </p>
      </div>
    </div>
  </li>
</div>

// resources/js/app.js
import { initAccordions } from './components/accordion';

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

Key points:

No JS components (Button, Badge, Input, Card, etc.) — just copy HTML to Blade templates
JS components (Accordion, Toast, Dropdown, etc.) — initialize on DOMContentLoaded
Use standard HTML attributes in Blade views (class, not className)
Initialize once to avoid duplicates
Vite: Import components in resources/js/app.js and use @vite directive
Livewire: Reinitialize on livewire:navigated (v3) or livewire:load (v2)
Blade Components: Can wrap HTML in reusable Blade components
Data attributes (data-accordion, data-accordion-trigger, etc.) remain the same

On this page

Laravel
Installation
Usage
Example