Next

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

Installation

1. Install Tailwind CSS

Follow the official installation guide to install Tailwind CSS in a Next.js 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., globals.css).

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

4. Initialize JS plugins

Create a wrapper component that dynamically imports Hummingbird whenever the route changes. This ensures the library is loaded only on the client side.

"use client";

import { useEffect } from "react";
import dynamic from "next/dynamic";
import { usePathname } from "next/navigation";

function HummingbirdWrapper() {
  const path = usePathname();
  useEffect(() => {
    const loadHummingbird = async () => {
      await import("@hummingbirdui/hummingbird");
    };

    loadHummingbird();
  }, [path]);

  return null;
}

const HummingbirdUI = dynamic(() => Promise.resolve(HummingbirdWrapper), {
  ssr: false,
});

export default HummingbirdUI;

Add the wrapper to layout.tsx so Hummingbird scripts are included globally, making components available across all pages.

import HummingbirdUI from "./components/HumminhbirdUI";

export default function RootLayout({children,}: Readonly<{children: React.ReactNode;}>) {
  return (
    <html lang="en">
      <body
        className={...}
      >
        {children}
        <HummingbirdUI />
      </body>
    </html>
  );
}

Optimization

To reduce the final bundle size, import only the specific JavaScript plugins required. The example below demonstrates importing only the modal script.

function HummingbirdWrapper() {
  const path = usePathname();
  useEffect(() => {
    const loadHummingbird = async () => {
      // await import('@hummingbirdui/hummingbird/lib/esm/scripts/alert');
      // await import('@hummingbirdui/hummingbird/lib/esm/scripts/button');
      // await import('@hummingbirdui/hummingbird/lib/esm/scripts/carousel');
      // await import('@hummingbirdui/hummingbird/lib/esm/scripts/collapse');
      // await import('@hummingbirdui/hummingbird/lib/esm/scripts/dropdown');
      await import('@hummingbirdui/hummingbird/lib/esm/scripts/modal');
      // await import('@hummingbirdui/hummingbird/lib/esm/scripts/offcanvas');
      // await import('@hummingbirdui/hummingbird/lib/esm/scripts/popover');
      // await import('@hummingbirdui/hummingbird/lib/esm/scripts/scrollspy');
      // await import('@hummingbirdui/hummingbird/lib/esm/scripts/tab');
      // await import('@hummingbirdui/hummingbird/lib/esm/scripts/toast');
      // await import('@hummingbirdui/hummingbird/lib/esm/scripts/tooltip');
    };

    loadHummingbird();
  }, [path]);

  return null;
}

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:

"use client";

import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import type { ModalInstance } from "@hummingbirdui/hummingbird";

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

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

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

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

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

export default Component;