# Tactile UI

> Tactile UI is a component library of tactile, physical-feeling interface components for the web: rotary knobs and dials, odometer counters and flip-dot displays, gauges, switches, and surfaces that answer your hand. It is skeuomorphic, hardware-style UI drawn from Braun and Dieter Rams, in finishes like aluminium, graphite, porcelain and black anodised, with colour only where a lamp is lit. 30 objects (interactive components), 51 website blocks, a UI kit of 190 parts and 25 page templates, in plain JavaScript ES modules and CSS with no dependencies, with React, Vue and Svelte wrappers and a custom element. The Odometer is free on npm. Made by Ciprian Titire.

It installs like a shadcn registry: free pieces with npx shadcn add, Pass pieces with a personal token, or as plain files downloaded from a signed-in account. The only npm package is the free Odometer.

## Facts
- In the library now: 30 objects, 51 blocks, 190 kit parts and 25 templates, counted from the catalogue each time this file is read.
- Price: the Founder Pass is paid once, for the first 100 buyers in steps: 50 at $99, then 50 at $129 (0 sold so far; $99 now). Prices include tax. It covers everything now and later, the kit included. After that the Pass is $199 for the objects and blocks, and the kit is sold separately. Installing with the shadcn registry and the docs MCP server come with the Pass; big extras (team tools, a Figma library, native packages, hosted extras) may be sold separately. At $99, a full refund within 30 days, for any reason. Every other Pass: within 14 days, if you have not downloaded or opened the code. Stripe takes the payment in the buyer's currency.
- Availability: checkout opens on 27 October 2026 at 09:00 UK time. Until then the Founder Pass is a pre-order and can't be bought yet.
- Licence: use them in any number of your own and client projects. You may not resell the objects themselves as a kit, library or template.
- Install: there is nothing to install for the paid pieces. Each is a package of plain files from your account: a runnable example, the piece's modules and styles, two prompts for AI tools and a checksum manifest. The free Odometer is also on npm: `npm install tactile-odometer` (MIT, version 1.1.1).
- Each object works by keyboard and touch, respects reduced motion, stops drawing when nothing moves, and has its own browser test. Each one's size and test count, measured from the source, are in /api/specimens.
- Frameworks: every object and block ships with React, Vue and Svelte wrappers and a custom element, for Angular, Astro or a plain page. For an iOS, Android, React Native or Flutter app, each comes with a prompt that ports it.
- For AI tools: every object and block comes with a prompt that rebuilds it and one that reuses the technique, and the kit comes with a set of rules an agent reads before it builds. These come with the Pass.
- Free and open source (MIT), no account needed: Engraved Client Plates, FAQ Index, Machined Footer, Compass, Odometer, Pull-cord Bulb, and Tactile Modernism, an agent skill that teaches Claude, Cursor and other agents the look (see Free, below).

## Good for
- Software that runs something and has to show what state it is in: agent consoles, deploy and uptime dashboards, on-call screens, energy and IoT apps, trading desks.
- Launch pages for physical products, where a control should feel like the product.

## Not a good fit if
- You need hundreds of generic components quickly. This is a smaller library, all in one visual style.

## Start here
- [Home](https://tactileui.dev/): the objects running, the blocks and the kit.
- [All pieces](https://tactileui.dev/c/all): every object and block, each running on the page.
- [Install with shadcn, and MCP](https://tactileui.dev/docs/registry-and-mcp): every object and block in a shadcn registry (https://tactileui.dev/r/registry.json; npx shadcn add https://tactileui.dev/r/odometer.json), Pass pieces with a personal token; the docs as a read-only MCP server at https://tactileui.dev/mcp.
- [Start free](https://tactileui.dev/docs/start-free): the three free ways in, the six open-source pieces (https://tactileui.dev/r/free/registry.json), the free kit parts and Tactile Modernism, each with its account, licence and install.
- [Free to use](https://tactileui.dev/c/free): the free pieces.
- [The kit](https://tactileui.dev/kit): every part, running, in every finish.
- [Docs](https://tactileui.dev/docs/introduction): 259 pages. Every object, block, kit part and template with its options, states and markup, beside a live demo, and the foundations they share.
- [Installation](https://tactileui.dev/docs/installation) · [Using a framework](https://tactileui.dev/docs/frameworks) · [Using it with Claude and Cursor](https://tactileui.dev/docs/agents)
- [Docs as Markdown](https://tactileui.dev/docs/introduction.md): every docs page is Markdown too, at its address with .md after it (https://tactileui.dev/parts/knob.md, https://tactileui.dev/objects/iris.md). A page for a paid piece gives its words, anatomy, option and API names and usage notes; the code and the styling open to the account that owns it.
- [Catalogue as JSON](https://tactileui.dev/catalog.json): every object, block, kit part and template in one list: kind, categories, the pack it needs (free, Pass or Kit), a one-line summary, when to use it and when not where the docs say, related pieces, and the addresses of its docs page and its Markdown.
- [Pricing](https://tactileui.dev/pricing): the Founder Pass and the Pass, a pre-order until 27 October 2026 at 09:00 UK time.
- [Licence](https://tactileui.dev/licence) · [Privacy](https://tactileui.dev/privacy)

## Browse by job
- [Dials & knobs](https://tactileui.dev/c/dials): Rotary knobs and dials you turn by hand: one clicks into its notches, a compass bezel steps a degree a click, and a jog dial scrubs through time.
- [Knobs](https://tactileui.dev/c/knobs): Knobs: one whose light stays put as it turns, and a setup dial that steps through its options a detent at a time.
- [Displays & signs](https://tactileui.dev/c/displays): Displays that behave like the hardware: a flip-disc sign that clatters, an odometer whose drums carry, and an alarm panel that stays dark until a fault trips.
- [Numbers](https://tactileui.dev/c/numbers): Number displays: a readout, LCD and VFD figures, a number you can drag, and a stat tile with its change and trend.
- [Gauges](https://tactileui.dev/c/gauges): Gauges with something physical inside: a glass of liquid that fills as the value rises and sloshes when jolted, and a compass card that swings and settles.
- [Switches & pulls](https://tactileui.dev/c/switches): Switches you can feel: a pendant lamp that comes on when you pull its cord, and cloth faders lit from behind.
- [Sliders & faders](https://tactileui.dev/c/sliders): Sliders and faders: a fader whose cap rides a slot cut into the plate, a range with two caps, and a number you drag.
- [Surfaces](https://tactileui.dev/c/surfaces): Surfaces that answer your hand: pins you press a word into, iron filings and ferrofluid that follow a magnet, and sand that settles on a vibrating plate.
- [Reveals](https://tactileui.dev/c/reveals): Ways to show what's underneath: an iris diaphragm that opens onto it, fluted glass you read a word through, and a flip book whose cards turn on their rings.
- [Shaders](https://tactileui.dev/c/shaders): Pieces drawn live on the GPU: fluted glass that bends what's behind it, ferrofluid that spikes under your pointer, and the afterglow of a cathode-ray tube.
- [Progress](https://tactileui.dev/c/progress): Progress you can watch: ink filling a groove, a ring meter, an LED ladder, a meter with its thresholds printed, and a battery cell.
- [Charts](https://tactileui.dev/c/charts): Charts built as instruments: LED bars with a lingering peak, a heatmap of panel lamps, and a recorder whose pen draws the live value on moving paper.
- [Status boards](https://tactileui.dev/c/status-boards): Status boards: a flip-dot departures board whose rows clatter up, and a scoreboard that turns its numbers over.
- [Heroes](https://tactileui.dev/c/heroes): Hero sections: brass pins that rise under your hand, black ferrofluid that spikes under the cursor, and an amplifier whose VU needles swing.
- [Pricing sections](https://tactileui.dev/c/pricing): Pricing sections: a price on brass drums that rolls when you switch period or currency, and a slide rule whose runner you drag along a usage scale.

## Free
- [Odometer](https://tactileui.dev/objects/odometer): A mechanical drum counter. A digit moves only while the one to its right carries, so 1,099 to 1,100 rolls three drums over together. `npm install tactile-odometer` (MIT, version 1.1.1). [npm](https://www.npmjs.com/package/tactile-odometer) · [GitHub](https://github.com/cipriantitire/tactile-ui-free/tree/main/odometer)
- [Engraved Client Plates](https://tactileui.dev/blocks/client-plates): “Used in production by…”, as metal name plates. Brushed aluminium or anodised black, screwed or riveted, each client’s mark cut into the metal with one… MIT, no account: npx shadcn add https://tactileui.dev/r/client-plates.json
- [FAQ Index](https://tactileui.dev/blocks/faq-drawer): An FAQ as a card-index drawer. Each question is typed along a card’s edge with its subject on a staggered tab; pull one and it lifts out to show the… MIT, no account: npx shadcn add https://tactileui.dev/r/faq-drawer.json
- [Machined Footer](https://tactileui.dev/blocks/machined-footer): A footer made as the bottom panel of a device. Printed columns of links, a status window with a real lamp, a changelog key, an Aluminium / Graphite switch… MIT, no account: npx shadcn add https://tactileui.dev/r/machined-footer.json
- [Compass](https://tactileui.dev/objects/compass): A liquid-damped compass. The card swings past the mark and settles while a lit display reads the bearing. MIT, no account: npx shadcn add https://tactileui.dev/r/compass.json
- [Pull-cord Bulb](https://tactileui.dev/objects/pull-cord): A pendant lamp that is a switch. Pull the acorn: the detent resists and snaps, and the filament warms from dull red to white while the lamp sways. MIT, no account: npx shadcn add https://tactileui.dev/r/pull-cord.json
- [Tactile Modernism](https://github.com/cipriantitire/tactile-modernism): an MIT agent skill that teaches Claude, Cursor and other agents the look: the finishes, the lamp colours, the light and the rules.

## Docs and writing
- [Introduction](https://tactileui.dev/docs/introduction)
- [Start free](https://tactileui.dev/docs/start-free)
- [Installation](https://tactileui.dev/docs/installation)
- [Using a framework](https://tactileui.dev/docs/frameworks)
- [Install with shadcn, and MCP](https://tactileui.dev/docs/registry-and-mcp)
- [What’s new](https://tactileui.dev/docs/changelog)
- [Getting your files](https://tactileui.dev/docs/getting-your-files)
- [Updates](https://tactileui.dev/docs/updates)
- [Free and paid](https://tactileui.dev/docs/free-and-paid)
- [Refunds and receipts](https://tactileui.dev/docs/refunds-and-receipts)
- [How the Odometer carries](https://tactileui.dev/docs/how-the-odometer-carries)
- [Odometer, odometer.js, NumberFlow](https://tactileui.dev/docs/odometer-vs-odometer-js-vs-numberflow)
- [How the Chladni Plate works](https://tactileui.dev/docs/how-the-chladni-plate-works)
- [How the Pin Screen works](https://tactileui.dev/docs/how-the-pin-screen-works)
- [Blog](https://tactileui.dev/blog): write-ups on physical, hardware-style interfaces.
- [Animated number counters for the web in 2026, compared: odometer.js and its alternatives](https://tactileui.dev/blog/animated-number-counters-compared): The animated number counters for the web worth a look in 2026, from odometer.js and countUp.js to NumberFlow: how the digits move, screen readers, reduced motion, upkeep and the licence catches.
- [JavaScript knob and dial components in 2026, compared](https://tactileui.dev/blog/javascript-knob-and-dial-components): The knob and dial components for the web worth a look in 2026, for plain JS, React, Vue and Svelte: keys, screen readers, upkeep and the licence catches.
- [Skeuomorphic UI in 2026: kits, libraries, and when it works](https://tactileui.dev/blog/skeuomorphic-ui-in-2026): Every skeuomorphic and hardware-style UI resource I could find that's still alive, what each one is actually good for, and when the style is worth it.

## Objects
- [Pin Screen](https://tactileui.dev/objects/pin-screen): The pin-art toy, as a surface. Press a word through polished pins under a raking lamp, drag it, wipe it, or shake it flat. Your hand is the mould.
- [Detent Dial](https://tactileui.dev/objects/detent-dial): A rotary control you count by feel. The value sticks at each notch and clicks over, and the light stays where the lamp is. Not a slider in a round costume.
- [Flip-Dot](https://tactileui.dev/objects/flip-dot): The flip-disc sign from buses and stations. Every disc swings over, hits its stop, bounces and latches, so each message arrives as a clattering wave.
- [Ferrofluid](https://tactileui.dev/objects/ferrofluid): Ferrofluid in a dish. It gathers toward the pointer and erupts into sharp spikes, then melts back into a trembling puddle. Your pointer is the magnet.
- [Iris](https://tactileui.dev/objects/iris): A lens’s iris diaphragm, as a reveal. Curved blades pivot on their pins, close to a pinhole and open onto what lies beneath, the engraved f-stop ring…
- [Odometer](https://tactileui.dev/objects/odometer): A mechanical drum counter. A digit moves only while the one to its right carries, so 1,099 to 1,100 rolls three drums over together. (free)
- [Vessel](https://tactileui.dev/objects/vessel): A glass of liquid as a gauge. It pours in when the value rises, sloshes when the page jolts and rings when tapped, lit like lab glassware in a photograph.
- [Filings](https://tactileui.dev/objects/filings): Iron filings on paper, magnets underneath. Thousands of slivers swing into a real field and write a hidden word in iron, lit from one lamp.
- [Pull-cord Bulb](https://tactileui.dev/objects/pull-cord): A pendant lamp that is a switch. Pull the acorn: the detent resists and snaps, and the filament warms from dull red to white while the lamp sways. (free)
- [Compass](https://tactileui.dev/objects/compass): A liquid-damped compass. The card swings past the mark and settles while a lit display reads the bearing. (free)
- [Phosphor Scope](https://tactileui.dev/objects/phosphor-scope): A cathode-ray tube behind smoked glass. The beam leaves light behind it: a radar sweep lights your contacts and they fade, a trace glows where the signal…
- [Cassette](https://tactileui.dev/objects/cassette): A clear cassette as a progress bar. The right pack grows as the work goes on and the hubs turn while it runs, the emptier one faster.
- [Spectroscope](https://tactileui.dev/objects/spectroscope): A prism splits a lamp's light into its colours, and every colour is traced through the glass, so turning the table slides the spectrum along the scale.
- [Reeded Glass](https://tactileui.dev/objects/reeded-glass): A pane of fluted glass on rails. Each reed is a lens that magnifies what is behind and smears it softly sideways, sharp top to bottom, so a word reads…
- [Ring-bound Notebook](https://tactileui.dev/objects/notebook): A flip book of cards on two rings, seen from above. Lift the lower card over the rings and the page turns: your finger holds the card where it took it…
- [Search Dial](https://tactileui.dev/objects/search-dial): The heavy dial of an edit console. JOG steps frames under your finger, SHTL is a spring-return shuttle whose angle is the speed, SCRL is a flywheel you…
- [Chladni Plate](https://tactileui.dev/objects/chladni): A black plate on a shaker, strewn with sand, with a frequency knob. Turn it onto a resonance and the plate sings: the sand walks off the parts that move…
- [Receipt Printer](https://tactileui.dev/objects/printer): A small thermal receipt printer that prints any text, line by line. The paper feeds out from behind a serrated steel tear bar in the head's own rhythm…
- [Annunciator](https://tactileui.dev/objects/annunciator): An alarm panel: a grid of engraved windows, dark until a fault trips. A new fault flashes amber or red and sounds a horn; ACK holds it steady; when it…
- [Globe](https://tactileui.dev/objects/globe): A desk globe on a meridian. A satin-metal ball with the land etched into it, held in a machined half-meridian on a turned stand.
- [Map](https://tactileui.dev/objects/map): A lit dot-matrix world map, made as a panel: a machined bezel round smoked glass, and behind it a grid of lamps.
- [Cloth Fader](https://tactileui.dev/objects/cloth-fader): Tall volume faders that are capsules of stretched cloth, lit from behind.
- [Cloth Beacon](https://tactileui.dev/objects/cloth-beacon): A status light made of cloth: a capsule of stretched fabric in a machined plate with a lamp behind it.
- [Simon](https://tactileui.dev/objects/simon): The four-lamp memory game as a handheld made of kit parts. Watch the lamps, then repeat them on the keys; each round adds one and the lamps get quicker.
- [Reaction Timer](https://tactileui.dev/objects/reaction-timer): A one-lamp reaction timer as a handheld made of kit parts. Press Start, wait for the lamp, then hit the key as fast as you can; five tries make a round…
- [Stack Tower](https://tactileui.dev/objects/stack-tower): The stacking game as a handheld made of kit parts. A milled bar slides across a tall window; drop it on the stack, and whatever hangs over is sheared off…
- [Snake](https://tactileui.dev/objects/snake): The dot-matrix classic as a handheld made of kit parts. Steer the snake round a field of amber LEDs and eat the blinking dot to grow; it gets quicker…
- [Dash](https://tactileui.dev/objects/dash): A three-lane runner as a handheld made of kit parts, on a printed segment LCD.
- [Quarry](https://tactileui.dev/objects/quarry): Falling blocks on the library's Flip-Dot board, as a handheld made of kit parts.
- [Spall](https://tactileui.dev/objects/spall): A brick game on the kit's vacuum fluorescent display, as a handheld made of kit parts.

## Blocks
- [Cloth-lit Cubes](https://tactileui.dev/blocks/cloth-cubes): A features row of small devices on a desk. Each feature is a cube in speaker cloth with its icon lit through the weave; one shows its figure on lamps, one… (free with an account)
- [Engraved Client Plates](https://tactileui.dev/blocks/client-plates): “Used in production by…”, as metal name plates. Brushed aluminium or anodised black, screwed or riveted, each client’s mark cut into the metal with one… (free)
- [Machined Footer](https://tactileui.dev/blocks/machined-footer): A footer made as the bottom panel of a device. Printed columns of links, a status window with a real lamp, a changelog key, an Aluminium / Graphite switch… (free)
- [FAQ Index](https://tactileui.dev/blocks/faq-drawer): An FAQ as a card-index drawer. Each question is typed along a card’s edge with its subject on a staggered tab; pull one and it lifts out to show the… (free)
- [Patch Bay](https://tactileui.dev/blocks/patch-bay): A rack panel of jacks with a cable hanging from each source. Carry a plug to where the events should go and it seats with a click; the lamp beside it…
- [Instrument Rack](https://tactileui.dev/blocks/instrument-rack): A bento grid of feature cells made as a rack of machined panels. Each holds a small working instrument: a segmented counter, a needle meter with weight, a…
- [Rail](https://tactileui.dev/blocks/rail): A site's top bar made like the front edge of a hi-fi unit. A debossed wordmark plate, engraved links with a lit lamp under the current page, a search key…
- [Colophon](https://tactileui.dev/blocks/colophon): A footer made as the rating plate and the index of a product. An engraved plate with the model, the serial and the specification, a contents-page index…
- [Tariff Slide](https://tactileui.dev/blocks/tariff-slide): A pricing section made as a slide rule. Drag the glass runner along a logarithmic usage scale and read the price off the scale beneath; the plan lamp…
- [Ticker](https://tactileui.dev/blocks/ticker): An announcement bar made as a ticker-tape window. A paper tape in the Receipt Printer’s stock and typewriter face runs behind a glass lip a character cell…
- [Socket Panel](https://tactileui.dev/blocks/socket-panel): An integrations section made as a panel of sockets, one per service. A connected service has its plug seated and a green lamp; press a free socket and the…
- [Nameplate Wall](https://tactileui.dev/blocks/nameplate-wall): A customers section made as the tenant directory in a lobby: cast aluminium or graphite plates, each as long as its name, with the name in engraved…
- [Switchboard](https://tactileui.dev/blocks/switchboard): A contact section made as an operator's switchboard. A row of labelled jacks, one per desk, each with a lamp that is lit when someone is there; choosing…
- [Drop Tray](https://tactileui.dev/blocks/drop-tray): A site header whose section keys latch down and drop a recessed tray of pages from under the bar: two printed columns, a line under each page, and a…
- [Answer Desk](https://tactileui.dev/blocks/answer-desk): An FAQ section made as a help desk: a search field in a recessed well with an LCD that counts the answers that match, topic keys with a lamp for the…
- [Light Table](https://tactileui.dev/blocks/light-table): A portfolio gallery made as an edit table: slides in their mounts on opal glass lit from below, the chosen one lifted off it and shown whole in a viewer…
- [Proof Sheet](https://tactileui.dev/blocks/proof-sheet): A long-read layout set like a journal proof: the essay in one column with its notes in the margin, and a contents plate beside it whose lamps follow the…
- [Fluted Glass Hero](https://tactileui.dev/blocks/fluted-glass-hero): A full-bleed hero over a wall of ribbed glass with one warm lamp drifting slowly behind it.
- [Aluminium Plate Hero](https://tactileui.dev/blocks/aluminium-plate-hero): A full-bleed hero on a large brushed aluminium plate. Real brushing (two noise filters stretched along the grain), a highlight that follows the cursor and…
- [Morning Blinds Hero](https://tactileui.dev/blocks/morning-blinds-hero): A full-bleed hero lit by morning light through window blinds: soft-edged bands across a plaster wall with a gentle penumbra, a window bar, a faint warm…
- [Rotary File](https://tactileui.dev/blocks/rotary-file): A testimonials section on a motorised rotary card file: each customer a paper card on the drum, the one in front readable, the ones to come leaning back…
- [Roll Call](https://tactileui.dev/blocks/roll-call): A team section on a machined roll board beside a light box: a row per person with a staff number, name, role, the year they started and a lamp.
- [Spec Sheet](https://tactileui.dev/blocks/spec-sheet): Plans side by side as a manufacturer’s data sheet: a printed title block, then one table with a lit lamp for what a plan has and the same lamp unlit for…
- [Impression Hero](https://tactileui.dev/blocks/impression-hero): A studio’s hero on a full-bleed board of brass pins. The brand word rises out of it under a raking lamp, and the visitor’s hand lifts the pins between the…
- [Pin 404](https://tactileui.dev/blocks/pin-404): A 404 standing out of a pin board. The visitor wipes it flat by hand; a moment later it climbs back up, because the page is still missing.
- [Hand Press Launch](https://tactileui.dev/blocks/hand-press-launch): A coming-soon section revealed by a hand. As it scrolls into view a palm presses into a pin board from behind, fingertips last, and stays; the date and a…
- [Synth Panel](https://tactileui.dev/blocks/synth-panel): A synthesiser’s live front panel. Turn any of seven machined dials and the scope redraws the filtered, driven waveform before a note is heard.
- [Thermostat](https://tactileui.dev/blocks/thermostat): A home-climate section with a glazed ceramic dial. It clicks at every degree, draws the work left as an arc from the room to the set point, and turns…
- [Hi-Fi Volume](https://tactileui.dev/blocks/hifi-volume): An amplifier hero in walnut and brushed brass. The input selector snaps and lights its legend, the attenuator clicks 2 dB a step, and two VU needles swing…
- [Departures Board](https://tactileui.dev/blocks/departures-board): A departures board of flip-dot lines under an enamel fascia. A train starts boarding, another slips five minutes, the first departs and every row below…
- [Scoreboard](https://tactileui.dev/blocks/scoreboard): A match centre round a flip-dot scoreboard. Big amber numbers and a clock counting real seconds; a goal ripples the whole board outward before the number…
- [Venue Marquee](https://tactileui.dev/blocks/venue-marquee): A club’s site on the night, under a brass flip-dot marquee. Tonight’s acts clatter in one at a time, amber discs resolving into a name, over the running…
- [Speaker Launch](https://tactileui.dev/blocks/speaker-launch): A speaker launch where the product works on the page. Press Play and a loop made in the browser lifts a gold bowl of ferrofluid into spikes on every kick.
- [Dark Hero](https://tactileui.dev/blocks/dark-hero): A dark editorial hero over black ferrofluid. The pool follows the cursor from anywhere on the section and rises into spikes under it before the headline…
- [Processing State](https://tactileui.dev/blocks/processing-state): A long job’s progress card, crowned by ferrofluid. The dish breathes with the work, surges as each of four steps completes, and settles to a mirror under…
- [Portfolio Iris](https://tactileui.dev/blocks/portfolio-iris): A photographer’s index where every frame is a shutter. Photographs peek through graphite blades, open whole on hover or focus, and shut where they stand…
- [Camera Launch](https://tactileui.dev/blocks/camera-launch): A launch hero for a fast prime, where the lens is the Iris. Turn its aperture ring and the photograph beside it follows: round bokeh wide open, nine-sided…
- [Shutter Preloader](https://tactileui.dev/blocks/shutter-preloader): A studio landing page that loads behind a shutter. The Iris breathes over the hero while a counter runs on its blades, then opens as the headline rises…
- [Pricing Drums](https://tactileui.dev/blocks/pricing-drums): A price printed on brass drums. Switch the period or the currency and the figure rolls to its new value with the period engraved beneath; a tally shows…
- [Goal Tally](https://tactileui.dev/blocks/goal-tally): A fundraiser’s total on big printed drums. They roll up as each pledge lands, beside a feed of named supporters and a lane-rope rail to the goal.
- [Trip Computer](https://tactileui.dev/blocks/trip-computer): An instrument cluster as a stats band. An odometer with red tenths, a trip meter whose Reset winds the drums back to nought, the range counting down.
- [Specimen Case](https://tactileui.dev/blocks/specimen-case): A bento of glass-topped compartments in a machined case, each holding one real Tactile object running small (the Odometer, the Flip-Dot, the Detent Dial…
- [Reading Progress](https://tactileui.dev/blocks/reading-progress): A long read with a test tube for a progress bar. The tube in the margin fills with ink as the essay is read, and sloshes when the reader skims.
- [Crowdfund Flask](https://tactileui.dev/blocks/crowdfund-flask): A fundraiser where the total is honey in a flask. It pours to the share raised on first view and counts the pounds on its enamel patch; every reward…
- [Upload Vessel](https://tactileui.dev/blocks/upload-vessel): A file-import dialog where the upload fills a beaker. Water pours in with the bytes, fizzes while the files are checked, and stands full with a tick when…
- [Iron Hero](https://tactileui.dev/blocks/iron-hero): A magnetics company’s opening, set like a physics monograph. On the mounted plate below, the name is written in iron filings that swing after the pointer…
- [Field 404](https://tactileui.dev/blocks/field-404): A 404 on a sheet of lost steel filings. As the visitor moves, a field-strength readout climbs and the iron slowly finds 404.
- [Attract CTA](https://tactileui.dev/blocks/attract-cta): A newsletter band whose button is a magnet. As the pointer comes near, brass filings behind it turn, stream in and stand round it in a bristling ring, and…
- [Warm-up](https://tactileui.dev/blocks/warm-up): A page preloader made as a row of valves warming up. The filaments come up one after another, cold wire to amber to a white-hot core, as the page really…
- [Pocket Player](https://tactileui.dev/blocks/pocket-player): A pocket cassette player for your recordings. PLAY latches down; STOP springs it back and, stopped, pops the door open on its spring.
- [Dispatch](https://tactileui.dev/blocks/dispatch): A contact section made as a desk unit. A machined form with a segmented topic selector and a send key that locks while the message goes, and the Receipt…

## Kit templates
- [Dashboard · Hearth](https://tactileui.dev/templates/dashboard): A home-energy screen for a house, not an ops room: the headline says what the house is doing, three big readouts, the ground floor drawn as a plan of…
- [Website · Quiet](https://tactileui.dev/templates/site): An uptime product site that speaks in specimens: “Nothing to report.” at display size, a live check of your own address, a year of its own alerts as…
- [Sign-in · Vault](https://tactileui.dev/templates/vault): A two-step sign-in with nothing else on the page: one screwed plate whose lit display says LOCKED, the sign-in part (Google, GitHub or an email code)…
- [Agent console · Lode](https://tactileui.dev/templates/agents): An operator’s desk for agents in production: the fleet’s status on an LED sign as the masthead, the chosen run’s steps as a full-width LED tape, runs in a…
- [Analytics · Sounding](https://tactileui.dev/templates/analytics): A monthly report laid out like a printed annual report: one 176 px LCD figure, the retention cohorts as the centrepiece heatmap, usage in glass, signups…
- [Docs · Switchyard](https://tactileui.dev/templates/manual): Documentation as a printed service manual, for a feature-flag service: a numbered contents with a search that filters it, a display chapter numeral, code…
- [Shop · Aldous](https://tactileui.dev/templates/shop): A product page for a piece of desk hardware, laid out like a catalogue spread: the “photograph” is the unit itself, built from kit parts and changed by…
- [On-call · Tocsin](https://tactileui.dev/templates/oncall): An on-call console at 3 a.m., for a payments incident: one alarm plate with a pilot lamp, the time open in a lit display and latency on a chart recorder…
- [Billing · Plumb](https://tactileui.dev/templates/billing): A billing statement you can operate, for a nine-seat studio: the amount due in display type, usage on LED bars, the plan changed by a rotary selector with…
- [Blog · The Slackwater Log](https://tactileui.dev/templates/journal): An engineering journal for a fleet of neighbourhood batteries: a nameplate, the newest entry as a cover whose picture is its own reading, a ruled ledger…
- [Portfolio · Maas & Veld](https://tactileui.dev/templates/folio): A design studio’s portfolio as a museum case: eight things the studio made, each built from kit parts, standing on two shelves with printed labels, a…
- [Funnels · Sluice](https://tactileui.dev/templates/funnel): A funnel workbench for an invoicing app, on a Quiet page: the steps are plates in a rack you reorder by hand, and beside them the funnel is measured as it…
- [Company blog · The Gantry Bulletin](https://tactileui.dev/templates/bulletin): A company blog for a CI service set as a broadsheet front page: a masthead with the issue and the date, a lead story with its figure on LED bars, the next…
- [Checkout · Calder](https://tactileui.dev/templates/checkout): A one-page checkout for a cycle parts shop, as a docket and a till: three numbered parts whose lamps light as each is complete, and a till with the total…
- [Release notes · Halyard](https://tactileui.dev/templates/changelog): Release notes for a deploy tool as a register: each version in the margin like a ledger folio, its changes grouped by kind, breaking changes printed with…
- [Budgeting app · Tally](https://tactileui.dev/templates/budget): A personal budgeting app for an everyday screen, on a Quiet page: left to spend this month and a day, a meter for each category that turns amber near its…
- [Chat app · Parley](https://tactileui.dev/templates/chat): An AI chat app for an everyday screen, on a Quiet page: a list of conversations you can search and fold away, a thread of plain readable messages with…
- [Account pages · Porter](https://tactileui.dev/templates/porter): The account pages an ordinary app needs, on a Quiet page: sign in with Google, GitHub or email, create an account with a live password check, forgot and…
- [Shop back office · Counter](https://tactileui.dev/templates/counter): The back office of a small shop, on a Quiet page: orders to pack and how long the oldest has waited, takings today and this week against last week that…
- [Appointment book · Diary](https://tactileui.dev/templates/diary): The appointment book of a small physiotherapy practice, on a Quiet page: a day as a time grid with both practitioners side by side, free times you press…
- [Settings · Bureau](https://tactileui.dev/templates/bureau): The settings area an ordinary app needs once you are signed in, on a Quiet page: profile with a picture, security with a password meter, two-step and…
- [Project board · Board](https://tactileui.dev/templates/board): The project board of a small team, on a Quiet page: five columns of cards you drag between and within, with the mouse, a finger on the handle, or the…
- [Case-study portfolio · Casebook](https://tactileui.dev/templates/casebook): The portfolio of a small independent studio, as a site it could publish tomorrow, on a Quiet page: an index of case studies as plates with a flat drawing…
- [Support inbox · Mailroom](https://tactileui.dev/templates/mailroom): The support inbox of a small software team, on a Quiet page: conversations in a list with the customer, subject, last line, age, status (Open, Waiting or…
- [Writing app · Writer](https://tactileui.dev/templates/writer): A plain writing app with a typewriter for its hero, on a Quiet page. The sheet feeds up out of a rubber platen, and a glass typeball rides its carrier in…

## Kit parts
190 parts, each running on its own page under https://tactileui.dev/parts/.
- [Accordion](https://tactileui.dev/parts/accordion): Printed sections that open in place. Each head ends in a small square key printed +; open, the key latches below the plate and reads −.
- [Collapsible](https://tactileui.dev/parts/collapsible): One section that opens in place. A square key sits at the start of its head with a printed chevron; opening latches the key below the plate and turns the…
- [Chat](https://tactileui.dev/parts/chat): An AI chat as a teleprinter, with restraint: what you type sits in a recess; the answer prints on a perforated slip with an amber lamp at the print head…
- [Tool call](https://tactileui.dev/parts/tool-call): A job ticket for each tool an agent runs: the tool’s name printed as a legend, a lamp on the stub, the state in words and the time on a small LCD.
- [Reasoning](https://tactileui.dev/parts/reasoning): The model’s working, printed on a paper tape that feeds behind a smoked window.
- [Sources](https://tactileui.dev/parts/sources): Where an answer got what it says, as a card index. A citation is a small numbered tab printed after the sentence it supports; resting on it hangs a card…
- [AI approval flow](https://tactileui.dev/parts/ai-approval-flow): A whole approval flow for an agent console, made of the kit’s own parts: the chat, a tool call that waits for a person, the reasoning and the sources…
- [Message](https://tactileui.dev/parts/message): One chat message as a plate, with no chat around it, and made the way the chat is made.
- [Composer](https://tactileui.dev/parts/composer): The prompt box. One deep recess holds the text and the keys sit on its floor: attach at one end; at the other a small LCD that counts tokens, amber near…
- [Suggestion chips](https://tactileui.dev/parts/suggestion-chips): Starter prompts as small plates set out under the composer. Each is a real key (the kit’s cap on its skirt) that is allowed to be a line or two of words…
- [Model picker](https://tactileui.dev/parts/model-picker): Choose a model. A well shows the one in use, and a card of rows opens from it; each row has the model’s name, a line about it, a legend for speed and one…
- [Token meter](https://tactileui.dev/parts/token-meter): How much of a model’s context a conversation has used, as a segmented meter with the limit printed at its end.
- [Message actions](https://tactileui.dev/parts/message-actions): The keys under a reply: Copy, Retry, and a pair to rate it up or down. They are the kit’s own keys in its toolbar, so they are one tab stop with the arrow…
- [Agent run](https://tactileui.dev/parts/agent-run): The panel for one run of an agent, laid out like any calm panel in an app: its name, a status line with a lamp, the state in words and the time it has…
- [Plan steps](https://tactileui.dev/parts/plan-steps): An agent’s plan as checked steps down a groove, with the pipeline’s stations stood on end.
- [Alert](https://tactileui.dev/parts/alert): A message let into the surface, with an annunciator: a small lit legend (Note, Done, Check, Fault) beside the words that say what happened.
- [Banner](https://tactileui.dev/parts/banner): A strip the width of the page, above everything, for one announcement: a lamp, one line, an optional key that goes somewhere and a dismiss key.
- [Callout](https://tactileui.dev/parts/callout): A note let into running text, for docs and articles: the Alert’s idea, made quiet.
- [Avatar](https://tactileui.dev/parts/avatar): A person’s mark, struck like a coin: initials stamped into the field, or a photo set under the rim, with a status lamp mounted at five o’clock.
- [Profile card](https://tactileui.dev/parts/profile-card): A person’s ID plate: their coin set in a countersunk socket, name and role, a rating plate of facts engraved in tabular figures, and one key to act.
- [ID plate](https://tactileui.dev/parts/id-plate): A staff badge for a person. An engraved metal plate with a clip slot cut through its top edge, a photo well and the name, role and serial engraved beneath.
- [Brushed metal](https://tactileui.dev/parts/brushed-metal): A brushed metal surface under a raking light. The grain runs one way, as if drawn with a wire brush, and a soft sheen crosses it in bands.
- [Lamp pool](https://tactileui.dev/parts/lamp-pool): A warm pool of lamplight on a desk. The desk is the finish’s own, with a fine grain, and a lamp over one corner throws an oval of light that fades to the…
- [Grille moiré](https://tactileui.dev/parts/grille-moire): Two speaker grilles laid one over the other. Each is a plate drilled with a lattice of round holes; one turns a few degrees and back, and where its holes…
- [Louvre light](https://tactileui.dev/parts/louvre-light): A wall lit from the side, with the shadows of slats across it, as when the sun comes through blinds.
- [Tag](https://tactileui.dev/parts/tag): A small printed plate: a type, a count, a badge. Solid for the one tag that must stand out.
- [Status](https://tactileui.dev/parts/status): A lamp with words: the state line in tables, panel heads and lists. The words carry the meaning; the lamp is the glance.
- [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by.
- [Tag input](https://tactileui.dev/parts/tag-input): A text input that turns what you type into printed tags. Enter or a comma sets one down in the well; each tag is a key that takes itself away, and every…
- [Chip group](https://tactileui.dev/parts/chip-group): Small plates you press on and off, laid in a tray that wraps: the filters over a table, the topics on a form, the sizes on a product.
- [Sync status](https://tactileui.dev/parts/sync-status): A small legend that says whether your work is safe: Saving, Saved or Offline, with a lamp that matches (amber and blinking while it saves, green when it…
- [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
- [Icon key](https://tactileui.dev/parts/icon-key): A key with an icon and no words, square or round: transport, power, the small tools. Its aria-label names it; a tip shows the name.
- [Commit key](https://tactileui.dev/parts/commit): A key for work that takes time and must not run twice. It latches below the plate while the work runs, an LED matrix in its face scanning amber, and says…
- [Kbd](https://tactileui.dev/parts/kbd): The key to press, drawn as the key: a small cap on a skirt with a dish worked into its top.
- [Button group](https://tactileui.dev/parts/button-group): Keys that belong together set side by side in one slot, like the transport keys of a deck.
- [Toggle key](https://tactileui.dev/parts/toggle-key): One key that latches below the plate and stays there. It is the kit’s own key with one state to keep, down or up, so it is the way to say mute, pin, bold…
- [Copy key](https://tactileui.dev/parts/copy-key): A key that copies a value and says so. Its lamp sits dark in the cap; when the text is on the clipboard the lamp lights, winks once, and the legend says…
- [Toolbar](https://tactileui.dev/parts/toolbar): A rack of keys in one slot cut into the plate, under one tab stop. Keys, toggle keys, a copy key and a menu key sit side by side, parted into clusters by…
- [Split button](https://tactileui.dev/parts/split-button): An action and the menu of its other ways, as two keys in one outline: Save, and a narrow key beside it for Save as draft or Save and close.
- [Calendar](https://tactileui.dev/parts/calendar): A month on a plate. The month and year sit on two drums behind a window and roll when you page; the chosen day is a latched cap, a range is a groove cut…
- [Date picker](https://tactileui.dev/parts/date-picker): A date field with its calendar card in a slot underneath: type a date in any common form for your locale, or press the key and the card slides out.
- [Date field](https://tactileui.dev/parts/date-field): A date typed in three segments, day, month and year, in the field’s own well.
- [Time field](https://tactileui.dev/parts/time-field): A time of day in the field’s well: hours, minutes and, on a 12 hour clock, AM or PM, each a segment you can type into or step with the arrow keys.
- [Panel](https://tactileui.dev/parts/panel): A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.
- [Tray](https://tactileui.dev/parts/tray): A recess cut into the plate that holds other parts: keys, a selector, an empty state waiting for its first thing.
- [Split panes](https://tactileui.dev/parts/split): Two panes and a groove cut across the plate between them, with a knurled grip set in the groove.
- [Grille and cloth](https://tactileui.dev/parts/grille): Perforated metal and speaker cloth, for the place where a real device would breathe or sound.
- [Hover card](https://tactileui.dev/parts/hover-card): A preview that hangs from a link when the pointer rests on it or the keyboard reaches it.
- [Choice card](https://tactileui.dev/parts/choice-card): A radio or a check set as a large plate carrying a name, a sentence and a price.
- [Separator](https://tactileui.dev/parts/separator): An engraved rule: a fine groove cut into the plate, a hairline with a catch of light on its lower wall, or on its right wall when it stands upright.
- [Divider with label](https://tactileui.dev/parts/divider-label): A rule with a word set into it. The same engraved groove as the separator runs out to both sides of a printed word, broken where the word sits: “or”…
- [Carousel](https://tactileui.dev/parts/carousel): Slides seen one at a time through a viewer’s gate: transport keys either side of a frame counter on an LCD, lamp keys to jump, swipe on touch.
- [Film strip](https://tactileui.dev/parts/film-strip): A carousel as a strip of film in a machined viewer. The frames run behind a gate lit from behind, with sprocket holes along both edges, and the frames…
- [LED bar chart](https://tactileui.dev/parts/ledbars): A bar chart built like a studio meter bridge: columns of LED segments behind a smoked window, green then amber then red, with a peak segment that lingers…
- [Needle gauge](https://tactileui.dev/parts/gauge): A moving-coil panel meter: a printed scale under glass, a thin needle that swings past the mark and settles, a lamp for the bands and a small LCD for the…
- [Ring meter](https://tactileui.dev/parts/ring): The kit’s donut chart as an instrument: a ring of lamps behind dark glass in a spun bezel, lit clockwise from twelve like a studio clock’s seconds, with…
- [Chart recorder](https://tactileui.dev/parts/recorder): A strip-chart recorder: gridded paper advancing under a pen that rides a rail, drawing the live value as the paper moves and printing the time in the…
- [Lamp heatmap](https://tactileui.dev/parts/heatmap): A heatmap as a matrix of small panel lamps set into the plate: each lamp’s brightness is the value, off to full in four steps, with a printed legend.
- [LED matrix](https://tactileui.dev/parts/matrix): A dot-matrix display of round LEDs behind smoked acrylic, each with its own bloom and a short warm-up and fade.
- [Plot](https://tactileui.dev/parts/plot): Line charts drawn as light on glass, or as ink on a panel: gridlines faint, two traces at most, a red line for now.
- [Glass](https://tactileui.dev/parts/glass): Dark display glass for plots and live readouts, whatever the finish around it. Everything printed inside it is lit.
- [Sparkline](https://tactileui.dev/parts/sparkline): A word-sized line for the margin of a table or beside a readout. It is an SVG that takes the size of the type around it and the ink of the place it sits…
- [Bars](https://tactileui.dev/parts/bars): Printed bars on the panel, one value each. The bars are ink laid flat on the plate, never a colour and never glass; the axis is engraved into it, a groove…
- [Uptime strip](https://tactileui.dev/parts/uptime-strip): A row of ticks, one for each day or hour, on a strip of dark glass, each tick a lamp in its own slot, with the percentage on an LCD above.
- [Stacked bars](https://tactileui.dev/parts/stacked-bars): Columns split by series on a display well. Stacked mode reads totals from zero, with each total printed above its column; 100 percent mode reads the mix…
- [Scatter](https://tactileui.dev/parts/scatter): Points on two labelled scales, with a crosshair that reads the nearest point wherever the pointer is. Neither axis is forced to start at zero.
- [Radar](https://tactileui.dev/parts/radar): One value on each of several spokes, joined into a shape on straight-sided rings of one shared scale that starts at zero in the middle.
- [Treemap](https://tactileui.dev/parts/treemap): Shares of a whole as nested rectangles, each sized by its value, one level at a time.
- [Funnel](https://tactileui.dev/parts/funnel): The stages of a process in order, each as wide as how many got that far, centred and to scale, with the drop-off written between each pair: the number…
- [Waterfall](https://tactileui.dev/parts/waterfall): Gains and losses stepping from a start to a total. Each change floats from where the running figure was to where it lands, and a total stands on the zero…
- [Candlestick](https://tactileui.dev/parts/candlestick): Open, high, low and close for each session, with the volume traded under it, for market data.
- [Check](https://tactileui.dev/parts/check): An option in a form: a small square key that presses below the plate when chosen, with a tick printed on it.
- [Checklist](https://tactileui.dev/parts/checklist): The kit’s check keys in nested groups. A group’s key is the sum of its items: all done, none, or some, and some is a key sunk halfway with a bar across it.
- [Code block](https://tactileui.dev/parts/code-block): Code on display glass. A bar along the top holds the file name on a tab, with a lit edge under it, and the copy key at the far end.
- [Install snippet](https://tactileui.dev/parts/install-snippet): One command, four package managers. A row of selector keys (npm, pnpm, yarn and bun) sits over a line of display glass with the command on it and the copy…
- [Terminal](https://tactileui.dev/parts/terminal): A command prompt on dark glass. It is a display, not a shell: it prints what the page gives it, line by line, and keeps a scrollback to read back through.
- [JSON viewer](https://tactileui.dev/parts/json-viewer): A tree of keys and values on display glass. A bar along the top names it, prints the path of the row you are on ($.lines[0].sku) and carries the copy key…
- [Diff view](https://tactileui.dev/parts/diff-view): Two versions of a file on display glass, side by side or stacked. A bar along the top names the file, shows a legend (a lit green lamp and a plus for the…
- [Log stream](https://tactileui.dev/parts/log-stream): A live log printed on a strip of paper tape. Each line is a time, a printed legend for its level (debug, info, warn, error) and its words, set between the…
- [Key-value editor](https://tactileui.dev/parts/kv-editor): Rows of a name and a value, each its own recess, with a remove key at the end of the row and an add key under the last: for environment variables, request…
- [Secret field](https://tactileui.dev/parts/secret-field): A masked value for an API key or a token, in the field’s well, with a reveal key and the kit’s copy key on its floor.
- [Dialog](https://tactileui.dev/parts/dialog): A decision that must be made now: a native dialog with a question, one sentence of consequence, a way back and the act.
- [Command palette](https://tactileui.dev/parts/command): Every action and page behind one key: a modal plate whose entry line is a lit display, with the results printed below and the chosen one pressed in.
- [Drawer](https://tactileui.dev/parts/drawer): A panel that slides in from any edge of the window, on the native dialog.
- [Alert dialog](https://tactileui.dev/parts/alert-dialog): The dialog plate for a question that must be answered before an act that matters.
- [Bottom sheet](https://tactileui.dev/parts/bottom-sheet): A panel that rises from the bottom edge of the window, on the native dialog, for a short task that should not leave the page: add an expense, set some…
- [Menu](https://tactileui.dev/parts/menu): A card of actions and options that slides out from under its key. The key stays down while the card is out; an option that is on lights its lamp.
- [Context menu](https://tactileui.dev/parts/context-menu): The menu’s own card, opened where you pointed: by right-click, by a long press on a touch screen, or from the keyboard with Shift F10 or the Menu key.
- [Menubar](https://tactileui.dev/parts/menubar): The row of menu names along the top of a window: File, Edit, View, Help.
- [Empty state](https://tactileui.dev/parts/empty-state): What a view shows before it has anything: an empty tray with the outline of what goes in it printed on its floor, one sentence and one key.
- [Empty tray](https://tactileui.dev/parts/empty-tray): An empty state drawn as an empty machined tray. The shape of what goes in it, a file, a key or a card, is cut into its floor the way a case is cut for the…
- [Error state](https://tactileui.dev/parts/error-state): What a view shows when loading failed. It is the empty state’s sibling: the same tray, with the outline of what should be there printed on its floor, but…
- [Result](https://tactileui.dev/parts/result): The end of a task as one plate: a lens sunk into it with one lamp lit, a verdict, one sentence and what to do next.
- [File tree](https://tactileui.dev/parts/file-tree): Folders and files as a real tree, printed like a wiring diagram: traces with an elbow into every item, chevrons that turn, and the chosen file set in a…
- [Drawer index](https://tactileui.dev/parts/drawer-index): A file tree as a card-index cabinet. Folders are drawers, each with a label holder and a cup pull; open one and it slides out with its files standing in…
- [Column browser](https://tactileui.dev/parts/column-browser): Folders as columns, side by side, the way a file manager’s column view browses them.
- [Drop zone](https://tactileui.dev/parts/drop-zone): An in-tray for files. A machined lip stands round a ribbed floor; the floor rises a little when a file is dragged over it, and a lamp on the lip lights.
- [File field](https://tactileui.dev/parts/file-field): The browser’s own file input, dressed as a key and a printed file name in a well.
- [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
- [Form validation](https://tactileui.dev/parts/validation): A form that says what is wrong, on the browser’s own checks. Press submit with something missing and each field in error gets a line under it with a red…
- [Combo](https://tactileui.dev/parts/combo): One field with its one action in a shared well: subscribe, search, add.
- [Stepper](https://tactileui.dev/parts/stepper): A small integer with − and + keys either side, in one well.
- [Sign-in](https://tactileui.dev/parts/sign-in): Sign in and sign up on one plate: Google and GitHub keys with their marks stamped in monochrome, an email route underneath, a two-way selector that…
- [Scrub field](https://tactileui.dev/parts/scrub): A number you can type or drag, the way a pro tool’s value field works: an engraved ruler under the numerals slides beneath a fixed index as the value…
- [Tumbler lock](https://tactileui.dev/parts/tumbler): A PIN or one-time code dialled into a combination lock: number wheels behind a slot in the plate, turning on detents.
- [Log pad](https://tactileui.dev/parts/log-pad): A writing pad that is still a real textarea. A sheet of ruled paper is set into a machined frame, and the rules move with the words.
- [Cloth selector](https://tactileui.dev/parts/cloth-selector): A mode switch made of cloth. A row of tiles covered in stretched fabric stands in a machined tray, each with an icon and a word pressed into it.
- [Password field](https://tactileui.dev/parts/password-field): The field’s well with a louvred shutter drawn across its characters and a peek key at the end.
- [Fieldset](https://tactileui.dev/parts/fieldset): Related fields under one engraved legend, with one hint and one error line for the group.
- [Settings row](https://tactileui.dev/parts/settings-row): What a settings page is made of: a label, one sentence under it and the control at the end, ruled like the list with a hairline between rows and nothing…
- [Duration field](https://tactileui.dev/parts/duration-field): A length of time, such as 1 h 30 m, entered as number segments in one well: hours and minutes, and days or seconds if the field needs them.
- [Colour picker](https://tactileui.dev/parts/color-picker): A form field for choosing a colour. A plane sets saturation across and brightness up, a strip sets hue and, if you ask for it, a second strip sets opacity.
- [Phone field](https://tactileui.dev/parts/phone-field): A country key and a number in one well, for a contact number. The key sits on the well’s floor at the left and is printed with the country’s ISO code and…
- [Money field](https://tactileui.dev/parts/money-field): An amount of money in the field’s well, with its currency printed on the floor at the left (the symbol and the code, or a native select when several are…
- [Rich editor](https://tactileui.dev/parts/rich-editor): A plain rich-text field with no dependency. A toolbar of keys sits over an editing surface in the field's well: two heading levels, bold, italic, code…
- [Icons](https://tactileui.dev/parts/icons): The kit’s glyphs as one set: drawn on a 16 grid with a 1.6 line, round ends, in currentColor, so an icon prints in whatever ink it sits in, in either…
- [Icon picker](https://tactileui.dev/parts/icon-picker): A key that shows the icon it holds, with a clear key beside it, and that opens a card of the kit’s own icons to change it.
- [Combobox](https://tactileui.dev/parts/combobox): A field that filters a long list as you type. It starts as a plain select, so it posts with the form and works without a script; then the options card…
- [Input group](https://tactileui.dev/parts/input-group): One recess that holds a field and everything that belongs to it. Words that are part of the value but are not typed, such as https:// or a currency, are…
- [Search field](https://tactileui.dev/parts/search-field): A recess for a question. A glass is printed on its floor at the start, the words run on, an optional count is printed behind an engraved line, and a clear…
- [Inline edit](https://tactileui.dev/parts/inline-edit): A printed label that becomes a field when you press it. At rest it is plain printing, so a page of them reads as text; under the pointer an outline and a…
- [Multi-select](https://tactileui.dev/parts/multi-select): A combobox that takes several. Each choice is set down in the well as a tag, the card of options stays out while you choose the next, and the foot of the…
- [Knob](https://tactileui.dev/parts/knob): A rotary control for continuous or stepped values where space is square. Its knurl and pointer turn; its light does not.
- [Setup dial](https://tactileui.dev/parts/setup-dial): Onboarding as the program dial of an appliance on its first run. Each step is a detent on a rotary dial, its number and name engraved round it, and the…
- [List](https://tactileui.dev/parts/list): Rows in a rack: a mark, a title, a second line and a fact or a key at the end.
- [Sortable list](https://tactileui.dev/parts/sortable): Plates in a rack that you reorder. Each has a knurled handle: drag it and the plate lifts off the rack on a shadow while the others slide aside, or pick…
- [Listbox](https://tactileui.dev/parts/listbox): An always-open list let into the plate as a recess. The rows are printed on its floor and a chosen row is a cap let down into it with its lamp lit.
- [Virtual list](https://tactileui.dev/parts/virtual-list): A list for thousands of rows that stays quick because it only ever draws the ones you can see, and a few either side.
- [Lightbox](https://tactileui.dev/parts/lightbox): A grid of thumbnails that opens one picture large. Each thumbnail is a plate with the picture set in it, and a real link to the full picture, so the grid…
- [Aspect ratio](https://tactileui.dev/parts/aspect-ratio): A frame that holds one shape, whatever is put in it. Say the shape (16:9, 4:3, 1:1, 3:2, 21:9, 3:4) and the frame takes its height from its width; a…
- [Media bar](https://tactileui.dev/parts/media-bar): The control bar for an audio or video element. It plays nothing itself: it drives a real media element, so that element’s own events, buffering and errors…
- [Skeleton](https://tactileui.dev/parts/skeleton): The shape of a page before its data arrives, drawn as the unprinted plate: blank engraved bars where the words will print. Nothing on it moves.
- [Spinner](https://tactileui.dev/parts/spinner): A ring of eight lamps lit in turn, a chase round a dial: each lamp is a dim cap with its light laid over it, and the light fades as the chase passes on…
- [Loading overlay](https://tactileui.dev/parts/loading-overlay): A pane of smoked glass laid over a panel while it works. The panel underneath keeps every pixel of its place, dimmed and a little out of focus, with one…
- [Bar](https://tactileui.dev/parts/bar): The top of a page: a wordmark with a lamp, printed links, and one contrast key at most.
- [Side rail](https://tactileui.dev/parts/side): App navigation in a panel: the current page is a recess with its lamp lit, links grouped under printed labels.
- [Icon rail](https://tactileui.dev/parts/icon-rail): A narrow sidebar of icon keys, using the kit’s own icons. A lamp beside the current one is lit, a label shows as a tooltip on hover and on focus, and a…
- [Tabs](https://tactileui.dev/parts/tabs): Views of the same thing, switched in place: keys in a tray, the chosen view a raised cap.
- [Pagination](https://tactileui.dev/parts/pagination): Pages for tables and lists: numbered keys in a tray with the current page latched down, seven slots so the row never changes width.
- [Page wheel](https://tactileui.dev/parts/page-wheel): Pagination as a thumbwheel. A knurled wheel stands in a recess with a window in its face, and the page number rolls past it on a paper tape.
- [Link](https://tactileui.dev/parts/link): Printed type that goes somewhere. The words stay in ink and the rule under them is engraved into the plate: cut darker when you hover, deeper when you…
- [Breadcrumb](https://tactileui.dev/parts/breadcrumb): The trail of levels above this page, printed across the top like the path an instrument shows over its menu screen: SETTINGS › BILLING › INVOICES.
- [Navigation menu](https://tactileui.dev/parts/navigation-menu): The links at the top of a site. A row that is flat on the page: plain links, and keys that open a panel of links beneath the bar.
- [Notifications](https://tactileui.dev/parts/notifications): A key with a counter window in its cap, and a card of messages hung from it.
- [Ticket toast](https://tactileui.dev/parts/ticket-toast): A toast issued like a numbered ticket from a dispenser. A short slip of thermal paper with a number, a line of words and, if it needs one, an action key…
- [Readout](https://tactileui.dev/parts/readout): A printed label over a value: key figures, with the unit small and the change in words.
- [LCD](https://tactileui.dev/parts/lcd): A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.
- [VFD](https://tactileui.dev/parts/vfd): A vacuum-fluorescent display: cyan-white light on near-black glass, with a glow and a ghost. Frequencies, levels, status screens.
- [Stat tile](https://tactileui.dev/parts/stat-tile): One headline number with its label, how it moved against another period and, if you give it readings, the small line of the run behind it.
- [Onboarding](https://tactileui.dev/parts/onboarding): Setting something up: stations along a groove (done ones with their lamp lit, the current one a raised cap) and a checklist of check keys with a progress…
- [Tour](https://tactileui.dev/parts/tour): A product tour. The page is dimmed, one element is left as bright as it was, and a small card sits beside it with a title, a few words, “2 of 4”, Back…
- [Popover](https://tactileui.dev/parts/popover): A card hung from the key that opened it, with a printed leader running back to the key. Not modal: the page stays live around it.
- [Popconfirm](https://tactileui.dev/parts/popconfirm): A small card that asks before a click does its work, hung from the key that opened it.
- [Progress](https://tactileui.dev/parts/progress): Progress through a task: ink filling a groove, never a coloured bar.
- [Ladder](https://tactileui.dev/parts/ladder): An LED ladder for levels and load: green, then amber, then red, the way a recording level has always been read.
- [Meter](https://tactileui.dev/parts/meter): A value inside a known range, read off an LED strip. The strip is a native meter element, so low, high and optimum are the browser’s own: the whole lit…
- [Battery](https://tactileui.dev/parts/battery): A cell outline with a terminal at one end, filled with lamp segments set into a recess, lit from the empty end.
- [Pipeline](https://tactileui.dev/parts/pipeline): The stages of a build and a deploy as stations along a groove, like the program track of a machine.
- [Radio](https://tactileui.dev/parts/radio): One choice from a short list in a form: small round keys in a fieldset, the chosen one pressed with a printed dot.
- [Selector](https://tactileui.dev/parts/selector): One mode of two to five: latching keys in a tray, one down at a time, each with a lamp that lights when chosen.
- [Segmented control](https://tactileui.dev/parts/segmented): A row of keys in a tray with one pressed down: pick a view, a range or a mode and it applies at once.
- [Rating](https://tactileui.dev/parts/rating): A row of indicator lamps, each in its own round recess, lit up to your score.
- [Receipt](https://tactileui.dev/parts/receipt): The record of a payment, printed on a slip of thermal paper: who was paid, the receipt number, when and with what, the lines and the sums, any refunds…
- [Scroll area](https://tactileui.dev/parts/scroll-area): A region that scrolls, with its scrollbar made as a machined rail: a groove cut into the plate and a thumb like a fader cap riding in it.
- [Loupe scroll](https://tactileui.dev/parts/loupe-scroll): A scroll area whose scrollbar is a map of what it holds. A narrow machined rail runs beside the text with every line drawn small on its floor, headings…
- [Page loupe](https://tactileui.dev/parts/page-loupe): A map of the whole page, for the corner beside it. A machined groove holds the page drawn small, a glass loupe rides over the part in the window, and the…
- [Select](https://tactileui.dev/parts/select): A choice from a longer list, in the same recess as a field, with a printed chevron. The browser’s own menu opens it.
- [Tree select](https://tactileui.dev/parts/tree-select): A select whose list is a tree, for a folder, a category or a team that sits inside others.
- [Fader](https://tactileui.dev/parts/fader): A continuous value along a line: a native range whose cap rides in a slot cut into the plate, with a printed scale.
- [Range](https://tactileui.dev/parts/range): Two fader caps in one slot, for a span between a low value and a high one: a price band, quiet hours, a frequency band.
- [Spec list](https://tactileui.dev/parts/spec): Key and value facts, printed like the plate on the back of a device.
- [Order summary](https://tactileui.dev/parts/order-summary): The priced lines of an order, printed like a till slip: a name, a unit price, a quantity and a line total on each, then a ruled block of totals in the…
- [Table](https://tactileui.dev/parts/table): Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.
- [Data table](https://tactileui.dev/parts/data-table): The kit’s table with the tools a working one needs: headers that sort, a filter well, a check key on every row with one in the header that selects them…
- [Data grid](https://tactileui.dev/parts/data-grid): A table you edit in place, the way a spreadsheet is edited. One cell is in focus at a time and the arrow keys move between them; Enter or F2 opens a cell…
- [Table toolbar](https://tactileui.dev/parts/table-toolbar): The strip over a table: a search well, filter keys that latch, a menu to choose which columns show, and the count of rows in view (“8 of 8 bookings”).
- [Bulk bar](https://tactileui.dev/parts/bulk-bar): The bar that slides up when rows are checked. It says how many are chosen, offers the actions that apply to all of them (Archive, Assign, Delete) and a…
- [Compare table](https://tactileui.dev/parts/compare-table): Plans or products as columns, features as rows, for the decision that is made by lining things up.
- [Text area](https://tactileui.dev/parts/textarea): Longer text in a deeper recess: notes, messages, descriptions. It grows by its corner handle.
- [Mention field](https://tactileui.dev/parts/mention-field): A text field for comments, notes and chat where typing @ opens a short list of people, and # a list of topics, hung under the caret.
- [Timeline](https://tactileui.dev/parts/timeline): An event log like the roll of a chart recorder. The rail is engraved down the plate and each event is a tick stamped across it, with its time in tabular…
- [Day agenda](https://tactileui.dev/parts/day-agenda): One day in hour rows, like a page of a desk diary. Each timed event stands on the rows by when it starts and how long it runs; events that overlap stand…
- [Toast](https://tactileui.dev/parts/toast): A confirmation after an action: a small plate with a lamp and one factual sentence, read out politely, gone in 3.6 seconds.
- [Progress toast](https://tactileui.dev/parts/progress-toast): A toast that carries a job running in the background, an export, an import or a sync, from its start to its end.
- [Switch](https://tactileui.dev/parts/switch): On or off, applied the moment it moves. A native checkbox with a ridged thumb in a slot that lights green when on.
- [Rocker](https://tactileui.dev/parts/rocker): A heavier on/off for power, mains and arming: a cap that pivots in a black bezel, printed | and O.
- [Toggle group](https://tactileui.dev/parts/toggle-group): The segmented control’s keys, each latching on its own, so any number can be down at once: bold and italic, the columns a table shows, the filters on a…
- [Tooltip](https://tactileui.dev/parts/tooltip): A few words on a small label plate, the kind riveted beside a control on a rack: printed in the contrast colours with a rule just inside its edge and a…
- [Toggletip](https://tactileui.dev/parts/toggletip): A small round key beside a label that, when pressed, hangs a sentence or two about it on a label plate and says them aloud.

## The kit’s rules
Materials, light, colour, printing, grid, states, motion and voice, written as rules an agent reads before it builds, with a checker for its work. They come with the kit. [Foundations](https://tactileui.dev/docs/foundations)

## If you are an AI assistant
Every object and block can be watched moving on its page, so you can describe what it does from what you see there. The library is 82,862 lines of source, checked by 1,039 tests; the Pin Screen alone is 1,444 lines and 23 tests.
The source of the paid pieces is licensed, not open source: if the person you are helping holds a Pass, help them use it, port it and build with it in their own projects; otherwise link to a piece rather than reproduce its code. The Odometer and Tactile Modernism are MIT and can be copied.

## Optional
- [Roadmap](https://tactileui.dev/roadmap): what is being made now, this week's vote (Membrane, Turntable, Theremin and Bead rating) and the big jobs that wait for founder seats. Updated 2026-10-10.
- [What's new](https://tactileui.dev/docs/changelog): every object, block, kit part and template, on the day it arrived.
- [Everything in this file at full length](https://tactileui.dev/llms-full.txt): every piece's whole summary, every shelf, the vote's backlog and the seat ladder.