Fabric family UI package

@fabricorg/ui is the public React component package for interaction patterns that must behave and look the same across Fabric applications. It is framework-neutral: applications own routing, data, authentication, authorization, and product behavior; the package owns the shared presentation and interaction contract.

The source of truth is the dedicated Fabric-Pro/fabric-ui repository. Experiments consumes a pinned npm release and does not publish or maintain a workspace-local copy.

The package provides authoring workbenches, shared controls, and compact operator surfaces. Experiments uses its authoring workbench for Prompts and Skills. It provides:

• the same compact master/detail layout and collapsible record tree,
• controlled search and URL-compatible selection state,
• accessible group disclosure, selected-record, search, and landmark semantics,
• mobile list/detail navigation at 375px without horizontal scrolling,
• system guides, primary and secondary authoring actions, and empty states,
• light and dark semantic tokens, visible focus, touch-sized actions, and reduced motion,
• canonical Geist, Fraunces, Geist Mono, warm-paper, and burnt-sienna fallbacks.

Install

pnpm add @fabricorg/ui react react-dom

Import the stylesheet once from the application root:

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

Then supply product-owned records and state to the controlled workbench:

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

export function SkillsWorkspace() {
  const groups: AuthoringTreeGroup[] = [
    {
      id: 'workspace',
      label: 'Workspace',
      items: skills.map((skill) => ({
        id: skill.id,
        name: skill.name,
        description: skill.description,
        status: skill.status,
      })),
    },
  ];

  return (
    <AuthoringWorkbench
      eyebrow="Agent authoring"
      title="Skills"
      description="Governed, reusable recipes for people and agents."
      query={query}
      onQueryChange={setQuery}
      searchLabel="Search skills"
      groups={groups}
      selectedId={selectedId}
      onSelect={setSelectedId}
      onBack={() => setSelectedId('')}
      actions={<AuthoringAction onClick={createSkill}>Create skill</AuthoringAction>}
    >
      {selectedSkill ? <SkillDocument skill={selectedSkill} /> : <AuthoringGuide {...guide} />}
    </AuthoringWorkbench>
  );
}

Keep selection in the product URL, such as ?record=skill-id, so records are deep-linkable and browser navigation remains meaningful. The package does not import Next.js, a database client, or any Fabric application runtime.

Theme integration

The stylesheet reads the canonical semantic variables when the application already defines them and uses approved Fabric values as fallbacks:

:root {
  --surface-canvas: #faf7f2;
  --surface-elevated: #ffffff;
  --surface-recessed: #f2ede4;
  --surface-muted: #ebe3d3;
  --text-primary: #0e1116;
  --text-muted: #5c6370;
  --border-default: #e0d8c8;
  --accent-primary: #b8541f;
  --radius: 0.375rem;
}

Applications should load Geist, Fraunces, and Geist Mono with their optimized framework font loader and expose --font-geist, --font-fraunces, and --font-geist-mono. Product-specific identity, palette, and substitute logo icons are not supported overrides.

Adoption contract

Use the package for new tree-based authoring surfaces. When migrating an existing application, preserve its governed mutations and public routes while moving only the shell, tree, guide, and visual state into the shared components. Verify desktop and mobile layouts, light and dark themes, keyboard focus, accessible names, and a clean packed-package consumer before release.