shadcn.io is not affiliated with official shadcn/ui
First Project Onboarding Block for React Aria
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.
Installation
Overview
Name a first project and choose how it begins, with this setup step for React with React Aria. It is a step of Seedlaith, a garden-planning app, as a whole screen: the page's rails and one band, split in two from the large breakpoint. The first half has the step header (“Step 3 of 5” and a hairline), the heading, a project name with the key its tasks will carry (Seed tray calendar gives SEED-1, SEED-2 and on) and a Segment Group of three ways to start: Blank, From a template or Import. The pane under it changes with the choice and all three share one cell, so nothing moves: a sentence, a Native Select of three templates with their page counts, or a file picker that reads only the name and size of a CSV or JSON. The second half draws the board the choice would make, three lanes of greyscale cards that follow the name, the key and the pick; on a phone it is dropped and one sentence says the same. Create project is the one Shine Button, with a ghost Skip for now.
FAQ
How do I change the templates?
Edit TEMPLATES: each has an id, a title, the number of pages it makes and the number of starter cards (tasks) shown on the board, up to nine. The select's labels, the sentence under it, the caption and the drawn board all read the same entry, so they cannot disagree. Keep the first letters of the titles different, so typing a letter on the native select jumps to the right one.
How is the key made?
keyOf takes the first word of the name, drops accents and anything that is not a letter, upper-cases it and keeps four letters: Seed tray calendar gives SEED, Garden beds gives GARD. A name with no letters falls back to TASK. The key is shown in the hint under the field, on the drawn board and in the summary, and tasks would be numbered from 1.
What does Import do with the file?
The button opens the browser's own file picker. The demo reads only the file's name and size, so a text file is refused (“That file is not a CSV or JSON.”) and one over 5 MB is refused too, each in the line under the button. Nothing is parsed or uploaded; the board shows the file's rows as stand-in cards. In your app read the rows where read says so and send them to your import endpoint.
What if the name is empty or no file is chosen?
Create project stays in the tab order and looks quiet until the name is long enough (and a file is chosen when Import is picked). Pressing it says what is missing and puts focus there: the name field, or the Choose a file button. The lines are always reserved, so nothing moves.
What stays local in the demo, and how do I wire it?
Everything: Create project only says it was saved in this demo, and no project, key or task exists anywhere. In your app create the project where submit says so, using the name, the way to start and the chosen template id or the imported rows. Skip for now says it was skipped and keeps the choices.