@parametrig/ui

Parametrig UI is the component package for Parametrig Kit. It provides the shared design-system primitives and operational UI components used across Parametrig public pages, documentation, Console, and Command.

The package is self-contained from committed source assets. It has no runtime dependency on design files or asset-export tooling.

Install

yarn add @parametrig/ui@^0.0.2

npm install @parametrig/ui@^0.0.2

Setup

Import the stylesheet once at your app root.

import '@parametrig/ui/styles'

Wrap your app with ThemeProvider.

import { ThemeProvider } from '@parametrig/ui'

export function App({ children }: { children: React.ReactNode }) {
  return <ThemeProvider>{children}</ThemeProvider>
}

The default accent is Parametrig aubergine. Accent switching remains available for partner theming, while semantic state colors remain stable.

Example

import { Box, FixedLaneTable, SlabAction, TextAction } from '@parametrig/ui'

const columns = [
  { key: 'program', label: 'Program', width: '260px' },
  { key: 'status', label: 'Status', width: '120px' },
  { key: 'action', label: 'Action', width: '120px' },
]

const rows = [
  {
    id: 'protectflight',
    program: 'ProtectFlight Standard',
    status: 'Active',
    action: <TextAction label="Open" />,
  },
]

export function ProgramTable() {
  return (
    <Box>
      <FixedLaneTable
        columns={columns}
        getRowId={(row) => row.id}
        rows={rows}
        selectedRowId="protectflight"
      />
      <SlabAction>Submit for review</SlabAction>
    </Box>
  )
}

Components

Parametrig UI includes Degen-derived primitives plus Parametrig operational extensions:

• Foundations: ThemeProvider, Box, Stack, Text, Heading, Card, Button, Tag, Input, Field, Range, NumericSelect
• Actions: SlabAction, TextAction, CanonicalClose
• Overlays: Modal, RightSheet
• Console structure: ConsoleShell, NavGroup, FixedLaneTable, SelectedDetail, MetricGrid, ChartCard
• Product operations: ReviewQueue, VersionGovernancePanel, TimelineState, ReceiptProofLink, RailPosture, PolicySnapshotNotice
• Controls and content: Toggle, SegmentedControl, TimeRangeControl, DateRangePicker, ContentBox, Checklist, AccentPicker, KnowledgeShell, ReferenceTabs, LineBox, AskAI
• Assets: generated utility icons, pictograms, illustrations, and AssetRegistry

Development

Source repository: https://github.com/parametrig/kit

yarn
yarn dev
yarn lint
yarn lint:types
yarn build:components

License

MIT. Derived from Mirror's Degen design system under the MIT license, with Parametrig-specific extensions.