Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Quick Actions Sandbox Onboarding Block for Ark UI

A document workspace's first four moves as a sandbox panel: four rows with Try and Undo buttons beside a small drawn workspace that adds a document, a teammate, a connected app and a reminder.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people try the four first moves before they commit to any, with this sandbox for React with Ark UI. It is a setup panel of Swiftholm, a document workspace: a list of four actions (create a document, invite a teammate, connect an app, set a reminder), each with a Try button, beside a small drawn workspace with a document list, a stack of people, an app and a reminder. Pressing Try changes the drawing (a document row appears, a second person joins the stack, an app reads Connected, a reminder is set for Friday), the count and a hairline Progress follow, and the same button becomes Undo. A sentence under the drawing is worked out from what you did. On a phone the workspace sits under the list. There is no Shine Button, since every row is its own action.

FAQ

What does each Try do?

Each one changes a part of the drawn workspace and nothing else: a new document row replaces its dashed placeholder, Noor's initials fill the second slot of the people stack, the Slack tile reads Connected, and the reminder row reads “Reminder set for Friday”. Every part keeps its box, so nothing moves when it changes, and Undo puts it back.

Where do the counts and the sentence come from?

From one list of what was tried. The count, the progress bar, the buttons' labels and the sentence under the drawing (“The workspace now has 3 documents, 2 people, Slack connected and a reminder for Friday”) are all worked out from it. The weekday is worked out from a fixed date, not from the clock.

What stays local in the demo, and how do I wire it?

All of it. Nothing is created, sent, connected or scheduled; each press says so in a polite status line (“Invited Noor to the workspace. Nothing was sent.”). In your app call your own create, invite, connect and reminder functions from press, and keep the drawing as the confirmation of what happened.

How does Undo work?

The button's label and its look change with the action's state, but it is the same button in the same place, so focus stays on it after you press. Its accessible name always says the action: “Try: Create a document”, then “Undo: Create a document”.

How do I use my own four actions?

Edit ACTIONS (a title, a hint, and the sentences said after it is tried and taken back), the matching Glyph icons, and the parts of Workspace each one changes. Keep it to four: the point is that each one visibly does something.

How does it look on a phone?

The panel is one column: the list first, then the drawn workspace under it with its sentence. The Try buttons keep a fixed width, so the rows never shift when they become Undo.

All 100 onboarding blocks