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.

Support Chat

A non-modal customer support popup anchored to the bottom-right corner. SupportChat is fully controlled, so the same open state can be toggled from the floating SupportChatLauncher, a menu item, or any other button:

const [open, setOpen] = useState(false);

<SupportChatLauncher open={open} unreadCount={2} onClick={() => setOpen((v) => !v)} />
<SupportChat
  open={open}
  onClose={() => setOpen(false)}
  messages={messages}
  onSendMessage={(text) => send(text)}
  agent={{ name: "Anna Kovács" }}
  status="online"
  typing={agentTyping}
/>

Without the launcher — e.g. opened from a DropdownMenu item — drop the reserved space so the panel sits in the corner: <SupportChat offsetBottom={16} … />.

The component is presentational: it renders messages, an Enter-to-send composer (Shift+Enter for a newline) and a typing indicator, and never talks to a transport. Chrome strings come from labels (SupportChatLabels), timestamps are passed in preformatted, and the default zIndex (8000) stays below Dialog (9000) and ToastProvider (9500). Toasts share the same corner and stay on top: they overlap the launcher, not the panel, so raise offsetBottom on the launcher (or the toast stack) if both must be visible at once.

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