Skip to content
uiify

Installation

One package, one required stylesheet, no build step and no configuration file.

GitHub repository

Install

npm install @gunkin/uiify react react-dom

Load 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";

See Server components

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 /products

It reuses your checks and announces any Playwright or axe-core installation first.

Components · Styling · Architecture