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 for the whole page, the build number stamped in.
What it is for
The footer of a product that runs something and has to show its state: an agent runtime, a devtools or infrastructure service, an IoT platform.
npx shadcn add https://tactileui.dev/r/machined-footer.json Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Native radio slide selector, Page finish switch, Remembered finish, Status lamp with words, Live status region, Native email validation with hints, Subscribe event, Debossed stamp, Container query layout, Finish following
- Stack
- Vanilla ES modules, CSS
- Needs
- Nothing, no dependencies
- States
- 11 documented
- Version
- 0.1.0
- Licence
- Free, source open to everyone
States
- At restThe plate, its vents and screws; four columns; the green lamp and “All systems normal”; nothing runs.
- DegradedThe lamp turns amber and the window says “Degraded: slower cold starts in eu-west · Investigating since 14:02 UTC”; the line is role=status, so the change is announced.
- OutageA red lamp and “Partial outage: run scheduling · Next update in 15 minutes”. No blinking.
- Finish switchedThe thumb slides 180 ms; <html data-finish> changes and localStorage['tui-finish'] remembers it; every Tactile section on the page re-dresses.
- Finish changed elsewhereThe selector moves to match, and an auto footer re-dresses.
- Field: wrong addressThe whole well gets a red lip, aria-invalid is set, focus returns to the field and the hint says how to fix it (“Add the part after the @, e.g. you@company.example.”).
- Field: subscribedmf-subscribe fires with the address; with an action the form posts, otherwise the hint confirms “Added. The next changelog reaches … on Thursday.”
- Key pressedSubscribe drops its 2px skirt below the plate.
- TabletBrand and field above; two columns of links.
- PhoneOne column of link groups, each group's links flowing in a line with 32px targets; the status window and the base stack.
- Reduced motionThe thumb and the key move without transitions; everything else is unchanged.
Notes
It carries what every footer carries (links, legal, a newsletter) and what these products want there: the live status on a lamp with words, set from a status feed with setStatus(), the running build, and the page's finish switch, remembered like the Tactile UI Kit's own key. Free with an account: CSS and a little DOM, no dependency, both finishes.
Original composition. The product (Lode), its links, statuses and build are invented. The plate, vents and selector are CSS drawn here, in the kit's tokens; no image. Face: Instrument Sans (SIL OFL 1.1), the kit's own.
Using it
Copy the machined-footer folder from its package next to your page, link the stylesheets and mount it on an element. The Code tab above writes the example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).
Options
| Option | Type | Default | What it does |
|---|---|---|---|
| brand | text | 'Lode' | Brand |
| tagline | text | 'The runtime for agents that touch production.' | Tagline |
| status | normal · degraded · outage | 'normal' | Green: normal. Amber: degraded. Red: outage. Call setStatus() from your status feed. |
| newsletter | boolean | true | Changelog field |
| action | text | '' | Empty: the field fires an mf-subscribe event instead. Only http(s) or a path. |
| finishSwitch | boolean | true | Aluminium / Graphite for the whole page: writes data-finish on <html> and remembers it. |
| rev | text | '2026.09' | Revision |
| build | text | '4f2a91c' | Build |
| legal | text | '© 2026 Lode Systems Ltd. Registered in England and Wales.' | Legal line |
| finish | auto · aluminium · graphite | 'auto' | Auto follows the page’s data-finish, then the visitor’s system. |
Methods
mount(element, options)- Builds the block inside the element and returns its handle.
handle.setStatus(s)- Set the lamp and its words from outside: 'normal' | 'degraded' | 'outage'.
handle.update(next = {})- Change options in place.
handle.destroy()- Stops it and cleans up after it.
Events it fires, which bubble from the element: mf-subscribe.