A collection of React components implementing the HENNGE Design System
npm install @hennge/ui-react -E
pnpm install @hennge/ui-react -E
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.
If you are using Tailwind CSS in your project, you can import the Tailwind CSS configuration and plugin used in this library to recompile the combined stylesheet from your project and this library. (You do not import the pre-built stylesheet shipped in this library.)
This approach has the advantage of reducing the size of the final CSS bundle by removing unused styles and reducing duplication of CSS classes.
import type { Config } from "tailwindcss";
import reactAria from "tailwindcss-react-aria-components";
import { henngeUiReactTailwindCssConfig } from "@hennge/ui-react";
import { henngeDesignSystemColorTailwindCssPlugin } from "@hennge/ui-react";
export default {
...henngeUiReactTailwindCssConfig,
content: [
"./index.html",
"./src/**/*.{ts,tsx}",
path.join(path.dirname(require.resolve("@hennge/ui-react")), "**/*.js"),
],
plugins: [reactAria, henngeDesignSystemColorTailwindCssPlugin],
} satisfies Config;
Read more: https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries
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.
git clone https://github.com/HENNGE/hennge-ui-react.git
pnpm i --frozen-lockfile
pnpm storybook
# TypeScript check
pnpm tsc
# Biome check
pnpm check
# Produces ./dist folder
pnpm build
# Produces ./hennge-ui-react-{version}.tgz
pnpm pack
To try a development build of this package, drop the file into other project and install:
pnpm install ./hennge-ui-react-{version}.tgz
pnpm install ./hennge-ui-react-{version}.tgz
# Produces ./storybook-static folder
pnpm build-storybook
pnpm icons