Your first component

Clone and build

1.1 Clone the repository

git clone https://github.com/tetherto/mdk.git
cd mdk

1.2 Install and build

npm install
npm run build

This builds @tetherto/mdk-react-devkit and the other packages in the monorepo workspace.

Create your app

2.1 Scaffold a Vite React app

Create a new React app in the apps/ folder:

cd apps
npm create vite@latest my-app -- --template react-ts
cd my-app

2.2 Add MDK to package.json

Open package.json and add the workspace dependency:

    "@tetherto/mdk-react-devkit": "*",

2.3 Install from the workspace root

cd ../..    # from apps/my-app back up to the monorepo root
npm install

Import styles

3.1 Import the MDK stylesheet

Import the MDK stylesheet once in your app's entry point (typically src/main.tsx):

import '@tetherto/mdk-react-devkit/styles.css'

Render your first component

This example replaces App.tsx with a single mining metric tile that toggles between a normal and an alarmed state.

4.1 Replace App.tsx with the demo

This pulls a button from @tetherto/mdk-react-devkit/core and a domain component (SingleStatCard) from @tetherto/mdk-react-devkit/foundation:

import { useState } from 'react'
import { Button } from '@tetherto/mdk-react-devkit/core'
import { SingleStatCard } from '@tetherto/mdk-react-devkit/foundation'

function App() {
  const [overheating, setOverheating] = useState(false)

  return (
    <div style={{ padding: '2rem', display: 'grid', gap: '1rem', maxWidth: 320 }}>
      <h1>Miner status</h1>
      <SingleStatCard
        name="Inlet temperature"
        value={overheating ? 78 : 28}
        unit="°C"
        variant={overheating ? 'tertiary' : 'primary'}
        color="red"
        flash={overheating}
      />
      <Button onClick={() => setOverheating((on) => !on)}>
        {overheating ? 'Cool down' : 'Simulate overheat'}
      </Button>
    </div>
  )
}

export default App

4.2 Run your app

From the monorepo root, start the dev server for your app. The -w name must match the name field in apps/my-app/package.json (my-app from step 2.1):

npm -w my-app run dev

Alternatively, from the app folder:

cd apps/my-app
npm run dev

You should see a card showing Inlet temperature 28 °C with a Simulate overheat button below it. Click the button and the card flips into an alarm state: red border, red text, value jumps to 78 °C, and the whole card pulses. Click Cool down to reset.

That is @tetherto/mdk-react-devkit/core (the Button) and @tetherto/mdk-react-devkit/foundation (the SingleStatCard) working together: generic primitives plus mining-domain components, in one app.