Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CRUD blocks

Pro

Template Gallery CRUD Block for React Aria

A project starter kit with version numbers: template cards with a drawn preview over your projects, a dialog that makes a project from a template, Save as template, Edit template with a version bump and a confirmed delete.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Turn repeat work into templates and templates into projects with this template gallery for React with React Aria. Template cards show a name, a category, a version badge such as v1.2 and a drawn greyscale preview, over a list of "Your projects". Use this template opens a Dialog for the new project's name and puts a copy at the top of the list: "Created Q4 launch from Launch plan v1.2". Save as template on a project copies it back as v1.0. Edit template changes the name or category and raises the version by one minor step on save, while projects already made keep their copies. Delete template asks in an Alert Dialog how many projects were made from it, then leaves a line in the foot with Undo. For project starters, document templates and any record that can both make and become a template.

FAQ

How do I add my own templates?

Edit TEMPLATES: each has a name, category, major, minor and shapes, the rows of the drawn preview written as a spec such as "6|2,4|3,3" (column spans out of six). PROJECTS holds the starting list and what each was made from.

How does the version change?

Saving an edit adds one to the minor number (v1.2 becomes v1.3); the dialog tells you the new number before you save. A template saved from a project starts at v1.0. Nothing else changes a version, and the major number is yours to set in the data.

Does a project follow its template?

No. A project keeps the copy it was made with and the name and version it came from, "From Launch plan v1.1". Editing or deleting a template never reaches back, and the delete dialog says how many projects keep their copies.

What does Delete template ask?

An alert dialog with Keep template first and Delete template as the destructive action. It says how many projects were made from the template. Delete leaves a line in the foot with Undo that brings the template back in its place.

What stays local, and how do I wire it?

Templates and projects live in state in this tab and a reload brings the first ones back. In your app call your API from create, saveAs, save and remove, and copy the template's content on the server when a project is made so the copy is real.

How does it look on a phone?

The cards become one column in a frame of fixed height with its own scroll, and the project rows put Save as template under the name when there is no room. Both frames keep their height when a list is short or empty.

All 100 crud blocks