Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Avatar Upload Onboarding Block for Ark UI

A picture step split in two: the member's initials turn into a round cropper for a file chosen on the device, and the crop shows live at 96, 40 and 24 pixels.

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 a new member put a face to their name without leaving the sign-up flow, with this picture step for React with Ark UI. It is a whole screen of Moothall, a community forum: the page's rails and one band, split in two. The first half has the step header ("Step 2 of 5" and a hairline), the heading and a square frame holding the member's initials. Choose a picture opens the file picker (File Upload: one PNG, JPEG or WebP up to 4 MB), and the frame becomes the Image Cropper with a round selection: drag it, or focus it and press the arrow keys to move it and plus or minus to zoom, or use the Zoom Slider. The second half shows the crop live at 96, 40 and 24 pixels, as a profile, a post and a mention show it, and how much of the picture it keeps. Remove goes back to the initials. Continue is the one Shine Button, with a quiet Skip for now. No photo is shipped: the frame holds initials until the visitor chooses a file.

FAQ

Is the picture uploaded?

No. The file is read in the tab: it is shown through an object URL, its pixel size is read once so the cropper can match its shape, and the URL is released when the picture is removed, replaced or the page goes. The page says so under the button. In your app, crop with the cropper's own export and send the result where submit says so.

Can the crop be made without a mouse?

Yes. Tab to the circle (it is named "Crop selection area") and press the arrow keys to move it; plus and minus zoom, and the Zoom slider does the same. The three previews follow every move, because they read where the circle sits on the picture rather than keeping a copy.

What if the file is not a picture, or too big?

It is refused in words under the buttons: "notes.txt is not a PNG, JPEG or WebP." or "photo.png is 6.2 MB. The limit is 4 MB." A file the browser cannot decode is refused too. The line is always reserved, so nothing moves, and the status line says which file was not used.

How are the three sizes drawn?

Each preview is a round box with the picture inside it, sized and offset by three CSS properties worked out from the circle's place on the picture. Because every share is measured against the picture's width, a picture that is not square keeps its shape. Before a picture is chosen they show the initials.

What do Continue and Skip do?

Continue without a picture says "Choose a picture, or skip for now." and puts focus on Choose a picture; with a picture it says it saved your crop in this demo. Skip for now says it was skipped, keeps what is chosen and leaves the rest for Settings.

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

Everything: nothing leaves the browser, and a reload forgets the picture. Wire Continue to an upload of the cropped image, set the new picture as the member's and revoke the object URL once it has been sent.

All 100 onboarding blocks