Logo
hummingbird

Next

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

Install Tailwindcss

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

Install Hummingbird

Install Hummingbird via your preferred package manager:

npm install @hummingbirdui/hummingbird
Include Hummingbird CSS

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

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

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 your 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>
  );
}
Optimize

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

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, you can toggle a modal 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}>Primary</button>
      <div className="modal">...</div>
    </div>
  );
}

export default Component;