beUI Pro for mobile is live — 50 React Native blocks and screens
Announcement Banners
Four animated announcement compositions spanning a gradient marquee strip, a cinematic launch moment, a compact rotating ribbon, and a layered multi-update stack.
Gradient marquee strip
announcement-gradient-marquee.tsxA compact edge-to-edge announcement strip with a warm gradient field, continuously moving message sequence, fixed action, accessible reduced-motion state, and dismissal.
import { AnnouncementGradientMarquee } from "@/components/premium/announcement-banners/announcement-gradient-marquee";
export function AnnouncementGradientMarqueePreview() {
return <AnnouncementGradientMarquee />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
Shader launch modal
announcement-shader-launch.tsxA compact modal-style launch announcement with an animated shader visual header, layered glass artwork, a Dia-inspired chromatic heading, paired actions, and a smooth dismiss transition.
import { AnnouncementShaderLaunch } from "@/components/premium/announcement-banners/announcement-shader-launch";
export function AnnouncementShaderLaunchPreview() {
return <AnnouncementShaderLaunch />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
Rotating announcement ribbon
announcement-rotating-ribbon.tsxA compact site-wide ribbon that cycles through announcements with vertical blur transitions, a restrained light sweep, visibility-aware playback, and dismissal.
import { AnnouncementRotatingRibbon } from "@/components/premium/announcement-banners/announcement-rotating-ribbon";
export function AnnouncementRotatingRibbonPreview() {
return <AnnouncementRotatingRibbon />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
Stacked announcement cards
announcement-stacked-cards.tsxA layered announcement stack that automatically brings each complete story forward with spring motion while keeping the next notices visibly within reach.
import { AnnouncementStackedCards } from "@/components/premium/announcement-banners/announcement-stacked-cards";
export function AnnouncementStackedCardsPreview() {
return <AnnouncementStackedCards />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboard