{"id":18630798,"url":"https://github.com/hazel-ui/hazel-ui","last_synced_at":"2025-04-11T06:31:16.224Z","repository":{"id":40575164,"uuid":"301319871","full_name":"hazel-ui/hazel-ui","owner":"hazel-ui","description":"Hazel UI is a flexible React component library that lets you quickly build web elements the way you want. It is built with the goal to allow maximum possible customization and speed of development.","archived":false,"fork":false,"pushed_at":"2023-03-19T07:49:49.000Z","size":21766,"stargazers_count":6,"open_issues_count":22,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T10:37:45.252Z","etag":null,"topics":["design-system","hacktoberfest","react","react-component-library","styled-components","styled-system","typescript"],"latest_commit_sha":null,"homepage":"https://hazel-ui.github.io/hazel-ui/","language":"TypeScript","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/hazel-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"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}},"created_at":"2020-10-05T07:00:33.000Z","updated_at":"2024-10-29T09:41:33.000Z","dependencies_parsed_at":"2024-06-21T15:37:16.661Z","dependency_job_id":"af5843d0-a24c-4a3c-a945-82b514521bd4","html_url":"https://github.com/hazel-ui/hazel-ui","commit_stats":{"total_commits":109,"total_committers":6,"mean_commits":"18.166666666666668","dds":0.2844036697247706,"last_synced_commit":"be47736acda9cd6ed8e6e047f90e2ffe4f6da9bd"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hazel-ui%2Fhazel-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hazel-ui%2Fhazel-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hazel-ui%2Fhazel-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hazel-ui%2Fhazel-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hazel-ui","download_url":"https://codeload.github.com/hazel-ui/hazel-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248355748,"owners_count":21090078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["design-system","hacktoberfest","react","react-component-library","styled-components","styled-system","typescript"],"created_at":"2024-11-07T05:04:13.677Z","updated_at":"2025-04-11T06:31:15.446Z","avatar_url":"https://github.com/hazel-ui.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\n# Hazel UI\n\n[![npm version](https://img.shields.io/npm/v/hazel-ui.svg?style=flat)](https://www.npmjs.com/package/hazel-ui)\n[![npm downloads](https://img.shields.io/npm/dw/hazel-ui)](https://www.npmjs.com/package/hazel-ui)\n[![issues](https://img.shields.io/github/issues/hazel-ui/hazel-ui.svg)](https://github.com/hazel-ui/hazel-ui/issues)\n\n[![build](https://github.com/hazel-ui/hazel-ui/workflows/build/badge.svg)](https://github.com/hazel-ui/hazel-ui/actions)\n[![website](https://img.shields.io/website-up-down-green-red/https/hazel-ui.github.io.svg)](https://hazel-ui.github.io)\n\n[![pull-requests](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md)\n[![code-style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io/)\n[![airbnb-style](https://img.shields.io/badge/eslint-airbnb-4B32C3.svg)](https://github.com/airbnb/javascript)\n[![license](https://img.shields.io/github/license/sourcerer-io/hall-of-fame.svg?colorB=ff0000)](LICENSE)\n\n[![typescript](https://badgen.net/badge/Built%20With/TypeScript/blue)](https://www.typescriptlang.org/)\n[![tested-with](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://jestjs.io/)\n[![chromatic](https://badgen.net/badge/tested%20with/chromatic/fc521f)](https://chromatic.com/library?appId=5f9856a52896dc002243924e\u0026branch=main)\n\n\u003c/div\u003e\n\n## Introduction\n\nHazel UI is a flexible React component library that lets you quickly build web elements the way you want. It is built with the goal to allow maximum possible customization and speed of development.\n\n## Install\n\n[![hazel-ui](https://nodei.co/npm/hazel-ui.png)](https://npmjs.org/package/hazel-ui)\n\n## Setup\n\nJust add the following line to your project's root level component:\n\n```tsx\nimport \"hazel-ui/styles.css\";\n```\n\nThe Typography in the project uses the [Inter][1] variable font (`font-family: \"Inter var\"`). You can set it up yourself or use the following import:\n\n```tsx\nimport \"hazel-ui/fonts.css\";\n```\n\n## Alternatives\n\nWe'd be happy to incorporate any new functionality that you feel might not be possible with Hazel UI. But if you're looking for a completely different flavour of UI then you might want to check out these great alternatives:\n\n- [Ant Design](https://github.com/react-component)\n- [Chakra UI](https://github.com/chakra-ui/chakra-ui)\n- [Evergreen](https://evergreen.segment.com/components) _by Twilio Segment_\n- [Fluent UI](https://github.com/microsoft/fluentui) _by Microsoft_\n- [Forma 36](https://github.com/contentful/forma-36) _by Contentful_\n- [Material UI](https://material-ui.com/getting-started/usage/)\n- [Reach UI](https://reach.tech/) _by React Training_\n- [React Bootstrap](https://react-bootstrap.github.io/)\n- [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/index.html) _by Adobe_\n- [Reakit](https://github.com/reakit/reakit)\n- [Storybook](https://github.com/storybookjs/design-system)\n\n[1]: https://github.com/rsms/inter\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhazel-ui%2Fhazel-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhazel-ui%2Fhazel-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhazel-ui%2Fhazel-ui/lists"}