Introduction

Welcome to the Hummingbird React documentation. It is an open-source React component library built on Hummingbird CSS and Radix UI primitives.

What is Hummingbird React?

Hummingbird React is the official React component library for the Hummingbird design system. It provides a large set of accessible, fully styled React components such as buttons, forms, dialogs, and dropdowns, along with patterns suitable for dashboards, SaaS applications, and e-commerce systems.

The library follows one core principle: Hummingbird CSS owns the visuals, and Radix UI owns the behavior. Every component is styled with Hummingbird's component classes on top of Tailwind CSS, while interactive components use Radix UI primitives for keyboard navigation, focus management, and accessibility. Hummingbird React is the bridge between the two.

Why Hummingbird React?

  • Provides ready-to-use React components with a consistent, typed API.
  • Ships accessible behavior out of the box through Radix UI primitives.
  • Reduces reliance on large sets of Tailwind utility classes.
  • Offers component variants through simple props such as variant, color, and size.
  • Supports full customization using the className prop and Tailwind utility classes.
  • Provides global and component-specific CSS variables for deeper configuration.
  • Includes complete TypeScript definitions for every component.
  • Supports tree shaking through per-component imports.

Pre-requisite knowledge

  • HTML
  • CSS
  • JavaScript
  • React
  • Tailwind CSS

Join our community

If you have any questions about Hummingbird React, you can reach out to our community on GitHub Discussions, Discord or X (Twitter).

NextInstallation