@fabricorg/ui

Shared React components and visual contracts for Fabric product applications.

The package owns family-wide interaction and presentation primitives. Product applications retain their routing, data access, authorization, and domain behavior.

Install

pnpm add @fabricorg/ui

Import the shared CSS once in the application root:

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

Documentation sites and other surfaces that need only the family tokens and font roles can use the CSS-only export without loading React components or operator styles:

@import "@fabricorg/ui/tokens.css";

Applications using Tailwind CSS v4 must include the compiled package as a source in their global stylesheet so utility classes used by shared components are emitted:

@source "../../../node_modules/@fabricorg/ui/dist";

Adjust the relative path for the application stylesheet location.

Component layers

• Primitives: accessible controls such as Button, Input, Sheet, Tabs, and Tooltip.
• Operator components: DataTable, RecordPanel, RecordTag, StatCard, ToolbarButton, and DarkPill.
• Authoring: AuthoringWorkbench and its supporting actions, guide, and empty state.
• Identity: Logo renders consumer-provided official Fabric asset paths and an optional product companion name.

import { Logo, RecordTag, ToolbarButton } from '@fabricorg/ui';

export function Header() {
  return (
    <header className="octolane">
      <Logo productName="Tower" />
      <RecordTag color="green">Connected</RecordTag>
      <ToolbarButton>New mission</ToolbarButton>
    </header>
  );
}

The default product companion uses the interface face. Shells that use the approved sparse editorial signature may opt into the family display face without replacing or redrawing the Fabric identity:

<Logo productName="GTM Brain" productNameVariant="editorial" />

Migrating a product-local @repo/ui

The family package contains the generic primitive layer previously maintained by GTM Brain and Tower. New code should prefer named imports from the package root:

import { Button, Card, toastError } from "@fabricorg/ui";

For incremental migrations, component subpaths mirror the established @repo/ui/components/* contract:

import { Button } from "@fabricorg/ui/components/button";
import { toastError } from "@fabricorg/ui/components/toast";

The compatibility surface includes accordion, alert dialog, alert, avatar, badge, button, card, chart, dialog, dropdown menu, form, input OTP, input, label, logo, popover, progress, select, sheet, skeleton, spinner, switch, table, tabs, textarea, toast, and tooltip. The shared Logo is intentionally product-neutral; applications provide productName and may override their official Fabric asset paths. Routing, auth, billing, organization behavior, and product-domain components remain application-owned.

Authoring workbench

import {
  AuthoringAction,
  AuthoringGuide,
  AuthoringWorkbench,
  type AuthoringTreeGroup,
} from '@fabricorg/ui';
import '@fabricorg/ui/styles.css';

<AuthoringWorkbench
  title="Skills"
  description="Governed, reusable recipes for people and agents."
  query={query}
  onQueryChange={setQuery}
  searchLabel="Search skills"
  groups={groups satisfies AuthoringTreeGroup[]}
  selectedId={selectedId}
  onSelect={setSelectedId}
  actions={<AuthoringAction onClick={createSkill}>Create skill</AuthoringAction>}
>
  <AuthoringGuide
    eyebrow="System / Governed authoring guide"
    title="Create a reusable skill"
    description={<p>Keep behavior reviewable, testable, and portable.</p>}
    steps={['Define the purpose.', 'Declare boundaries.', 'Test the behavior.']}
  />
</AuthoringWorkbench>;

Import the stylesheet once in the application root. The package defines canonical semantic --surface-*, --text-*, --border-*, --accent-*, and font variables. Applications should add only domain-specific tokens or framework mappings rather than copying the family palette.

Tree items may contain recursive children. Folder rows are selectable and expand or collapse their descendants, allowing products to show a scoped, file-oriented resource library while retaining their own routing, authorization, and persistence semantics.

The component entry is an explicit React client boundary. Server-rendered modules should import pure utilities from the server-safe subpath:

import { cn } from '@fabricorg/ui/utils';