@insforge/ui

Shared React UI components, design tokens, and Tailwind preset used across InsForge apps.

Installation

npm install @insforge/ui

Required peer dependencies:

npm install react react-dom tailwindcss

Setup

1. Import styles once in your app entry CSS:

@import '@insforge/ui/styles.css';

The stylesheet registers the package's own files as a Tailwind source, so the utility classes used inside the components are generated without any extra @source entry on your side.

2. Add the InsForge Tailwind preset:

import insforgeTailwindPreset from '@insforge/ui/tailwind-preset';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [insforgeTailwindPreset],
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
};

3. Use components:

import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input } from '@insforge/ui';

export function Example() {
  return (
    <Dialog>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Update profile</DialogTitle>
        </DialogHeader>
        <Input placeholder="Name" />
        <Button className="mt-3">Save</Button>
      </DialogContent>
    </Dialog>
  );
}

Exports

• Components: Button, Badge, Checkbox, CopyButton, Dialog, DropdownMenu, Input, InputField, MenuDialog, Pagination, SearchInput, Select, Switch, Tabs, Tooltip, CodeBlock
• Utilities: cn
• Styling entrypoints: @insforge/ui/styles.css, @insforge/ui/tailwind-preset

Theming

• Token variables are provided in styles.css.
• Dark mode is enabled by adding the dark class on a parent element.

Development

npm install
npm run lint
npm run typecheck
npm test
npm run build

Releases are cut from GitHub: bump version in package.json, merge to main, then publish a GitHub Release tagged v<version>. The Publish to npm workflow validates the tag against package.json, runs the checks, and publishes through npm trusted publishing (GitHub OIDC, no tokens) with provenance. Step by step: .agents/skills/insforge-ui/release/SKILL.md.

License

Apache-2.0