Components Core UI components for building Bitcoin mining application interfaces
The @tetherto/mdk-core-ui 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 '@tetherto/mdk-core-ui/styles.css' Declare the components you require:
import { Button, Card, DataTable } from '@tetherto/mdk-core-ui' Component Description ButtonPrimary action trigger with variants and sizes ActionButtonButton that requires confirmation before running an action InputText input field with label and validation TextAreaMulti-line text input SelectDropdown single/multi-select input SelectTriggerSelect trigger control SelectValueDisplayed select value SelectContentSelect dropdown panel SelectGroupSelect option group SelectLabelSelect group heading SelectItemSelect list option CascaderMulti-level dropdown selector for hierarchical data CheckboxBinary toggle input for forms SwitchToggle for on/off settings RadioSingle-select option from a group RadioGroupRadio group container RadioCardCard-style radio option DatePickerCalendar-based date selection input DateRangePickerTwo-month date range selector with presets and apply/clear actions 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 DialogTriggerDialog open control DialogContentDialog modal surface DialogFooterDialog action footer DropdownMenuContextual menu triggered by button click PopoverFloating content triggered by click/hover PopoverTriggerPopover anchor control PopoverContentPopover floating panel ToastTemporary notification message TooltipHover-triggered informational popup TooltipProviderTooltip context provider TooltipTriggerTooltip anchor element TooltipContentTooltip popup surface
Data display Component Description CardContainer for grouped content with optional header CardHeaderCard header region CardBodyCard main content CardFooterCard footer region AccordionCollapsible content sections with expand/collapse animation AccordionRootAccordion root context AccordionItemCollapsible accordion section AccordionTriggerAccordion section header AccordionContentAccordion panel body 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
Navigation Component Description SidebarCollapsible navigation panel TabsTabbed content navigation TabsListTabs tab strip TabsTriggerIndividual tab button TabsContentTab panel body LazyTabWrapperTab content that loads on first view BreadcrumbsNavigation path showing page hierarchy
Loading Component Description SpinnerCircular loading indicator LoaderFull-screen or section loading overlay
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
