@mesob/ui

Mesob's shared React 19 component and block library. It ships Vega as its only component style, with configurable semantic colors, density, and independent control and surface radii. Light, dark, and system appearance remain consumer choices.

TanStack Start + Tailwind v4

Install @mesob/ui in the consuming app. The package declares Base UI and its component runtime dependencies; React and React DOM remain app dependencies.

pnpm add @mesob/ui

Import the package stylesheet after Tailwind and use the shared components:

@import "tailwindcss";
@import "@mesob/ui/styles.css";

import { Button } from "@mesob/ui/components/button";
import { Card, CardContent } from "@mesob/ui/components/card";

export function Example() {
  return (
    <Card>
      <CardContent>
        <Button>Continue</Button>
      </CardContent>
    </Card>
  );
}

The complete installed Base UI primitive surface is also available as @mesob/ui/base-ui for advanced compositions. Prefer the Mesob component entry for its Vega defaults and documented Mesob props.

@mesob/ui/components remains the aggregate compatibility entry. Prefer direct component subpaths such as @mesob/ui/components/button and @mesob/ui/components/card in application code so bundlers can include only the components an app uses. Shared composites use folder-based subpaths, such as @mesob/ui/blocks/app/app-sidebar, @mesob/ui/blocks/entity/entity-header, and @mesob/ui/blocks/layout/shell. Dashboard metric cards are available from @mesob/ui/blocks/dashboard/metric-card.

styles.css provides Vega defaults, component styles, Tailwind v4 source registration, and reduced-motion behavior. Consumers may override semantic CSS variables after importing it. They do not install shadcn into each app for shared Mesob components.

Design tokens

Use resolveDesignConfig, buildDesignTokens, and validateDesignConfig from @mesob/ui/lib/design-config. Configuration covers base/accent colors, chart palette, heading/body fonts, menu surface/accent, control/surface radii, and density. controlRadius affects buttons and inputs; surfaceRadius affects cards and overlays. density changes component sizing without changing the consuming app's Tailwind spacing scale.

The complete component and block guide, including Codex, Claude Code, and Cursor instructions, ships in docs/ and skills/mesob-ui/ with this package version. Install project-local agent guidance with pnpm exec mesob-ui skill install --agents codex,claude,cursor; use pnpm exec mesob-ui docs components to print a version-matched guide. See installation, the component catalog, and agent skill.