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-foundationInstall zod@^4.6.6 first. @tetherto/mdk-react-devkit@0.12.1 declares zod@^4.6.6 as a peer while its
@hookform/resolvers peer pulls a chain that pins zod 3, so the command above aborts with ERESOLVE in a project that
has no zod. Installing zod 4 at the project root resolves it:
npm install zod@^4.6.6- Import the core styles in your app's entry point:
import '@tetherto/mdk-react-devkit/styles.css'Browse by category
| Category | Description |
|---|---|
| Actions | Buttons, action triggers, and export controls |
| Auth | Authentication and sign-in components |
| Branding | Logos, wordmarks, and brand elements |
| Cards | Card containers and card-based layouts |
| Charts | Data visualization and chart components |
| Dashboard | Dashboard layouts and containers |
| 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 layouts, grids, and spacing |
| Media | Images, icons, and media display |
| Monitoring | System monitoring and status displays |
| Navigation | Sidebars, tabs, and navigation menus |
| Overlays | Popovers, tooltips, and overlay panels |
| Pages | Full-page layouts and page shells |
| Settings | Settings panels and preference controls |
| Tables | Data tables and table utilities |
| Widgets | Dashboard widgets and data cards |
Import pattern
Components are imported from the package root:
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. Every component forwards className to its root element.