Footer Contact
Studio footer with a giant email link, address, hours, live local time and a huge faded wordmark.
- Type: Footer section
- Styles: Dark, Minimal
- Licence: Charcoal UI Pro
About Footer Contact
Footer Contact makes the footer the call to action: a huge email address with an animated underline, the studio address and hours, the live local time and socials, over a giant faded wordmark.
It is a full-width footer section for React and Tailwind CSS 4, in a dark and minimal style. Preview it at any width above, then install it with one command.
When to use Footer Contact
- Design studios and agencies.
- Restaurants, cafés and spas.
- Photographers and bands.
- Local shops and clubs.
How it is built
Local time uses your chosen time zone and updates every 30 seconds, and every line is a prop.
It has no component dependencies beyond the shared utilities, so it is one file to read and change.
Goes well with Footer Contact
Footer Contact is part of 16 full templates, so you can see it in a finished page.
- Northlane template: A studio site that reads like a manifesto.
- Hartwell template: Let the pictures do the talking.
- Northlight template: Showreel first, everything else second.
- Plinth template: Buildings, told like stories.
- Marginalia template: An independent bookshop, online.
- Juniper template: Wood fire, small plates, booked tables.
- Kinfolk template: Bread, coffee and three neighbourhood shops.
- Fade template: Book a chair, skip the wait.
- Summit template: Memberships, classes and coaches.
- Stillwater template: Treatments, booked in a breath.
- Halden template: A band site: album, tour, merch.
- Reel template: Ten days, ninety films.
- Trailhead template: Guided hikes, every weekend.
- Lotus template: Classes, teachers and a timetable.
- Gather template: Monthly meetups, sorted.
- Hive template: Desks, rooms and people worth sitting near.
- Footer Columns: A free React footer with brand, four link columns and a newsletter field
- 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
Install Footer Contact
npx shadcn@latest add @charcoal/footer-contactFooter Contact is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Footer Contact 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.