A collection of highly accessible React components implementing the HENNGE One Design System
npm install @hennge/ui-react -E
pnpm install @hennge/ui-react -E
import "@hennge/ui-react/css";
Although this stylesheet is produced using Tailwind CSS, you DO NOT need Tailwind CSS in your project to use this library.
Please refer to the official documentation for how to setup Tailwind CSS V4:
pnpm install -D -E tailwindcss-react-aria-components
@import "tailwindcss";
@import "@hennge/ui-react/tailwindcss";
@source "../node_modules/@hennge/ui-react";
@source
directive allows re-compiling HENNGE UI React with your project Tailwind CSS for optimal bundle size. See: https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources
You can selectively activate HENNGE UI React Tailwind CSS configuration:
@import "tailwindcss";
/* Removes most colors shipped by Tailwind CSS */
@import "@hennge/ui-react/tailwindcss/unset-colors.css";
/* Imports the default HENNGE One Design System color theme, including fonts */
@import "@hennge/ui-react/tailwindcss/theme-hennge-default.css";
/* Imports the HENNGE One Identity Edition color theme, applied to components below [data-theme="identity"] */
@import "@hennge/ui-react/tailwindcss/theme-hennge-identity.css";
/* Imports the HENNGE One DLP Edition color theme, applied to components below [data-theme="dlp"] */
@import "@hennge/ui-react/tailwindcss/theme-hennge-dlp.css";
/* Imports the HENNGE One Cybersecurity Edition color theme, applied to components below [data-theme="cybersecurity"] */
@import "@hennge/ui-react/tailwindcss/theme-hennge-cybersecurity.css";
/* Add utility classes used in HENNGE UI React */
@import "@hennge/ui-react/tailwindcss/utilities.css";
/* Add Tailwind CSS support for React Aria Components */
@plugin "tailwindcss-react-aria-components";
/* Compile Tailwind CSS classes used in HENNGE UI React */
@source "../node_modules/@hennge/ui-react";
pnpm install -E @fontsource-variable/noto-sans-jp
pnpm install -E @fontsource-variable/noto-sans-mono
pnpm install -E @fontsource-variable/noto-sans-tc
pnpm install -E @fontsource-variable/noto-sans-sc
import "@fontsource-variable/noto-sans-jp";
import "@fontsource-variable/noto-sans-mono";
import "@fontsource-variable/noto-sans-tc";
import "@fontsource-variable/noto-sans-sc";
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 typecheck
# 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
This script will compile SVG files in /svg
folder and sub-folders.
The CSV files will be renamed according to the sub-folders name. For example:
-
/fileIcon/csv.svg
will be compiled to/src/FileIconCsv.tsx
-
/icon/account.svg
will be compiled to/src/IconAccount.tsx
pnpm themes
This script will compile CSS files in /public/tailwindcss/hex
to /public/tailwindcss
Hex colors are compiled to P3 colors using OK Labs Color Space syntax (oklch
) with high precision (5 significant digits).