@thor-commerce/ui

Reusable React components for Thor Commerce dashboard surfaces and embedded apps. The package builds on Primer React so first-party and third-party apps share the dashboard's layout, controls, empty states, tables, and interaction patterns.

Host-owned navigation is intentionally out of scope. Embedded apps supply their main content with AppPage, Section, forms, tables, and the other exports; Thor Dashboard continues to own the surrounding top bar and sidebar.

Install

pnpm add @thor-commerce/ui @primer/react @primer/octicons-react react-hook-form recharts

Import the package stylesheet once next to the app's existing global styles:

import '@thor-commerce/ui/styles.css';

The app must already render Primer's ThemeProvider and BaseStyles, as Thor's React Router app template does.

Example

import {
  AppPage,
  DataTable,
  Section,
  type Column,
} from '@thor-commerce/ui';
import { Button } from '@primer/react';

const columns: Column<{ id: string; name: string }>[] = [
  { id: 'name', header: 'Name', field: 'name', rowHeader: true },
];

export function ProductsPage() {
  return (
    <AppPage
      title="Products"
      actions={<Button size="small">Create product</Button>}
    >
      <Section title="Products" flush>
        <DataTable columns={columns} data={[{ id: '1', name: 'T-shirt' }]} />
      </Section>
    </AppPage>
  );
}

Buttons remain Primer components. Use size="small" for dashboard actions, variant="primary" plus loading for controls that commit a write, and type="button" for every non-submit button inside a form.

Component groups

• Layout: AppPage, Section, Card, BorderGrid, Scrollable, and Backdrop.
• Data: DataTable, DataGrid, ResourceList, sortable containers, table primitives, pagination, filters, and URL-state hooks.
• Inputs: SearchInput, DatetimeInput, WeightInput, ColorPicker, DropZone, Switch, and PaneSelectPanel.
• Content and feedback: EmptyContentState, ActionConfirmationDialog, Toast, TimelineEvents, Avatar, Thumbnail, Image, Icon, and CountryFlag.

All public components and their TypeScript types are exported from the package root. Consumer applications do not import package internals or source paths.

Local dashboard development

The repository is a pnpm workspace and Dashboard depends on this package with workspace:*. Run pnpm dev at the repository root. During development, the package resolves directly to its source and Vite handles updates, so no npm release or second watcher is needed to develop and test a component change.

Useful package commands:

pnpm build:ui
pnpm --filter @thor-commerce/ui typecheck
pnpm --filter @thor-commerce/ui pack

Releasing

Every public package change gets a changeset:

pnpm changeset
pnpm version-packages
pnpm release

version-packages applies the requested semantic version bump and updates the changelog. release builds and publishes the public package with npm provenance. The publishing environment needs npm access to the @thor-commerce scope.

The repository's Release packages GitHub workflow automates this flow on main: it maintains the Changesets version PR, then publishes after that PR is merged. It requires an NPM_TOKEN repository secret with scope publish access.