Laravel

This guide explains how to set up Hummingbird with Laravel using Tailwind CSS. It covers project setup, configuration, and usage for quickly building and styling components in a Laravel app.

Installation

1. Install Tailwind CSS

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

2. Install Hummingbird

Install Hummingbird via preferred package manager:

npm install @hummingbirdui/hummingbird

3. Import CSS

Import Hummingbird styles in the 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 the main JavaScript file (e.g., app.js).

import "@hummingbirdui/hummingbird";

Using Bundle

Include Hummingbird javascript at the end of the blade layout file.

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

Optimization

To reduce the final bundle size, import only the specific JavaScript plugins required. The example below demonstrates importing 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, a modal can be toggled 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();
    });
});