A large-type footer: four link columns and small print above an oversized brand wordmark that runs the full width of the page at every screen size.
Installation
pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/footer-02.jsonNeeds a React + Tailwind project set up with shadcn. Copies the block's files into your project, along with the components it uses, so you can edit all of it.
Usage
This block is a section, not a page. Import it where you want it, alongside your other sections.
import { Footer02 } from '@/components/footer-02/footer-02'
export default function Page() {
return (
<main>
<Footer02 />
</main>
)
}Files
What the command adds to your project, and where.
components/footer-02/footer-02.tsxThe section. Import it into any page and render it; it fills the width of its parent.
The block uses one accent colour. Installing adds a --brand variable to your global CSS (an existing one is left alone); change it to match your product.
Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.
More in Footer
- Footer 01A simple footer: logo and one line about the product on the left, three columns of links, and a bottom bar with the copyright and legal links.
- Footer 03A footer with a newsletter sign-up that validates and confirms, a language and region Select, an "All systems normal" status line and social links set as text.
- Footer 04A sitemap-style mega footer: five headed link groups that collapse to an accordion on a phone, an app-download and contact card, and a back-to-top button.