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.
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.
Radix flavor
npx shadcn add "https://ui.beste.co/r/saas108"Base UI flavor
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.
import { Saas108, saas108Demo } from "@/components/beste/block/saas108";
export default function Page() {
return <Saas108 {...saas108Demo} />;
}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,
},
]}
/>
);
}| 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. |
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[] };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.steps than the step it gates, otherwise a branch could close under the person standing on it.md breakpoint and moves above it below that, where it becomes a compact list with a rule under it.saas105
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.
saas14
Three-step onboarding process with numbered circles and connecting lines. Perfect for explaining product workflows or signup processes.
saas98
Feature split pairing a focused pitch with a built monochrome app-window mockup of skeletons, nav, and metrics.
saas104
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.