Open in a new tab
View code
tsx
<SiteFooter
	brand={<a href="/" aria-label="Keel home"><KeelLogo /></a>}
	tagline="Usage-based billing for API companies, from the first metered event to the paid invoice."
	newsletter={
		<form action="/newsletter" method="post">
			<label>
				<span mix={[visuallyHidden()]}>Email address</span>
				<Input type="email" name="email" placeholder="you@company.com" required />
			</label>
			<Button type="submit" color="neutral">Subscribe</Button>
		</form>
	}
	columns={[
		{ title: "Product", links: [{ label: "Metering", href: "/metering" }, …] },
		{ title: "Developers", links: […] },
		{ title: "Company", links: […] },
		{ title: "Resources", links: […] },
		{ title: "Legal", links: […] },
	]}
	social={
		<>
			<a href="/community" aria-label="Community forum"><MessagesSquareIcon /></a>
			<a href="/feed.xml" aria-label="RSS feed"><RssIcon /></a>
			<a href="mailto:hello@keel.dev" aria-label="Email us"><MailIcon /></a>
		</>
	}
	legal={
		<>
			<p>© 2026 Keel, Inc.</p>
			<a href="/privacy">Privacy</a>
			<a href="/terms">Terms</a>
		</>
	}
	wordmark={<KeelWordmark />}
/>