MDK by Tether

Framework quickstarts

React

Pick a path: lean Quickstart, full Tutorial, or browse the component packages

🚧

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-core-ui and @tetherto/mdk-foundation-ui) 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

Node.js 20+
pnpm 10+

Packages

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

Installation

# Clone the repository
git clone https://github.com/tetherto/mdk.git

# Move into the UI workspace (this is where the pnpm workspace lives)
cd mdk/ui-client

# Install dependencies
pnpm install

# Build all packages
pnpm build

Then add to your app's package.json:

{
  "dependencies": {
    "@tetherto/mdk-core-ui": "workspace:*",
    "@tetherto/mdk-foundation-ui": "workspace:*",
    "react": "catalog:",
    "react-dom": "catalog:"
  }
}

For core-only usage, see @tetherto/mdk-core-ui.

Example

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

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

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

UI Kit