About
A dark four-column footer: every link group is its own navigation with a label, and the bottom row carries a live service-status line. From VibeUI — 1,600+ components with agent-ready install briefs at vibeui.club.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Four Column Footer to your project and fits it to your theme.
Code
How Four Column Footer is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Footer002 } from "@/components/ui/vibeui-footer-002"
export default function Demo() {
return <Footer002 {...{"brand":"Contour","tagline":"A library of sections for sites people assemble by hand. It copies into the project as a single file and pulls no dependencies.","columns":[{"title":"Product","links":[{"label":"Features","href":"#features"},{"label":"Pricing","href":"#pricing"},{"label":"Integrations","href":"#integrations"},{"label":"What's new","href":"#changelog"}]},{"title":"Solutions","links":[{"label":"For marketing","href":"#marketing"},{"label":"For product","href":"#product"},{"label":"For agencies","href":"#agency"},{"label":"For education","href":"#education"}]},{"title":"Resources","links":[{"label":"Documentation","href":"#docs"},{"label":"Examples","href":"#examples"},{"label":"Blog","href":"#blog"},{"label":"Webinars","href":"#webinars"}]},{"title":"Company","links":[{"label":"About","href":"#about"},{"label":"Jobs","href":"#jobs"},{"label":"Partners","href":"#partners"},{"label":"Contact","href":"#contacts"}]}],"legal":"© 2026 Contour Ltd. All rights reserved.","status":"All systems operational"}} />
}
More in Navigation
View all
Sidebar
229
Tabs
60
Newsletter Signup Footer
15
Progress Bar Stepper
36
Footer 2
200
Navbar with Theme Toggle
43
Sortable Sidebar Navigation
51
Pagination
43
