@tetherto/mdk-react-devkit

The core entrypoint (@tetherto/mdk-react-devkit/core) provides the foundational React UI components, utilities, and theme system for the MDK React UI Kit. This is the /core subpath of the devkit package, not the framework-agnostic @tetherto/mdk-ui-core headless package.

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-core": "*"
  }
}

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

What's included

Components

Production-ready React components organized by category:

See the Components reference for the full list with demo links.

Icons

70+ purpose-built icons for Bitcoin mining applications:

• Navigation icons (Dashboard, Farms, Inventory, etc.)
• Status icons (Mining, Offline, Error, etc.)
• Weather icons (Sunny, Cloudy, Rainy, etc.)
• Alarm icons (Temperature, Pressure, Fluid, etc.)

Utilities

Helper functions for common operations:

• formatNumber, formatHashrate, formatCurrency: Number formatting
• formatDate, formatRelativeTime: Date formatting
• cn: Class name merging (clsx wrapper)
• Conversion utilities for energy, hashrate, and units
• Validation utilities for email, URL, and empty checks

Theme system

CSS custom properties and utilities for consistent styling:

• Color tokens (primary, gray scales)
• Spacing scale
• Border radius scale
• Font size scale
• Light/dark mode support

Types

TypeScript types for type-safe development:

• ComponentSize, ButtonVariant, ColorVariant
• Status, PaginationParams, ApiResponse
• Chart types, table types, and utility types

Reference

Detailed reference material lives in the unified Reference section. Core (/core) slices are:

• Constants: colors, units, currency, chart configs
• Types: UI primitives, API shapes, value-unit types
• Utilities: formatting, validation, conversions, cn and friends

Import examples

// Import components
import { Button, Card, DataTable } from '@tetherto/mdk-react-devkit/core'

// Import utilities
import { formatNumber, formatDate, cn } from '@tetherto/mdk-react-devkit/core'

// Import types
import type { ComponentSize, ButtonVariant } from '@tetherto/mdk-react-devkit/core'

// Import icons
import { DashboardNavIcon, HashrateStatIcon } from '@tetherto/mdk-react-devkit/core'

// Import styles (required for component styling)
import '@tetherto/mdk-react-devkit/styles.css'

Troubleshooting

• npm install warns about engines.npm, or npm -v is 10.x on Node 22 — Upgrade npm, then rerun npm install and npm run build from the monorepo root.