MDK by Tether

Framework quickstarts

React

Set up the MDK UI Kit and render your first React component in four steps

🚧

Vue

Reactive hooks for Vue via @tetherto/mdk-vueLearn about the release schedule →

🚧

Svelte

Reactive hooks for Svelte via @tetherto/mdk-svelteLearn about the release schedule →

🚧

Web Components

Framework-agnostic Web Components via @tetherto/wcLearn about the release schedule →

MDK React UI Kit

The MDK React UI Kit is a React-based component library that provides production-ready UI components for Bitcoin mining applications.

Before 1.0, the React UI Kit packages (@tetherto/mdk-ui-core and @tetherto/mdk-ui-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.

Current version 0.0.1

Prerequisites

React 18+
Node.js 20+
pnpm 10+

Packages

Package	Description
`@tetherto/mdk-ui-core`	Base UI components (buttons, inputs, tables, etc.)
`@tetherto/mdk-ui-foundation`	Domain-specific components, hooks, and constants

Installation

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

# Install dependencies
pnpm install

# Build all packages
pnpm build

Then add to your app's package.json:

{
  "dependencies": {
    "@tetherto/mdk-ui-foundation": "workspace:*"
  }
}

This also installs @tetherto/mdk-ui-core as a dependency. For core-only usage, see @tetherto/mdk-ui-core.

Example

import { SettingsDashboard } from '@tetherto/mdk-ui-foundation'

export function App() {
  return (
    <SettingsDashboard
      headerControlsProps={{ /* ... */ }}
      rbacControlProps={{ /* ... */ }}
    />
  )
}

For a complete walkthrough from installation to first component, see the Quickstart guide.

UI Kit