# 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/agency24. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-07

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. [Agency](/blocks/agency)
5. /
6. Studio Brief With Changing Plate

# Studio Brief With Changing PlateFREE

A four-step studio brief where the tall photograph beside it changes with the question on screen, each with its own caption, and sending the brief swaps the plate for the studio and the form for a ledger of the answers.

ViewCodeDocs

Base UI

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

## Agency24: Studio Brief With Changing Plate

A four-step studio brief where the tall photograph beside it changes with the question on screen, each with its own caption. Sending the brief swaps the plate for the studio and the form for a ledger of the answers.

Free block

This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.

### Installation

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/agency24"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/agency24"
```

That installs the block file, the `badge7` eyebrow and `button12` pill it is built from, and the `questionnaire` primitive.

### Quick start

tsxCopy

```
import { Agency24, agency24Demo } from "@/components/beste/block/agency24";

export default function Page() {
  return <Agency24 {...agency24Demo} />;
}
```

tsxCopy

```
import { Agency24 } from "@/components/beste/block/agency24";

export default function Page() {
  return (
    <Agency24
      badge={{ label: "Start a brief" }}
      heading="Four answers and we know whether we are the wrong studio for you."
      description="The same questions we would ask on a first call."
      shortcuts="numbers"
      steps={[
        {
          name: "work",
          title: "What are we making?",
          required: true,
          choices: [
            { value: "identity", label: "An identity" },
            { value: "site", label: "A site" },
          ],
          image: { src: "https://images.unsplash.com/photo-1583201173319-a4efa99605cf", alt: "Print" },
          caption: "Wordmark and print system for a small publisher.",
        },
        {
          name: "contact",
          title: "Where do we send the reply?",
          required: true,
          // an input step: the field writes to the same name
          input: { label: "Email address", placeholder: "you@studio.com", type: "email" },
          image: { src: "https://images.unsplash.com/photo-1777523743687-233bbfdbd894", alt: "Desk" },
          caption: "Every brief gets a written answer.",
        },
      ]}
      closing={{
        image: { src: "https://images.unsplash.com/photo-1763307411452-43cfd9f516ce", alt: "Studio" },
        caption: "This is the room your brief lands in on Monday morning.",
        title: "Brief received",
        description: "One of us replies inside two working days.",
        emptyLabel: "Left blank",
      }}
      button={{ label: "Book the intro call", href: "https://beste.co" }}
      notes={[
        {
          title: "No forms after this one",
          description: "The reply comes from the person who would run the work.",
        },
      ]}
    />
  );
}
```

### Props

| Prop        | Type                   | Default | Description                                                                     |
| ----------- | ---------------------- | ------- | ------------------------------------------------------------------------------- |
| badge       | Badge                  | –       | Parenthetical eyebrow above the heading, rendered with Badge7.                  |
| heading     | string                 | –       | Section heading.                                                                |
| description | string                 | –       | Lead paragraph, set opposite the heading.                                       |
| steps       | BriefStep\[\]          | \[\]    | The questions, each carrying the plate and caption shown while it is on screen. |
| shortcuts   | "letters" \| "numbers" | –       | Prints a shortcut on every choice of the active step.                           |
| closing     | Closing                | –       | The plate, the caption, and the ledger heading shown once the brief is sent.    |
| button      | ActionButton           | –       | Button12 pill under the ledger.                                                 |
| notes       | Note\[\]               | \[\]    | Ruled row under the brief.                                                      |
| labels      | Agency24Labels         | {}      | Overrides for the navigation buttons and the rewrite link.                      |
| className   | string                 | –       | Merged onto the section element.                                                |

tsCopy

```
type Badge = { label: string };
type ActionButton = { label: string; href: string };
type BriefImage = { src: string; alt: string };
type Note = { title: string; description: string };

type BriefStep = {
  name: string;
  title: string;
  description?: string;
  choices?: BriefChoice[];
  input?: { label: string; placeholder?: string; type?: "email" | "text" };
  required?: boolean;
  multiple?: boolean;
  image: BriefImage;
  caption: string;
};

type BriefChoice = { value: string; label: string; description?: string };

type Closing = {
  image: BriefImage;
  caption: string;
  title: string;
  description: string;
  emptyLabel?: string;
};

type Agency24Labels = {
  previous?: string;
  next?: string;
  submit?: string;
  restart?: string;
};
```

### Behavior notes

* The plate is driven by the step on screen, not by hover or by scroll. Moving with Next, Previous, or a shortcut key changes the photograph and the caption under it, so the picture is always describing the question being asked.
* Give every step an `image` and a `caption`. They are required for that reason: a step without one would leave the column showing the previous answer's picture.
* A step with `input` renders a text field under the fixed choices, or on its own when the step has no choices. It writes to the same field name, so the ledger prints what was typed.
* The questions sit directly on the page rather than inside a filled panel. One step of a brief is short, and a tinted box around it only advertises the space the step is not using. The bordered choices carry the structure instead.
* The whole brief is uncontrolled. `steps` decides the order, and the block only watches which step is active to pick the plate.
* Sending swaps the plate for `closing.image` and the form for a ledger of every step and its answer, with `closing.emptyLabel` standing in for anything left blank.
* Write a different one clears the ledger and remounts the brief at the first step, plate included.

## More Agency blocks

[View all Agency](/blocks/agency)

[](/block/agency21)

PRO

agency21

### Capabilities Accordion

Ruled, expandable capability rows with oversized type, detail copy, and monospace tag chips.

[](/block/agency14)

PRO

agency14

### Studio Team

A studio team grid of member portraits with names and roles.

[](/block/agency16)

PRO

agency16

### Studio At A Glance

Studio overview pairing facts, copy and highlight stats with a clean studio image.

[](/block/agency12)

PRO

agency12

### Studio Values

Studio values laid out with oversized ghost numerals, titles, descriptions and keywords.

[](/block/agency11)

PRO

agency11

### Studio Manifesto

Oversized editorial manifesto statement with emphasized phrases, principle chips and a founder signature.

[](/block/agency17)

PRO

agency17

### Principles Selector

Interactive principle list that swaps a detail panel with image as each is hovered.

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