2c:"/_next/static/immutable/chunks/1hi_kbrxinju_.js" 2d:"/_next/static/immutable/chunks/2u_5bv_v1g3_j.js" 2e:"/_next/static/immutable/chunks/2nm39d601clar.js" 2f:"/_next/static/immutable/chunks/2o69lt5hiomv_.js" 30:"/_next/static/immutable/chunks/3qrefk0nnnzbk.js" 31:I[712953,["$3","$4","$5","$6","$7","$8","$9","$d","$e","$f","$10","$11","$12","$2c","$2d","$2e","$2f","$30"],"ComponentView"] 32:T1908,"use client" import * as React from "react" import { SiteFooter, SiteFooterCta, SiteFooterDivider, SiteFooterMain, SiteFooterBrand, SiteFooterColumn, SiteFooterBottom, SiteFooterWatermark, SiteFooterDefault, } from "./site-footer" import XformerlyTwitter from "@/components/icons/x-formerly-twitter-icon" import Instagram from "@/components/icons/instagram-icon" import { TextShimmer } from "@/components/reframeui/text/text-shimmer" export default function SiteFooterDemo() { return (

{/* spacer to push footer to bottom — simulates page content */}

Preview — footer anchored at bottom

This spacer fills the viewport so the footer sits at the bottom of the preview, as on a real page.

A beautiful and customizable UI library for Next.js. Built with intuitive design patterns so you can focus on creating, not configuring.
Powered by{" "} Tailwind {" "} and{" "} shadcn/ui , animated with{" "} GSAP {" "} and{" "} Framer Motion . ), socials: [ { href: "https://twitter.com/thommysart", icon: , label: "X" }, { href: "https://www.instagram.com/thommysart21/", icon: , label: "Instagram" }, ], }} />

) } export function SiteFooterComposableDemo() { return (

Build faster,
ship sooner. } secondary={{ label: "Docs", href: "/docs/welcome" }} primary={{ label: "Get Pro", href: "#pricing" }} /> acme/ui} description="Composable footer — mix and match primitives. Replace the brand, change columns, or omit the CTA entirely. Each slot is a standalone component." socials={[ { href: "https://twitter.com", icon: 𝕏, label: "X" }, { href: "https://github.com", icon: GH, label: "GitHub" }, ]} /> © acme/ui {new Date().getFullYear()}} builtBy={<>Crafted with composability in mind} /> acme/ui

) } export function SiteFooterMinimalDemo() { return (

) } export function SiteFooterBrandOnlyDemo() { return (

reframe/ui } description="Brand block only — no columns. Use SiteFooterColumn as needed, or omit entirely. The grid collapses gracefully." socials={[{ href: "https://twitter.com/thommysart", icon: , label: "X" }]} /> reframe/ui

) } 33:T446f,"use client" import * as React from "react" import Link from "next/link" import { gsap } from "@/lib/gsap" import { cn } from "@/lib/utils" // ───────────────────────────────────────────────────────────────────────────── // FooterFlipLink — same GSAP flip as FlipNavLink (src/components/ui/flip-link.tsx:8), dark variant // ───────────────────────────────────────────────────────────────────────────── export function FooterFlipLink({ href, children, external, className, }: { href: string children: string external?: boolean className?: string }) { const ref = React.useRef(null) const tlRef = React.useRef(null) React.useEffect(() => { const el = ref.current if (!el) return const front = el.querySelector(".ff-front") const back = el.querySelector(".ff-back") if (!front || !back) return gsap.set(front, { yPercent: 0 }) gsap.set(back, { yPercent: 100 }) const tl = gsap.timeline({ paused: true }) tl.to(front, { yPercent: -100, duration: 0.38, ease: "power3.inOut" }, 0).to( back, { yPercent: 0, duration: 0.38, ease: "power3.inOut" }, 0 ) tlRef.current = tl return () => { tl.kill() tlRef.current = null } }, [children]) const hasUnderline = className?.includes("underline") const underlineClasses = hasUnderline ? "underline decoration-white/20 underline-offset-2" : "" return ( tlRef.current?.play()} onMouseLeave={() => tlRef.current?.reverse()} onFocus={() => tlRef.current?.play()} onBlur={() => tlRef.current?.reverse()} className={cn("relative inline-flex overflow-hidden leading-none", className)} > {children} {children} {children} ) } // ───────────────────────────────────────────────────────────────────────────── // Types // ───────────────────────────────────────────────────────────────────────────── export interface FooterLink { label: string href: string external?: boolean } export interface FooterColumn { title: string links: FooterLink[] } export interface FooterSocial { href: string icon: React.ReactNode label?: string } export interface FooterBrand { name?: React.ReactNode href?: string description?: React.ReactNode socials?: FooterSocial[] } // ───────────────────────────────────────────────────────────────────────────── // Root // ───────────────────────────────────────────────────────────────────────────── export interface SiteFooterProps extends React.HTMLAttributes { children: React.ReactNode } export function SiteFooter({ className, children, ...props }: SiteFooterProps) { return ( ) } // ───────────────────────────────────────────────────────────────────────────── // Cta // ───────────────────────────────────────────────────────────────────────────── export interface SiteFooterCtaProps { title?: React.ReactNode primary?: { label: string; href: string; external?: boolean } secondary?: { label: string; href: string; external?: boolean } className?: string primaryClassName?: string secondaryClassName?: string primarySlot?: React.ReactNode secondarySlot?: React.ReactNode } export function SiteFooterCta({ title = "Reframe your site to the next level.", primary, secondary, className, primaryClassName, secondaryClassName, primarySlot, secondarySlot, }: SiteFooterCtaProps) { return (

{title}

{secondarySlot ?? (secondary ? ( {secondary.label} ) : null)} {primarySlot ?? (primary ? ( {primary.label} ) : null)}

) } // ───────────────────────────────────────────────────────────────────────────── // Divider // ───────────────────────────────────────────────────────────────────────────── export function SiteFooterDivider({ className, ...props }: React.HTMLAttributes) { return

} // ───────────────────────────────────────────────────────────────────────────── // Main grid // ───────────────────────────────────────────────────────────────────────────── export function SiteFooterMain({ children, className, ...props }: React.HTMLAttributes) { return (

{children}

) } // ───────────────────────────────────────────────────────────────────────────── // Brand // ───────────────────────────────────────────────────────────────────────────── export interface SiteFooterBrandProps extends React.HTMLAttributes { name?: React.ReactNode href?: string description?: React.ReactNode socials?: FooterSocial[] socialsClassName?: string } export function SiteFooterBrand({ name = (

reframe/ui

), href = "/", description, socials, className, socialsClassName, ...props }: SiteFooterBrandProps) { return (

{name} {description &&

{description}

} {socials && socials.length > 0 && (

{socials.map((s, i) => ( {s.icon} ))}

)}

) } // ───────────────────────────────────────────────────────────────────────────── // Column // ───────────────────────────────────────────────────────────────────────────── export interface SiteFooterColumnProps extends React.HTMLAttributes { title: string links: FooterLink[] linkClassName?: string } export function SiteFooterColumn({ title, links, className, linkClassName, ...props }: SiteFooterColumnProps) { return (

{title}

{l.label}

) } // ───────────────────────────────────────────────────────────────────────────── // Bottom bar // ───────────────────────────────────────────────────────────────────────────── export interface SiteFooterBottomProps { copyright?: React.ReactNode builtBy?: React.ReactNode className?: string } export function SiteFooterBottom({ copyright, builtBy, className }: SiteFooterBottomProps) { return (

{copyright && {copyright}} {builtBy && {builtBy}}

) } // ───────────────────────────────────────────────────────────────────────────── // Watermark — large clipped text // ───────────────────────────────────────────────────────────────────────────── export interface SiteFooterWatermarkProps extends React.HTMLAttributes { children: React.ReactNode heightClassName?: string } export function SiteFooterWatermark({ children, className, heightClassName = "h-[10rem]", ...props }: SiteFooterWatermarkProps) { // Render children as-is — consumer decides shimmer/style. We only handle positioning/clipping. const isPlainText = typeof children === "string" return (

{isPlainText ? ( {children} ) : ( children )}

) } // ───────────────────────────────────────────────────────────────────────────── // Convenience: SiteFooterDefault — mirrors the landing footer via props // ───────────────────────────────────────────────────────────────────────────── export interface SiteFooterDefaultProps { cta?: SiteFooterCtaProps | false brand?: SiteFooterBrandProps columns?: FooterColumn[] copyright?: React.ReactNode builtBy?: React.ReactNode watermark?: React.ReactNode | false className?: string showDividers?: boolean } export function SiteFooterDefault({ cta = { title: "Reframe your site to the next level.", secondary: { label: "Try for Free", href: "/docs/welcome" }, primary: { label: "Get Started", href: "/pricing", external: true }, }, brand, columns = [ { title: "Product", links: [ { label: "Plans", href: "#pricing" }, { label: "Features", href: "#features" }, { label: "Demo", href: "#demo" }, { label: "Contact", href: "mailto:thommysart@gmail.com", external: true }, ], }, { title: "Library", links: [ { label: "Docs", href: "/docs/welcome" }, { label: "Installation", href: "/docs/installation" }, { label: "Components", href: "/docs/explore" }, { label: "Templates", href: "/templates" }, ], }, { title: "Legal", links: [ { label: "Privacy", href: "/privacy" }, { label: "Terms", href: "/terms" }, { label: "Cookies", href: "/cookies" }, { label: "Refunds", href: "/refunds" }, { label: "License", href: "/license" }, ], }, ], copyright = <>© reframe/ui {new Date().getFullYear()}. All rights reserved., builtBy = ( Built by{" "} @thommysart ), watermark = "reframe/ui", className, showDividers = true, }: SiteFooterDefaultProps) { return ( {cta !== false && } {showDividers && } {columns.map((col) => ( ))} {showDividers && } {watermark !== false && {watermark}} ) } export default SiteFooter 34:T1908,"use client" import * as React from "react" import { SiteFooter, SiteFooterCta, SiteFooterDivider, SiteFooterMain, SiteFooterBrand, SiteFooterColumn, SiteFooterBottom, SiteFooterWatermark, SiteFooterDefault, } from "./site-footer" import XformerlyTwitter from "@/components/icons/x-formerly-twitter-icon" import Instagram from "@/components/icons/instagram-icon" import { TextShimmer } from "@/components/reframeui/text/text-shimmer" export default function SiteFooterDemo() { return (

{/* spacer to push footer to bottom — simulates page content */}

Preview — footer anchored at bottom

This spacer fills the viewport so the footer sits at the bottom of the preview, as on a real page.

) } export function SiteFooterComposableDemo() { return (

) } export function SiteFooterMinimalDemo() { return (

) } export function SiteFooterBrandOnlyDemo() { return (

) } 19:["$","$L31",null,{"info":{"id":"site-footer","name":"Site Footer","categoryId":"navigation","categoryName":"Navigation","tags":["navigation","footer"],"tier":"FREE","tag":"$undefined","credits":"$undefined","shadcnUrl":"https://reframe-ui.vercel.app/r/site-footer.json","demoCode":"$32","componentCode":"$33","previewCodeForGate":"$34","isPro":false,"hasAccess":true,"token":null,"expo":"$undefined","authRedirect":"/sign-in?redirect_url=%2Fdocs","props":[{"id":"children","name":"children","type":"React.ReactNode","description":"Footer content. Use composition primitives: SiteFooterCta, SiteFooterMain, SiteFooterBrand, SiteFooterColumn, SiteFooterBottom, SiteFooterWatermark.","required":true},{"id":"className","name":"className","type":"string","description":"Wrapper class for the footer.","required":false}],"deps":["motion"]}}]