CRUD admin panels

List-edit-delete screens, inline editing, bulk actions and audit rows.

Nearly every internal tool is the same four screens — list, detail, create, edit — plus a delete confirmation, and building them from scratch each time is how a week disappears. These are that set, with the parts that usually get skipped: optimistic updates that roll back visibly, bulk selection that survives a filter change, and an audit column so "who changed this" has an answer.

12 matching12 blocksFree to copy
Open the full page for this block

Create Record Form

A full-page create form with a guidance rail and a Save-and-create-another that keeps the shared fields - the shape a record with more than six fields actually needs.

CRUD408 lines1 dep
Open the full page for this block

Create Record Modal

Three fields over the list they add to, with the new row appearing behind the dialog rather than after it closes.

CRUD262 lines1 dep
Open the full page for this block

Create Record Drawer

A long create form in a side drawer: the fields scroll, the header and the action bar do not, and the list stays legible beside it.

CRUD336 lines1 dep
Open the full page for this block

Record Detail Page

The read view arranged by what a reader came for - a verdict band of four facts, then details, then the related records a field dump can never show.

CRUD314 lines1 dep
Open the full page for this block

Record Quick Look

The verification modal from a table row: copyable identifiers, no editing, nothing scrolling, and the row still marked behind it.

CRUD244 lines1 dep
Open the full page for this block

Edit Record Form

An edit page that shows the diff - per-field change markers carrying the previous value, a per-field revert, and a Save button that counts what it will write.

CRUD259 lines1 dep
Open the full page for this block

Edit Record Modal

The edit modal including the parts nobody draws: the in-flight state, the rejected save that keeps your typing, and the conflict when someone else got there first.

CRUD248 lines1 dep
Open the full page for this block

Field-Level Edit Drawer

The save-on-blur model, with per-field confirmation, per-field failure and a written-in-this-session log - the only honest answer to what did I just change.

CRUD327 lines1 dep
Open the full page for this block

Cascade Delete Dialog

Deleting a record other records depend on: dependents counted and grouped by fate - deleted, orphaned, retained - with a guard that scales to the blast radius.

CRUD262 lines1 dep
Open the full page for this block

Record Created State

The screen after the write: the reference copyable, next actions ranked rather than listed, and an undo window that counts down honestly and then says why it is gone.

CRUD260 lines1 dep
Open the full page for this block

Bulk Edit Drawer

One change applied to many records that disagree - mixed values shown as mixed, untouched fields never written, and skipped rows counted before you commit.

CRUD229 lines1 dep
Open the full page for this block

Archive and Restore

The bin with the clock on it: days until purge per row, who archived it, and a restore disabled with a reason when the parent has already gone.

CRUD277 lines1 dep

Questions about crud admin panels

Inline editing or a detail form?
Inline for one or two fields people change often; a form for anything with validation across fields. Inline editing that silently fails on save is the failure mode to design against — show the row in an error state rather than reverting it quietly.
What should bulk delete confirm?
The count and the type — "Delete 14 customers?" — and it should list them if there are few enough. A bulk action whose scope is invisible is one selection bug away from a bad day.
Are these crud admin panels free to use?
All 12 are free to copy and use in your own projects, including commercial ones. A Pro licence exists for redistribution — shipping them inside a product other people buy — and the full terms are on the licence page.
How do I add one to my project?
Install it with the CLI: `npx hoverlab add crud-create-form` writes the component and its dependencies into your project. Every artifact here also has a copy button for the raw source, and an "Open in sandbox" link if you would rather try it first.