shadcn.io is not affiliated with official shadcn/ui
Project Board CRUD Block for React
A design agency's projects as hairline cards with an editable name and owner, progress moved in steps of ten, a status segment, a dashed ghost card that becomes a form, and a delete that names the tasks and files it takes along.
Installation
Overview
Keep a studio's projects where everyone can see them, with these project cards for React with Base UI. A hairline frame with a plus mark on each corner holds five cards in a grid inside a frame of fixed height, three across from a wide screen. A card's name and owner are each an Editable that opens where it sits; a Progress bar moves in steps of ten points with a minus and a plus button, and a Segment Group sets the status: On track, At risk or Paused. The last cell is a dashed ghost, "New project", that turns into a name and owner form in the same box, and its Create project button is the only Shine Button. Delete opens an Alert Dialog that says what goes with the project, "Its 12 tasks and 3 files are deleted with it", and then leaves "Deleted Harbour redesign" in the cell at the same height, with an Undo. The grid is ruled by Guides, and an Empty state shows when every card has been deleted. For project lists, client work, campaigns and any record that owns others and takes them along when it goes.
FAQ
How do I use my own projects?
Edit START: a project has an id, a name, an owner, a progress from 0 to 100 in tens, a status (on-track, at-risk or paused) and its tasks and files counts. The counts in the delete dialog, the card foot and the header are all derived from them.
How do I edit a name or an owner?
Press the text, or the pencil that appears on hover and on focus, type and press Enter or the check; Escape or the cross cancels. An empty value is refused and the old one stays, with a line in the status. Progress changes by ten with the plus and minus buttons, and at 0 or 100 the button answers in the status and does nothing.
How does the ghost card work?
It is a button until pressed, then the same box holds a name field, an owner field and Create project. Both fields are required, and the reason shows in a line that is always there. Cancel puts the dashed card back and returns focus to it; a new card starts at 0% and focus goes to its name.
What does Delete take along, and how does Undo work?
The dialog counts the project's tasks and files before you confirm. Confirming turns the card into a placeholder of the same size, so nothing around it moves, and its Undo brings the project back with all of them. Placeholders stay until the page is reloaded, each with its own Undo.
What stays local, and how do I wire a real save?
Cards live in state in this tab and a reload restores the five; nothing is sent. In your app write each change from rename, reown, setStatus, step, create and remove, and make the delete one transaction that removes the tasks and files with the project.