Bounded Carousel Hero — Aligned
New release
Build faster with Beste
A complete suite of tools to design, ship, and scale your next product without the boilerplate.
A complete suite of tools to design, ship, and scale your next product without the boilerplate.
Contained 16:9 hero carousel with badge, title, description, and CTA. Vertically centered content that anchors to the left, center, or right via the contentAlign prop. Auto-rotates with centered, clickable dots.
Full-bleed hero carousel with the same badge, heading, description and CTA slide content as hero109, but the content column can anchor to the left, center, or right of the frame through contentAlign, and the background scrim direction switches to match so the text always sits on a legible gradient.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://ui.beste.co/r/hero110?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero110?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero110.tsx and the badge and button shadcn/ui primitives it depends on.
The installed file exports hero110Demo alongside the block: the exact props behind the preview above. Spread it to get a working carousel in one line.
import { Hero110, hero110Demo } from "@/components/beste/block/hero110";
export default function Page() {
return <Hero110 {...hero110Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hero110 } from "@/components/beste/block/hero110";
export default function Page() {
return (
<Hero110
transition="slide"
contentAlign="left"
slides={[
{
id: "slide-1",
badge: { label: "New", variant: "secondary" },
heading: "Launch week is here",
description: "Ship your product page in an afternoon, not a sprint.",
image: {
src: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1500&h=844&fit=crop",
alt: "Team celebrating a product launch",
},
buttons: [{ id: "btn-1", label: "See the release", href: "https://beste.co" }],
},
{
id: "slide-2",
badge: { label: "Design", variant: "secondary" },
heading: "Built for detail",
description: "Every transition, spacing and shadow considered.",
image: {
src: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1500&h=844&fit=crop",
alt: "Designer reviewing a layout on a laptop",
},
buttons: [{ id: "btn-1", label: "View the system", href: "https://beste.co" }],
},
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
slides | HeroSlide[] | – | Slide list; each slide carries its own badge, heading, description, image and buttons |
autoPlay | boolean | true | Auto-advances to the next slide on the interval timer |
interval | number | 6000 | Milliseconds between auto-advances |
transition | "fade" | "slide" | "zoom" | "blur" | "kenBurns" | "fade" | Which framer-motion variant set drives the slide change |
showDots | boolean | true | Shows the clickable dot pager at the bottom of the frame |
contentAlign | "left" | "center" | "right" | "center" | Horizontal anchor for the badge/heading/description/buttons column |
className | string | – | Extra classes for the outer <section> |
type HeroSlide = {
id: string;
badge?: { label: string; variant?: "default" | "secondary" | "outline" };
heading?: string;
description?: string;
image?: { src: string; alt: string };
buttons?: ButtonItem[];
};
type ButtonItem = {
id: string;
label: string;
href?: string;
variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};contentAlign drives three things at once: the flex justify-*/items-* classes on the content column, the text alignment, and the overlay gradient direction. left and right use a directional gradient (from-black/75 on the anchored side fading to transparent), while center uses a flat bg-black/45 scrim.h-[420px] → md:h-[520px] → lg:h-[620px]) and no rounded corners or max-height cap, unlike hero109's boxed card.fade, slide, zoom, blur, kenBurns), including direction-aware sliding and per-element text stagger (0.1s delay increments).contentAlign; only the horizontal anchor changes.