About this block

Review and Submit Card is the final step of a project creation wizard, summarising three sections in a labeled definition list layout: Project details (Checkout Redesign, owned by Acme, improving conversion on the payment step), Team (Avery Stone as owner, Jordan Lee and Priya Nair invited, visibility Private to members), and Environment (main branch, Node 20 LTS, auto deploy On). Each section has an inline Edit link that returns to the relevant step. A terms checkbox confirms the user understands that submitting creates the project, sends invite emails, and triggers the first deploy; Submit is disabled until the box is checked.

Sections are a const array with a rows sub-array; the agreed checkbox is local useState. Both footer messages repeat the same honest note: nothing is created until you submit.

When to use

Reach for this block as the last card in any multi-step wizard, wired to your form state. Populate the rows from the data collected in earlier steps and route the Edit links back to the correct step index.

A natural flow around it on an Application Pro page:

Before

• Onboarding step
• Repeatable rows form

After

• Activity feed
• Empty state

What you can display

One strong use is a project creation confirmation step. Other review card contexts:

• Workspace invite review. Summarises role, seats consumed, and billing impact before sending.
• Destructive action confirmation. Replaces the terms copy with an explicit list of what will be deleted.
• Plan upgrade review. Shows old plan, new plan, proration, and next billing date before charging.

Tip: repeat the nothing happens until you submit note in both the description and the footer; users skim one or the other, rarely both.