Components

The @tetherto/mdk-react-devkit/core package provides production-ready React components. All components are built with accessibility in mind and support both light and dark themes.

Import

Prerequisites

• Complete the installation

• Import the core styles in your app's entry point:

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

Import named components

Declare the components you require:

import { Button, Card, DataTable } from '@tetherto/mdk-react-devkit/core'

Supported components

Browse the categories in the sidebar for the full, always-up-to-date component list — each links to its own reference page (description, props, usage, and a runnable example).

Styling

Components use BEM-style CSS classes (e.g., .mdk-button, .mdk-card__header) for styling consistency and easy customization.

Class name forwarding

Every component forwards className to its root element, so you can apply layout or override styles without ejecting. This is assumed throughout and not repeated in every props table. Components with multiple styleable parts also expose named hooks (for example contentClassName, indicatorClassName, dropdownClassName) — those are listed in the relevant component's props table.

Component design principles

• Composable: Components are designed to work together
• Accessible: Built with ARIA attributes and keyboard navigation
• Themeable: Support light/dark modes via CSS custom properties
• Type-safe: Full TypeScript support with exported prop types