2a:I[61360,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"InstallationSwitch",1] 2e:I[48869,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"DemoCodeBlock",1] 30:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"Table"] 31:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"TableHeader"] 32:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"TableRow"] 33:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"TableHead"] 34:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"TableBody"] 35:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"TableCell"] 39:I[6105,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],""] 3a:I[29533,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"FlipButton"] 3b:I[84786,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"SimilarFloatingBar"] 2b:T436f,"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: "https://thommysart.gumroad.com/l/reframe-ui-pro", 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" }, ], }, ], 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 2c:T1964,"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" import { PreviewModal } from "@/components/preview-modal" 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

) } 2d:T1964,"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" import { PreviewModal } from "@/components/preview-modal" 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 (

) } 24:["$","section",null,{"className":"flex flex-col gap-6","children":["$","$L2a",null,{"shadcnUrl":"https://ui.thommysart.me/r/site-footer.json","componentId":"site-footer","componentCode":"$2b","previewCodeForGate":"$2c","demoCode":"$2d","isPro":false,"hasAccess":true,"token":null,"authRedirect":"/auth?redirect=/docs/navigation/site-footer","tier":"FREE"}]}] 2f:T1964,"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" import { PreviewModal } from "@/components/preview-modal" 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 (

) } 25:["$","section",null,{"className":"flex flex-col gap-3","children":[["$","h2",null,{"className":"font-manrope font-bold tracking-[-0.03em] text-[20px] text-foreground","children":"Usage"}],["$","$L2e",null,{"code":"$2f","filename":"site-footer-usage.tsx"}]]}] 26:["$","section",null,{"className":"flex flex-col gap-3","children":[["$","h2",null,{"className":"font-manrope font-bold tracking-[-0.03em] text-[20px] text-foreground","children":"Props"}],["$","div",null,{"className":"overflow-hidden rounded-[16px] border border-border","children":["$","div",null,{"className":"w-full bg-card","children":["$","$L30",null,{"className":"min-w-[720px]","children":[["$","$L31",null,{"className":"bg-muted","children":["$","$L32",null,{"className":"hover:bg-muted border-border","children":[["$","$L33",null,{"className":"p-4 font-mono-montreal text-[11px] tracking-[0.08em] uppercase text-muted-foreground whitespace-nowrap","children":"Name"}],["$","$L33",null,{"className":"p-4 font-mono-montreal text-[11px] tracking-[0.08em] uppercase text-muted-foreground whitespace-nowrap","children":"Type"}],["$","$L33",null,{"className":"p-4 font-mono-montreal text-[11px] tracking-[0.08em] uppercase text-muted-foreground whitespace-nowrap","children":"Default"}],["$","$L33",null,{"className":"p-4 font-mono-montreal text-[11px] tracking-[0.08em] uppercase text-muted-foreground whitespace-nowrap","children":"Required"}],["$","$L33",null,{"className":"p-4 font-mono-montreal text-[11px] tracking-[0.08em] uppercase text-muted-foreground whitespace-nowrap min-w-[280px]","children":"Description"}]]}]}],["$","$L34",null,{"children":[["$","$L32","children",{"className":"border-border hover:bg-muted/50","children":[["$","$L35",null,{"className":"p-4 font-cascadia text-[13px] font-medium text-foreground whitespace-nowrap","children":"children"}],["$","$L35",null,{"className":"p-4 whitespace-nowrap","children":["$","span",null,{"data-slot":"badge","className":"items-center justify-center rounded-md px-2 py-0.5 font-medium w-fit shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a&]:hover:bg-secondary/90 bg-muted border border-border font-cascadia text-[12px] text-foreground whitespace-nowrap max-w-[180px] truncate inline-flex","children":"React.ReactNode"}]}],["$","$L35",null,{"className":"p-4 whitespace-nowrap","children":["$","span",null,{"className":"font-cascadia text-xs bg-muted border border-border rounded-full px-2.5 py-1 text-muted-foreground whitespace-nowrap","children":["$","span",null,{"className":"text-muted-foreground/50 italic","children":"—"}]}]}],["$","$L35",null,{"className":"p-4 whitespace-nowrap","children":["$","span",null,{"className":"inline-flex items-center rounded-full bg-red-500 text-white px-2.5 py-1 text-[11px] font-bold tracking-wide whitespace-nowrap","children":"Yes"}]}],["$","$L35",null,{"className":"p-4 font-manrope text-[13px] leading-relaxed text-muted-foreground whitespace-normal break-words min-w-[240px] max-w-[380px]","children":"Footer content. Use composition primitives: SiteFooterCta, SiteFooterMain, SiteFooterBrand, SiteFooterColumn, SiteFooterBottom, SiteFooterWatermark."}]]}],["$","$L32","className",{"className":"border-border hover:bg-muted/50","children":[["$","$L35",null,{"className":"p-4 font-cascadia text-[13px] font-medium text-foreground whitespace-nowrap","children":"className"}],["$","$L35",null,{"className":"p-4 whitespace-nowrap","children":["$","span",null,{"data-slot":"badge","className":"items-center justify-center rounded-md px-2 py-0.5 font-medium w-fit shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a&]:hover:bg-secondary/90 bg-muted border border-border font-cascadia text-[12px] text-foreground whitespace-nowrap max-w-[180px] truncate inline-flex","children":"string"}]}],"$L36","$L37","$L38"]}]]}]]}]}]}]]}] 27:["$","div",null,{"className":"flex items-center gap-3 pt-6 border-t border-border justify-between","children":[["$","$L39",null,{"href":"/docs/navigation/sliding-stairs-menu","children":["$","$L3a",null,{"frontText":"Sliding Stairs Menu","backText":"Sliding Stairs Menu","variant":"ghost","size":"default","icon":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-left size-4","aria-hidden":"true","children":[["$","path","1wnfg3",{"d":"m15 18-6-6 6-6"}],"$undefined"]}],"className":"!px-5 !py-2.5 !text-[13px] !rounded-full border border-border"}]}],["$","$L39",null,{"href":"/docs/navigation/shades-page-transition","children":["$","$L3a",null,{"frontText":"Shades Page Transition","backText":"Shades Page Transition","variant":"amber","size":"default","icon":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-right size-4","aria-hidden":"true","children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}],"className":"!px-5 !py-2.5 !text-[13px] !rounded-full"}]}]]}] 28:["$","div",null,{"className":"flex flex-col md:flex-row items-center justify-between gap-3 border-t border-border pt-6","children":[["$","span",null,{"className":"font-mono-montreal text-[11px] tracking-[0.14em] uppercase text-muted-foreground","children":["© reframe/ui ",2026]}],["$","span",null,{"className":"font-mono-montreal text-[11px] tracking-wide text-muted-foreground","children":["Built by ",["$","a",null,{"href":"https://twitter.com/thommysart","className":"underline decoration-border hover:text-foreground","target":"_blank","children":"@thommysart"}]]}]]}] 29:["$","$L3b",null,{"categoryId":"navigation","categoryName":"Navigation","currentId":"site-footer","components":[{"id":"platforms-navbar","name":"Platforms Navbar","tag":["New"],"src":"@/components/reframeui/navigation/platforms-navbar/platforms-navbar.tsx","demoSrc":"@/components/reframeui/navigation/platforms-navbar/platforms-navbar-demo.tsx","props":[{"id":"items","name":"items","type":"PlatformsNavItem[]","description":"Nav items with label, href, optional active/badge.","required":false},{"id":"logo","name":"logo","type":"React.ReactNode","description":"Custom logo node. Defaults to flip logo.","required":false},{"id":"hideLogo","name":"hideLogo","type":"boolean","default":false,"description":"Hide logo.","required":false},{"id":"className","name":"className","type":"string","description":"Root header class — user controls positioning.","required":false},{"id":"style","name":"style","type":"React.CSSProperties","description":"Inline style for root.","required":false},{"id":"position","name":"position","type":"\"static\" | \"relative\" | \"absolute\" | \"fixed\" | \"sticky\"","default":"relative","description":"Position preset when className not provided.","required":false},{"id":"top","name":"top","type":"string","description":"Top offset for fixed/absolute/sticky.","required":false},{"id":"zIndex","name":"zIndex","type":"number | string","description":"Z-index.","required":false},{"id":"containerClassName","name":"containerClassName","type":"string","description":"Inner flex container class.","required":false},{"id":"logoWrapperClassName","name":"logoWrapperClassName","type":"string","description":"Logo wrapper class.","required":false},{"id":"navClassName","name":"navClassName","type":"string","description":"Nav pill class.","required":false},{"id":"linkClassName","name":"linkClassName","type":"string","description":"Link class.","required":false},{"id":"actionsClassName","name":"actionsClassName","type":"string","description":"Actions wrapper class.","required":false},{"id":"searchButtonClassName","name":"searchButtonClassName","type":"string","description":"Search button class.","required":false},{"id":"mobileNavClassName","name":"mobileNavClassName","type":"string","description":"Mobile nav wrapper class.","required":false},{"id":"cta","name":"cta","type":"{ label, href, variant, size, icon, className }","description":"CTA config.","required":false},{"id":"ctaNode","name":"ctaNode","type":"React.ReactNode","description":"Custom CTA node.","required":false},{"id":"showSearch","name":"showSearch","type":"boolean","default":true,"description":"Show search button.","required":false},{"id":"onSearch","name":"onSearch","type":"() => void","description":"Called when search clicked.","required":false},{"id":"disablePadding","name":"disablePadding","type":"boolean","default":false,"description":"Disable built-in padding.","required":false}],"deps":["gsap"],"tier":"FREE","categoryId":"navigation","categoryName":"Navigation","video":"https://t90qbbxdsu.ufs.sh/f/JpRsMSGdnCqMY2nzzG05NVy96Ddb0azvo2QrukLHcUeXCqEi","files":[{"path":"src/components/reframeui/navigation/platforms-navbar/platforms-navbar.tsx","type":"registry:component"}]},{"id":"atelier-navbar","name":"Atelier Navbar","tag":["Pro","New"],"src":"@/components/reframeui/navigation/atelier-navbar/atelier-navbar.tsx","demoSrc":"@/components/reframeui/navigation/atelier-navbar/atelier-navbar-demo.tsx","props":[{"id":"brandName","name":"brandName","type":"string","default":"ATELIER","description":"Brand name / logo text.","required":false},{"id":"brandHref","name":"brandHref","type":"string","default":"#","description":"Brand link href.","required":false},{"id":"topButtons","name":"topButtons","type":"{label:string; href:string; variant?:string}[]","description":"Top right buttons — e.g. Login/Join. Rendered with FlipButton.","required":false},{"id":"leftSection","name":"leftSection","type":"AtelierNavSection","description":"Left column {title, links: {label,href,badge}[], bottomLinks?}. Links use UnderlineLink.","required":false},{"id":"middleSection","name":"middleSection","type":"AtelierNavSection","description":"Middle column EXPLORE. Links use UnderlineLink.","required":false},{"id":"featured","name":"featured","type":"{title:string; image:string; badge?:string; ctaLabel?:string; ctaHref?:string}","description":"Right featured card — image, title, CTA (FlipButton).","required":false},{"id":"initialOpen","name":"initialOpen","type":"boolean","default":false,"description":"Start open for demo.","required":false},{"id":"className","name":"className","type":"string","description":"Wrapper class for nav.","required":false}],"deps":["gsap"],"registryDependencies":["flip-button","underline-link"],"tier":"PRO","categoryId":"navigation","categoryName":"Navigation","video":"https://t90qbbxdsu.ufs.sh/f/JpRsMSGdnCqMPaPgl0b5jQOmzbXBMvVoDKnA1H7NIaZiwGWl","files":[{"path":"src/components/reframeui/navigation/atelier-navbar/atelier-navbar.tsx","type":"registry:component"}]},{"id":"sliding-stairs-menu","name":"Sliding Stairs Menu","tag":["Pro"],"src":"@/components/reframeui/navigation/sliding-stairs-menu/sliding-stairs-menu.tsx","demoSrc":"@/components/reframeui/navigation/sliding-stairs-menu/sliding-stairs-menu-demo.tsx","props":[{"id":"className","name":"className","type":"string","description":"Optional wrapper class for positioning.","required":false}],"deps":["motion"],"tier":"PRO","categoryId":"navigation","categoryName":"Navigation","video":"https://t90qbbxdsu.ufs.sh/f/JpRsMSGdnCqMyK9k6xzre8C5buBgPvWs1HTpl6IqKUnx0GAm","files":[{"path":"src/components/reframeui/navigation/sliding-stairs-menu/sliding-stairs-menu.tsx","type":"registry:component"}]},{"id":"site-footer","name":"Site Footer","tag":["New"],"src":"@/components/reframeui/navigation/site-footer/site-footer.tsx","demoSrc":"@/components/reframeui/navigation/site-footer/site-footer-demo.tsx","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"],"registryDependencies":["text-shimmer"],"tier":"FREE","categoryId":"navigation","categoryName":"Navigation","video":"https://t90qbbxdsu.ufs.sh/f/JpRsMSGdnCqMfTQ7txENS20wCs8VPbtklGD1xird79haTnUm","files":[{"path":"src/components/reframeui/navigation/site-footer/site-footer.tsx","type":"registry:component"}]},{"id":"shades-page-transition","name":"Shades Page Transition","tag":"Pro","src":"@/components/reframeui/navigation/shades-page-transition/shades-page-transition.tsx","demoSrc":"@/components/reframeui/navigation/shades-page-transition/shades-page-transition-demo.tsx","props":[{"id":"children","name":"children","type":"React.ReactNode","description":"The content to be transitioned.","required":true},{"id":"shadesColor","name":"shadesColor","type":"string","default":"var(--muted)","description":"The color of the shades.","required":false}],"deps":["gsap"],"tier":"PRO","categoryId":"navigation","categoryName":"Navigation","video":"https://t90qbbxdsu.ufs.sh/f/JpRsMSGdnCqM5ZUw5nitJGzaUIEpjfkHS4LmR9vgCQxYVr2T","files":[{"path":"src/components/reframeui/navigation/shades-page-transition/shades-page-transition.tsx","type":"registry:component"}]},{"id":"stair-case-transition","name":"Stair Case Transition","tag":"Pro","src":"@/components/reframeui/navigation/stair-case-transition/stair-case-transition.tsx","demoSrc":"@/components/reframeui/navigation/stair-case-transition/stair-case-transition-demo.tsx","props":[{"id":"children","name":"children","type":"React.ReactNode","description":"The content to be transitioned.","required":true},{"id":"bars","name":"bars","type":"number","default":"5","description":"The number of bars to use.","required":false},{"id":"durationMs","name":"durationMs","type":"number","default":"2000","description":"The duration of the transition in milliseconds.","required":false},{"id":"ease","name":"ease","type":"gsap.EaseFunction | string","default":"power4.inOut","description":"The easing function to use.","required":false},{"id":"staggerEach","name":"staggerEach","type":"number","default":"0.2","description":"The stagger delay between each bar.","required":false}],"deps":["gsap"],"tier":"PRO","categoryId":"navigation","categoryName":"Navigation","video":"https://t90qbbxdsu.ufs.sh/f/JpRsMSGdnCqMvo6aDUE73rLFHOeoWtuMAph6RBgwVk0Z5cDY","files":[{"path":"src/components/reframeui/navigation/stair-case-transition/stair-case-transition.tsx","type":"registry:component"}]}]}]

Name	Type	Default	Required	Description
children	React.ReactNode	—	Yes	Footer content. Use composition primitives: SiteFooterCta, SiteFooterMain, SiteFooterBrand, SiteFooterColumn, SiteFooterBottom, SiteFooterWatermark.
className	string	—	No	Wrapper class for the footer.

Site Footer

Installation

Install via shadcn

Usage

Props