DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.6K
Sign inGet All-Access
Categories
App ShellAdded 10 new app shell blocks31
Auth20
Card43
Chart30
Dashboard8
Dialog14
Empty State14
Event Calendar6
Flow4
Form12
  • Form 6
  • Form 1
  • Form 2
  • Form 3
  • Form 4
  • Form 5
  • Form 7
  • Form 8
  • Form 9
  • Form 10
  • Form 11
  • Form 12
Gantt4
Kanban Board10
List11
Navbar13
Onboarding9
Profile10
Schedule10
Settings16
Sheet11
Stats15
Timeline9
Wizard7

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.

  • Form 6 Business Verification Review Page with Editable Detail Sections and Dialog Forms
  • Form 1 Profile settings card form with completion badge and date-plus-time availability picker
  • Form 2 Hosted checkout setup form with label-and-control rows, Select dropdowns, and checkbox groups
  • Form 3 Invoice creator form with editable line-items table and live discount, tax, and total summary
  • Form 4 Authentication settings form with line tabs for email, phone, password, passkey, and lockout policy
  • Form 5 Tabbed user profile settings form with sticky audit rail and activity heatmap
  • Form 7 Inline-editable ticket details panel with per-row save, status and SLA badges, tags and owner chips
  • Form 8 API keys management panel with per-stack env snippet quick-copy and reveal, rotate, revoke rows
  • Form 9 Enterprise member invite form with searchable role permission tree and access guardrails
  • Form 10 Customer onboarding intake form in a Card with labeled rows and multi-owner combobox
  • Form 11 New App Launch Form with Gradient Summary Banner and Label-Control Rows
  • Form 12 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 (307) Browse 307 Shadcn Application blocks across 22 categories.
  • Shadcn Data Grid Blocks (38) Browse 38 Shadcn Data Grid blocks across 8 categories.
  • Shadcn Solutions Blocks (66) Browse 66 Shadcn Solutions blocks across 9 categories.
  • Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
  • Shadcn Marketing Blocks (60) Browse 60 Shadcn Marketing blocks across 8 categories.
  • Shadcn AI & Agents Blocks (17) Browse 17 Shadcn AI & Agents blocks across 2 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.

Application

  • App ShellAdded 10 new app shell blocks
  • Auth
  • Card
  • Chart
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Schedule
  • Settings
  • Sheet
  • Stats
  • Timeline
  • Wizard

Solutions

  • Agents
  • AI Ops
  • Analytics
  • Billing
  • Bookings
  • CRM
  • Files
  • Inventory
  • Users

AI & Agents

  • AI Chat
  • Agent Activity

Templates

  • E-commerce
  • SaaS
  • Dashboard
  • Landing
  • All templates

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist
  • Shop Hero

Data Grid

  • BaseAdded a rate card Data Grid block with a price breakdown dialog
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Marketing

  • Blog
  • CompareNew Compare category with 3 versus section blocks
  • Contact
  • CTAAdded 11 new CTA blocks
  • FAQ
  • Hero
  • How It WorksNew How It Works category with 5 numbered step blocks
  • PricingNew Pricing category with a 4-tier pricing table block

Resources

  • Components
  • Blocks
  • Icons
  • MCP for Agents
  • Docs
  • Support
  • Pricing
  • Tailwind Plus Alternative
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.6K
  1. Blocks
  2. Application
  3. Form

Shadcn Form Blocks for Invoicing and Admin Screens

Share

The free shadcn inputs are the layer below this. These 12 blocks are the screens on top: invoice builders with live totals, inline-saving rows, role trees.