Install
npm install @gunkin/uiify react react-domLoad behavior.css
Import it once per app. It holds the state rules for popovers, details and dialogs, and no colors, fonts or spacing.
import "@gunkin/uiify/components/behavior.css";Import a component
In client code, import from the root entry; tree-shaking removes unused components.
import { Button } from "@gunkin/uiify";In a Server Component, import the component’s own entry:
import { Accordion } from "@gunkin/uiify/components/accordion";TypeScript
The package ships ESM and .d.ts files. Set moduleResolution to "bundler" or "nodenext", and enable verbatimModuleSyntax.
{
"compilerOptions": {
"moduleResolution": "bundler",
"verbatimModuleSyntax": true
}
}AI agents
The /uiify skill gives your agent component recipes, UX guidance and layout patterns. It reads only what a page needs, follows your routes and styling, and builds custom UI where none fits. Copy it into your project:
mkdir -p .agents/skills/uiify
cp -R node_modules/@gunkin/uiify/skills/uiify/. .agents/skills/uiify/For Claude Code, use .claude instead of .agents. In a monorepo, use the resolved node_modules path. Run it with a page brief; other agents use their own skill syntax:
/uiify Build a responsive product page at /productsIt reuses your checks and announces any Playwright or axe-core installation first.