h2o-library

v2.0.1

Published

13 days ago

A set of components for H2O Apps development

0High
0Medium
0Low

elfadiliachraf

40+ components — form controls, selection menus, date/time pickers, tables, modals, popovers, toasts, tooltips, and more.
7 chart types — bar, line, pie, heatmap, stat, gantt, plus a high-level Chart wrapper.
17 hooks — events, viewport, timing, focus management, clipboard, toasts.
~25 utilities — cn, string/array/object helpers, Intl-based formatters, math, async (debounce, throttle, retry, withTimeout).
Pure CSS theming via custom properties — no Tailwind required, but it integrates cleanly when you do use it.
Fully typed — types ship with each subpath entry; no @types/h2o-library needed.

Documentation → · Changelog →

Installation

npm install h2o-library
# or
pnpm add h2o-library
# or
yarn add h2o-library

Peer requirements: React 18+ and react-dom 18+. Everything else (including the chart engine) ships transitively.

Stylesheet — one import

The library ships pure CSS. You only ever need to import the design-tokens stylesheet, component CSS is included automatically by your bundler.

// app/layout.tsx (Next.js) or src/main.tsx (Vite)
import "h2o-library/dist/styles/index.css";

This file defines all design tokens (--primary, --muted, --background, …) as CSS custom properties. Modern bundlers (Vite, Next.js 15+, Webpack 5, esbuild, Rollup) honor "sideEffects": ["**/*.css"] and only ship styles for components actually rendered.

If you're not using a bundler (plain <script> setup, server templates), import the everything-included stylesheet instead, h2o-library/dist/index.css.

Pick one path; don't import both.

Quick start

import { Button, Input } from "h2o-library";

export default function App() {
  return (
    <form>
      <Input label="Name" placeholder="Jane Doe" />
      <Button label="Save" type="submit" />
    </form>
  );
}

Subpath imports

The package is split into five entries. Always import from the most specific entry that has what you need.

| Entry | What's there | | -------------------- | ------------------------------------------------------------------------------------------------- | | h2o-library | All React components (Button, Modal, Tabs, ToastProvider, …) | | h2o-library/charts | Chart, BarChart, LineChart, PieChart, HeatmapChart, StatChart, GanttChart, Legend | | h2o-library/hooks | All hooks (useToast, useDebounce, useMediaQuery, …) | | h2o-library/utils | Framework-agnostic helpers (cn, formatBytes, clamp, groupBy, debounce, …) | | h2o-library/types | Type-only exports (TabItem, IconType, TableColumn<T>, …) |

import { Button, Tabs, ToastProvider } from "h2o-library";
import { BarChart } from "h2o-library/charts";
import { useToast, useDebounce } from "h2o-library/hooks";
import { cn, formatBytes } from "h2o-library/utils";
import type { TabItem, IconType } from "h2o-library/types";

Theming

The library is themed entirely through CSS custom properties. Tokens are HSL triplets without the hsl() wrapper, so you can compose alpha:

:root {
  --primary: 225 91% 59%;
  --background: 0 0% 98%;
}

.dark {
  --primary: 225 85% 62%;
  --background: 0 0% 7%;
}

.my-element {
  background: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.4);
}

No rebuild required, components read the variables at runtime. Toggle dark mode the Tailwind way: add or remove the dark class on <html>. Tailwind's bg-primary/50 syntax works as long as variables are mapped in your config.

Full palette, opacity examples, and Tailwind-mapping reference: Colors & Theming docs.

TypeScript

Types are bundled with each subpath entry, no @types/h2o-library package needed.

import { Tabs } from "h2o-library";
import type { TabItem } from "h2o-library/types";

const tabs: TabItem[] = [
  { label: "Overview", value: "overview" },
  { label: "Settings", value: "settings" },
];

Component prop interfaces are intentionally internal. If you ever need them, use React.ComponentProps:

type ButtonProps = React.ComponentProps<typeof Button>;

Charts at a glance

import { Chart } from "h2o-library/charts";

<Chart
  type="bar"
  title="Monthly revenue"
  data={[
    { x: "Jan", us: 120, eu: 80 },
    { x: "Feb", us: 150, eu: 95 },
    { x: "Mar", us: 140, eu: 110 },
  ]}
  layout="grouped"
  height={320}
/>;

Chart is the high-level wrapper (auto-palette, title, legend, KPI strip). For full control over series colors, click handlers, stacking, and dashed lines, drop down to the matching primitive (BarChart, LineChart, PieChart, HeatmapChart). StatChart and GanttChart are primitive-only, see the chart docs.

Browser support

Modern evergreen browsers. The library uses CSS custom properties, modern flex/grid, and the ES2020 baseline.

Documentation

Getting started — install, setup, import conventions
Colors & theming — full token catalog, dark mode, Tailwind mapping
Components — live examples and copy-ready playgrounds for every component
Hooks — every hook with usage snippets
Utilities — string, array, object, formatting, math, and async helpers
Types reference — shared type aliases
Icons — interactive picker for the full icon set

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme