@mdk/core

The core package provides the foundational UI components, utilities, and theme system for the MDK UI Kit.

Prerequisites

• Complete the installation

• Add the dependency to your app's package.json

{
  "dependencies": {
    "@mdk/core": "workspace:*"
  }
}

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. The @mdk/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 '@mdk/core'

// Import utilities
import { formatNumber, formatDate, cn } from '@mdk/core'

// Import types
import type { ComponentSize, ButtonVariant } from '@mdk/core'

// Import icons
import { DashboardNavIcon, HashrateStatIcon } from '@mdk/core'

// Import styles (required for component styling)
import '@mdk/core/styles.css'