Get started with React
Choose a path to set up the MDK React UI Kit
TL;DR
- One provider, zero Redux: install and wrap your app in
<MdkProvider>so connected foundation components and adapter hooks share the same stores and API client - Presentational
/coreand/foundationimports can work without the provider - Anything that reads app state needs the provider
Choose your path
Quickstart
Install all three packages, wrap in MdkProvider, wire stores and theming⏱️ <3 min
Explore the demo
Single copy/paste to clone the monorepo and browse the full demo app in your browser⏱️ <1 min
Tutorial
Step-by-step app scaffold with MdkProvider, adapter hooks, and foundation components⏱️ <5 min
🚧
mdk-ui CLI
Agent-first tooling via @tetherto/mdk-ui-cli — registry, scaffold, and docs for agentsComing soon
Prerequisites
- Node.js 20+
- npm 11+ (upgrade npm if
npm -vshows 10.x on Node 22) - React 19+ and react-dom 19+
About the React stack
The React UI Kit is published as three workspace packages in the MDK monorepo:
@tetherto/mdk-ui-core— headless state (Zustand vanilla stores), a TanStackQueryClientfactory, telemetry primitives, and the command state machine. No React.@tetherto/mdk-react-adapter— React bindings:<MdkProvider>, store hooks (useAuth,useDevices,useNotifications,useTimezone,useActions) and re-exports ofuseQuery/useMutation.@tetherto/mdk-react-devkit— the React UI library:./coreprimitives and./foundationmining-domain components, hooks, and styles.
@tetherto/mdk-ui-core is framework-agnostic; the adapter and devkit are React-specific.
Add all three to your app’s package.json, then wrap the tree once in <MdkProvider> from @tetherto/mdk-react-adapter.
Next steps
- Explore the core package providing primitives: buttons, forms, charts, and themes
- Explore the foundation package providing mining-domain components and hooks
- See the UI Kit overview for how the headless layer fits other frameworks
- Browse the Hooks reference — state, component, and utility hooks