Principles Selector

Agency17: Principles Selector

Interactive list of studio principles where hovering, focusing, or clicking a title swaps a sticky detail panel's copy and cross-fades to that principle's photo, so the panel never mounts or unmounts, only the active image's opacity changes.

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

Base UI flavor

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

This installs the block to components/beste/block/agency17.tsx, the badge6 component it uses for the section eyebrow, and its dependencies.

Quick start

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

import { Agency17, agency17Demo } from "@/components/beste/block/agency17";

export default function AboutPage() {
  return <Agency17 {...agency17Demo} />;
}

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

import { Agency17 } from "@/components/beste/block/agency17";

export default function AboutPage() {
  return (
    <Agency17
      label="How We Work"
      heading="Three principles that shape every project we ship"
      principles={[
        {
          title: "Measure before you spend",
          description: "Every dollar gets a job and a number to hit before it moves.",
          image: {
            src: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1200&h=750&fit=crop",
            alt: "Analytics dashboard charting performance",
          },
        },
        {
          title: "Creative is the variable",
          description: "Targeting plateaus fast; the creative is where the leverage lives.",
          image: {
            src: "https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=1200&h=750&fit=crop",
            alt: "Designers reviewing creative concepts on a wall",
          },
        },
      ]}
    />
  );
}

Props

type Principle = {
  title: string;
  description: string;
  image: { src: string; alt: string };
};

Behavior notes

• Selection state (active, defaulting to index 0) is driven by onMouseEnter, onFocus, and onClick on each list button, so keyboard tabbing and pointer hover both switch the panel, not just clicking.
• The detail panel is lg:sticky lg:top-24, staying pinned in the viewport while the list scrolls alongside it on tall pages.
• Every principle's image is rendered simultaneously, stacked with absolute inset-0; only opacity (0 or 100, 500ms transition) toggles per image, so switching principles cross-fades instead of swapping src.
• The active list item's index and title turn text-primary; inactive items only pick up text-primary on hover via group-hover/agency17.
• Index numbers are zero-padded (01, 02, …) regardless of how many principles are passed.