Metal UI components

Soft Hardware components for React and SwiftUI

Components: 105
Framework: React + SwiftUI
Stack: React, TypeScript, Tailwind
License: MIT
GitHub stars: 19
Source: https://github.com/vijayksingh/metalui
Website: https://metalui.dev

All Metal UI components

Accordion: Sections that open in place: row headers with a chevron; the panel grows to its content on the settle spring while the shared chevron…
Alert dialog: A question that must be answered: the dialog's plate and motion; a click outside shakes it once on the refusal spring instead of closing…
Attachment: A file someone attached, as a small raised plate: type, name, size or an explicit upload receipt; shared glyphs morph from upload to check…
Avatar: A person as a small raised disc: initials, or a photo that fades in once loaded; presence as the LED; a group overlaps and spreads apart…
AI composer: A chat block: a composer that grows, attachments, a model choice, and replies that stream in word by word with stop, copy and retry.
Availability picker: A booking block: a host, a call length, a calendar of the next six weeks, the day's free times re-labelled by time zone, and Confirm to…
Settings: A settings block: profile fields validated on blur and save, notification switches, a colorway and density, and a save bar that counts…
Share panel: A sharing block: drop files that upload with progress, invite people by email with a permission, and turn on and copy a share link.
Block silhouette: 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…
Studio week: One week of a canvas workspace on a dot matrix, hour by hour, with readouts for notes, regions, confirmed cues and time in the past, and…
Task inbox: A task list block: search and views, a tick that settles a task into Done, multi-select with a tool strip to complete, assign, snooze or…
Breadcrumbs: Where you are, as a path you can climb: levels above in ink2, the current in ink, engraved chevrons between; a new level arrives from the…
Brush cursor: 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…
Button: A press-in pill button with compact caps, async waiting/result faces and opt-in irreversible hold confirmation. React on Base UI and…
Button group: Related action segments cut from one raised bar with engraved seams, independent presses and noninteractive readout windows. SplitButton…
Calendar: A calendar for single dates, inclusive ranges and independent dates. Localized segmented date entry, eligibility and form validation share…
Card: A person's thing on a raised plate: media, title, a line, actions. A card with a link lifts one grid step on the settle spring as its…
Checkbox: The dimple checkbox: a recessed well that turns into a dark pressed key with a drawn tick; doing (half green) and ghost (an inferred…
Checkbox group: Several independent choices in a form: row-size checkboxes with labels and an optional parent; ticking the parent ticks its rows in a…
Chip: A small pill with an optional leading LED or glyph and trailing actions: suggestion, glass, glass-action and tag.
Code card: Code as a glass object: numbered, tinted lines (at most 18) on a dark screen under a CODE · LANG · N LINES tag.
Colour cue: A fixed-footprint six-digit colour word opens the shared hue well and rewrites source through one gesture transaction.
Combobox: Type to find one of many: a field well that opens the menu's frosted plate; rows filter at once while the plate's height settles to the…
Command palette: ⌘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…
Connector: The look around ink that joins two blocks: a green halo and end dots on hover (solid attached, hollow free), end handles when selected…
Date cue: An inline civil date: day/week detents, nearby relative source words, a resolved date and a Calendar opened by hold or keyboard. Explicit…
Day: The day as an object: a tear-off page with the date in dots, the month, weekday and clock in the pixel face, the minute filling along its…
Dial: A slider wound into a ring: one track carries a curl from a straight bar to a ring with its gap at six o'clock, min at seven and max at…
Dialog: A modal layer: a scrim behind a surface; focus stays inside, Escape and a click outside close it.
Dot display: Square dots on one pitch, printed into a well: each dot one px colour or unlit. A slow display that steps six times a second and never…
Draw picks: 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…
Draw tools: The drawing group of the toolbar: eight tool caps (pen, pencil, marker, line, arrow, rectangle, ellipse, eraser) with one latched, then…
Drop zone: A place that receives files, by drop or by picking: a sunk tray whose edge lights while files are dragged in the window, sinks and says…
Empty state: A place with nothing in it yet: an engraved glyph in a well, what would be here, how to start, one action; it rises in on the settle…
Enum cue: A finite host-declared source state: cycle, keyboard step, focused wheel or held vertical drag with one source/history transaction and a…
Fan: A compact canvas control bar: grouped tools unfold in a three-column grid, contextual glyph actions expand in a tray, and named ink and…
Field: Text input in a well with a leading glyph and trailing keycaps; SearchField, a button in a well that opens search.
Filter bar: 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…
Folder: A folder on the canvas that holds blocks: a back panel with a tab, up to three blocks peeking up as cards, a frosted flap with its name…
Form field: A control with its words: label, description and an error that grows open from under the control on the settle spring; invalid and…
Glass face: A dark glass object: a bezel around a screen with a glare, a shaded rim and an inner shadow.
Glyph: A static icon at a size (10, 14, 16) in an ink (ink, ink2, ink3, inherit); decorative.
Hover engraving: 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…
Icon button: 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).
Island: Where you are and how things stand, in one capsule at the top of a place, in the colorway: a status LED, the place's name, one quiet fact…
Keycap: 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…
Label: Text in a set role: engraved, small, title, heading, query, count, cell, value, display, readout, on-graphite and dark; as="input" edits…
Lasso: 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…
LED: An 8pt lens in an opaque 1pt socket, beside words. Five shared inks; waiting breathes, failure blinks twice once, off stays dark. Reduced…
Line handles: The presence of a drawn line or arrow: a green halo and end dots on hover, two end handles when selected; the connector's selection…
Link: An inline destination with a persistent engraved underline, directional hover emphasis, press travel, current/unavailable/visited/loading…
Link card: A link as a glass object: the host and path on a screen tinted by the host, a LINK tag and one OPEN action.
Link cue: A real URL host-chip link and a separate anchored source field, with an explicit footprint and one confirmed source-history transaction.
Mark: 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…
Menu and correction popover: 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…
Menubar: An app's commands under a few words across the top: quiet keys that open the menu's plates; while one is open, a highlight glides between…
Meter: A level in a range as a row of LED segments coloured by position (green, amber, red); a change sweeps segment by segment from the old edge…
Navigation menu: A site's sections across the top with panels of links: the plate rises on the surface spring, slides and resizes between keys on the…
Number field: A number you step, scrub or type: keycaps at each end of a pill well; each step turns the value one drum step (plus up, minus down) and an…
Numeric cue: A bounded canonical quantity operated inline: vertical detent scrub, typed spinbutton and horizontal unit conversion. Explicit font…
Pagination: Moving through pages of results: page numbers in the switcher's track with previous and next shared-chevron keys; the current page's thumb…
Past banner: The only chrome that changes while the canvas is scrubbed into the past: Surface(graphite-plain) with the MEMORY engraving, the moment…
Perfect preview: Hold to perfect: while the pen is held still after a rough stroke, the fitted clean shape draws itself round as a faint green outline over…
Person cue: An exact source name opens a host-provided avatar/name picker with a fixed footprint and one confirmed document transaction.
Popover: A small panel that comes out of its trigger: the menu's frosted plate rising one nest from the trigger's side on the surface spring…
Preview card: What is behind a link, seen by resting on it: after a steady hover the popover's plate rises out of the link with an image, title…
Progress: Task amount and explicit idle, running, paused, failed, cancelled and complete states. Bars, slim bars, rings, segmented steps and…
Provenance tooltip: One hover away from every cue: a wrapped Tooltip that says where the cue came from (Rule · date parser, Recognizer · 0.82, You), the…
Radio group: One choice from a short list: round wells beside their labels; pressing darkens the well, releasing latches a pip in on the part spring…
Region: 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…
Rename editor: A name field and one async rename confirm: basename selection, host validation, pending lock, glyph/drum result and captured-original Undo…
Row: A list, panel or option row; selection raises its plate, opened detail marks its rail, and completion strikes its text.
Rule: An engraved groove between groups; graphite on dark chrome.
Scroll area: A region that scrolls with the system's own scrollbar: a slim thumb that fades in while scrolling and widens when reached for, and edge…
Select: One value from a list of named options: a raised cap showing the value and an up-down chevron, opening the menu's frosted list with the…
Selection frame: 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…
Settings: 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…
Sheet: A panel that slides in from an edge (right or bottom) on the surface spring, follows a drag one to one, and leaves on release, sooner for…
Sidebar: An app's side place for moving between places: sections of items with one highlight that glides to the current place; it collapses to a…
Size readout: A pill in the colorway that reads a measured value: an object's size, a multi-selection's count, a copy, a zoom level. Surface(chrome)…
Skeleton: Where content will be before it arrives: blocks, lines and circles in the well's sunk look, shown after a beat with a soft sheen, swapped…
Slider: Scalar or range amounts on a clamped track: horizontal/vertical, centred or neutral fill, named independent knobs, step detents, transient…
Snap guides: 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…
Sparkline: A small series plot: a line with gaps, dots, the last point emphasised, a dashed baseline at the average.
Spatial field: One quiet, content-aware dot field for a Place. It yields to object footprints and reinforces the host-selected Region while the host…
Spinner: Unknown work in a host glyph slot: current ink, delayed arrival and minimum visibility. Large hosts show their incoming shape; known…
Split pane: Two places with a divider you can move: dragged one to one, it snaps to the default size or shut on the part spring; keys step it on settle.
Status badge: A readable 26pt status plate with words and a sunk LED or retained morphing meaning glyph. Quiet, opaque strong tint, explicit…
Suggestion chip: One question the recognizer asks at middle confidence, beside its block: Chip(suggestion) with the question, its confidence as a small…
Surface: A raised plate or card from a material recipe: raise, raise-lite, raise-sm, frost, plate, panel, pop, tip, lens and the graphites.
Swatch: A colour as a hard, glossy chip in its own colour: a sheen, an engraved hex in dark or light ink by the colour's luma, a recessed LED…
Switch: 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…
Switcher: A pill of pills on Base UI RadioGroup: a well track, options on the height ladder, and a raised thumb that glides to the selection on the…
Table: Rows of things, read across and compared down: engraved labels and hairlines; sorting turns the column's arrow and every row travels to…
Tabs: Switches which panel is shown: the switcher track and gliding thumb as the tab list, and panels that drift in from the side the thumb went.
Tag cue: Recent source tags cycle with canonical identity colour; a shared autocomplete chooses tags for a captured unfinished hash range.
Textarea: Several lines of text in the field well that grows with what is written on the settle spring; with a limit, a counter fades in near it and…
Time scrubber: Time as a dimension of the surface: a Slider (track, moment marks, day ticks, knurled knob) under an engraved readout with NOW as…
Toast: The result of a person's own action, with Undo: a 44 tall pill in the colorway at the bottom centre. Results stack as a deck in depth…
Toggle: A latching push button: the button cap with a lamp; pressing sinks it past the catch, releasing into on settles it at the latch on the…
Tool strip: Selection-aware graphite action strip: stable verb intersections, glyph keys and count, anchored collision placement, More overflow…
Toolbar and tool button: A frosted capsule strip of circular 36 tool caps (frost in the colorway, or graphite), latched tools pressed with a green LED, engraved…
Tooltip: 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…
Weather: Weather as an object: a slab with a dot-matrix sky sunk into it that follows the time of day, the temperature in the pixel face on its…
Well: A sunk field or track: field, track, region (with a drop-target state) and graphite.

Metal UI components

All Metal UI components

Browse by category