Logo
hummingbird

React & React Router Framework Mood

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

Install Tailwindcss

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

Install Hummingbird

Install Hummingbird via preferred package manager:

npm install @hummingbirdui/hummingbird
Include Hummingbird css

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

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

Initialize hummingbird at the root of your application, for example in App.js or App.tsx.

import { useEffect } from "react";
import { useLocation } from "react-router";

async function loadHummingbird() {
  return import("@hummingbirdui/hummingbird");
}

function App() {
  const location = useLocation();

  useEffect(() => {
    const initHummingbird = async () => {
      await loadHummingbird();
    };
    initHummingbird();
  }, [location.pathname]);

  return (
    ...
  );
}

export default App;
Optimize

Optional: you can optimize your application by only importing the components you need.

import { useEffect } from "react";
import { useLocation } from "react-router";

function loadHummingbird() {
  return Promise.all([
    // 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')
  ]);
}

function App() {
  const location = useLocation();

  useEffect(() => {
    const initHummingbird = async () => {
      await loadHummingbird();
    };
    initHummingbird();
  }, [location.pathname]);

  return (
    ...
  );
}

export default App;
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 { useEffect, useState } from "react";
import { useLocation } from "react-router";
import type { ModalInstance } from "@hummingbirdui/hummingbird";

async function loadHummingbird() {
  return import("@hummingbirdui/hummingbird");
}

function Component() {
  const location = useLocation();
  const [myModal, setMyModal] = useState<ModalInstance>();

  useEffect(() => {
    const initModal = async () => {
      const { Modal } = await loadHummingbird();
      setMyModal(new Modal(".modal"));
    };
    initModal();
  }, [location.pathname]);

  const handleClick = () => {
    myModal?.toggle();
  };

  return (
    <div>
      <button className="btn btn-primary" onClick={handleClick}>Primary</button>
      <div className="modal">...</div>
    </div>
  );
}

export default Component;