Components
React components for building mining application UIs
The @tetherto/mdk-react-devkit package provides production-ready React components organized by category.
Prerequisites
- Install the packages
npm install \
@tetherto/mdk-react-devkit \
@tetherto/mdk-react-adapter \
@tetherto/mdk-ui-foundation- Import the core styles in your app's entry point. The mining-domain components — the cards, charts, dashboard, settings, tables and widgets categories below — carry their styles in a second stylesheet, which loads after the first:
import '@tetherto/mdk-react-devkit/styles.css'
import '@tetherto/mdk-react-devkit/styles-domain.css'Browse by category
| Category | Description |
|---|---|
| Actions | Buttons and action triggers |
| Auth | Authentication and sign-in components |
| Branding | Logos, wordmarks, and brand elements |
| Cards | Mining-domain cards: incidents, metrics, and pool details. Generic card containers are under Layout |
| Charts | Data visualization and chart components |
| Dashboard | Header stat boxes, date and timeline pickers, and the export control |
| Dialogs | Modal dialogs and confirmation prompts |
| Display | Data display and formatting components |
| Feedback | Alerts, toasts, and user feedback |
| Filters | Filter controls and filter bars |
| Forms | Form inputs, selects, and validation |
| Layout | Page structure, tabs, dividers, and the card container slots |
| Media | Directional icon |
| Monitoring | Activity log rows, items, and the log card |
| Navigation | Sidebars, tabs, and navigation menus |
| Overlays | Popovers, tooltips, and overlay panels |
| Pages | Not-found page |
| Settings | Settings panels and preference controls |
| Tables | The data table, plus the alerts and device-explorer views built on it |
| Widgets | Dashboard widgets and data cards |
Import pattern
Components are importable from the package root. For tree-shaking and clarity, prefer the subpath that matches the
component's layer — @tetherto/mdk-react-devkit/primitives for the generic ones, /domain for the
mining-domain ones:
import { Button, Card, DataTable } from '@tetherto/mdk-react-devkit'Styling
Components use BEM-style CSS classes (e.g., .mdk-button, .mdk-card__header) for styling consistency. Many
components accept a className that is merged onto their root element, but not all do — check the component's
props before relying on it.
Styling covers the two stylesheets, the design tokens, and the cascade layers.