Machined Footer

Footers 4

About

A site footer made as the bottom panel of a device: screwed plate, machined vents, columns of printed links, a status window with a real lamp, an email field and a build number stamped in. It takes its colours from your shadcn theme and follows .dark; aluminium and graphite finishes are there if you want metal. MIT. More like it: tactileui.dev

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Machined Footer to your project and fits it to your theme.

Code

How Machined Footer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useState } from "react";
import { MachinedFooter, type FooterColumn } from "@/components/ui/machined-footer";

const columns: FooterColumn[] = [
  { title: "Product", links: [{ label: "Runtime", href: "#runtime" }, { label: "Deploys", href: "#deploys" }, { label: "Traces", href: "#traces" }, { label: "Pricing", href: "#pricing" }, { label: "Changelog", href: "#changelog" }] },
  { title: "Docs", links: [{ label: "Quickstart", href: "#quickstart" }, { label: "API reference", href: "#api" }, { label: "CLI", href: "#cli" }, { label: "SDKs", href: "#sdks" }, { label: "Self-hosting", href: "#self-hosting" }] },
  { title: "Company", links: [{ label: "About", href: "#about" }, { label: "Customers", href: "#customers" }, { label: "Careers", href: "#careers" }, { label: "Security", href: "#security" }, { label: "Contact", href: "#contact" }] },
  { title: "Legal", links: [{ label: "Terms", href: "#terms" }, { label: "Privacy", href: "#privacy" }, { label: "DPA", href: "#dpa" }, { label: "Cookies", href: "#cookies" }] },
];

export default function MachinedFooterDemo() {
  const [last, setLast] = useState<string | null>(null);
  return (
    <div className="flex min-h-screen w-full flex-col justify-end bg-background text-foreground">
      <div className="grid flex-1 place-items-center p-8 text-[15px] text-muted-foreground">
        {last ? `Subscribed: ${last}` : "Hover a link, or add an address to the field below."}
      </div>
      <MachinedFooter
        brand={{ name: "Lode", href: "#top" }}
        tagline="The runtime for agents that touch production."
        columns={columns}
        status={{ state: "normal", label: "All systems normal", detail: "99.99% uptime over 90 days", href: "#status" }}
        newsletterLabel="Changelog, every other Thursday"
        rev="2026.09"
        build="4f2a91c"
        legal="© 2026 Lode Systems Ltd. Registered in England and Wales."
        onSubscribe={setLast}
      />
    </div>
  );
}