Includes support for AI Skill
h2o-library·vunknownDocsv1.0.0
H2O Library
Holistic Hospital Optimization Frontend Library
Components, charts, hooks, and utilities for building holistic hospital optimization applications, with a shared design language and TypeScript types out of the box.
h2o-library·vunknownDocsv1.0.035Components
7Charts
17Hooks
7Utilities Sets
TSTypeScript-first
◐Themeable
Explore
Everything you need.
Browse by category. Each section includes interactive previews, full prop tables, and types reference.
AI-ready
Teach your AI agent
H2O ships with an installable AI skill that teaches your coding agent the library’s conventions, props, and patterns.
Claude Code
h2o-library.tar.gzDrop the SKILL.md bundle into your Claude Code project so it knows our components, patterns, and prop types.
Trough CLI
mkdir -p .claude/skills && curl -fsSL https://h2o-library-documentation.vercel.app/skills/h2o-library.tar.gz | tar -xz -C .claude/skills
Cursor
h2o-library-cursor.tar.gzCursor-flavored .mdc rules with the same content. Auto-attaches on TS/TSX/JS/JSX files in your repo.
Trough CLI
mkdir -p .cursor/rules && curl -fsSL https://h2o-library-documentation.vercel.app/skills/h2o-library-cursor.tar.gz | tar -xz -C .cursor/rulesQuick start
Install and import in once.
Add the library to your app, import the stylesheet, and start composing. Everything tree-shakes, pull in only the components you use.
Read the full setup guideTerminal
npm install h2o-libraryCode
import { Button } from "h2o-library";import "h2o-library/dist/style.css";
export default function App() { return <Button variant="primary" label="Get started" />;}