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, meaning 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, so check the component's
props before relying on it.
Styling covers the two stylesheets, the design tokens, and the cascade layers.