Footer Reveal | React Components & Templates

Footer Reveal

A sticky reveal footer with navigation, hero typography, and optional images that reveals on scroll.

Installation


pnpm dlx shadcn@latest add @ruixenui-pro/footer-reveal

Usage

import { FooterReveal } from "@/components/ui/footer-reveal"

export default function Example() {
  return

Flicker Footer Hero Bars

On This Page

Prop	Type	Default	Description
`brand`	`string`	`"ACME."`	Brand name/logo text
`tagline`	`string`	Default tagline	Tagline text (supports newlines)
`navGroups`	`NavGroup[]`	Default groups	Navigation link groups
`year`	`string`	Current year	Year display text
`ctaText`	`string`	`"Start building"`	CTA button text
`ctaHref`	`string`	`"#"`	CTA link destination
`heroTextLines`	`HeroTextLine[]`	Default lines	Hero typography lines
`abstractImage`	`string`	-	Optional abstract image (left)
`featuredImage`	`string`	-	Optional featured image (bottom right)
`height`	`number`	`600`	Footer height in pixels
`bgColor`	`string`	`"bg-[#c8c8c8]"`	Background color class
`className`	`string`	-	Additional CSS classes

interface NavLink {
  title: string
  href: string
  underline?: boolean
}
 
interface NavGroup {
  title: string
  links: NavLink[]
}
 
interface HeroTextLine {
  words: {
    text: string
    highlight?: boolean
    tag?: string
  }[]
}

const heroLines: HeroTextLine[] = [
  { words: [{ text: "LET'S" }, { text: "BUILD" }] },
  { words: [{ text: "SOMETHING", highlight: true }, { text: "GREAT" }] },
]
 
<FooterReveal heroTextLines={heroLines} />

Footer Reveal

Installation

Usage

Props

Types

Examples

Custom Hero Text

With Images