Tailwind CSS v4 based design system for the Integrint Customer Portal — a compact, data-dense enterprise UI with reusable primitives, form controls, composed components, navigation, layout patterns, and theme tokens. Light and dark themes ship built in and switch via a single data-theme attribute.

Installation

npm install @reterics/integrint-ui

Peer Dependencies

npm install react react-dom lucide-react

Usage

import { Button, Card } from "@reterics/integrint-ui";
import "@reterics/integrint-ui/theme";

export function Example() {
  return (
    <Card>
      <Button variant="primary">Save changes</Button>
    </Card>
  );
}

Import @reterics/integrint-ui/theme once in your app entry (main.tsx). It carries the full --k-* variable set for both themes plus base typography (Inter, 14px).

Dark mode

Toggle by setting the attribute on the root element:

document.documentElement.setAttribute("data-theme", "dark"); // dark
document.documentElement.removeAttribute("data-theme");      // light

All components follow automatically — colors are resolved through CSS variables at paint time.

Quick Bootstrap (Portal Scaffold)

import {
  AppShell,
  Sidebar,
  NavigationItem,
  BrandLogo,
  PageHeader,
  DataTable,
  Button,
} from "@reterics/integrint-ui";

export function PortalPage() {
  return (
    <AppShell
      sidebar={
        <Sidebar brand={<BrandLogo suffix="Portal" />}>
          <NavigationItem label="Applications" active />
          <NavigationItem label="Appointments" />
        </Sidebar>
      }
    >
      <PageHeader
        title="Applications"
        subtitle="4 registered"
        actions={<Button variant="primary">New application</Button>}
      />
      {/* page content */}
    </AppShell>
  );
}

Theme Override

Override CSS variables after importing @reterics/integrint-ui/theme. The full token list lives in src/styles/theme.css; the most common knobs:

:root {
  --k-accent: #0878c9;        /* primary action color */
  --k-accent-hover: #0b8ee8;
  --k-bg: #f5f7fb;            /* app background */
  --k-surface: #ffffff;       /* cards, dialogs, drawers */
  --k-panel: #eef2f7;         /* secondary surfaces, table headers */
}

:root[data-theme="dark"] {
  --k-accent: #1ba9f5;
  --k-bg: #0b0d12;
}

Dialog Sizes

Dialogs support named sizes from compact prompts to full-screen workflows:

<Dialog open={open} onClose={close} size="xs">...</Dialog>
<Dialog open={open} onClose={close} size="lg">...</Dialog>
<Dialog open={open} onClose={close} size="2xl">...</Dialog>
<Dialog open={open} onClose={close} size="fullscreen">...</Dialog>

The default size is md for form editing. Use xs for compact confirmations, or pass width={720} / width="48rem" for a custom max width.

Notes

• SSR frameworks (for example Next.js) should import @reterics/integrint-ui/theme from a top-level client entry/layout.
• Keep react and react-dom as app-owned dependencies to avoid duplicate React instances.
• Component utility classes are generated at the consumer via Tailwind's @source scanning of the compiled dist output — no Tailwind config needed beyond importing the theme.

Development

npm run storybook        # component workbench on :6006
npm run build            # vite lib build + type declarations
npm run typecheck