@mdk/core
Core UI components, utilities, types, and theme system for mining applications
The core package provides the foundational UI components, utilities, and theme system for the MDK UI Kit.
Before 1.0, the React UI Kit packages (@mdk/core and @mdk/foundation) will be renamed to React-specific names to make room for Vue, Svelte, and
Web Components. Imports will need updating when the new packages ship: pin your current version if you want to avoid an unexpected upgrade.
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:
| Category | Description |
|---|---|
| Forms | Input and form control components |
| Overlays | Dialogs, popovers, tooltips, and toasts |
| Data display | Cards, tables, tags, and data presentation |
| Charts | Data visualization components |
| Navigation | Sidebar, tabs, and breadcrumbs |
| Loading | Spinners, loaders, and progress indicators |
| Errors | Error boundaries, error cards, and alerts |
| Logs | Log display components |
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 formattingformatDate,formatRelativeTime: Date formattingcn: 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,ColorVariantStatus,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,
cnand 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'