Skip to content
UI Kit
Accent color

Footers for React and Tailwind

The end of every page, from a slim app footer to a large closing statement.

9 variants
Switch category

From slim app footer to mega footer

The footer is where visitors look for what the navigation left out, such as imprint, privacy, contact and the full sitemap. The nine footers here take their columns, links and legal lines as data, so one change in your link list updates every page.

Columns is the standard for marketing sites with three to five link groups. Simple row and Centered suit small sites and landing pages. With newsletter and With call to action turn the end of the page into one more chance to convert, With contact puts address and phone up front for local businesses. Mega carries large sitemaps, Big statement closes a brand site with a sentence, and App footer stays slim under an application.

Keep legal links in every variant, they are required in many countries. Group links by what visitors look for, not by your org chart. On phones the columns fold into a calm stack with tap targets of at least 44 pixels, so the footer stays usable with a thumb.

Details

What Footer brings along, read from the registry and the source.

Area
Layout
Variants
9
Version
1.0.0 · since 1.0.0
File
components/ui/footer.tsx
Brings along
utilskitbuttonicon
npm packages
None
Languages
English and German, 12 texts of its own
Studio
All 9 variants editable
In collections
SaaS landing pageLocal business
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The FooterProps interface from components/ui/footer.tsx, with the comments from the code.

  • variantoptional
    FooterVariant

    columnssimple-rowbig-statementwith-newsletterwith-contactmegacenteredapp-footerwith-cta

  • brandrequired
    { name: string; href?: string; logo?: React.ReactNode }
  • descriptionoptional
    React.ReactNode

    One or two sentences under the logo

  • columnsoptional
    FooterColumn[]
  • legaloptional
    FooterLink[]

    Imprint, privacy, terms and the like

  • copyrightrequired
    string
  • socialoptional
    FooterLink[]

    Social profiles as plain text links. The kit draws no third-party logos.

  • languageoptional
    { value: string; options: { value: string; label: string }[]; onChange?: (value: string) => void }

    A language picker in the bottom row

  • newsletteroptional
    { title: string; description?: string; placeholder?: string; button: string; note?: string; onSubscribe?: (email: string) => void | Promise<void> }

    with-newsletter

  • contactoptional
    { address: string[]; phone?: string; email?: string; hours?: { days: string; time: string }[]; media?: React.ReactNode; action?: { label: string; href: string }; }

    with-contact

  • statementoptional
    React.ReactNode

    big-statement: the large line and the link under it

  • statementActionoptional
    { label: string; href: string }
  • ctaoptional
    { title: React.ReactNode; description?: string; primaryAction: { label: string; href: string }; secondaryAction?: { label: string; href: string } }

    with-cta

  • statusoptional
    { label: string; href: string; state?: 'ok' | 'degraded' | 'down' }

    app-footer: system status and version

  • versionoptional
    string

Built-in texts

Footer writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 12 texts
footerEnglish FooterGerman Fußzeile
emailEnglish Email addressGerman E-Mail-Adresse
invalidEnglish Please enter a valid email address.German Bitte gib eine gültige E-Mail-Adresse ein.
successEnglish Thanks. Please confirm the link we just sent you.German Danke. Bitte bestätige den Link, den wir dir gerade geschickt haben.
sendingEnglish Sending…German Wird gesendet…
languageEnglish LanguageGerman Sprache
topEnglish Back to topGerman Nach oben
addressEnglish AddressGerman Adresse
hoursEnglish Opening hoursGerman Öffnungszeiten
reachEnglish Reach usGerman So erreichst du uns
followEnglish FollowGerman Folgen
legalEnglish LegalGerman Rechtliches

Accessibility

Read from the source of the component.

  • Sets aria-busy, aria-describedby, aria-invalid, aria-label, aria-labelledby and aria-live, so screen readers announce purpose and state.
  • Uses the role status.
  • Announces changes through a live region without moving focus.
  • Every field has a label, visible or for screen readers.
  • Adds text for screen readers where icons and graphics stand alone.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Moves with the scroll, its progress follows the position on the page.
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 10 places in the code switch motion off then.

Frequent questions

How do I install Footer?

With aiw add @ai-website/footer. The command puts components/ui/footer.tsx into your project, the code is yours from then on. It brings along button and icon. It needs no further npm packages.

Which variants does Footer have?

9 variants, Columns, Simple row, Big statement, With newsletter, With contact, Mega, Centered, App footer and With call to action. You pick one with the variant prop, for example variant="simple-row".

Can I translate the texts of Footer?

Yes. Footer carries 12 texts of its own in English and German, such as “Footer”, “Email address” and “Please enter a valid email address.”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Footer?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Footer with aiw_components and install it with aiw_add @ai-website/footer. Name the variant in your prompt, for example variant="columns", and the assistant writes your content straight into the props.

Can I adjust Footer without code?

Yes, in the Studio. All 9 variants are editable there, texts, lists and switches. The Studio writes the matching Footer code to copy.

Similar components

More from Layout, the same area of the kit.

Often combined with

Sections that usually sit next to Footers on a page.

Often searched

Jump to

Copied to the clipboard