{"id":46384324,"url":"https://github.com/hummingbirdui/hummingbird","last_synced_at":"2026-04-19T12:01:12.841Z","repository":{"id":279008186,"uuid":"936000240","full_name":"hummingbirdui/hummingbird","owner":"hummingbirdui","description":"The most sensible component system for Tailwind.","archived":false,"fork":false,"pushed_at":"2026-04-19T10:02:17.000Z","size":88867,"stargazers_count":43,"open_issues_count":0,"forks_count":10,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-19T10:27:32.048Z","etag":null,"topics":["component","css","html","hummingbird-ui","javascript","tailwind","tailwindcss","typescript","ui","ui-components","ui-framework"],"latest_commit_sha":null,"homepage":"https://hbui.dev","language":"MDX","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hummingbirdui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-20T11:17:20.000Z","updated_at":"2026-04-19T09:56:56.000Z","dependencies_parsed_at":"2026-01-18T13:09:16.529Z","dependency_job_id":null,"html_url":"https://github.com/hummingbirdui/hummingbird","commit_stats":null,"previous_names":["hummingbird-ui/hummingbird","hummingbirdui/hummingbird"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/hummingbirdui/hummingbird","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hummingbirdui%2Fhummingbird","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hummingbirdui%2Fhummingbird/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hummingbirdui%2Fhummingbird/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hummingbirdui%2Fhummingbird/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hummingbirdui","download_url":"https://codeload.github.com/hummingbirdui/hummingbird/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hummingbirdui%2Fhummingbird/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32005831,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","css","html","hummingbird-ui","javascript","tailwind","tailwindcss","typescript","ui","ui-components","ui-framework"],"created_at":"2026-03-05T07:03:41.471Z","updated_at":"2026-04-19T12:01:12.824Z","avatar_url":"https://github.com/hummingbirdui.png","language":"MDX","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n   \u003ca href=\"https://hbui.dev/\"\u003e\n      \u003cimg  width=\"350\" src='https://raw.githubusercontent.com/hummingbirdui/hummingbird/87dc656e578d3e6fd0e4a45eabe1f5e02bdeafd1/apps/docs/public/images/logos/hummingbird-lg.svg' alt=\"Logo\" class=\"w-10 h-10\" /\u003e\n   \u003c/a\u003e\n\nThe most sensible component system for Tailwind.\n\n![downloads](https://img.shields.io/npm/dt/@hummingbirdui/hummingbird?style=flat-square)\n![npm](https://img.shields.io/npm/v/@hummingbirdui/hummingbird?style=flat-square)\n![license](https://img.shields.io/npm/l/@hummingbirdui/hummingbird?style=flat-square)\n\n\u003c/div\u003e\n\n---\n\n## Table of contents\n\n- [Documentation](#documentation)\n- [Getting Started](#getting-started)\n- [Installation](#installation)\n  - [Install Tailwind CSS](#1-install-tailwind-css)\n  - [Install Hummingbird](#2-install-hummingbird)\n  - [Import CSS](#3-import-css)\n  - [Initialize JS plugins](#4-initialize-js-plugins)\n- [Optimization](#optimization)\n- [TypeScript Support](#typescript-support)\n- [ESM vs CJS](#esm-vs-cjs)\n- [Include using CDN](#include-using-cdn)\n  - [Play CDN](#play-cdn)\n  - [CDN Script](#cdn-script)\n- [Supported Frameworks](#supported-frameworks)\n- [License](#license)\n- [Contribution guidelines](#contribution-guidelines)\n- [Meet the Team](#meet-the-team)\n- [Contributors](#contributors)\n\n## Documentation\n\nComprehensive documentation is available at [hbui.dev](https://hbui.dev/).\n\n## Getting started\n\nHummingbird is a fast, lightweight UI library built on top of Tailwind CSS utility classes. Write cleaner HTML, customize with utilities, and bring your project to life with interactive, accessible components. You can:\n\n- Use it as a CSS library\n- Import individual JS components (like Modal, Dropdowns, etc.)\n- Integrate with React, Vue, Angular, Astro, or any modern JS framework\n\n## Installation\n\n### 1. Install Tailwind CSS\n\nEnsure you have a project set up with Tailwind CSS. If you haven't set up Tailwind CSS yet, follow the \u003ca href=\"https://tailwindcss.com/docs/installation\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eofficial installation guide\u003c/a\u003e.\n\n### 2. Install Hummingbird\n\nInstall Hummingbird via your preferred package manager:\n\n```bash\n# Using npm\nnpm install @hummingbirdui/hummingbird\n\n# Using yarn\nyarn add @hummingbirdui/hummingbird\n```\n\n### 3. Import CSS\n\nImport Hummingbird styles in your main CSS file (e.g., `styles.css`).\n\n```ts\n@import \"tailwindcss\";\n@import \"@hummingbirdui/hummingbird\";\n```\n\n### 4. Initialize JS plugins\n\nInclude Hummingbird JavaScript at the end of your HTML body.\n\n```html\n\u003cscript src=\"../path/to/@hummingbirdui/hummingbird/dist/hummingbird.bundle.min.js\"\u003e\u003c/script\u003e\n```\n\nAlternatively, if using a build system (like Vite or Webpack), import Hummingbird directly in the JavaScript entry file.\n\n```ts\nimport '@hummingbirdui/hummingbird';\n```\n\n## Optimization\n\nTo reduce the final bundle size, you can import only the specific JavaScript plugins you need.\n\nThe below example shows how to import only the Modal plugin:\n\n```js\n// import \"@hummingbirdui/hummingbird/lib/esm/scripts/alert\";\n// import \"@hummingbirdui/hummingbird/lib/esm/scripts/button\";\n// import \"@hummingbirdui/hummingbird/lib/esm/scripts/carousel\";\n// import \"@hummingbirdui/hummingbird/lib/esm/scripts/collapse\";\n// import \"@hummingbirdui/hummingbird/lib/esm/scripts/dropdown\";\nimport \"@hummingbirdui/hummingbird/lib/esm/scripts/modal\";\n// import \"@hummingbirdui/hummingbird/lib/esm/scripts/offcanvas\";\n// import \"@hummingbirdui/hummingbird/lib/esm/scripts/popover\";\n// import \"@hummingbirdui/hummingbird/lib/esm/scripts/scrollspy\";\n// import \"@hummingbirdui/hummingbird/lib/esm/scripts/tab\";\n// import \"@hummingbirdui/hummingbird/lib/esm/scripts/toast\";\n// import \"@hummingbirdui/hummingbird/lib/esm/scripts/tooltip\";\n```\n\nThe example below demonstrates how to efficiently control the Modal component programmatically by importing only the Modal plugin.\n\n```js\nimport Modal from \"@hummingbirdui/hummingbird/lib/esm/scripts/modal\";\nconst openBtn = document.querySelector(\"[data-open-demo-modal]\");\nconst myModal = new Modal(\".modal\");\n\nopenBtn.addEventListener(\"click\", () =\u003e {\n  myModal.show();\n});\n```\n\n## TypeScript support\n\nHummingbird includes TypeScript definitions for all components. If you're using TypeScript, you can import Hummingbird plugins with their types.\n\n```ts\nimport { Modal } from \"@hummingbirdui/hummingbird\";\nimport { type ModalClass, type ModalInstance, type ModalOptions } from \"@hummingbirdui/hummingbird\";\n```\n\n## ESM vs CJS\n\nHummingbird supports both **ESM** and **CJS** builds, so it works with different environments:\n\n- **ESM:**\n  Used by modern bundlers like **Vite**, **Rollup**, and **Webpack 5+**. If your project is using ES modules (`import` syntax), this is what gets loaded automatically.\n\n- **CJS:**\n  Used in **Node.js** or older tooling that relies on `require()`. If your environment doesn’t support ESM, bundlers and Node will fall back to this file.\n\nNo manual choice is required; the bundler or runtime will select the correct version based on the setup.\n\n## Include using CDN\n\nCDN is a fast and easy way to include Hummingbird in a project.\n\n### Play CDN\n\nUse the Play CDN to try Hummingbird in the browser without any build step. The Play CDN is designed for development purposes only, and is not intended for production.\n\nAdd the Play CDN script tag to the `\u003chead\u003e` of your HTML file, and start using Hummingbird’s and Tailwind’s classes to style the content.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@hummingbirdui/browser@1.1.0/dist/index.global.js\"\u003e\u003c/script\u003e\n```\n\n### CDN Script\n\nAnd include the following JavaScript before the end of the `\u003cbody\u003e` tag for interactive components.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@hummingbirdui/hummingbird@1.1.0/dist/hummingbird.bundle.min.js\"\u003e\u003c/script\u003e\n```\n\n## Supported frameworks\n\n| Framework | Supported |\n| --------- | --------- |\n| React     | ✅        |\n| Next.js   | ✅        |\n| Laravel   | ✅        |\n| Vue       | ✅        |\n| Nuxt.js   | ✅        |\n| Angular   | ✅        |\n| Svelte    | ✅        |\n| Astro     | ✅        |\n| Gatsby    | ✅        |\n| Django    | ✅        |\n\n## License\n\nThis project is licensed under the [MIT License](./LICENSE).\n\n## Contribution guidelines\n\nTo contribute code:\n\n1. **Fork the repository** to your own GitHub account.\n\n2. **Clone your fork** locally:\n\n   ```sh\n   git clone https://github.com/your-username/hummingbird.git\n   cd hummingbird\n   ```\n\n3. **Install dependencies**:\n\n   ```sh\n   npm install\n   ```\n\n4. **Start the development server**:\n   This will start the documentation site locally, allowing you to see changes in real-time.\n\n   ```sh\n   npm start\n   ```\n\n   The site will typically be available at `http://localhost:4321` (or another port if 4321 is busy).\n\n5. **Create a new branch** for your feature or bug fix:\n\n   ```sh\n   git checkout -b feature-or-bugfix-name\n   ```\n\n6. **Make your changes**:\n   - If modifying the library, work in `src/`.\n   - If updating documentation, work in `apps/`.\n\n7. **Build the project** (optional but recommended before committing):\n   To ensure everything builds correctly:\n\n   ```sh\n   npm run build:npm\n   ```\n\n8. **Commit your changes**:\n\n   ```sh\n   git commit -m \"Your descriptive commit message\"\n   ```\n\n9. **Push your changes** to your fork:\n\n   ```sh\n   git push origin feature-or-bugfix-name\n   ```\n\n10. **Open a pull request** against the `main` branch.\n\n## Meet the team\n\nMeet the core team behind Hummingbird:\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" width=\"200\"\u003e\n      \u003cimg src=\"https://avatars.githubusercontent.com/u/877255?v=4\" width=\"80\" height=\"80\"/\u003e\u003cbr/\u003e\n      \u003csub\u003e\u003cb\u003eAshraful Prium\u003c/b\u003e\u003c/sub\u003e\u003cbr/\u003e\n      \u003ccode\u003eprium\u003c/code\u003e\u003cbr/\u003e\n      Founder\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"200\"\u003e\n      \u003cimg src=\"https://avatars.githubusercontent.com/u/12842959?v=4\" width=\"80\" height=\"80\"/\u003e\u003cbr/\u003e\n      \u003csub\u003e\u003cb\u003eMuazzem Hussen Chowdhury\u003c/b\u003e\u003c/sub\u003e\u003cbr/\u003e\n      \u003ccode\u003eovi003\u003c/code\u003e\u003cbr/\u003e\n      Engineering Manager\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"200\"\u003e\n      \u003cimg src=\"https://avatars.githubusercontent.com/u/86622751?v=4\" width=\"80\" height=\"80\"/\u003e\u003cbr/\u003e\n      \u003csub\u003e\u003cb\u003eKhayrul Islam\u003c/b\u003e\u003c/sub\u003e\u003cbr/\u003e\n      \u003ccode\u003ekhayrul25\u003c/code\u003e\u003cbr/\u003e\n      Senior Frontend Developer\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" width=\"200\"\u003e\n      \u003cimg src=\"https://avatars.githubusercontent.com/u/141500318?v=4\" width=\"80\" height=\"80\"/\u003e\u003cbr/\u003e\n      \u003csub\u003e\u003cb\u003eRiazul Islam\u003c/b\u003e\u003c/sub\u003e\u003cbr/\u003e\n      \u003ccode\u003eriazul01\u003c/code\u003e\u003cbr/\u003e\n      Software Engineer\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"200\"\u003e\n      \u003cimg src=\"https://avatars.githubusercontent.com/u/61972765?v=4\" width=\"80\" height=\"80\"/\u003e\u003cbr/\u003e\n      \u003csub\u003e\u003cb\u003eMd. Raihanul Haq\u003c/b\u003e\u003c/sub\u003e\u003cbr/\u003e\n      \u003ccode\u003eRaihan-Niloy\u003c/code\u003e\u003cbr/\u003e\n      UI/UX Designer\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"200\"\u003e\n      \u003cimg src=\"https://avatars.githubusercontent.com/u/236851058?v=4\" width=\"80\" height=\"80\"/\u003e\u003cbr/\u003e\n      \u003csub\u003e\u003cb\u003ePantha Sharma\u003c/b\u003e\u003c/sub\u003e\u003cbr/\u003e\n      \u003ccode\u003ePantha-25\u003c/code\u003e\u003cbr/\u003e\n      UI/UX Designer\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" width=\"200\"\u003e\n      \u003cimg src=\"https://avatars.githubusercontent.com/u/110757982?v=4\" width=\"80\" height=\"80\"/\u003e\u003cbr/\u003e\n      \u003csub\u003e\u003cb\u003eQurratul Aein Rafia\u003c/b\u003e\u003c/sub\u003e\u003cbr/\u003e\n      \u003ccode\u003eRafiAein\u003c/code\u003e\u003cbr/\u003e\n      Editorial Strategist\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Contributors\n\nThanks goes to these amazing people:\n\n\u003ca href=\"https://github.com/hummingbirdui/hummingbird/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=hummingbirdui/hummingbird\" /\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhummingbirdui%2Fhummingbird","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhummingbirdui%2Fhummingbird","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhummingbirdui%2Fhummingbird/lists"}