shadcn.io is not affiliated with official shadcn/ui
First Project Success Block for React
A confirmation page for a first project: the new project as three facts, four firsts in a grid of hairline cells with the next one lit and each pickable to read what it takes, one Open the project button and a thin fall of confetti that plays once.
Installation
Overview
Mark a first project as a first, and point at the next one, with this confirmation page for React with Base UI. It is the Buildhearth page after an app builder's first project was created, a whole screen with the page's rails and one band across it: a check in a tile, the heading, one sentence and the new project as three facts (its name, the framework and the region). Under them four firsts sit in a grid of hairline cells, two by two on a phone: First project, earned; First deploy, next up; First teammate and First custom domain, locked. Each cell is a native radio, so a visitor can pick one and read what earning it takes in the page's one live line. The one primary is the Shine Button Open the project. A thin fall of Confetti plays once behind the band and fades away. Nothing was created. For builders, deploy tools and any product with a ladder of first steps.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was created, deployed or earned. The project, the framework and region, and the four firsts with their dates and hints are typed constants at the top of the file, and the page only reads them. To wire it, fill PROJECT, FRAMEWORK and REGION from the project your API just created and each first's earnedOn from the person's achievements; the one that comes first without a date is the next one up, and the locked ones follow from it, so nothing is typed twice. Point Open the project at the project's own route.
How does the confetti behave, and what if it is off?
It plays once when the page opens: a thin, calm fall behind the band that is masked away towards the foot, fading out after four seconds and then removed. It never loops and is not started again. With reduced motion it is not shown at all, and the page is the same without it: the heading, the facts, the four cells and the button are all in place whether it falls or not. It is hidden from assistive technology.
How are earned, next and locked told apart?
By words and glyphs, never by colour: Earned with a check and its date, Next up with an arrow in a solid chip, and Locked with a lock. The icon tile is filled for an earned first, outlined for the next one and dashed for a locked one. The picked cell also gets a heavier edge, so what you picked and which first is next up stay two different things.
How do I use the cells with a keyboard?
The four cells are one group of native radio buttons named "Your firsts": Tab enters the group, the arrow keys move between the cells and pick them, and the picked cell has a focus ring inside it. Picking only changes the sentence under the grid (for example "First teammate unlocks after First deploy. Invite one person to the project."); it does not earn or unlock anything.
Related
- Pro
Project Created Success
Account lifecycleA confirmation page for a new project: the repository as three facts and a themed code box with bun, pnpm, npm and yarn tabs, each with the same four lines and a button that copies the open tab, over one Open the dashboard button.
- Pro
A page for a finished workspace setup: a full progress bar over five ticked steps with their dates, three launch rows for what to do next, and a quiet fall of confetti that stops with reduced motion.
- Pro
A project step split in two: a name with the key its tasks will carry and a three-way choice of how to start, beside a drawn board that follows the choice.
- Pro
First Project Empty State
First runA full-height first-run screen for a weekly planner: a name field and one Create project button at the start, and at the end a drawn drafting table whose blank sheet is only dashed until the project exists.
- Pro
A page for the week weekly active users passed 10,000: a greyscale medal, a line of twenty weeks with the crossing marked and described in text, a ring of the way to the next milestone, and a quiet fall of confetti.
- Pro
A page for reaching a new level: the XP a lesson earned counted up, a bar that wraps from a full Level 4 to Level 5 with its 20 XP carry-over, three unlocked perks, and a quiet fall of confetti.