Step 01
Understand
Listen before shaping the answer
Collect the request, its context, and the examples that reveal what a useful outcome should actually feel like.
beUI Pro for mobile is live — 50 React Native blocks and screens
How It Works
5 variants
Premium process sections that turn an abstract workflow into a clear, animated story with visible steps and purposeful product motion.
Centered process cards
how-it-works-centered-cards.tsxA centered process introduction followed by three independent cards with compact animated product scenes and clear supporting copy.
How it works
Three steps. One clear outcome.
A considered process keeps the original context connected to every decision, from the first request to the finished release.
Step 02
Align
Make one direction easy to follow
Turn the signal into a focused brief with clear decisions, an owner, and the next move everyone can see.
Step 03
Deliver
Close the loop with confidence
Review the finished work against the original intent, publish it, and keep the result visible after launch.
TSXcomponents/previews/premium/how-it-works-centered-cards-preview.tsx
import { HowItWorksCenteredCards } from "@/components/premium/how-it-works/how-it-works-centered-cards";
export function HowItWorksCenteredCardsPreview() {
return <HowItWorksCenteredCards />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
$ bunx --bun shadcn add @beui-pro/how-it-works-centered-cards
Cinematic process grid
how-it-works-process-grid.tsxA sharp three-column process narrative with all steps visible, distinct capture-to-launch illustrations, direct selection, and motion contained inside each scene.
How it works
One clear path fromraw input to release.
Capture what matters, shape it into an aligned plan, and move it live without losing the thinking that got you there.
See the workflowTSXcomponents/previews/premium/how-it-works-process-grid-preview.tsx
import { HowItWorksProcessGrid } from "@/components/premium/how-it-works/how-it-works-process-grid";
export function HowItWorksProcessGridPreview() {
return <HowItWorksProcessGrid />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
$ bunx --bun shadcn add @beui-pro/how-it-works-process-grid
Editorial story stack
how-it-works-story-stack.tsxA spacious alternating process story with large narrative typography, atmospheric shader scenes, glass interface details, and scroll-triggered editorial reveals.
A simpler way to work
From scattered contextto a confident release.
Three considered steps keep the original signal connected to every decision that follows.
1
Collect
Start with the full picture
Bring customer language, internal context, and the original request together before deciding what to build. Nothing is summarized away too early, so the team can see the evidence behind the brief and return to it when priorities change.
2
Decide
Make the next move obvious
Turn the shared context into a focused outcome, clear ownership, and a plan the whole team can follow. Make tradeoffs explicit and leave every owner with a next move they can act on without another meeting.
3
Deliver
Ship without losing the story
Review the final work against the original intent, publish it, and keep the result visible after launch. Connect the shipped version back to the decision that shaped it and leave a useful record for the next release.
TSXcomponents/previews/premium/how-it-works-story-stack-preview.tsx
import { HowItWorksStoryStack } from "@/components/premium/how-it-works/how-it-works-story-stack";
export function HowItWorksStoryStackPreview() {
return <HowItWorksStoryStack />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
$ bunx --bun shadcn add @beui-pro/how-it-works-story-stack
Guided walkthrough
how-it-works-walkthrough.tsxA focused interactive walkthrough with one atmospheric product canvas, three always-visible selectable steps, soft scene morphs, and viewport-aware autoplay.
A guided workflow
See the work take shape,one decision at a time.
Follow the complete path without hiding the context between steps.
Try the workflowMaya
Can we keep the review context beside the work?
Jon
The team needs one place to see what changed.
Customer call
Make the next step obvious without another meeting.
01ListenGather the real requestCapture the language, examples, and context behind what people are asking for.
02AlignShape one shared directionTurn the raw signal into a brief with an outcome, an owner, and a clear next move.
03ReleasePublish the finished workReview the details against the brief, move it live, and share the result with the team.
TSXcomponents/previews/premium/how-it-works-walkthrough-preview.tsx
import { HowItWorksWalkthrough } from "@/components/premium/how-it-works/how-it-works-walkthrough";
export function HowItWorksWalkthroughPreview() {
return <HowItWorksWalkthrough />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
$ bunx --bun shadcn add @beui-pro/how-it-works-walkthrough
Progressive card deck
how-it-works-card-deck.tsxAn interactive fixed-width process row that extends beyond the viewport, then pulls each full card into a layered stack as the next step takes focus.
How it works
A clear path fromfirst thought to finished work.
Move through the process one decision at a time. Use the controls to fold completed steps into the deck.
01 / 04
Collect
Start with the real context
Bring requests, notes, and examples into one place before deciding what the work should become.
02 / 04
Shape
Turn the signal into a brief
Clarify the outcome, remove the noise, and give every decision a reason the whole team can see.
03 / 04
Build
Move through one shared plan
Keep owners, progress, and review in the same flow so handoffs stay clear from start to finish.
04 / 04
Release
Ship the version everyone approved
Close the loop with a final check, publish confidently, and leave the next iteration easy to find.
TSXcomponents/previews/premium/how-it-works-card-deck-preview.tsx
import { HowItWorksCardDeck } from "@/components/premium/how-it-works/how-it-works-card-deck";
export function HowItWorksCardDeckPreview() {
return <HowItWorksCardDeck />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
$ bunx --bun shadcn add @beui-pro/how-it-works-card-deck