shadcn.io is not affiliated with official shadcn/ui
Project Created Success Block for Radix UI
A 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.
Installation
Overview
Hand people the first commands the moment a project exists, with this confirmation page for React with Radix UI. It is the Trellisly page after a 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, the repository as three facts (its name, the default branch and the region) and a code box that follows the theme. The box has Tabs for bun, pnpm, npm and yarn, each holding the same four lines (clone, enter, install, start) with that installer's own commands, and a Copy Button that copies the open tab's lines. The one primary, the Shine Button Open the dashboard, is pinned to the foot of a phone's screen. Nothing was created. For starter kits, app builders and any tool that ends a create flow on a repository.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was created or cloned. The repository name, the branch, the region, the clone address (a .example host) and the four installers' commands are typed constants at the top of the file. To wire it, fill REPO, BRANCH, REGION and CLONE_URL from the project your API just created, keep the commands of the installers you support in MANAGERS, and point Open the dashboard at the project's own route. The commands are built from those constants, so nothing is typed twice.
What changes between the tabs?
Only the install and start lines: the clone and the folder are the same, so bun shows bun install and bun dev, npm shows npm install and npm run dev, and yarn shows yarn and yarn dev. The tabs follow the library's own keys (arrow keys move between them, Home and End go to the first and last), and the box keeps the same height whichever tab is open.
What does the copy button copy?
The four lines of the open tab as plain text, one per line, without the dollar sign that is drawn before each line (it is not selectable and screen readers skip it). The polite status says "Copied the pnpm commands." and, if the browser refuses the clipboard, "Couldn't copy. Copy the commands by hand." Nothing else on the page is copied.
Is the code box dark?
No. It follows the theme, light in a light theme and dark in a dark one, so it never clashes with the page, and its text is the foreground colour. Each tab's commands sit in a named, focusable region that scrolls sideways inside the box, so a long clone address never widens the page on a phone.