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.
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.hero109
Contained 16:9 hero carousel with badge, title, description, and CTA over an image background. Auto-rotates with centered, clickable dots at the bottom — same carousel engine as hero19 but not full-height.
hero7
Centered hero with optional badge, heading, description, dual action buttons, and a featured image below. Perfect for product launches and landing pages.
hero111
Two-column hero with heading, description, icon-only feature list, and CTA on one side and a square image on the other. Image position is configurable.
hero122
Centered typographic hero on a muted card with an oversized heading, inline CTA, and a bottom monospace meta row of three labels.
hero120
Centered editorial hero with eyebrow, large heading, description, dual dark and outline CTAs, and a wide 16:9 image with a mono caption below.
hero20
Two-column carousel with animated content transitions, thumbnail strip navigation, and vertical progress indicator. Perfect for product showcases and feature highlights.