@forge-glance/react

@forge-glance/react

React component library for Forge Glance — pre-themed MR dashboards, CI badges, and base primitives powered by the GDS design system.

Install

npm install @forge-glance/react
# or
bun add @forge-glance/react

Quick Start

import '@forge-glance/react/styles.css';
import { MRCard, Button, Badge } from '@forge-glance/react';

The CSS import brings in all tokens, utilities, and component styles — no Tailwind required on your end.

Components

Forge Components

Built for GitLab/GitHub merge request dashboards. Feed them MRDashboardProps from @forge-glance/sdk.

Component	Description
MRCard	Full MR card — status, pipeline, reviewers, merge/rebase actions
MRRow	Compact MR row for list views
MRRowList	Renders a list of MRRow items with merge/rebase callbacks
MRStatusBadge	Status badge — mergeable, blocked, draft, merged, closed
PipelineBadge	CI pipeline badge — passing, failing, running, warnings
ReviewerList	Reviewer avatars with approval state badges
ReviewerRow	Single reviewer row (used by ReviewerList)

Base Primitives

Themed variants of common UI elements. Built on Radix UI + CVA.

Component	Variants	Colors
Button	filled outline subtle ghost link	emphasis action positive negative caution merge neutral
Badge	filled outline subtle	emphasis action positive negative caution merge neutral
Switch	—	—

Theming

Light / Dark Mode

Toggle by adding .dark to your <html> element:

document.documentElement.classList.toggle('dark');

Using Tokens in Your Own Tailwind Setup

If you want to use the GDS tokens as Tailwind utilities in your own code, import tokens.css instead of styles.css:

@import 'tailwindcss';
@import '@forge-glance/react/tokens.css';

@theme inline {
  --color-positive: var(--positive);
  --color-negative: var(--negative);
  --color-caution: var(--caution);
  /* register whichever tokens you need */
}

Overriding Tokens

All component colors are CSS custom properties — override any token to retheme:

:root {
  --positive: oklch(0.72 0.22 145);
  --btn-merge: oklch(0.55 0.20 280);
}

SDK Types

Common types are re-exported so you don't need to install @forge-glance/sdk separately:

import type { MRDashboardProps, MRStatus, Reviewer } from '@forge-glance/react';

Development

bun install
bun run dev:app        # demo app (imports from source)
bun storybook          # component playground on :6006
bun run build          # production build → dist/

Releasing

This package uses @changesets/cli for independent versioning:

bun changeset          # create a changeset after making changes
bun run version        # apply changesets → bump versions + changelogs
bun run release        # build + npm publish + git tags

License

MIT