Feedback

Components for providing feedback and notifications to users.

Prerequisites

Complete the installation

Add the dependency to your app's package.json

{
  "dependencies": {
    "@tetherto/mdk-react-devkit": "*",
    "@tetherto/mdk-react-adapter": "*",
    "@tetherto/mdk-ui-foundation": "*"
  }
}

Run npm install from the mdk/ui workspace root after your app is under apps/ so npm links workspace packages.

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

Components

@tetherto/mdk-react-devkit

Core alert

import { CoreAlert } from '@tetherto/mdk-react-devkit'

Contextual feedback banner for success, info, warning, and error messages. Supports icons, close button, an action slot, and an optional full-width banner mode.

Notes

Once closed via the ✕ button, the component returns null and cannot be reopened without unmounting/remounting
Setting description automatically adds the mdk-alert--with-description modifier for extra spacing

Example

/**
 * Runnable example for Alert.
 */
import { CoreAlert } from '@tetherto/mdk-react-devkit'

export const AlertExample = () => (
  <div className="mdk-example-col">
    <CoreAlert
      type="info"
      title="Informational"
      description="Your miner firmware update is ready to install."
      showIcon
    />
    <CoreAlert
      type="success"
      title="Success"
      description="Pool credentials updated successfully."
      showIcon
      closable
    />
    <CoreAlert
      type="warning"
      title="Warning"
      description="Hash rate dropped below threshold — check your connections."
      showIcon
    />
    <CoreAlert
      type="error"
      title="Error"
      description="Failed to connect to the pool. Verify your credentials."
      showIcon
      closable
    />
  </div>
)

@tetherto/mdk-react-devkit

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

`AlarmContents`

Body region of an alarm card listing the alert details and recommended next actions

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/alarm/alarm-contents/alarm-contents.tsx

Props

Prop	Status	Type / Options	Default	Description
`alarmsData`	Required	`unknown`	-	Alert entries to render. Falls back to `EmptyState` when empty or falsy
`onNavigate`	Required	`(path: string) => void`	-	Navigation callback forwarded to each `AlarmRow` for click-through routing

`AlarmRow`

Single alarm-feed row with severity dot, timestamp, source device, and the alert message

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/alarm/alarm-row/alarm-row.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Required	`TimelineItemData`	-	The alarm entry to render
`onNavigate`	Required	`(path: string) => void`	-	Called when the row is clicked; receives the alarm `uuid` as the path segment

`CoreAlert`

Inline alert banner with type-based icon, optional description, dismissible close button, and trailing action slot

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/alert/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`action`	Optional	`React.ReactNode`	-	Action element rendered to the right
`banner`	Optional	`boolean`	`false`	Display as full-width banner (no border radius, no margin)
`className`	Optional	`string`	-	Custom className
`closable`	Optional	`boolean`	`false`	Shows an ✕ button; clicking it hides the alert
`description`	Optional	`React.ReactNode`	-	Secondary/detail content shown below the title
`icon`	Optional	`React.ReactNode`	-	Custom icon (used when showIcon is true)
`onClose`	Optional	`React.MouseEventHandler<HTMLButtonElement>`	-	Called when close button is clicked
`showIcon`	Optional	`boolean`	`false`	Renders the type icon (or the `icon` override) before the content
`style`	Optional	`React.CSSProperties`	-	Custom styles
`title`	Optional	`React.ReactNode`	-	Main message
`type`	Optional	`"success" \| "info" \| "warning" \| "error"`	`"info"`	Controls the color scheme and default icon

`EmptyState`

Empty state component for displaying placeholder content when no data is available

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/empty-state/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`description`	Required	`React.ReactNode`	-	Description text or ReactNode displayed below the image
`className`	Optional	`string`	-	Additional CSS class name
`image`	Optional	`EmptyStateImage`	`"default"`	Image to display. Use "default" for the standard illustration, "simple" for a minimal icon, or pass a custom ReactNode
`size`	Optional	`"sm" \| "md" \| "lg"`	`"md"`	Size variant controlling spacing and icon dimensions

`ErrorCard`

Error card component for displaying error messages

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/error-card/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`error`	Required	`string`	-	Error message string. Supports `\\n` for line breaks
`className`	Optional	`string`	-	Additional CSS class name
`title`	Optional	`string`	`"Errors"`	Title displayed above the error message
`variant`	Optional	`"inline" \| "card"`	`"card"`	Display variant. "card" shows a bordered container, "inline" shows flat text

`Loader`

Loader component - display pulsing dots animation

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/loader/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`className`	Optional	`string`	-	Custom className for the root element
`color`	Optional	`"red" \| "gray" \| "blue" \| "amber" \| "orange"`	`"orange"`	Color variant of the loader
`count`	Optional	`3 \| 5 \| 7`	`5`	Number of dots to display
`inline`	Optional	`boolean`	`false`	Render as an inline activity indicator instead of a block loading state. The default reserves a fixed 200px so a panel standing in for absent content does not collapse and then jump. Inline, that height is wrong: it strands the dots ~100px below the thing they belong to and centers them against surrounding text, which reads as frozen
`size`	Optional	`number`	`10`	Size of each dot in pixels

`SkeletonBlock`

Rectangular shimmer placeholder used to hint at content shape while data is loading

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/skeleton/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`borderRadius`	Optional	`string \| number`	-	Border radius; ignored when `circle` is true
`circle`	Optional	`boolean`	`false`	Renders a perfect circle using `height` as the diameter
`className`	Optional	`string`	-	Additional class for the element
`height`	Optional	`string \| number`	-	Height in pixels (number) or any CSS value (string)
`width`	Optional	`string \| number`	-	Width in pixels (number) or any CSS value (string)

`Spinner`

Spinner component - display loading state with rotating squares

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/spinner/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`className`	Optional	`string`	-	Custom className for the root element
`color`	Optional	`"primary" \| "secondary"`	`"primary"`	Color variant of the spinner
`fullScreen`	Optional	`boolean`	`false`	Whether to display in fullscreen mode
`label`	Optional	`string`	-	Optional label text to display below the spinner
`size`	Optional	`"sm" \| "md" \| "lg"`	`"md"`	Size variant of the spinner
`speed`	Optional	`"slow" \| "normal" \| "fast"`	`"normal"`	Speed of the animation
`type`	Optional	`"circle" \| "square"`	`"square"`	Type of spinner animation

Single transient notification rendered inside the <Toaster> viewport. Use variant to convey intent (success, info, warning, error); pair with <ToastTitle> and <ToastDescription> for structured content, or wrap a <ToastAction> for a single inline call-to-action. Most apps will trigger toasts imperatively via the useToast hook rather than mounting <Toast> directly

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/toast/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`title`	Required	`string`	-	Title shown at the top of the toast
`description`	Optional	`string`	-	Body text
`duration`	Optional	`number`	-	Auto-dismiss after N ms
`icon`	Optional	`React.JSX.Element`	-	Override the default variant icon
`onOpenChange`	Optional	`((open: boolean) => void)`	-	Open-state change handler
`open`	Optional	`boolean`	-	Controlled open state
`variant`	Optional	`"success" \| "info" \| "warning" \| "error"`	`"info"`	Determines the icon and accent

`Toaster`

Top-level provider + viewport that hosts every toast triggered via useToast. Mount once near the root of your app (typically inside <MdkProvider>). Without a <Toaster> in the tree, useToast calls are no-ops. Position and visual stacking are controlled by CSS tokens; no props are required for the default top-left placement

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/toast/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`children`	Required	`React.ReactNode`	-	The `<Toast>` elements to render
`position`	Optional	`"top-left" \| "top-right" \| "bottom-left" \| "bottom-right" \| "top-center" \| "bottom-center"`	`"top-left"`	Where the viewport is anchored

Prerequisites

Components

Core alert

Notes

Example

`AlarmContents`

Props

`AlarmRow`

Props

`CoreAlert`

Props

`EmptyState`

Props

`ErrorCard`

Props

`Loader`

Props

`SkeletonBlock`

Props

`Spinner`

Props

`Toast`

Props

`Toaster`

Props

On this page

Feedback

Show steps

On this page