Components Core UI components for building Bitcoin mining application interfaces
The @mdk/core package provides production-ready React components. All components are built with accessibility in mind and support both light and dark themes.
Show steps # Clone the repository git clone https://github.com/tetherto/miningos-ui-kit.git cd miningos-ui-kit # Install dependencies pnpm install # Build all packages pnpm build
Import the core styles in your app's entry point:
import '@mdk/core/styles.css' Declare the components you require:
import { Button, Card, DataTable } from '@mdk/core' Forms Component Description ButtonPrimary action trigger with variants and sizes ActionButtonButton with loading state and icon support InputText input field with label and validation TextareaMulti-line text input SelectDropdown single/multi-select input CascaderMulti-level dropdown selector for hierarchical data CheckboxBinary toggle input for forms SwitchToggle for on/off settings RadioSingle-select option from a group DatePickerCalendar-based date selection input SliderRange input for numeric values FormForm wrapper with validation and submission handling LabelForm field label with optional required indicator TagInputInput for entering multiple tags
Overlays Component Description DialogModal overlay for forms and confirmations AlertDialogModal confirmation dialog for destructive actions DropdownMenuContextual menu triggered by button click PopoverFloating content triggered by click/hover ToastTemporary notification message TooltipHover-triggered informational popup
Data display Component Description CardContainer for grouped content with optional header LabeledCardCard with prominent label header AccordionCollapsible content sections with expand/collapse animation AvatarUser profile image with fallback initials BadgeSmall status indicator or count label TagLabel chip for categories or filters DataTableSortable, filterable data grid with pagination PaginationPage navigation for large data sets SkeletonLoading placeholder mimicking content shape TypographyText styling components (headings, paragraphs) IndicatorStatus dot for online/offline/warning states CurrencyTogglerSwitch between currency display formats EmptyStatePlaceholder for empty data with call-to-action ListViewFilterFilter controls for list/table views MosaicGrid layout for dashboard widgets DividerVisual separator between content sections SeparatorHorizontal or vertical dividing line
Navigation Component Description SidebarCollapsible navigation panel TabsTabbed content navigation LazyTabWrapperTab content that loads on first view BreadcrumbsNavigation path showing page hierarchy
Loading Component Description SpinnerCircular loading indicator LoaderFull-screen or section loading overlay ProgressLinear progress bar for loading/completion
Errors Component Description AlertContextual feedback messages with severity levels ErrorBoundaryCatches React errors and displays fallback UI ErrorCardStyled error message display NotFoundPage404 error page template
Logs Component Description LogsCardContainer for log entries with filtering
Components use BEM-style CSS classes (e.g., .mdk-button, .mdk-card__header) for styling consistency and easy customization.
Composable : Components are designed to work togetherAccessible : Built with ARIA attributes and keyboard navigationThemeable : Support light/dark modes via CSS custom propertiesType-safe : Full TypeScript support with exported prop types
