https://github.com/hazel-ui/hazel-ui

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.
https://github.com/hazel-ui/hazel-ui

design-system hacktoberfest react react-component-library styled-components styled-system typescript

Last synced: about 10 hours ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/hazel-ui/hazel-ui
• Owner: hazel-ui
• License: mit
• Created: 2020-10-05T07:00:33.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2023-03-19T07:49:49.000Z (over 1 year ago)
• Last Synced: 2024-11-06T02:04:54.532Z (1 day ago)
• Topics: design-system, hacktoberfest, react, react-component-library, styled-components, styled-system, typescript
• Language: TypeScript
• Homepage: https://hazel-ui.github.io/hazel-ui/
• Size: 20.8 MB
• Stars: 6
• Watchers: 2
• Forks: 6
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# Hazel UI

[![npm version](https://img.shields.io/npm/v/hazel-ui.svg?style=flat)](https://www.npmjs.com/package/hazel-ui)

[![npm downloads](https://img.shields.io/npm/dw/hazel-ui)](https://www.npmjs.com/package/hazel-ui)

[![issues](https://img.shields.io/github/issues/hazel-ui/hazel-ui.svg)](https://github.com/hazel-ui/hazel-ui/issues)

[![build](https://github.com/hazel-ui/hazel-ui/workflows/build/badge.svg)](https://github.com/hazel-ui/hazel-ui/actions)

[![website](https://img.shields.io/website-up-down-green-red/https/hazel-ui.github.io.svg)](https://hazel-ui.github.io)

[![pull-requests](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md)

[![code-style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io/)

[![airbnb-style](https://img.shields.io/badge/eslint-airbnb-4B32C3.svg)](https://github.com/airbnb/javascript)

[![license](https://img.shields.io/github/license/sourcerer-io/hall-of-fame.svg?colorB=ff0000)](LICENSE)

[![typescript](https://badgen.net/badge/Built%20With/TypeScript/blue)](https://www.typescriptlang.org/)

[![tested-with](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://jestjs.io/)

[![chromatic](https://badgen.net/badge/tested%20with/chromatic/fc521f)](https://chromatic.com/library?appId=5f9856a52896dc002243924e&branch=main)



## Introduction

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.

## Install

[![hazel-ui](https://nodei.co/npm/hazel-ui.png)](https://npmjs.org/package/hazel-ui)

## Setup

Just add the following line to your project's root level component:

```tsx

import "hazel-ui/styles.css";

```

The 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:

```tsx

import "hazel-ui/fonts.css";

```

## Alternatives

We'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:

- [Ant Design](https://github.com/react-component)

- [Chakra UI](https://github.com/chakra-ui/chakra-ui)

- [Evergreen](https://evergreen.segment.com/components) _by Twilio Segment_

- [Fluent UI](https://github.com/microsoft/fluentui) _by Microsoft_

- [Forma 36](https://github.com/contentful/forma-36) _by Contentful_

- [Material UI](https://material-ui.com/getting-started/usage/)

- [Reach UI](https://reach.tech/) _by React Training_

- [React Bootstrap](https://react-bootstrap.github.io/)

- [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/index.html) _by Adobe_

- [Reakit](https://github.com/reakit/reakit)

- [Storybook](https://github.com/storybookjs/design-system)

[1]: https://github.com/rsms/inter