# MetalUI

> Soft Hardware components for React (on Base UI) and SwiftUI, with animated duotone icons. Every component ships React, SwiftUI and an agent guide.

- [Full agent guide](https://metalui.dev/AI.md)
- [Component manifest](https://metalui.dev/components.json)
- [Icon manifest](https://metalui.dev/icons.json)

## Components

- [Block silhouette](https://metalui.dev/r/block-silhouette.md): A block seen from far away: below the far-zoom threshold the canvas draws one flat, cheap shape per block that still says its kind (text bars, a dark code card, a link's tinted glass, a colour, a light file plate, a region's tray and name).
- [Brush cursor](https://metalui.dev/r/brush-cursor.md): The pointer while drawing or erasing: a disc in the ink colour at the stroke width times the zoom, or a dashed ring the size of what the eraser removes; it follows the pointer in the same frame.
- [Button](https://metalui.dev/r/button.md): A press-in pill button. It sinks 1px into a well while held and springs back on release: standard, primary and destructive caps at 32 or compact 26, and the link, graphite and strip caps. Tailwind v4 utilities from the theme.
- [Checkbox](https://metalui.dev/r/checkbox.md): The dimple checkbox: a recessed well that turns into a dark pressed key with a drawn tick; doing (half green) and ghost (an inferred task's hollow ring) states.
- [Chip](https://metalui.dev/r/chip.md): A small pill with an optional leading LED or glyph and trailing actions: suggestion, glass, glass-action and tag.
- [Code card](https://metalui.dev/r/code-card.md): Code as a glass object: numbered, tinted lines (at most 18) on a dark screen under a CODE · LANG · N LINES tag.
- [Command palette](https://metalui.dev/r/command-palette.md): ⌘K: a 560 frost plate with a 44 field well, sections of 36 rows with matches marked, a raised selected row with a green bar, destructive rows in red, and a footer of keycaps. Hover moves the selection; ↩ runs, ⇧↩ pins. Built on Base UI Dialog and an inline Combobox.
- [Dialog](https://metalui.dev/r/dialog.md): A modal layer: a scrim behind a surface; focus stays inside, Escape and a click outside close it.
- [Draw picks](https://metalui.dev/r/draw-picks.md): The ink and width choices in the drawing group: five glossy ink beads and three width dots in the current ink; the chosen one sits in a sunk well like a latched tool.
- [Draw tools](https://metalui.dev/r/draw-tools.md): The drawing group of the toolbar: eight tool caps (pen, pencil, marker, line, arrow, rectangle, ellipse, eraser) with one latched, then the five inks and three widths.
- [Field](https://metalui.dev/r/field.md): Text input in a well with a leading glyph and trailing keycaps; SearchField, a button in a well that opens search.
- [Filter bar](https://metalui.dev/r/filter-bar.md): Names the question a filter asks and switches how the answer is shown: Surface(frost) with a Glyph, the query in Label(query), the count and source engraved, a compact Segmented of views, and IconButton(ghost) pin and close. Formerly LensBar.
- [Glass face](https://metalui.dev/r/glass-face.md): A dark glass object: a bezel around a screen with a glare, a shaded rim and an inner shadow.
- [Glyph](https://metalui.dev/r/glyph.md): A static icon at a size (10, 14, 16) in an ink (ink, ink2, ink3, inherit); decorative.
- [Hover engraving](https://metalui.dev/r/hover-engraving.md): A block's identity on a 420 ms dwell: Surface(tip) beside its first line with the kind and details in Label(engraved), derived tags as Chip(tag) and the recognizer's status with a Led.
- [Icon button](https://metalui.dev/r/icon-button.md): A pressable cap with only a glyph: tool (a graphite cap that latches with a green LED), ghost (flat, round) and mini (inside a chip).
- [Keycap](https://metalui.dev/r/kbd.md): A key's glyph on a small raised cap, in the readout role: 20 tall (16 in a footer), on a light surface, a graphite strip, or sunk into a toast's Undo.
- [Label](https://metalui.dev/r/label.md): Text in a set role: engraved, small, title, heading, query, count, cell, value, display, readout, on-graphite and dark; as="input" edits in place.
- [Lasso](https://metalui.dev/r/lasso.md): The box a drag on empty canvas draws: a 1 pt intent-green hairline over a faint fill, and a graphite readout under it counting what it will select (● 3 blocks). The same on screen at every zoom.
- [Link card](https://metalui.dev/r/link-card.md): A link as a glass object: the host and path on a screen tinted by the host, a LINK tag and one OPEN ↗ action.
- [Mark](https://metalui.dev/r/mark.md): Inline, metric-neutral text marks: dated and quiet underlines, a tag pill, a derived-tag ring, a hex underline with its swatch, a URL host pill, an inferred pill, the urgency LED and a trailing glyph.
- [Menu and correction popover](https://metalui.dev/r/menu.md): A frosted plate of 30 rows (frost-strong at .92, radius 18, padding 6, at least 200 wide) from a trigger or at the pointer: an engraved heading says what it acts on, pointer and keyboard share one highlight, keys at the right, destructive rows red, engraved separators; fades on settle. The correction popover is its right-click form. Built on Base UI Menu and Context Menu.
- [Past banner](https://metalui.dev/r/past-banner.md): The only chrome that changes while the canvas is scrubbed into the past: Surface(graphite-plain) with the MEMORY engraving, the moment viewed, and a Back to Now cap with its key.
- [Provenance tooltip](https://metalui.dev/r/provenance-tooltip.md): One hover away from every cue: a wrapped Tooltip that says where the cue came from (Rule · date parser, Recognizer · 0.82, You), the detail in Tooltip.Dim, with the number whenever the app guessed.
- [Region](https://metalui.dev/r/region.md): A drawn rectangle with a name that carries a rule: Well(region) with a head (Label name, Label rule, Label count) that lights as a drop target, dims, hides in the past and renames in place; a pinned lens is Surface(lens) with Row(list) rows.
- [Row](https://metalui.dev/r/row.md): A row in a list: list, panel and option (the active one raises with a green rail); checked rows strike their text.
- [Rule](https://metalui.dev/r/rule.md): An engraved groove between groups; graphite on dark chrome.
- [Segmented control](https://metalui.dev/r/segmented.md): A pill of pills on Base UI RadioGroup: a well track, segments on the height ladder, and a raised thumb that glides to the selection on the part spring.
- [Selection frame](https://metalui.dev/r/selection-frame.md): The one selection for every kind of object: a 1.25 green ring with a flat collar at offset 6, eight handles on the ring line, and a graphite readout of the measured frame. Hover shows only faint corner dots and an edge light.
- [Settings](https://metalui.dev/r/settings.md): An app's settings as sections of rows: an engraved heading over a raised card; each row a name, an optional detail and one control on the right; engraved rules between rows; shortcut rows with keycaps.
- [Size readout](https://metalui.dev/r/size-readout.md): A graphite pill that reads a measured value: an object's size, a multi-selection's count, a copy, a zoom level. Surface(graphite-deep) with a live Led and the value in Label(readout).
- [Slider](https://metalui.dev/r/slider.md): A track well, a green fill up to a knurled knob, tick marks and labelled ticks; arrows step, Shift steps large.
- [Snap guides](https://metalui.dev/r/snap-guides.md): The lines that explain a snap while a person moves or resizes on the canvas: 1 pt intent green, solid for aligned edges, dashed for aligned centres, spanning the aligned objects plus 8 pt, the same on screen at every zoom.
- [Sparkline](https://metalui.dev/r/sparkline.md): A small series plot: a line with gaps, dots, the last point emphasised, a dashed baseline at the average.
- [LED and status badge](https://metalui.dev/r/status.md): A 4–5 pt LED lit from the top left (green live, amber waiting, red failed, blue link, off), and the 24 tall status badge: an LED and the state in the label role, not pressable, with the fixing command as a tooltip.
- [Suggestion chip](https://metalui.dev/r/suggestion-chip.md): One question the recognizer asks at middle confidence, beside its block: Chip(suggestion) with the question, its confidence as a small engraving, and mini accept and dismiss buttons. Faint until the block is hovered.
- [Surface](https://metalui.dev/r/surface.md): A raised plate or card from a material recipe: raise, raise-lite, raise-sm, frost, plate, panel, pop, tip, lens and the graphites.
- [Switch](https://metalui.dev/r/switch.md): A setting that is on or off and takes effect at once: a sunk pill track with a raised thumb that slides on the part spring; on, the track fills soft green.
- [Time scrubber](https://metalui.dev/r/time-scrubber.md): Time as a dimension of the surface: a Slider (track, moment marks, day ticks, knurled knob) under an engraved readout with NOW as Button(link) while in the past. Formerly MemoryScrubber.
- [Toast](https://metalui.dev/r/toast.md): The result of a person's own action, with Undo: a 44 tall smoked pill at the bottom centre, one at a time, arriving on settle and leaving on release. Built on Base UI Toast.
- [Tool strip](https://metalui.dev/r/tool-strip.md): Verbs over a click selection: Surface(graphite-strip) with Button(strip) caps (Tasks, Summarise, Gather, Region, Export) and Send away as Button(strip-danger) after a Rule. Rises 4 on the part spring.
- [Toolbar and tool button](https://metalui.dev/r/toolbar.md): A frosted capsule strip of circular 36 tool caps (frost in the colorway, or graphite), latched tools pressed with a green LED, engraved separators, a search well, and tooltips with the key. Built on Base UI Toolbar, Toggle and Tooltip.
- [Tooltip](https://metalui.dev/r/tooltip.md): Names an icon-only control and its key: a graphite pill chip in the label role, SELECT · V with the key dimmed, 10 from the trigger after 120 ms, grouped so the next trigger shows at once; flips near the edge; fades on settle. Built on Base UI Tooltip. wrap makes a longer note that wraps at 280 with its detail in Tooltip.Dim.
- [Well](https://metalui.dev/r/well.md): A sunk field or track: field, track, region (with a drop-target state) and graphite.