Logo
hummingbird

Laravel

This guide explains how to set up Hummingbird with Laravel using Tailwind CSS. It covers project setup, configuration, and usage so you can quickly build and style components in your Laravel app.

Installation

1. Install Tailwind CSS

Follow the official installation guide to install Tailwind CSS in your Laravel project.

2. Install Hummingbird

Install Hummingbird via your preferred package manager:

npm install @hummingbirdui/hummingbird

3. Import CSS

Import Hummingbird styles in your main CSS file (e.g., app.css).

@import "tailwindcss";
@import "@hummingbirdui/hummingbird";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

4. Initialize JS plugins

Import all of the Hummingbird scripts in your main JavaScript file (e.g., app.js).

import "@hummingbirdui/hummingbird";

Using Bundle

Include Hummingbird javascript at the end of your blade layotu file.

<script src="../path/to/@hummingbirdui/hummingbird/dist/hummingbird.bundle.min.js"></script>

Optimization

reduce the final bundle size, you can import only the specific JavaScript plugins you need. The below example demonstrates how to import only the modal script.

// import "@hummingbirdui/hummingbird/lib/esm/scripts/alert";
// import "@hummingbirdui/hummingbird/lib/esm/scripts/button";
// import "@hummingbirdui/hummingbird/lib/esm/scripts/carousel";
// import "@hummingbirdui/hummingbird/lib/esm/scripts/collapse";
// import "@hummingbirdui/hummingbird/lib/esm/scripts/dropdown";
import "@hummingbirdui/hummingbird/lib/esm/scripts/modal";
// import "@hummingbirdui/hummingbird/lib/esm/scripts/offcanvas";
// import "@hummingbirdui/hummingbird/lib/esm/scripts/popover";
// import "@hummingbirdui/hummingbird/lib/esm/scripts/scrollspy";
// import "@hummingbirdui/hummingbird/lib/esm/scripts/tab";
// import "@hummingbirdui/hummingbird/lib/esm/scripts/toast";
// import "@hummingbirdui/hummingbird/lib/esm/scripts/tooltip";

JavaScript API

Hummingbird also provides a JavaScript API for programmatic control of components. For example, you can toggle a modal manually using the API.

Here’s how to initialize and use the Modal component:

import { Modal } from '@hummingbirdui/hummingbird';

document.addEventListener("DOMContentLoaded", function () {
  const myModal = new Modal(document.getElementById("myModal"));

  document
    .getElementById("openModalButton")
    .addEventListener("click", function () {
      myModal.show();
    });

  document
    .getElementById("closeModalButton")
    .addEventListener("click", function () {
      myModal.hide();
    });
});