Gatsby

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

Installation

1. Install Tailwind CSS

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

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

4. Initialize JS plugins

Set up a wrapper component to load Hummingbird scripts dynamically on route changes.

// src/components/HummingbirdUI.tsx
import React, { PropsWithChildren, useEffect } from "react";
import { useLocation } from "@reach/router";

const HummingbirdUI = ({ children }: PropsWithChildren) => {
  const location = useLocation();

  useEffect(() => {
    import("@hummingbirdui/hummingbird");
  }, [location.pathname]);

  return <>{children}</>;
};

export default HummingbirdUI;

Configure Gatsby to wrap every page with the Hummingbird provider for global availability.

Edit gatsby-browser.js:

// gatsby-browser.js
import React from "react";
import HummingbirdUI from "./src/components/HummingbirdUI";

export function wrapPageElement({ element, props }) {
  return <HummingbirdUI {...props}>{element}</HummingbirdUI>;
}

Optimization

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

// src/components/HummingbirdUI.tsx
import React, { PropsWithChildren, useEffect } from "react";
import { useLocation } from "@reach/router";

const HummingbirdUI = ({ children }: PropsWithChildren) => {
  const location = useLocation();

  useEffect(() => {
    // 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');
  }, [location.pathname]);

  return <>{children}</>;
};

export default HummingbirdUI;