# 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/usecase44. 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. Situation Fit Columns

# Situation Fit Columns[PRO](/pricing)

Qualifying section describing three situations a service suits: each ruled column pairs the situation with a dotted list of tell-tale signals and a soft panel stating what changes afterwards, with nothing closing the section.

ViewCodeDocs

Base UI

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

## Usecase44: Situation Fit Columns

Qualifying section that describes the three situations your service actually suits. Each ruled column pairs the situation with a dotted list of tell-tale signals and a soft panel stating what changes afterwards, so readers can self-select before they write to you.

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

**Base UI flavor**

bashCopy

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

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

### Quick start

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

tsxCopy

```
import { Usecase44, usecase44Demo } from "@/components/beste/block/usecase44";

export default function Page() {
  return <Usecase44 {...usecase44Demo} />;
}
```

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

tsxCopy

```
import { Usecase44 } from "@/components/beste/block/usecase44";

export default function Page() {
  return (
    <Usecase44
      badge={{ label: "Who this is for" }}
      heading="Three situations we are genuinely good at."
      description="And a few we are not, which we will tell you about on the first call."
      personas={[
        {
          title: "The company that outgrew its first identity",
          situation: "Everything was designed in a weekend five years ago.",
          outcome: "A system that fits the company you became.",
          signals: ["Three versions of the logo in circulation", "New hires design from screenshots"],
        },
      ]}
      labels={{ outcomeTitle: "What changes" }}
    />
  );
}
```

### 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                         |
| personas    | Persona\[\]       | \[\]    | One ruled column per situation                                         |
| labels      | Usecase44Labels   | {}      | Fixed strings that are not content: the label above each outcome panel |
| className   | string            | –       | Extra classes for the outer <section>                                  |

tsCopy

```
type Persona = {
  title: string;
  situation: string;
  outcome: string;
  signals: string[];
};

type Usecase44Labels = {
  outcomeTitle?: string;
};
```

### Behavior notes

* The outcome panel carries `mt-auto`, so the soft blocks align across all three columns even when one signal list runs longer than the others.
* The gap above that panel comes from the signal list's own `mb-10`, not from a margin on the panel: `mt-auto` collapses to zero in the tallest column and on mobile, where nothing is left to distribute, so the spacing has to be owned by the list.
* Signals sit on `border-t border-dotted` rules, a lighter tier than the column rule, which stops a three-item list from reading as a second heading level.
* The outcome is the only tinted element in each column, which is what makes the eye land on the payoff rather than on the symptoms above it.
* `title` renders as `h3` and is deliberately a full sentence rather than a persona noun, since describing the situation converts better than naming a segment.
* Below `md` the columns stack in source order, so the first situation stays the one a phone reader sees first: order the array by how common the situation is.

## More Use Case blocks

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

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

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

PRO

usecase43

### A Day In Appointments

A use case with an eyebrow over a hairline rule, a two-column heading, and three image tiles that each float a live appointment card above a title and description.

[](/block/usecase42)

PRO

usecase42

### Multi-Site Locations

A multi-site use case with an eyebrow over a hairline rule, a two-column heading, and three image tiles that each float a live location card above a title and description.

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