beUI Pro for mobile is live — 50 React Native blocks and screens
Footer Sections
Footer blocks spanning a classic landscape directory, link-rich mega navigation, compact directories, and oversized wordmarks.
Panorama footer
footer-panorama.tsxAn image-led footer with original painted coastal artwork, a short closing message, compact actions, social icons, and a quiet legal row.
"use client";
import { FooterPanorama } from "@/components/premium/footer-sections/footer-panorama";
export function FooterPanoramaPreview() {
return <FooterPanorama />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
Wordmark footer
footer-wordmark.tsxA rounded upper panel with a short brand statement, three link columns, and an oversized wordmark revealed on a softly tinted base.
"use client";
import { FooterWordmark } from "@/components/premium/footer-sections/footer-wordmark";
export function FooterWordmarkPreview() {
return <FooterWordmark />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
Landscape footer
footer-landscape.tsxA classic brand-and-links footer with five navigation columns and a softly faded landscape along the bottom, inspired by the beUI Pro app footer.
"use client";
import { FooterLandscape } from "@/components/premium/footer-sections/footer-landscape";
export function FooterLandscapePreview() {
return <FooterLandscape />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
Studio footer
footer-studio.tsxA personal studio sign-off with a prominent email link, availability status, coastal artwork, and social icons.
"use client";
import { FooterStudio } from "@/components/premium/footer-sections/footer-studio";
export function FooterStudioPreview() {
return <FooterStudio />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
Local time footer
footer-local-time.tsxA quiet studio footer with a live local clock, configurable city and time zone, and compact navigation.
"use client";
import { FooterLocalTime } from "@/components/premium/footer-sections/footer-local-time";
export function FooterLocalTimePreview() {
return <FooterLocalTime />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
Gradient frame footer
footer-frame.tsxA soft gradient surround frames a rounded footer with three navigation columns, social icons, and a compact legal row.
"use client";
import { FooterFrame } from "@/components/premium/footer-sections/footer-frame";
export function FooterFramePreview() {
return <FooterFrame />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
Spotlight footer
footer-spotlight.tsxA footer with a brand and link-column grid over a giant outlined wordmark that fills under a cursor-following spotlight.
"use client";
import { FooterSpotlight } from "@/components/premium/footer-sections";
export function FooterSpotlightPreview() {
return (
<div className="w-full">
<FooterSpotlight />
</div>
);
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
Mega footer
footer-mega.tsxA link-rich footer with a brand column, live status pill, animated link columns, a stateful newsletter form, and a social bottom bar.
"use client";
import { FooterMega } from "@/components/premium/footer-sections";
export function FooterMegaPreview() {
return (
<div className="w-full">
<FooterMega
onSubscribe={() =>
new Promise<void>((resolve) => setTimeout(resolve, 1100))
}
/>
</div>
);
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
Directory footer
footer-cta.tsxA compact rounded footer with brand details, product and resource navigation, social links, and a separate legal row.
"use client";
import { FooterCta } from "@/components/premium/footer-sections";
export function FooterCtaPreview() {
return (
<div className="w-full">
<FooterCta />
</div>
);
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboard