# 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/saas108. 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. [SaaS](/blocks/saas)
5. /
6. Branching Scoping Form

# Branching Scoping FormFREE

A contact section that asks a branching set of questions instead of one long form: a rail lists the steps that currently apply and lets you jump between them, and answering the first question adds or removes the steps below it.

ViewCodeDocs

Base UI

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

## Saas108: Branching Scoping Form

A contact section that asks a branching set of questions instead of one long form. A rail lists the steps that currently apply and lets you jump between them, and answering the first question adds or removes the steps below it.

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/saas108"
```

**Base UI flavor**

bashCopy

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

That installs the block file, the `badge6` eyebrow and `button1` seal CTA it is built from, and the `questionnaire` primitive. The rail and the branching live in the block file itself, so there is nothing else to wire up.

### Quick start

tsxCopy

```
import { Saas108, saas108Demo } from "@/components/beste/block/saas108";

export default function Page() {
  return <Saas108 {...saas108Demo} />;
}
```

tsxCopy

```
import { Clock, Lock } from "lucide-react";
import { Saas108 } from "@/components/beste/block/saas108";

export default function Page() {
  return (
    <Saas108
      badge={{ label: "Talk to us" }}
      meta="Five questions"
      heading="Tell us what you are building, not your company size"
      description="The questions change as you answer them."
      outlineHeading="Scope your project"
      shortcuts="numbers"
      labels={{ submit: "Send scope", rail: "Your outline" }}
      confirmation={{ title: "Scope sent" }}
      steps={[
        {
          name: "use-case",
          title: "What are you building?",
          shortTitle: "Project",
          required: true,
          choices: [
            { value: "marketing", label: "A marketing site" },
            { value: "app", label: "A customer-facing app" },
          ],
        },
        {
          name: "cms",
          title: "Where does the content live?",
          shortTitle: "Content",
          when: { step: "use-case", equals: ["marketing"] },
          choices: [
            { value: "headless", label: "A headless CMS" },
            { value: "files", label: "Markdown in the repository" },
          ],
        },
      ]}
      assurances={[
        {
          title: "One working day",
          description: "A solutions engineer replies with a plan, not a brochure.",
          icon: Clock,
        },
        {
          title: "Only what you answered",
          description: "Steps the outline closed are never sent.",
          icon: Lock,
        },
      ]}
    />
  );
}
```

### Props

| Prop               | Type                   | Default | Description                                                 |
| ------------------ | ---------------------- | ------- | ----------------------------------------------------------- |
| badge              | Badge                  | –       | Eyebrow above the rule, rendered with Badge6.               |
| meta               | string                 | –       | Short line beside the eyebrow, across the hairline divider. |
| heading            | string                 | –       | Section heading.                                            |
| description        | string                 | –       | Section description under the heading.                      |
| outlineHeading     | string                 | –       | Heading in the header strip of the outline card.            |
| outlineDescription | string                 | –       | Description in the header strip of the outline card.        |
| steps              | OutlineStep\[\]        | \[\]    | The questions, in the order they are asked.                 |
| shortcuts          | "letters" \| "numbers" | –       | Prints a shortcut on every choice of the active step.       |
| labels             | OutlineLabels          | {}      | Overrides for the navigation buttons and the rail heading.  |
| confirmation       | Confirmation           | {}      | Copy for the banner shown above the step after submit.      |
| button             | ActionButton           | –       | Button1 seal CTA inside the confirmation banner.            |
| assurances         | Assurance\[\]          | \[\]    | Three reassurance cards below the outline.                  |
| className          | string                 | –       | Merged onto the section element.                            |

tsCopy

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

type Assurance = { title: string; description: string; icon?: LucideIcon };
type Confirmation = { title?: string; description?: string };

type OutlineStep = {
  name: string;
  title: string;
  shortTitle?: string;
  description?: string;
  choices?: OutlineChoice[];
  input?: { label: string; placeholder?: string };
  required?: boolean;
  multiple?: boolean;
  when?: OutlineCondition;
};

type OutlineChoice = { value: string; label: string; description?: string };
type OutlineCondition = { step: string; equals: string[] };
```

### Behavior notes

* A step carrying `when` is only asked while the named step's answer is one of `equals`. Until then it is dropped from the rail, from the step count, and from navigation, and its field is left out of the submitted answers.
* The gating step has to come earlier in `steps` than the step it gates, otherwise a branch could close under the person standing on it.
* Every row of the rail is a real button that jumps straight to that step, so the flow is not one-way. The rail only ever lists steps that currently apply, so a jump cannot land on a closed branch.
* The rail marks each step as it is answered or skipped, and the mark on the active step is drawn from the primitive's own status rather than from a separate count.
* Submitting shows a confirmation banner above the step instead of unmounting the form, so the answers stay on screen and stay editable.
* The rail sits to the left of the question from the `md` breakpoint and moves above it below that, where it becomes a compact list with a rule under it.

## More SaaS blocks

[View all SaaS](/blocks/saas)

[](/block/saas105)

PRO

saas105

### Migration Source Selector

A migration section where your current system is picked from frosted glass cards floating on a photo panel, swapping the right side to a plain-language summary, a checked list of what carries across, the typical timeline, and a caveat.

[](/block/saas14)

PRO

saas14

### How It Works Steps

Three-step onboarding process with numbered circles and connecting lines. Perfect for explaining product workflows or signup processes.

[](/block/saas98)

PRO

saas98

### SaaS Interface Split

Feature split pairing a focused pitch with a built monochrome app-window mockup of skeletons, nav, and metrics.

[](/block/saas104)

PRO

saas104

### Plan Comparison Table

A comparison section with an eyebrow over a hairline rule, a two-column heading, and a scrollable three-plan feature table with check, dash, and text cells and a highlighted plan column.

[](/block/saas101)

PRO

saas101

### Three Tier Pricing

A pricing section with an eyebrow over a hairline rule, a two-column heading, and three plan cards with light prices, checked feature lists, and an accent-highlighted popular tier.

[](/block/saas100)

PRO

saas100

### Billing Split

A split section with an eyebrow, light heading, checked bullet list, and accent button on the left, and two stacked image tiles floating live billing micro-assets on the right.

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