shadcn.io is not affiliated with official shadcn/ui
Portfolio Manager CRUD Block for Svelte
A designer's projects as rows with a drawn cover, a title you edit in place and a star that features a project on the home page, capped at three, with a dialog that adds a project and a Remove that leaves an Undo.
Installation
Overview
Let a designer choose what the home page shows, with this portfolio manager for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds one frame of fixed height that scrolls inside itself with a row per project: a drawn greyscale cover (grid, waves, stripes or orbit), a title that is an Editable field, the year and the tags as words, a star and a Remove. The star features a project, and three is the limit: with three featured, every other star stays pressable but changes nothing, the row says "3 of 3 featured: unfeature one first" and so does the polite line. "New project", an outline Button in the header, opens a Dialog with a title, a year, a Toggle Group of the four covers and up to three comma-separated tags; Create project is the only Shine Button and the new row lands at the head and takes focus. A title must be filled and unique, and a year must be a four-digit year. Remove leaves an Undo in the foot, emptying the list shows an Empty state, and the bands are ruled by Guides. For portfolio sites, case-study lists and any list with a hard limit on what is highlighted.
FAQ
How do I fill it with my projects?
Edit PROJECTS. Each has an id, a title, a year, a cover of grid, waves, stripes or orbit, a list of tags and a featured flag. The count of featured projects, the limit sentence and the rows are derived from that list; change LIMIT to feature more or fewer. New ids come from a counter in state.
What happens at three featured?
The three featured projects keep their stars. Every other star is aria-disabled-style: it stays focusable and pressable so a keyboard user hears why, the row shows "3 of 3 featured: unfeature one first" in text, and pressing it says the same in the polite line and changes nothing. Unfeaturing one frees the others at once.
Are the covers images?
No. They are small SVG drawings in greyscale, built from the theme's foreground at different strengths, so they follow light and dark and need no files. The name of the cover is in the row's accessible text. In your app, swap Cover for an img with its alt text.
How does editing a title work?
Click the title or press its pencil, Enter saves and Escape puts the old title back. An empty title, one over 40 characters or one already in the portfolio is refused with its reason under the field, in a slot that is always there so the row never changes height.
What does Undo restore?
The last removal or rename. Removing a project stores the list as it was; Undo puts it back in its place and focuses its Remove button. Adding or starring replaces that Undo, and nothing times out.
What stays local, and how do I wire a real save?
The projects live in React state in this tab and a reload brings the original seven back; nothing is published. In your app call your API in create, star, rename and remove, and have the server enforce the limit as well, since the block only explains it.