# 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/usecase45. 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. Alternating Scenario Rows

# Alternating Scenario Rows[PRO](/pricing)

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.

ViewCodeDocs

Base UI

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

## Usecase45: Alternating Scenario Rows

Three use cases told as alternating image and text rows. Each is numbered and carries a story, two ruled outcome figures and its own outline pill link, with the image side flipping on every second row so the page keeps a rhythm without repeating a layout.

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

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/usecase45.tsx` plus the `badge7` eyebrow and `button12` pill button it uses.

### Quick start

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

tsxCopy

```
import { Usecase45, usecase45Demo } from "@/components/beste/block/usecase45";

export default function Page() {
  return <Usecase45 {...usecase45Demo} />;
}
```

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

tsxCopy

```
import { Usecase45 } from "@/components/beste/block/usecase45";

export default function Page() {
  return (
    <Usecase45
      badge={{ label: "Where it fits" }}
      heading="The same practice, doing three different jobs."
      description="Each started as a single request and turned into a longer relationship."
      scenarios={[
        {
          index: "01",
          title: "A press that needed readers, not a rebrand",
          description: "We rebuilt the reading order first and only then drew anything.",
          image: { src: "/work/press.jpg", alt: "Open print publication" },
          results: [
            { title: "Catalogue completion", value: "Doubled" },
            { title: "Print run", value: "12,000 copies" },
          ],
          button: { label: "Read the case", href: "/work/press" },
        },
      ]}
    />
  );
}
```

### Props

| Prop        | Type              | Default | Description                                    |
| ----------- | ----------------- | ------- | ---------------------------------------------- |
| badge       | { label: string } | –       | Eyebrow label rendered as a Badge7             |
| heading     | string            | –       | Section heading in the left column             |
| description | string            | –       | Supporting paragraph, right-aligned from md up |
| scenarios   | Scenario\[\]      | \[\]    | One alternating row per use case               |
| className   | string            | –       | Extra classes for the outer <section>          |

tsCopy

```
type Scenario = {
  index: string;
  title: string;
  description: string;
  image: { src: string; alt: string };
  results: ScenarioResult[];
  button: ActionButton;
};

type ScenarioResult = {
  title: string;
  value: string;
};

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

### Behavior notes

* The flip is done with `index % 2 === 1 && "lg:[&>*:first-child]:order-last"`, so the DOM order stays image-then-text for every row and only the visual order alternates; a screen reader hears the same sequence throughout.
* Rows align on `md:items-start`, so a short picture sits at the top of its row rather than floating in the middle of a taller text column, and the alternation only starts at `lg`: on a tablet every image stays top left.
* `index` is a string, not a number, so a row can read `01`, `A` or `Case 4` and the block never reformats or renumbers it.
* Each scenario carries its own `button`, since these usually deep-link to different case studies; the tone is fixed to outline so no row competes with the page's primary CTA.
* Results are `dt`/`dd` pairs on their own `border-t` rules, matching the ruled treatment used for figures across the set rather than a boxed stat card.
* Images sit in an `aspect-[4/3]` box with `object-cover` and no hover effect, so any source crop works and nothing moves under the pointer.

## More Use Case blocks

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

[](/block/usecase41)

PRO

usecase41

### Role Use Case Cards

A use-case section with an eyebrow over a hairline rule, a two-column heading, and three bordered role cards with an icon chip, a role label, a title, a description, and an arrow link.

[](/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.

[](/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/usecase2)

FREE

usecase2

### Use Case Card Grid

Responsive grid of use case cards with hover effects, images, descriptions, and feature checklists. Perfect for displaying solutions for different industries or customer segments.

[](/block/usecase49)

PRO

usecase49

### Audience Tabs With Photo

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.

[](/block/usecase53)

PRO

usecase53

### Single Case Photo Story

One client story told in three photographed steps, opening with the client name on a ruled block beside the heading and closing with three oversized outcome figures.

## 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.