Component Library

@morscherlab/mint-sdk ships the Vue components plugin authors use to build frontends that feel native inside MINT. This section is the public component library: a searchable catalog and one page per exported component, with each component page embedding its own playground.

Start Here

Need	Page
Preview a component	Open the component page below and use its embedded playground
Check one component import and source	Open the component page below
Learn token and theme behavior	Design tokens, Theming
Build schema-driven experiment forms	FormBuilder guide

Layout

LayoutPluginWorkspaceViewDefault plugin frontend shell generated by current MINT scaffolds.LayoutAppLayoutLower-level application shell with topbar, sidebar, and content slots.LayoutAppContainerLightweight content shell for standalone plugin screens and routed views.LayoutAppTopBarPlatform-style top bar for shells that need custom navigation chrome.LayoutAppSidebarSectioned sidebar for plugin-specific navigation and grouped tools.LayoutAppAvatarMenuAppAvatarMenu is a layout component exported by @morscherlab/mint-sdk for plugin frontends.LayoutAppPluginSwitcherAppPluginSwitcher is a layout component exported by @morscherlab/mint-sdk for plugin frontends.LayoutPluginIconPluginIcon is a layout component exported by @morscherlab/mint-sdk for plugin frontends.LayoutBreadcrumbBreadcrumb is a layout component exported by @morscherlab/mint-sdk for plugin frontends.LayoutDividerDivider is a layout component exported by @morscherlab/mint-sdk for plugin frontends.LayoutFitPanelFitPanel is a layout component exported by @morscherlab/mint-sdk for plugin frontends.LayoutResourceCardResourceCard is a layout component exported by @morscherlab/mint-sdk for plugin frontends.LayoutCollapsibleCardCollapsibleCard is a layout component exported by @morscherlab/mint-sdk for plugin frontends.

Forms

FormsBaseButtonTokenized action button with variants, sizes, loading, and disabled states.FormsBaseInputThemed text and numeric input with error, placeholder, and v-model support.FormsBaseTextareaMulti-line input for notes, descriptions, and longer user-entered text.FormsBaseSelectThemed select control with option objects, placeholder, and v-model support.FormsBaseCheckboxSingle checkbox control for boolean plugin settings and form fields.FormsBaseToggleBaseToggle is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsBaseRadioGroupBaseRadioGroup is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsBaseSliderBaseSlider is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsColorSliderColorSlider is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsBaseTabsBaseTabs is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsSegmentedControlSegmentedControl is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsMultiSelectMultiSelect is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsDropdownButtonDropdownButton is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsFormFieldLabel, hint, error, and accessibility wrapper for form controls.FormsDatePickerDatePicker is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsTimePickerTimePicker is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsDateTimePickerDateTimePicker is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsTimeRangeInputTimeRangeInput is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsCalendarCalendar is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsTagsInputTagsInput is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsNumberInputNumberInput is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsFileUploaderDrag-and-drop file picker with accept, size, multiple, and error handling.FormsFormulaInputFormulaInput is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsSequenceInputSequenceInput is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsUnitInputUnitInput is a forms component exported by @morscherlab/mint-sdk for plugin frontends.FormsConcentrationInputConcentrationInput is a forms component exported by @morscherlab/mint-sdk for plugin frontends.

Feedback

FeedbackAlertBoxInline status, warning, error, and success messages for plugin screens.FeedbackAppToastContainerAppToastContainer is a feedback component exported by @morscherlab/mint-sdk for plugin frontends.FeedbackIconButtonIconButton is a feedback component exported by @morscherlab/mint-sdk for plugin frontends.FeedbackThemeToggleThemeToggle is a feedback component exported by @morscherlab/mint-sdk for plugin frontends.FeedbackSkeletonSkeleton is a feedback component exported by @morscherlab/mint-sdk for plugin frontends.FeedbackLoadingSpinnerLoadingSpinner is a feedback component exported by @morscherlab/mint-sdk for plugin frontends.FeedbackStatusIndicatorStatusIndicator is a feedback component exported by @morscherlab/mint-sdk for plugin frontends.FeedbackProgressBarProgressBar is a feedback component exported by @morscherlab/mint-sdk for plugin frontends.FeedbackAvatarAvatar is a feedback component exported by @morscherlab/mint-sdk for plugin frontends.FeedbackEmptyStateEmpty-list and empty-view treatment with optional action affordance.FeedbackTooltipHover/focus tooltip with smart positioning for compact explanations.FeedbackBaseModalStandard modal dialog with controlled visibility and footer slots.FeedbackConfirmDialogPre-built confirm-or-cancel dialog for destructive or high-friction actions.FeedbackSettingsModalSettingsModal is a feedback component exported by @morscherlab/mint-sdk for plugin frontends.

Data display

Data displayDataFrameSearchable, sortable, selectable table for dense experiment and analysis results.Data displayChartContainerChartContainer is a data display component exported by @morscherlab/mint-sdk for plugin frontends.Data displayScientificNumberScientificNumber is a data display component exported by @morscherlab/mint-sdk for plugin frontends.Data displayChemicalFormulaFormula renderer with scientific typography and element-aware formatting.Data displaySequenceProgressBarSequenceProgressBar is a data display component exported by @morscherlab/mint-sdk for plugin frontends.Data displayAuditTrailAuditTrail is a data display component exported by @morscherlab/mint-sdk for plugin frontends.Data displayBatchProgressListBatchProgressList is a data display component exported by @morscherlab/mint-sdk for plugin frontends.Data displayExperimentDataViewerExperimentDataViewer is a data display component exported by @morscherlab/mint-sdk for plugin frontends.Data displayExperimentCodeBadgeExperimentCodeBadge is a data display component exported by @morscherlab/mint-sdk for plugin frontends.Data displayInstrumentAlertLogInstrumentAlertLog is a data display component exported by @morscherlab/mint-sdk for plugin frontends.Data displayInstrumentStateBadgeInstrumentStateBadge is a data display component exported by @morscherlab/mint-sdk for plugin frontends.Data displayInstrumentStatusCardInstrumentStatusCard is a data display component exported by @morscherlab/mint-sdk for plugin frontends.Data displayLcmsSequenceTableLcmsSequenceTable is a data display component exported by @morscherlab/mint-sdk for plugin frontends.Data displayBasePillCompact status label for tables, metadata, and small state indicators.

Lab widgets

Lab widgetsWellPlateInteractive 96- and 384-well plate map with heatmaps, selection, and editing hooks.Lab widgetsRackEditorRackEditor is a lab widgets component exported by @morscherlab/mint-sdk for plugin frontends.Lab widgetsSampleLegendSampleLegend is a lab widgets component exported by @morscherlab/mint-sdk for plugin frontends.Lab widgetsPlateMapEditorPlateMapEditor is a lab widgets component exported by @morscherlab/mint-sdk for plugin frontends.Lab widgetsExperimentTimelineExperimentTimeline is a lab widgets component exported by @morscherlab/mint-sdk for plugin frontends.Lab widgetsSampleSelectorSampleSelector is a lab widgets component exported by @morscherlab/mint-sdk for plugin frontends.Lab widgetsAutoGroupModalAutoGroupModal is a lab widgets component exported by @morscherlab/mint-sdk for plugin frontends.Lab widgetsGroupAssignerGroupAssigner is a lab widgets component exported by @morscherlab/mint-sdk for plugin frontends.Lab widgetsMoleculeInputMoleculeInput is a lab widgets component exported by @morscherlab/mint-sdk for plugin frontends.Lab widgetsDoseCalculatorDoseCalculator is a lab widgets component exported by @morscherlab/mint-sdk for plugin frontends.Lab widgetsReagentEditorReagentEditor is a lab widgets component exported by @morscherlab/mint-sdk for plugin frontends.Lab widgetsReagentListReagentList is a lab widgets component exported by @morscherlab/mint-sdk for plugin frontends.Lab widgetsSampleHierarchyTreeSampleHierarchyTree is a lab widgets component exported by @morscherlab/mint-sdk for plugin frontends.Lab widgetsProtocolStepEditorProtocolStepEditor is a lab widgets component exported by @morscherlab/mint-sdk for plugin frontends.

Workflow

WorkflowComponentBindingRendererComponentBindingRenderer is a workflow component exported by @morscherlab/mint-sdk for plugin frontends.WorkflowControlWorkspaceViewControlWorkspaceView is a workflow component exported by @morscherlab/mint-sdk for plugin frontends.WorkflowDoseDesignWorkspaceViewDoseDesignWorkspaceView is a workflow component exported by @morscherlab/mint-sdk for plugin frontends.WorkflowBioTemplateRendererBioTemplateRenderer is a workflow component exported by @morscherlab/mint-sdk for plugin frontends.WorkflowBioTemplateExperimentWorkspaceViewBioTemplateExperimentWorkspaceView is a workflow component exported by @morscherlab/mint-sdk for plugin frontends.WorkflowBioTemplatePackWorkspaceViewBioTemplatePackWorkspaceView is a workflow component exported by @morscherlab/mint-sdk for plugin frontends.WorkflowBioTemplatePresetWorkspaceViewBioTemplatePresetWorkspaceView is a workflow component exported by @morscherlab/mint-sdk for plugin frontends.WorkflowStepWizardMulti-step workflow container with progress, validation, and navigation slots.WorkflowFormBuilderSchema-driven form renderer for experiment-design and plugin settings UIs.WorkflowFormActionsFormActions is a workflow component exported by @morscherlab/mint-sdk for plugin frontends.WorkflowScheduleCalendarScheduleCalendar is a workflow component exported by @morscherlab/mint-sdk for plugin frontends.WorkflowExperimentSelectorModalExperimentSelectorModal is a workflow component exported by @morscherlab/mint-sdk for plugin frontends.WorkflowExperimentPopoverExperimentPopover is a workflow component exported by @morscherlab/mint-sdk for plugin frontends.

SDK Maintainer Storybook

The component pages above are compiled into the VitePress docs site. SDK maintainers can also run the full Histoire lab while changing SDK components and testing exhaustive prop controls:

cd packages/sdk-frontend
bun run story:dev
# http://localhost:6006