Slideshow Hero with Click Controls

Hero137: Slideshow Hero with Click Controls

Full-bleed monochrome hero that crossfades across a set of slides, navigated by explicit previous/next arrow buttons and a row of clickable dots, with an automatic loop running underneath and a caption tying the active slide's category and name to a position counter.

Installation

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/hero137?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero137?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero137.tsx, the button12 component it uses for the CTA, and its dependencies.

Quick start

The installed file exports hero137Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero137, hero137Demo } from "@/components/beste/block/hero137";

export default function Page() {
  return <Hero137 {...hero137Demo} />;
}

Then replace the demo with your own props. Written out, the same setup looks like this:

import { Hero137 } from "@/components/beste/block/hero137";

export default function Page() {
  return (
    <Hero137
      heading="Work that holds its shape in any light."
      button={{ label: "See the full catalogue", href: "/work" }}
      items={[
        {
          image: {
            src: "https://images.unsplash.com/photo-1487014679447-9f8336841d58?w=1920&h=1200&fit=crop",
            alt: "Concrete stairwell lit from a single window",
          },
          category: "Spatial study",
          name: "Margin House",
          href: "/work/margin-house",
        },
        {
          image: {
            src: "https://images.unsplash.com/photo-1493934558415-9d19f0b2b4d2?w=1920&h=1200&fit=crop",
            alt: "Folded paper sculpture in soft shadow",
          },
          category: "Object",
          name: "Fold No. 4",
          href: "/work/fold-no-4",
        },
      ]}
    />
  );
}

Props

type ActionButton = { label: string; href: string };

type SlideItem = {
  image: HeroImage;
  category: string;
  name: string;
  href: string;
};

type HeroImage = { src: string; alt: string };

Behavior notes

• The slideshow auto-loops every 5000ms via setInterval, slower than the 4000ms interval used by the other crossfade heroes in this set, and each crossfade transition itself runs 1000ms (versus the 700ms used elsewhere).
• Explicit circular previous/next buttons wrap the active index with modulo arithmetic (goPrev/goNext), and a row of dots lets a click jump straight to any slide; neither control pauses or resets the automatic loop timer.
• The caption row shows the active slide's category and name joined by an aria-hidden separator glyph, plus a tabular-nums 01 / 04-style position counter aligned to the far right.
• Previous/next buttons and the dot row only render when there is more than one item (total > 1); with a single slide the hero shows just the heading and CTA with no visible controls.