Components

Web components (mm-*) that work in any framework, with React wrappers and Svelte types. Each page has a live example, guidance and the full API.

Actions

Component	Use it for
Button	Triggers one action.
Button group	Groups related buttons, spaced or attached.
Copy button	Copies a value to the clipboard.
Menu button	A button that opens a menu.
Split button	A primary action with a menu of alternatives.

Data visualisation

Component	Use it for
Area chart	One key series over a flat tint.
Bar chart	Grey bars with one highlighted, direct value labels, vertical or ranked horizontal.
Contour chart	Isoline density view in contour colours with an index contour.
KPI tile	One number with a label, a context sentence and an optional sparkline.
Line chart	Grey-first time series with one key line, direct labels and annotations.
Proportion bar	A single grey stacked bar with direct labels, replacing the donut.
Run strip	Pass and fail history of pipeline runs as square cells.
Sparkline	A 64×16 word-sized trend line with its latest value.

Data

Component	Use it for
Activity feed	Home's activity, grouped by day.
Audit row	The query audit log as a dense, expandable table.
Avatar	A person's photo or initials, an agent's robot or a team's icon.
Data table	Many records in a sortable, selectable, virtualised grid.
Diff viewer	Structured schema changes or a unified text diff.
Metadata viewer	JSON-aware key and value metadata.
Notification list	Notifications for the bell popover and the notifications page.
Owner chip	Avatar and name for a person, agent or team.
Results grid	SQL results, virtualised in both directions.
Schema outline	The fields of an asset's schema as a readable outline, with a field panel and JSON/YAML views.
Timeline	Ordered steps with state markers, vertical or horizontal.
Tree	A virtualised, lazy-loading tree view.

Docs and marketing

Component	Use it for
Code sample	Read-only highlighted code with a copy button.
Topography	Abstract topographic background field.

Forms

Component	Use it for
Checkbox	Turns one option on or off.
Combobox	Type to find one value, with async search.
Cron field	A cron expression field with presets, a plain-English description and the next runs.
Date range picker	Picks a relative or absolute time range.
Fieldset	Groups related controls under a legend.
File drop	Drag-and-drop or browse for files, form-associated.
Form field	Label, help and error layout for a slotted control.
Key value editor	Edit free-form key and value pairs, with paste and an optional JSON mode.
Multiselect	Pick several values, shown as removable tags.
Number field	A number with a unit, steppers and spinbutton keys.
Query input	Search box with highlighting for Marmot's query syntax.
Radio group	Pick one of a few options.
Search field	A query field with a search icon and a shortcut hint.
Segmented control	Pick one of two to four modes.
Select	Pick one value from a short list.
Slider	Set a number, or a range, by position.
Switch	Turns a setting on or off.
Text field	One line of text with a label, help and error.
Textarea	Several lines of text with a label, help and error.

Foundations

Component	Use it for
Count	A small tabular count for tabs, filter pills and badges.
Heading	A heading with a semantic level and a token type style.
Kbd	A keyboard shortcut as physical keys.
Link	A link: burnt sienna in prose, quiet ink in rows, muted for chrome.
Logo	The Marmot wordmark, or its "M" monogram, as fixed artwork.
Readout	A sentence-case metadata strip separated by middle dots.
Text	Interface text in a token type style.
Visually hidden	Content for screen readers only, or shown on focus for skip links.

Layout

Component	Use it for
Description list	Label and value pairs for metadata.
Details blade	The 36rem side panel of sections on an asset page.
Disclosure	A button that shows and hides a region.
List	Hairline-separated rows with keyboard navigation between interactive items.
Page header	The title block of a view: title, caption, MRN, description, tags, owners and actions.
Panel	A bordered surface for one subject, with a head and a body.
Section	A titled page region with optional description and actions.
Split pane	Two panes with a draggable, keyboard-resizable separator.
Toolbar	A row of controls that act on one surface.

Lineage

Component	Use it for
Lineage canvas	Pan-and-zoom lineage graph with keyboard navigation and a minimap.
Lineage legend	Explains the lineage canvas encodings.
Lineage node	An asset on the lineage canvas.

Navigation

Component	Use it for
App shell	The app layout: banner, sidebar, top bar, main area and blade.
Breadcrumbs	The path to the current page, with overflow.
Command palette	The ⌘K palette: navigation, commands and live catalogue search.
Facet sidebar	The filter column with facets, applied filters and Clear all.
Filter pill	Toggle a facet filter, or show an applied one.
Org switcher	Switches organisation and workspace (Cloud).
Pagination	Moves through pages of results.
Sidebar nav	The grouped sidebar navigation, with a collapsed rail.
Stepper	Shows progress through a multi-step flow.
Tabs	Switches between views of one object.
Top bar	The app's top bar: page context, global search, notifications and the avatar menu.

Overlays

Component	Use it for
Asset card	A compact summary of one asset.
Confirm dialog	Confirms a destructive action, optionally by typing its name.
Context menu	Opens a menu on right-click or Shift+F10.
Dialog	A modal dialog for one decision or short task.
Drawer	A modal side sheet for connect flows and create forms.
Hover card	A delayed preview card for a link.
Keyboard shortcuts	A dialog listing keyboard shortcuts by group.
Menu	A list of actions, inline or floating.
Person card	Who a person or agent is.
Popover	A non-modal panel anchored to a trigger.
Tooltip	A short, instant description of a control or a data point.

Query

Component	Use it for
Code editor	CodeMirror editor for SQL, JSON and YAML on the code ground.
Query builder	Build a search as groups of conditions that match all, any or none.
Query history	Past queries with status, source, rows and duration.
Saved query card	One saved query in a list: name, owner, source, last run and SQL preview.
Search bar	Search with conditions as editable tokens: the query builder and the search box in one.
SQL editor	SQL editor with catalog completion, run and format.

Status

Component	Use it for
Banner	Full-width system message at the top of the app shell.
Callout	One message inside a page.
Empty state	Title, one sentence, one action, over a topographic background field.
Loading	Topographic draw-in loading state.
Popularity	How much an asset is used, as four bars.
Progress	Bar plus a mono count for long operations.
Skeleton	Placeholder shapes while content loads.
Status pill	A run, asset or request condition in one word.
Tag	Domain, classification or origin label.
Toast	Transient confirmation of something that happened.