# Footer App Style — React Footer Component

> A compact application footer with a working language menu that retranslates the links and a system / light / dark theme switch with a sliding thumb.

- Category: [Footers](https://pixelpapa.com/components/footers.md)
- Tags: footer, app, locale, theme, switcher
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/footers/footer-app-style

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/footer-app-style
```

The file is written to `components/pixelpapa/footer-app-style.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/footers/footer-app-style.

## AI prompt

```text
Add the "Footer App Style" component from PixelPapa UI to this project.

What it is: A compact application footer with a working language menu that retranslates the links and a system / light / dark theme switch with a sliding thumb.
Category: Footers. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/footer-app-style
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/footer-app-style.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/footer-app-style.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/footer-app-style" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More footers

- [Footer CTA Above](https://pixelpapa.com/components/footers/footer-cta-above.md) (Pro): A rounded call-to-action card that overlaps the top edge of the footer, with a sheen that tracks the cursor and link columns underneath.
- [Footer Dark Gradient Glow](https://pixelpapa.com/components/footers/footer-dark-gradient-glow.md) (Pro): An always-dark footer lit by a breathing horizon glow, with a faint perspective grid, twinkling points and link columns that brighten on hover.
- [Footer Editorial Serif](https://pixelpapa.com/components/footers/footer-editorial-serif.md) (Pro): A magazine-style colophon: a large serif sign-off that reveals line by line, hairline-ruled numbered columns and a live local clock.
- [Footer Giant Wordmark](https://pixelpapa.com/components/footers/footer-giant-wordmark.md): Compact link columns above an oversized brand word whose letters spring up out of the clipped bottom edge when the footer enters view.
- [Footer Marquee Links](https://pixelpapa.com/components/footers/footer-marquee-links.md): Oversized footer links drift past in two opposing marquee rows that slow to a stop on hover, above a small grid of studio details.
- [Footer Minimal Centered](https://pixelpapa.com/components/footers/footer-minimal-centered.md): A quiet centered footer: logo mark, a link row with a pill that glides between hovered links, round social buttons and a back-to-top control.