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.
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' 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 DateRangePickerTwo-month date range selector with presets and apply/clear actions SliderRange input for numeric values FormForm wrapper with validation and submission handling FormControlSlot wrapper that wires ARIA attributes onto a control FormDescriptionHelper text paragraph rendered below a field FormFieldController wrapper that provides field context to descendants FormItemLayout wrapper grouping a label, control, description, and message FormLabelLabel that auto-links to the form field input FormMessageValidation message paragraph for a form field LabelForm field label with optional required indicator TagInputInput for entering multiple tags FormCascaderReact hook form `Cascader` wrapper for hierarchical selection FormCheckboxReact hook form `Checkbox` wrapper with inline label FormDatePickerReact hook form `DatePicker` wrapper with label and description FormInputReact hook form `Input` wrapper with label, description, and error FormRadioGroupReact hook form `RadioGroup` wrapper accepting an options array FormSelectReact hook form `Select` wrapper accepting an options array FormSwitchReact hook form `Switch` wrapper with inline label FormTagInputReact hook form `TagInput` wrapper for multi-value fields FormTextAreaReact hook form `TextArea` wrapper with label, description, and error
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 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 SkeletonBlockLoading 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
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
