Footer für React und Tailwind

Details

Was Fußzeile mitbringt, aus Registry und Quellcode gelesen.

Bereich

Layout

Variants

9

Version

1.0.0 · seit 1.0.0

Datei

components/ui/footer.tsx

Bringt mit

utilskitbuttonicon

npm-Pakete

Keine

Sprachen

Englisch und Deutsch, 12 eigene Texte

Studio

Alle 9 Variants bearbeitbar

In Sammlungen

SaaS-LandingpageLokales Geschäft

Mit KI bauen

Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle FooterProps aus components/ui/footer.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

• variantoptional
  FooterVariant

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

• brandPflicht
  { 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

• copyrightPflicht
  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

Eingebaute Texte

Diese Texte schreibt Fußzeile selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.