Search

Search components and blocks

Sign in

Form Blocks

Forms that guide people through, and show the result as they type.

Step Form

Pro

A three-step workspace setup (Name, Team, Review) with a live preview of the workspace beside it. A sliding pill marks the current step and connectors fill as you progress; finished steps are clickable to go back. The address is generated from the name as you type, and the preview card — URL, icon letter, skeleton lines that resolve into your text, and an Available badge — updates with every keystroke. Steps slide and blur by direction, Continue fakes an availability check, and creating ends on a confirmation.

pnpm dlx shadcn@latest add @ditherui/step-form

Create a workspace

Free for teams of up to five. You can invite people once it's set up.

Name your workspace

This is how your team will find you. We'll turn it into an address you can change on the next step.

teamly.app/yourteam
NameDescriptionTeam type
0/3 floors built

Props

className / ...div propsReact.ComponentProps<"div">—

Suggested components