Will the giant wordmark fit on mobile?

Yes. The wordmark scales with the container width rather than a fixed font size, so it fills the screen edge to edge on a phone and on a wide monitor without overflowing or wrapping.

Does Footer Wordmark 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.

Footer Wordmark

An enormous wordmark that rises into view, under a short row of links.

Type: Footer section
Styles: Dark, Gradient
Licence: Charcoal UI Pro

About Footer Wordmark

Footer Wordmark ends the page with an enormous wordmark that rises into view under a short row of links.

It is a full-width footer section for React and Tailwind CSS 4, in a dark and gradient style. Preview it at any width above, then install it with one command.

When to use Footer Wordmark

Agency and studio sites.
Brand-led products.
Portfolios.
Fashion and lifestyle.

How it is built

The wordmark scales to the container width and rises with Scroll Reveal.

It is composed from Scroll Reveal, 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 Wordmark

Footer Wordmark is part of 3 full templates, so you can see it in a finished page.

Ashfall template: Work first. Words second.
Foundry template: Big agency work, small agency speed.
Parallel template: Movement is the message.
Footer Columns: A free React footer with brand, four link columns and a newsletter field
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
Scroll Reveal: A React scroll reveal: fade content in from any direction or out of a blur

Install Footer Wordmark

npx shadcn@latest add @charcoal/footer-wordmark

Footer Wordmark 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

Will the giant wordmark fit on mobile?: Yes. The wordmark scales with the container width rather than a fixed font size, so it fills the screen edge to edge on a phone and on a wide monitor without overflowing or wrapping.
Does Footer Wordmark 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

Scroll Reveal: Wrap anything to fade it in as it scrolls into view, from any direction or out of a blur. Several children stagger.

Footer Wordmark as Markdown