@hennge/ui-react

HENNGE UI React

A collection of React components implementing the HENNGE Design System

Install

Install npm Package

npm install @hennge/ui-react -E

pnpm install @hennge/ui-react -E

Project Setup

import '@hennge/ui-react/dist/style.css';

Although this stylesheet is produced using Tailwind CSS, you do not need Tailwind CSS in your project to use this library.

However, you may want to apply CSS normalization in your project to ensure that the styles shipped with this package are applied correctly. For example:

• Modern Normalize
• Tailwind CSS Preflight, which should be applied automatically if you are also using Tailwind CSS in your project.
• Normalize.css

If you are using certain frameworks, they may also ship with CSS normalization. For example:

• Bootstrap
• Material UI

Using Components

import { Button } from '@hennge/ui-react';

Complete documentations of the components in this library is provided in the Storybook.

https://ssh.hennge.io/hennge-ui-react/dev/

Access to Storybook and Figma requires HENNGE organization account.

You can also view the Storybook locally by running the development commands listed below.

Access to source code requires HENNGE organization account.

Development

git clone https://github.com/HENNGE/hennge-ui-react.git
npm ci

Run Storybook Dev Server

npm run storybook

Build Package

# TypeScript check
npm run tsc
# ESLint check
npm run lint
# Produces ./dist folder
npm run build
# Produces ./hennge-ui-react-{version}.tgz
npm pack

Install Package File

To try a development build of this package, drop the file into other project and install:

npm install ./hennge-ui-react-{version}.tgz

pnpm install ./hennge-ui-react-{version}.tgz

Build Storybook

# Produces ./storybook-static folder
npm run build-storybook

Compiling SVG Icons

npm run icons