Components
Core UI components for building mining application interfaces
Components
The @mdk/core package provides 56 production-ready React components organized into logical categories. All components are built with accessibility in mind and support both light and dark themes.
Import
import { Button, Card, DataTable } from '@mdk/core'Categories
| Category | Description | Components |
|---|---|---|
| Layout | Container and structure components | Card, Dialog, Accordion, Sidebar, Tabs, Popover |
| Forms | Input and form control components | Button, Input, Select, Checkbox, Switch, Form |
| Data display | Components for presenting data | DataTable, Badge, Tag, Avatar, Pagination |
| Charts | Data visualization components | LineChart, BarChart, AreaChart, DoughnutChart |
| Feedback | User feedback and status components | Toast, Alert, EmptyState, ErrorBoundary |
| Logs | Log display components | LogsCard, LogRow, LogItem |
Styling
All components require the core styles to be imported:
import '@mdk/core/styles.css'Components use BEM-style CSS classes (e.g., .mdk-button, .mdk-card__header) for styling consistency and easy customization.
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