Card

Card components for grouping and presenting content.

Prerequisites

Install the packages

npm install \
  @tetherto/mdk-react-devkit \
  @tetherto/mdk-react-adapter \
  @tetherto/mdk-ui-foundation

Install zod@^4.6.6 first. @tetherto/mdk-react-devkit@0.12.1 declares zod@^4.6.6 as a peer while its @hookform/resolvers peer pulls a chain that pins zod 3, so the command above aborts with ERESOLVE in a project that has no zod. Installing zod 4 at the project root resolves it:

npm install zod@^4.6.6

Import styles: import '@tetherto/mdk-react-devkit/styles.css'

Components

@tetherto/mdk-react-devkit

Import the public APIs on this page from @tetherto/mdk-react-devkit.

`ActiveIncidentsCard`

Summary card displaying a list of active incidents/alerts with severity indicators, loading skeleton, and empty state. Rows are virtualized via @tanstack/react-virtual so the card stays responsive with thousands of incidents

agent-ready

Source

src/domain/components/active-incidents-card/USAGE.md

src/domain/components/active-incidents-card/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`className`	Optional	`string`	-	Additional class names appended to the root
`emptyMessage`	Optional	`string`	-	Message rendered when no items
`isLoading`	Optional	`boolean`	`false`	Show skeleton rows instead of items
`items`	Optional	`TIncidentRowProps[]`	`[]`	Incident rows to render
`label`	Optional	`string`	`"Active Alerts"`	Header label shown above the list
`onItemClick`	Optional	`(id: string) => void`	-	Called with the incident id when a row is clicked
`skeletonRows`	Optional	`number`	`4`	Number of skeleton rows shown when `isLoading`

`TIncidentRowProps`

Prop	Status	Type / Options	Default	Description
`body`	Required	`string`	-	Third line of the row, under `subtitle`
`id`	Required	`string`	-	Incident identifier; the virtual-list row key and the argument passed to the click handler
`severity`	Required	`"high" \| "medium" \| "critical"`	-	`critical`, `high` or `medium`; sets the colored severity dot beside the row
`subtitle`	Required	`string`	-	Second line of the row, under `title`
`title`	Required	`string`	-	First line of the row
`onClick`	Optional	`((id: string) => void)`	-	Row click handler, called with `id`; in `ActiveIncidentsCard` it is always replaced by `onItemClick`

`MetricCard`

Compact card displaying a labelled metric value with optional highlight and transparency states

agent-ready

Source

src/domain/components/composite/metric-card/USAGE.md

src/domain/components/composite/metric-card/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`label`	Required	`string`	-	Text label shown above the value
`unit`	Required	`string`	-	Unit suffix appended after the value (e.g. `"TH/s"`, `"W"`, `"USD"`)
`value`	Required	`string \| number \| null`	-	Metric value to display
`bgColor`	Optional	`string`	`BLACK_ALPHA_05`	Custom background color (CSS color string)
`className`	Optional	`string`	-	Additional class names appended to the root element
`isHighlighted`	Optional	`boolean`	`false`	Renders the value in orange to draw attention
`isTransparentColor`	Optional	`boolean`	`false`	Renders the value in a low-opacity white for de-emphasized display
`isValueMedium`	Optional	`boolean`	`false`	Applies a medium-weight variant to the value typography
`noMinWidth`	Optional	`boolean`	`false`	Removes the default minimum width so the card shrinks to content
`showDashForZero`	Optional	`boolean`	`false`	Displays `—` instead of `0` when value is zero

`MiningPoolsPanel`

Dashboard card that lists configured mining pools — one row per pool, with revenue, hash rate, and an optional "Show details" action.

Pure presentation: the row data + click handler come from props, shaped upstream by the caller into MiningPoolRows

agent-ready

Source

src/domain/components/mining-pools-panel/USAGE.md

src/domain/components/mining-pools-panel/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`className`	Optional	`string`	-	Extra className for the root
`emptyMessage`	Optional	`string`	`"No pools configured"`	Message shown when `rows` is empty
`hideHeader`	Optional	`boolean`	`false`	Hide the title row entirely
`isLoading`	Optional	`boolean`	`false`	Loading state — renders skeleton rows
`label`	Optional	`string`	`"Mining Pools"`	Override the card title — defaults to `Mining Pools`
`onShowDetails`	Optional	`(row: MiningPoolRow) => void`	-	Called when the user clicks the per-row "Show details" button
`rows`	Optional	`MiningPoolRow[]`	`[]`	Pool rows, in display order
`skeletonRows`	Optional	`number`	`3`	Number of skeleton rows to show while loading

`MiningPoolRow`

Prop	Status	Type / Options	Default	Description
`id`	Required	`string`	-	Stable React key
`name`	Required	`string`	-	Display name (e.g. `minerpool-f2pool-shelf-0`)
`details`	Optional	`PoolDetailItem[]`	-	Key/value details rendered inside the "Show details" popover
`hashratePhs`	Optional	`number`	-	Hashrate in PH/s — used for display (TH/s shown automatically below 1 PH/s)
`revenue24hBtc`	Optional	`number`	-	24h revenue in BTC; rendered as `0.00 BTC` when undefined

`PoolDetailsCard`

Compact key/value card for displaying pool metadata (URL, fee, worker count, etc.). Empty list renders a "No data available" placeholder

agent-ready

Source

src/domain/components/pool-details-card/USAGE.md

src/domain/components/pool-details-card/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`details`	Required	`PoolDetailItem[]`	-	Detail rows to render
`className`	Optional	`string`	-	Additional class names
`label`	Optional	`string`	-	Header label
`underline`	Optional	`boolean`	`false`	Render an underline under the label

`PoolDetailItem`

Prop	Status	Type / Options	Default	Description
`title`	Required	`string`	-	Row label, rendered with a trailing colon
`value`	Optional	`string \| number`	-	Row value; renders `-` when undefined or an empty string

`PoolDetailsPopover`

Button-triggered popover that displays a pool's key/value details (URL, fee, worker count, status, …) inside a Radix Dialog. Wraps PoolDetailsCard so the read-out matches the embedded card variant

agent-ready

Source

src/domain/components/pool-details-popover/USAGE.md

src/domain/components/pool-details-popover/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`details`	Required	`PoolDetailItem[]`	-	Detail rows
`className`	Optional	`string`	-	Additional class names
`description`	Optional	`string`	-	Dialog body description
`disabled`	Optional	`boolean`	`false`	Disable the trigger
`title`	Optional	`string`	-	Dialog title
`triggerLabel`	Optional	`string`	-	Trigger button label

On this page