Vertical numbered steps with alternating left-right image positions, descriptions, and feature lists. Perfect for explaining multi-step processes or onboarding flows.
Vertical process walkthrough where each step alternates its image between the left and right side of the row: a numbered badge, title, description, and feature checklist sit on one side while a bordered screenshot sits on the other.
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/usecase3"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/usecase3"This installs the block to components/beste/block/usecase3.tsx and the badge shadcn/ui primitive it depends on.
The installed file exports usecase3Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { UseCase3, usecase3Demo } from "@/components/beste/block/usecase3";
export default function Page() {
return <UseCase3 {...usecase3Demo} />;
}Then replace the demo with your own props. Written out, the same setup looks like this:
import { UseCase3 } from "@/components/beste/block/usecase3";
export default function Page() {
return (
<UseCase3
badge={{ label: "How It Works", variant: "secondary" }}
heading="Simple Steps to Success"
description="Follow our proven process to reach your goals faster."
steps={[
{
id: "step1",
title: "Create Your Account",
description: "Sign up in seconds with your email or social accounts.",
image: { src: "https://images.unsplash.com/photo-1551288049-bebda4e38f71", alt: "Sign up screen" },
features: [{ id: "f1", text: "No credit card required" }],
},
{
id: "step2",
title: "Configure Your Workspace",
description: "Invite your team and connect the tools you already use.",
image: { src: "https://images.unsplash.com/photo-1551288049-bebda4e38f72", alt: "Configuration dashboard" },
features: [{ id: "f2", text: "Role-based permissions" }],
},
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string; variant?: "default" | "secondary" | "outline" } | – | Pill shown above the heading; omitted when badge.label is falsy |
heading | string | – | Section heading |
description | string | – | Section intro text |
steps | UseCaseStep[] | – | Ordered process steps |
className | string | – | Extra classes for the outer <section> |
type UseCaseStep = {
id: string;
title: string;
description: string;
image?: { src: string; alt: string };
features?: UseCaseFeature[];
};
type UseCaseFeature = { id: string; text: string };UseCaseStep: String(index + 1).padStart(2, "0"), so it is always sequential regardless of id.md:order-1/md:order-2. This only takes effect at md and above; on mobile every step stacks content above image.md:mb-16 spacing except the last one, so there is no trailing gap after the final step.step.image is omitted; the content side is unaffected either way.usecase8
Centered timeline with alternating left-right content cards, icons, images, and feature lists. Perfect for showing project phases, company history, or process stages.
usecase15
Interactive step-by-step wizard with progress bar, clickable step indicators, images, and contextual tips. Perfect for onboarding flows or multi-step process explanations.
usecase12
Tab navigation showing workflow stages with split image cards featuring stats overlays and descriptions. Perfect for demonstrating product workflow or development process stages.
usecase52
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.