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 { init_accordions } from './components/accordion';

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

Then use in your Blade 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 Vite

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

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

document.addEventListener('DOMContentLoaded', () => {
  init_accordions();
  // 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 { init_accordions } from './components/accordion';

function init_kaida() {
  init_accordions();
  // 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 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>

// resources/js/app.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 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