Footer Columns
Brand, four link columns, a newsletter field and a bottom bar.
- Type: Footer section
- Styles: Dark, Enterprise
- Licence: Free, MIT
About Footer Columns
Footer Columns has your brand, four link columns, a newsletter field and a bottom bar with legal links.
It is a full-width footer section for React and Tailwind CSS 4, in a dark and enterprise style. Preview it at any width above, then install it with one command.
When to use Footer Columns
- SaaS and company sites.
- Ecommerce.
- Docs and resource hubs.
- Agency sites.
How it is built
Columns and links are an array prop; the layout collapses to stacked groups on mobile.
It is composed from Button, so installing it also installs those components, and you can restyle each one the same way you would on its own.
Goes well with Footer Columns
Footer Columns is part of 30 full templates, so you can see it in a finished page.
- Ember template: An AI product site that glows.
- Hearth template: A home for your app launch.
- Cinder template: Serious numbers, calmly presented.
- Relay template: Status updates that write themselves.
- Meridian template: The CRM for teams under fifty.
- Tessera template: Every meeting, already written up.
- Sable template: Enterprise security without the theatre.
- Cadence template: Book meetings without the back-and-forth.
- Tidepool template: Postgres that scales to zero and back.
- Sentinel template: Know before your users do.
- Fieldwork template: Senior engineers, on retainer.
- Roastery template: Build a box, save every delivery.
- Steep template: Loose-leaf, sold like it matters.
- Fixwell template: Book a pro in two minutes.
- Timberline template: Cabins within three hours of the city.
- Brightside template: A dentist people don't dread.
- Keyhaven template: Homes, neighbourhoods and the people who know them.
- Townhall template: Sessions people register for.
- Ledger template: Bookkeeping that reads like a newspaper.
- Vault template: Save without thinking about it.
- Harbor template: Payroll in ten minutes a month.
- Canopy template: Insurance explained in plain English.
- Rota template: Shift planning, built by nurses.
- Carebridge template: See a doctor today, from your sofa.
- Kindred template: Find a therapist you actually click with.
- Forkcamp template: From zero to hired in 16 weeks.
- Lingo template: Speak a new language in 15 minutes a day.
- Archive template: A library people can search.
- Tutorly template: The right tutor, this week.
- Crew template: A careers page people apply from.
- Footer Wordmark: A React footer with an enormous wordmark that rises into view
- Footer Minimal: A free minimal React footer: brand, a few links and the year
- Footer Newsletter: A big React footer led by a newsletter sign-up, sitemap and live status
- Footer Contact: A studio React footer with a giant email link, hours and live local time
- Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Install Footer Columns
npx shadcn@latest add https://charcoalui.com/r/footer-columns.jsonFooter Columns is free and MIT licensed. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- What links belong in a footer?
- Product, resources, company and legal, each as a column: pricing and features, docs and changelog, about and careers, privacy and terms. Add the newsletter field if you send updates, and keep the bottom bar for copyright and social links.
- Does Footer Columns work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.
Built from
- Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.