Build Components

Keel

Site footer. Brand, links, social profiles and the legal line. Plain HTML, no JavaScript.

Component
Site footer
Pattern
Landmark contentinfo
Outputs
React + Tailwind, HTML/CSS/JS
Status
In stock, tested

Test bench

Runs the exported code, not a mock-up.

Output

Keel · React + TailwindFull width

Keyboard map
KeysWhat happens
TaborShift + TabMove through the links in the order they are written.
EnterFollow the focused link.

Take it home

React + Tailwind CSS v4: install with one command, or copy the file. Your options are already in it.

npx shadcn@latest add "/r/footer.json"

Run it in your project root. It writes components/footer.tsx with the options you set here. Needs Tailwind CSS v4 and a project set up for the shadcn CLI (npx shadcn@latest init).