# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/usecase49. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-07-29

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Use Case](/blocks/use-case)
5. /
6. Audience Tabs With Photo

# Audience Tabs With Photo[PRO](/pricing)

Pill tabs for each audience swap a split panel holding a tall photograph beside a title, summary and ruled list of what that audience actually gets.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/usecase49`

## Usecase49: Audience Tabs With Photo

The same project explained to different rooms. Pill tabs switch the audience, and the panel below swaps its photograph, statement, summary and ruled list of outcomes to match.

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.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/usecase49?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/usecase49.tsx` plus the `badge7` eyebrow it uses.

### Quick start

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

tsxCopy

```
import { Usecase49, usecase49Demo } from "@/components/beste/block/usecase49";

export default function Page() {
  return <Usecase49 {...usecase49Demo} />;
}
```

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

tsxCopy

```
import { Usecase49 } from "@/components/beste/block/usecase49";

export default function Page() {
  return (
    <Usecase49
      badge={{ label: "Depends who is asking" }}
      heading="The same project, explained to three different rooms."
      description="Founders, marketing leads and the people who will maintain it want different answers."
      tabs={[
        {
          label: "Founders",
          title: "What it costs you and what it buys back",
          summary: "One fixed price, one named lead and a schedule you can put in front of a board.",
          src: "/audiences/founders.jpg",
          alt: "Team working at a long shared table",
          outcomes: [
            { title: "No open-ended hours", description: "Fixed scope and a written estimate." },
            { title: "One person answerable", description: "The lead who sat in the first call." },
          ],
        },
        {
          label: "Marketing",
          title: "Pages you can update without a designer",
          summary: "Templates, components and written rules, handed over with a session.",
          src: "/audiences/marketing.jpg",
          alt: "Studio monitor showing a layout in progress",
          outcomes: [{ title: "Every state drawn", description: "Empty and error states included." }],
        },
      ]}
    />
  );
}
```

### Props

| Prop        | Type              | Default | Description                                     |
| ----------- | ----------------- | ------- | ----------------------------------------------- |
| badge       | { label: string } | –       | Eyebrow label rendered as a Badge7              |
| heading     | string            | –       | Section heading in the left header column       |
| description | string            | –       | Supporting paragraph in the right header column |
| tabs        | AudienceTab\[\]   | \[\]    | Audiences, first one selected on mount          |
| className   | string            | –       | Extra classes for the outer <section>           |

tsCopy

```
type AudienceTab = {
  label: string;
  title: string;
  summary: string;
  src: string;
  alt: string;
  outcomes: OutcomeRow[];
};

type OutcomeRow = {
  title: string;
  description: string;
};
```

### Behavior notes

* The first tab is selected on mount, so the panel is never empty and the section reads as a page rather than a prompt.
* Tabs are real `button` elements carrying `aria-pressed`, with the selected one inverted to `bg-foreground text-background` and the rest bordered, so the state is announced as well as drawn.
* The tab row is `flex-wrap`, so a long audience name such as "The team who keeps it" drops onto a second line at full size instead of compressing the others.
* Outcomes render as a ruled list, each row on `border-t py-5`, so a two-outcome audience and a three-outcome one both look deliberate.
* The photograph changes ratio with the viewport: `aspect-[4/3]` on mobile becomes `md:aspect-[4/5]`, so the panel keeps a portrait plate beside the copy on desktop and a landscape band on a phone.
* Every audience supplies its own picture, which is what stops the section from reading as one photograph with three captions.
* Copy is capped at `max-w-lg` inside the panel, so the summaries share a measure and differences in length read as content rather than layout.

## More Use Case blocks

[View all Use Case](/blocks/use-case)

[](/block/usecase48)

PRO

usecase48

### Stacked Photo Bands

Three tall photographic bands stacked full width, each carrying an eyebrow, display title, explanation, one outcome figure and its own outline pill link over a tinted scrim; the three-column foot only forms from lg up so the sentence keeps its measure on a tablet.

[](/block/usecase14)

PRO

usecase14

### Segmented Control Tabs

Segmented control style tabs with split layout showing image, description, and bullet point features. Perfect for comparing solution approaches or product capabilities.

[](/block/usecase45)

PRO

usecase45

### Alternating Scenario Rows

Three use cases as image and text rows, each numbered and carrying a story, two ruled outcome figures and its own outline pill link; pictures stay top-aligned and the side only alternates from lg, so a tablet keeps every image at the top left.

[](/block/usecase1)

PRO

usecase1

### Interactive Tab Showcase

Tab-based use case section with images, descriptions, and feature checklists that collapse to accordion on mobile. Perfect for showcasing how different teams or departments use your product.

[](/block/usecase47)

PRO

usecase47

### Job Index With Image Panel

Ruled index of jobs on the left that swaps the panel beside it, where each selection brings its own photograph, explanation and two ruled outcome figures.

[](/block/usecase51)

PRO

usecase51

### Two Route Photo Columns

Two picture-led routes side by side, each with an eyebrow, title, dotted-rule expectations list and its own pill CTA, separated on desktop by a small pill divider sitting between the columns.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.