@omobio/ui

Shared React UI kit for Omobio frontends: shadcn-style components, theme tokens, and hooks. Consumed by apps generated with create-app-ui.

Install

npm install @omobio/ui

Peer dependencies: react, react-dom (18+).

Usage

Import via subpaths (mirrors the source layout):

import { Button } from "@omobio/ui/components/ui/button";
import { DataTable } from "@omobio/ui/components/data-table";
import { ui, THEME } from "@omobio/ui/config/theme";
import { cn } from "@omobio/ui/lib/utils";
import { useIsMobile } from "@omobio/ui/hooks/use-mobile";

Apps generated by create-app-ui re-export these from src/components/ui/* stubs, so app code keeps importing @/components/ui/button.

Tailwind setup (consumers)

Component class names live in this package's compiled output, so add it to Tailwind content scanning:

// tailwind.config.ts
content: [
  "./index.html",
  "./src/**/*.{ts,tsx}",
  "./node_modules/@omobio/ui/dist/**/*.js",
],

Colors and radius come from CSS variables (--primary, --radius, …) defined in the app's globals.css — override them there to restyle every component without touching package code.

Overriding a component

Replace the app-side stub with your own implementation:

// src/components/ui/button.tsx (in your app)
import { Button as BaseButton, type ButtonProps } from "@omobio/ui/components/ui/button";
import { cn } from "@/lib/utils";

export function Button({ className, ...props }: ButtonProps) {
  return <BaseButton {...props} className={cn("uppercase tracking-wide", className)} />;
}
export { buttonVariants } from "@omobio/ui/components/ui/button";

Everything in your app importing @/components/ui/button now gets the custom version. Note: components inside the package (e.g. DataTable's pagination) still use the package-internal Button — use CSS variables for global restyling.

Development (monorepo)

cd ui-platform
npm install
npm run build:ui    # compile to packages/ui/dist

Source of truth is packages/ui/src. The boilerplate (boilerplate/react-base/src/components/ui/*) contains thin re-export stubs only.

Publish

cd ui-platform/packages/ui
npm publish --otp=YOUR_CODE

prepublishOnly builds dist/ automatically. The @omobio scope must exist on npm (org or user scope) — adjust the package name if needed.