Profile Hero With Chart

Hero124: Profile Hero With Chart

Two-column studio-profile hero: an eyebrow, heading, supporting copy and a CTA on the left, beside a muted stage on the right that hosts the Ai6 piece, a labeled dial visualization whose marker position is driven entirely by the control prop.

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

Base UI flavor

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

This installs the block to components/beste/block/hero124.tsx, the badge7 eyebrow badge and button12 CTA button it renders through, the ai6 piece that draws the dial visualization on the right, and its dependencies.

Quick start

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

import { Hero124, hero124Demo } from "@/components/beste/block/hero124";

export default function Page() {
  return <Hero124 {...hero124Demo} />;
}

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

import { Hero124 } from "@/components/beste/block/hero124";

export default function Page() {
  return (
    <Hero124
      badge={{ label: "Profile" }}
      heading="Calm brands. <strong>Sharp products.</strong> Built to last."
      description="Auralis is a two-person studio for founders who would rather ship one considered thing than ten loud ones."
      button={{ label: "Read the studio dossier", href: "https://beste.co" }}
      control={{
        value: 0.35,
        label: "Studio dial",
        lowLabel: "Restraint",
        highLabel: "Expression",
      }}
    />
  );
}

Props

type Badge = { label: string };
type ActionButton = { label: string; href: string };
type Control = {
  value: number;
  label: string;
  lowLabel: string;
  highLabel: string;
};

Behavior notes

• The right column is a static min-h-[20rem]/lg:min-h-[26rem] muted stage that only renders anything when control is provided; there is no placeholder or fallback state when it is omitted, so the stage is left empty rather than showing default Ai6 values.
• control.value (expected as a 0-1 fraction) sets the marker's left offset along a fixed sky-to-amber-to-rose gradient track inside Ai6; the piece itself clamps the resulting percentage with Math.max(0, Math.min(100, value * 100)), so out-of-range numbers are rendered safely rather than pushing the marker outside the track.
• Unlike the sibling heroes in this family, hero124 fills its visual side with a live rendered piece (ai6) instead of a photo, so control fully replaces the imageSrc/imageAlt pattern used elsewhere in the set.
• heading, badge, and button follow the same shared markup as the rest of the family: <strong> accent via dangerouslySetInnerHTML, Badge7 for the eyebrow, and Button12 (default dark tone) for the CTA.