# 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/usecase47. 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. Job Index With Image Panel

# Job Index With Image Panel[PRO](/pricing)

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.

ViewCodeDocs

Base UI

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

## Usecase47: Job Index With Image Panel

A ruled index of jobs on one side, and on the other the selected job's photograph, statement, story and results. Selecting an entry swaps the whole panel; the CTA lives under the index.

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

**Base UI flavor**

bashCopy

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

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

### Quick start

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

tsxCopy

```
import { Usecase47, usecase47Demo } from "@/components/beste/block/usecase47";

export default function Page() {
  return <Usecase47 {...usecase47Demo} />;
}
```

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

tsxCopy

```
import { Usecase47 } from "@/components/beste/block/usecase47";

export default function Page() {
  return (
    <Usecase47
      badge={{ label: "Pick a job" }}
      heading="Same studio, four very different afternoons."
      labels={{ indexTitle: "The jobs" }}
      entries={[
        {
          label: "Launching something new",
          title: "A name, a face and a shelf to stand on",
          description: "Naming, packaging and the first run of photography, as one parcel.",
          src: "/jobs/launch.jpg",
          alt: "Unbranded paper packaging",
          results: [
            { title: "Weeks to shelf", value: "14" },
            { title: "Ranges launched", value: "Eleven" },
          ],
        },
        {
          label: "Fixing what exists",
          title: "Keeping the good half, replacing the rest",
          description: "An audit of what already works, then surgery rather than a rebuild.",
          src: "/jobs/fix.jpg",
          alt: "Type specimen sheets on a table",
          results: [{ title: "Assets retained", value: "Two thirds" }],
        },
      ]}
      button={{ label: "Talk through your job", href: "/contact" }}
    />
  );
}
```

### Props

| Prop      | Type              | Default | Description                                         |
| --------- | ----------------- | ------- | --------------------------------------------------- |
| badge     | { label: string } | –       | Eyebrow label rendered as a Badge7                  |
| heading   | string            | –       | Section heading above the two columns               |
| entries   | UseCaseEntry\[\]  | \[\]    | Jobs in the index, first one selected on mount      |
| button    | ActionButton      | –       | Outline Button12 under the index                    |
| labels    | Usecase47Labels   | {}      | Fixed strings that are not content: the index title |
| className | string            | –       | Extra classes for the outer <section>               |

tsCopy

```
type UseCaseEntry = {
  label: string;
  title: string;
  description: string;
  src: string;
  alt: string;
  results: CaseResult[];
};

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

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

### Behavior notes

* The first entry is selected on mount, so the panel is never empty and the section reads as a page rather than a prompt.
* Index rows are real `button` elements with `aria-pressed`, each opening on a `border-t` rule, so the list reads as a ruled index rather than a stack of tabs.
* Selection is shown by weight of colour on the label (`text-foreground` against `text-muted-foreground`) with a transition, which keeps the index quiet while still making the current row obvious.
* The CTA sits under the index rather than under the panel, so it stays visible whichever job is selected and never pushes the results off the fold.
* The panel column is wider than the index (`md:grid-cols-[1fr_1.5fr]`), so the photograph gets the room and the index stays a list.
* Results render as a real `dl` in two columns, each on its own rule, so a job with one result and a job with two both look deliberate.
* Below `md` the index stacks above the panel in source order, so a phone reads the list of jobs first and then the selected one.

## More Use Case blocks

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

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

PRO

usecase52

### Placement Mosaic Grid

Six application tiles alternating between landscape and portrait crops, each captioned on a rule with where the work lands, what it is applied to and the constraint it has to survive.

[](/block/usecase12)

PRO

usecase12

### Workflow Stage Tabs

Tab navigation showing workflow stages with split image cards featuring stats overlays and descriptions. Perfect for demonstrating product workflow or development process stages.

[](/block/usecase50)

PRO

usecase50

### A Day In The Tool

Showcase built as a ruled timetable: selecting an hour swaps a soft panel that floats the matching interface piece over a dotted field, then explains the moment and states one outcome on its own rule.

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

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