Simple like Bootstrap
Strong like Tailwind

An open-source system sensibly designed for rapid development, without sacrificing the granular control of utility-first CSS.

Get Started

$ npm i @hummingbirdui/hummingbird@latest

Event list

Tasks
My Events
Birthday

Uploader
Hours

Eco-Friendly Energy Solutions

GreenTech Innovations

Project Status

0% 100%

Budget: $790,000
Picker

12:30 AM

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12

00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

AM
PM
JavaScript
```
import { Modal } from "@hummingbirdui/hummingbird";
  const myModal = new Modal('.myModal');
  const button = document.querySelector('.btn');

  button.addEventListener('click', () => {
    myModal.open();
});
```
Blue Palette

50

100

200

300

400

500

600

700

800

900

950

Address Infields

City

Country
Liam Carter

Product Designer

Monthly Net Profit

$25,049

+4.00%
vs last month

Preferences

Active
Mute
Auto
Members

Lila Bennett

Maya Johnson

Ella Parker

10 Amazing Facts About Animals That Will Captivate You

12 min read

Css Variables

.table {
  color: var(--table-color);
  background-color: var(--table-bg);
  border: 1px solid var(--table-border-color);
  border-radius: 0.25rem;
}

Activity

Hours

Eco-Friendly Energy Solutions

GreenTech Innovations

Project Status

0% 100%

Budget: $790,000
Blue Palette

50

100

200

300

400

500

600

700

800

900

950

Address Infields

City

Country
Liam Carter

Product Designer

Monthly Net Profit

$25,049

+4.00%
vs last month

Preferences

Active
Mute
Auto
Members

Lila Bennett

Maya Johnson

Ella Parker

10 Amazing Facts About Animals That Will Captivate You

12 min read

Css Variables

.table {
  color: var(--table-color);
  background-color: var(--table-bg);
  border: 1px solid var(--table-border-color);
  border-radius: 0.25rem;
}

Activity

Every detail, considered.

We built the UI system we always wanted - one that prioritizes clean code, a minimal footprint, and a developer experience that's a joy, not a chore.

Semantic & Clean Markup

Readable, purpose-driven class names for maintainable, clutter-free HTML.

Easy Theming

Customize colors and styles with minimal CSS variable changes.

Fully Customizable

Tweak any component using Tailwind utilities or global design tokens.

Built for Optimization

No unused CSS. Small file sizes. Production-ready out of the box.

Framework Compatible

Enjoy seamless compatibility with all modern frameworks and zero rush.

Structured for Scale

All components follow a consistent design system for better maintainability.

An evolved approach

Hummingbird's utility-first approach delivers smaller bundles, better performance, and advanced customization by eliminating unused CSS.

	Hummingbird	Tailwind CSS	Bootstrap
Ready-to-use components
Clean, semantic HTML
Pre-built dark mode
Utility-first approach
Advanced customization
Accessibility-first design
Zero unused CSS

Extend, don’t eject

Hummingbird offers layered control. Use our global variables for broad changes or a utility class for precise tweaks. It's designed to be easily extended.

Edit the Code Sample

Clean markup, full control.

Ditch long utility class strings. Hummingbird gives you complete freedom of pixel-perfect tweaks - plus full Tailwind flexibility.

<div class="w-75 h-full border border-[#c9d0de] dark:border-[#282c32] rounded-2xl overflow-hidden">
  <img src='./images/nature.png' class="h-1/2 w-full object-cover" alt="card-image" />
  <div class="p-4 h-1/2 flex flex-col">
    <div class="flex justify-between">
      <div>
        <h4 class="mb-1 text-xl text-[#1d2025] dark:text-white">Bali Getaway</h4>
        <p class="text-xs text-[#a4abb9] dark:text-[#7c8491]">5 Days · 4 Nights</p>
      </div>
      <h6 class="text-base text-[#1d2025] dark:text-white">$499 pp</h6>
    </div>
    <p class="text-sm text-[#505763] dark:text-[#a4abb9]">
      Discover the beauty of Bali with guided tours, luxury resorts, and unforgettable sunsets. Perfect for
      families.
    </p>
    <button class="mt-auto w-full h-9 text-sm text-[#fff] dark:text-[#1d2025] font-semibold bg-[#1d2025] dark:bg-[#c9d0de] rounded-lg"
      >Book now</button
    >
  </div>
</div>

<div class="card w-75 rounded-2xl overflow-hidden">
  <img src='./images/nature.png' class="card-img-top object-cover h-1/2" alt="card-image" />
  <div class="card-body">
    <div class="flex justify-between">
      <div>
        <h4 class="card-title">Bali Getaway</h4>
        <p class="text-xs text-subtle">5 Days · 4 Nights</p>
      </div>
      <h6 class="text-default text-base">$499 pp</h6>
    </div>

    <p class="mb-0">
      Discover the beauty of Bali with guided tours, luxury resorts, and unforgettable sunsets. Perfect for
      families.
    </p>
  </div>
  <div class="card-footer p-4">
    <button class="btn btn-neutral w-full">Book now</button>
  </div>
</div>

Bali Getaway

5 Days · 4 Nights

$499 pp

Discover the beauty of Bali with guided tours, luxury resorts, and unforgettable sunsets. Perfect for families.

Dark mode, perfected.

Hummingbird's dark mode offers automatic detection or manual toggle, ensuring optimal contrast and a sleek appearance.

Plug & play components,
for every modern framework

Hummingbird, the framework-agnostic tool provides typed wrappers for popular tools, ensuring smooth integration & easy DIYs.

View integration guides

Production-ready UIs,
out of the box

Hummingbird provides production-ready components. Filter by category or use-case to find what you need.

Browse components

Accordion

2 components

Alert

3 components

Avatar

14 components

Badge

14 components

Breadcrumb

2 components

Card

20 components

Carousel

2 components

Checkbox

2 components

Collapse

20 components

Global CSS Core

A smart core built on CSS variables, giving you a logical and flexible foundation for effortless customization.

.btn {
  --btn-color: var(--text-color-default);
  --btn-font-weight: var(--font-weight-semibold);
  --btn-bg: var(--background-color-highlight);

  color: var(--btn-color);
  font-weight: var(--btn-font-weight);
  background-color: var(--btn-bg);
}

Global Styles,
Granular Control

Hummingbird employs a two-tier CSS framework that offers both global oversight and localized adaptability.

Learn more about CSS variables Browse components

Centralized Customization

Change a root variable and watch your entire UI update instantly. Total consistency, zero repetitive work.

@theme {
  --text-color-default: var(--color-gray-800);
  --border-color-light: var(--color-gray-300);
  --background-color-highlight: var(--color-gray-100);
}

Component-Level Overrides

Override styles on any component with a single, clean declaration. No more fighting with specificity.

.btn {
  --btn-color: var(--text-color-subtle);
  --btn-border-color: var(--border-color-base);
  --btn-bg: var(--background-color-emphasis);
}

Modern JavaScript,
built to perform

We revamped Bootstrap's JavaScript for the modern web with TypeScript support and zero dependencies.

Learn more about JavaScript Browse components

Alert

Provide relevant notices and feedback users can quickly dismiss.

Collapse

Easily show and hide sections of content with a toggle.

Offcanvas

Slide in side menus and panels from outside the browser viewport.

Button

Add buttons to handle user clicks and trigger app actions.

Dropdown

Build accessible and easy-to-use menus for navigation or actions.

Tab

Organize content into switchable tabs for a cleaner interface.

Carousel

Create smooth, flexible sliders for showcasing images or content.

Modal

Open pop-up dialogs over content to focus user tasks.

Tooltip

Display small pop-ups with extra info when a user hovers on UI.

Beautiful UI or Cleaner Code? Both!

Spend less time on boilerplate and more time on the features that matter. Start your next project with Hummingbird to finally have it all.

Explore Hummingbird

hummingbird

Simple like Bootstrap Strong like Tailwind

Event list

Uploader

Hours

Eco-Friendly Energy Solutions

Picker

JavaScript

Blue Palette

Address Infields

Liam Carter

Monthly Net Profit

$25,049

Preferences

Members

10 Amazing Facts About Animals That Will Captivate You

Css Variables

Activity

Hours

Eco-Friendly Energy Solutions

Blue Palette

Address Infields

Liam Carter

Monthly Net Profit

$25,049

Preferences

Members

10 Amazing Facts About Animals That Will Captivate You

Css Variables

Activity

Every detail, considered.

Semantic & Clean Markup

Easy Theming

Fully Customizable

Built for Optimization

Framework Compatible

Structured for Scale

An evolved approach

Extend, don’t eject

Edit the Code Sample

Clean markup, full control.

Bali Getaway

$499 pp

Dark mode, perfected.

Plug & play components,for every modern framework

Production-ready UIs, out of the box

Accordion

Alert

Avatar

Badge

Breadcrumb

Card

Carousel

Checkbox

Collapse

Global CSS Core

Global Styles, Granular Control

Centralized Customization

Component-Level Overrides

Modern JavaScript, built to perform

Alert

Collapse

Offcanvas

Button

Dropdown

Tab

Carousel

Modal

Tooltip

Beautiful UI or Cleaner Code? Both!

Simple like Bootstrap
Strong like Tailwind

Plug & play components,
for every modern framework

Production-ready UIs,
out of the box

Global Styles,
Granular Control

Modern JavaScript,
built to perform