@mdk/core

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

Prerequisites

React 18+
Node.js 20+
pnpm 10+

Installation

# Clone the repository
git clone https://github.com/tetherto/miningos-ui-kit.git
cd miningos-ui-kit

# Install dependencies
pnpm install

# Build all packages
pnpm build

Then add to your app's package.json:

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

What's included

Components

Production-ready React components organized by category:

Category	Components
Layout	Card, Dialog, Accordion, Sidebar, Tabs, Popover, DropdownMenu
Forms	Button, Input, Textarea, Select, Checkbox, Switch, Radio, DatePicker
Data display	DataTable, Badge, Tag, Avatar, Pagination, Skeleton, Tooltip
Charts	LineChart, BarChart, AreaChart, DoughnutChart, GaugeChart
Feedback	Toast, Alert, EmptyState, ErrorBoundary, Spinner, Loader
Logs	LogsCard, LogRow, LogItem

Icons

70+ purpose-built icons for 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

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'

@mdk/core

On this page