Quickstart

This quickstart walks you through setting up the MDK UI Kit and rendering your first React component.

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

Node.js 20+ (LTS)
pnpm 10+ (package manager)
React 18+

To enable pnpm using corepack (built into Node.js):

corepack enable
pnpm --version

Clone and build

MDK UI Kit is currently distributed as a monorepo. Your app lives inside the monorepo workspace alongside the packages.

Clone the repository and build all packages:

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

# Install dependencies
pnpm install

# Build all packages
pnpm build

This builds @mdk/core, @mdk/foundation, and @mdk/fonts.

Create your app

Create a new React app in the apps/ folder:

cd apps
pnpm create vite my-app --template react-ts
cd my-app

Update your app's package.json to use the workspace packages:

{
  "name": "my-app",
  "private": true,
  "dependencies": {
    "@mdk/core": "workspace:*",
    "@mdk/foundation": "workspace:*",
    "react": "catalog:",
    "react-dom": "catalog:"
  }
}

Then install from the monorepo root:

cd ../..
pnpm install

Import styles

In your app's entry point (for example, main.tsx), import the MDK styles:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

import '@mdk/core/styles.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

Render your first component

Replace your App.tsx with a simple example using MDK components:

import { Button, Card } from '@mdk/core'

function App() {
  return (
    <div style={{ padding: '2rem' }}>
      <Card>
        <h1>Hello MDK</h1>
        <p>Your first MDK UI Kit component is working!</p>
        <Button onClick={() => alert('Clicked!')}>
          Click me
        </Button>
      </Card>
    </div>
  )
}

export default App

Run your app:

pnpm --filter my-app dev

You should see a card with a button. Clicking the button shows an alert.

Next steps

Now that you have MDK working, explore the packages:

@mdk/core: base UI components such as buttons, inputs, tables, dialogs, and charts
@mdk/foundation: mining-domain components such as the operations centre, vendor containers, and settings

Run the demo app

The monorepo includes a comprehensive demo showcasing all components:

pnpm dev:demo

Open http://localhost:5173 to browse examples.

Use domain components

For mining-specific features, use @mdk/foundation:

import { FeatureFlagsSettings } from '@mdk/foundation'

function SettingsPage() {
  return (
    <FeatureFlagsSettings
      isEditingEnabled={true}
      featureFlags={{ darkMode: true, betaFeatures: false }}
      onSave={(flags) => console.log('Saved:', flags)}
    />
  )
}

See the Settings components documentation for more examples.

Quickstart

On this page