shadcn.io is not affiliated with official shadcn/ui
Split Layout Form Builder Hero Block for React
A reverse split hero for a form builder: a builder window with a palette and a canvas of fields in a hairline frame with + marks, then a divider, the headline, three checks and a Shine Button.
Installation
Overview
A reverse split hero for Brimform, a no-code form builder, on drafting lines: the builder window sits at the start in a hairline frame with + marks on its corners, a solid divider runs down the column, and the copy sits at the end between solid rails: an announcement link, the headline, a sentence, three checks and a Shine Button with an outline second action. The builder has a palette of field types (Text, Email, Select, Date, Checkbox) and a canvas of four fields drawn with our real Input, NativeSelect and Checkbox; the Team size field is outlined with a dashed line, and a Date field is mid-drag, held over a drop line between two fields. The Publish button is drawn in foreground tones, so the Shine Button stays the page's one primary action. For form builders, survey tools, no-code platforms and lead-capture products.
FAQ
How do I change the palette and the placed fields?
Edit the constants at the top of the file. Each entry in FIELD_TYPES is a label and a Lucide icon. Each entry in FIELDS has a label, a kind (text, email, select or checkbox), a placeholder for the empty field and selected, which draws the dashed outline; outline one field at a time. DROP_AFTER is how many fields come before the drop line, and DRAGGED is the name on the chip being dragged. The count above the canvas is worked out from the list.
Why use real form controls in a picture?
So the builder looks like the forms your product makes. The canvas uses the same Input, NativeSelect and Checkbox as the rest of your app, so heights, borders, radius and focus colours follow your theme without a separate set of fake shapes. The whole builder is inert, so none of them can be focused, typed in or ticked.
Can I turn the canvas into a working builder?
Keep the field list in state, render it the way the canvas does, and add a drag-and-drop library to place and reorder fields; the palette's items become the things you drag. Take the builder out of aria-hidden and inert once it works, and give each control a visible label with our Field parts. In the hero, keep it a picture: it sells the product, it doesn't run it.
How are the frame and the divider drawn?
With our Guides component, in solid hairlines. The section's rails and top rule come from <Guides bleed marks="top" rules="top" />, the frame around the builder from <Guides extend="sm" marks="corners" /> and the divider from a border-s on the copy's cell with a + mark where it meets the top rule. Below lg the divider is a rule between the stacked parts.
How does a screen reader read the hero?
It reads the announcement link, the headline (the block's one h1), the paragraph, the checklist and the two links. The builder is a picture of the product, so it's hidden from screen readers and marked inert: its controls are out of the tab order and can't be changed. The checklist's ticks are hidden too. The copy comes first in the document and the builder is moved to the start of the row only on wide screens, so the reading and tab order never change.
How does the builder fit on a phone?
The parts stack below the lg breakpoint, copy first and the builder under it, with the Shine Button on the first screen. Below sm the palette keeps only its icons, so the canvas has the room for full-width fields down to 320 px. It's all CSS, with no animation library, and nothing loops. With reduced motion on, both parts appear in place.
Related
- Pro
Split Signup Form Hero
Signup and waitlistA split hero with a sign-up form on the page: copy and ticks at the start, and a card in card form at the end with a work email, a password and a Shine Button that shows a spinner, then a confirmation.
- Pro
Split Kanban Board Hero
Product windowsA reverse split hero for a sprint planner: a wide board window that runs flush to the start rail and fades at its foot, with a card mid-drag over a drop slot, then a divider and the copy with a Shine Button.
- Pro
Split Spreadsheet Grid Hero
Product windowsA split hero for a finance spreadsheet: copy and a Shine Button at the start, and a wide sheet at the end that runs off the panel's rail and foot, with a formula bar, a total row, a tinted range and a teammate's cursor.
- Pro
Split Integration Flow Hero
Diagrams and mapsA split hero for a metrics pipeline: the headline and a Shine Button beside a divider and a flow diagram in a hairline frame, with a closing band of three proof cells.
- Pro
Centered Multi Step Form Hero
Signup and waitlistA centered signup hero whose form is a three-step wizard in a card in card, account, plan and payment, that checks each step's fields before the next and ends on a confirmation.
- Pro
Split Layout Overlapping Browser Frames Hero
Product windowsA split hero for a design tool: a headline, a Shine Button, a second action and three short feature ticks beside two overlapping browser windows that run off the edge of the column: a projects list behind an editor.