Shadcn Form Blocks for Invoicing and Admin Screens

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

When to use

New record entry: an invoice with line items, a product, an app launch, an onboarding plan or a member invite
Editing a record already on file, such as a user profile, a support ticket or a business verification
Admin configuration pages for hosted checkout, sign-in methods and lockout rules, or API keys

When not to use

An account area that swaps team, notification and billing panels from a side rail or tabs: use the Profile blocks
A list of toggles for notification channels, app integrations or workspace options: use the Settings blocks
A create, invite or connect flow that opens over the current page in a modal: use the Dialog blocks

Agent notes

Each submit handler calls preventDefault and sends no request; post the values to your API from it
Save feedback calls toast from sonner; mount the sonner Toaster once in your layout or no message shows
Each block sets its own min-h-svh wrapper, padding and max width in page.tsx or its root component; drop them inside an app shell

Third-party API docs

Sonner v2: API reference, docs, used by 12 of 12 blocks
React DayPicker v9: API reference, docs, used by 3 of 12 blocks
date-fns v4: docs, used by 2 of 12 blocks
Base UI v1: API reference, docs, llms.txt, used by 2 of 12 blocks
Headless Tree v1: API reference, docs, used by 1 of 12 blocks

Markdownhttps://web.dev.reui.io/blocks/application/form.md

MCPsearch({ query: "form", type: "block", category: "form" })

Full index for agents:llms.txtReUI MCP setup

Assembled Form Screens, Not Another Input Wrapper

Every block here is a complete form screen rather than a wrapper around a submit handler. The parts that usually cost the most time are already assembled: an editable line-item table with a subtotal, discount, tax and total panel that recomputes as you type, a support ticket panel where each field enters edit mode on its own and saves with an async toast, and a masked API key list with copy, reveal, rotate and revoke on every row.

The primitives underneath stay familiar. Rows are built from shadcn Field, Select, RadioGroup, Switch and Combobox, wrapped in ReUI Frame panels with Badge for status, so you can bind them to your own validation and submission layer without unpicking the layout.

The set covers the admin surfaces most products end up needing: profile and account settings, authentication policy, hosted checkout configuration, business verification review, workspace and app creation, product catalog entry, and team invites with scoped roles.

All Form Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

Business Verification Business Verification Review Page with Editable Detail Sections and Dialog Forms
Profile Settings Profile settings card form with completion badge and date-plus-time availability picker
Checkout Setup Hosted checkout setup form with label-and-control rows, Select dropdowns, and checkbox groups
Invoice Creator Invoice creator form with editable line-items table and live discount, tax, and total summary
Auth Method Settings Authentication settings form with line tabs for email, phone, password, passkey, and lockout policy
Member Profile Admin Tabbed user profile settings form with sticky audit rail and activity heatmap
Ticket Properties Inline-editable ticket details panel with per-row save, status and SLA badges, tags and owner chips
API Keys Manager API keys management panel with per-stack env snippet quick-copy and reveal, rotate, revoke rows
Role Permission Invite Enterprise member invite form with searchable role permission tree and access guardrails
Customer Onboarding Customer onboarding intake form in a Card with labeled rows and multi-owner combobox
Deploy App Setup New App Launch Form with Gradient Summary Banner and Label-Control Rows
New Product Form Ecommerce product creation form with image upload, pricing, inventory, and collections combobox

Composite Forms the Input Primitives Do Not Give You

These assemblies are the reason to start here rather than from a blank Field row.

Invoice and line-item builders pair a customer Combobox, date pickers, currency and term selects, and an editable Table of line items with a live subtotal, discount, tax and total panel.
Inline-editable detail panels let each field edit in place with save, cancel and a saving toast, next to status, priority, SLA, due-date, tag and owner chips for helpdesk and issue trackers.
Searchable role permission trees use ReUI Tree with a search box, checkbox scopes and privileged-role badges, alongside email chips, workspace and expiry selects and SSO switches for RBAC invites.
API key management rows mask, reveal, rotate and revoke keys, copy per-framework env snippets, and open a create-key Dialog with scopes, owners and an expiration date.
Read-only review pages present legal, public and ownership details as Frame panels that each open their own edit dialog, which is how verification and compliance screens stay scannable.

How Saving and State Are Handled

Settings-style forms carry a save and discard footer with a confirmation toast, so a dirty form is obvious before anyone navigates away.
Per-row inline editing commits one field at a time with cancel and an async saving state, which suits detail panels better than one large submit.
Summary panels stay read-only and open a Dialog to edit, keeping long review pages readable without turning every value into an input.
Multi-value fields use Combobox chips for specialties, collections, owners and invite emails instead of stacked checkbox lists.
Completeness is reported with ReUI Badge and shadcn Progress, so a long profile form tells the user what is still missing.

Tabs, Rails and Layout Choices

Longer configuration screens split by Tabs rather than scrolling. Line tabs switch between email, phone, password, passkey, protection and user model panels on the authentication settings page, each with switches, radio groups, tooltips and Pro or Beta badges. A Profile, Organizations and Security split drives the admin profile editor, which also carries a sticky audit rail of IDs and timestamps plus an activity heatmap.

Simpler entry forms stay in a single Card of label and control rows: company name, slug and intent for a new workspace, an app launch form with a gradient banner that mirrors your picks live, hosted checkout configuration with checkbox groups, and product creation with a multi-image dropzone, currency InputGroup pricing, SKU and stock fields and collection multi-select.

Related Shadcn Application Block Categories

Settings for preference pages where the screen is mostly grouped toggles and options rather than data entry.
Wizard when one long form should become several validated steps with progress and back navigation.
Dialog for the modal edit and confirmation surfaces these review pages open per section.
Sheet for record editing in a side panel that keeps the list behind it in context.
Profile for the read-first version of an account screen, with avatars, bios and activity.
Onboarding for first-run setup, where the same fields are spread across a guided flow.

All Shadcn Block Groups

Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.

Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.

Frequently Asked Questions

What is actually included in a form block?

The whole screen: layout, label and control rows, local state for every field, the toast or footer that confirms a save, and supporting panels such as a totals summary, an audit rail, a role tree or an activity heatmap. Data is realistic placeholder content you swap for your own. No backend, API route or persistence layer is included.

Do these forms depend on a form library?

No. Fields are wired with plain React state, so nothing conflicts when you connect react-hook-form, TanStack Form, Zod or a server action. The rows are standard shadcn Field, Input, Select and Combobox markup, which is exactly what a form library expects to take control of.

Can I restyle them to match my design system?

Yes. Each block ships for both the Base UI and Radix registries and inherits your ReUI style, radius and color tokens, so control heights and corner radii follow the rest of your app. After install the files live in your repo as ordinary Tailwind CSS classes, so nothing is hidden behind a theme prop.

How do I install one?

Open the block page and copy its shadcn CLI command, for example pnpm dlx shadcn@latest add @reui/form-3 for the invoice builder. The CLI copies the source and its component dependencies into your project, so you own the code. It works on any project already running shadcn/ui, including Next.js, Vite, Remix, Astro and TanStack Start.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.