shadcn.io is not affiliated with official shadcn/ui
Split Layout Checkout Block for Ark UI
A checkout split into an order pane and a details form on a divider you drag or move with the arrow keys, with minimum widths, a summary that stays in view and shipping that follows the ZIP code.
Installation
Overview
Show the order and ask for the details side by side, with this split-layout checkout for React with Ark UI. A compact header from Zinnia Works, a ceramic tile maker, sits over one hairline panel in two panes. The start pane is the order: three lines read only, each with a drawn tile, its name, quantity and line total, and a summary of subtotal, shipping, tax and total that stays in view while the page scrolls. The end pane is a short form: email, name and ZIP in Fields, each with a rule and a reserved problem line. The divider between them is a focusable handle. Drag it, or focus it and press the arrow keys, Home or End; both panes keep a minimum width so neither breaks. The ZIP's first digit picks a delivery zone, so shipping and the total follow what you type, and until the ZIP is valid the summary says what is missing instead of guessing. Continue to payment is the one Shine Button. It's built from Field, Input, Shine Button and Guides, with a CSS entrance only. For tiles, furniture, bulk orders and any checkout where the buyer wants to keep the order in sight.
FAQ
How do I resize the panes without a mouse?
Tab to the divider, which is named "Resize the order and details panes", and press Left or Right to move it two percent, Home for the narrowest order pane and End for the widest. Under a right-to-left layout the arrows mirror, so the arrow that points toward the order pane always grows it. The polite status line names the sizes ("Order pane 46%, details 54%.") only after a keyboard move, so dragging with a pointer is never announced.
Can a pane get too small?
No. The order pane stays between 30 and 60 percent of the panel, which keeps the line totals readable in the start pane and the labels and fields whole in the end pane. The limits are two constants at the top of the file.
What happens on a phone?
The divider is gone and the panes stack, the order first and the details form under it, so the summary is the first thing read and the Continue button stays pinned to the bottom of the screen. The sizes you chose on a wide screen are ignored below the medium breakpoint.
How is shipping worked out?
From the first digit of a valid five-digit ZIP: 0 to 3 is the East zone, 4 to 6 Central and 7 to 9 West, each with its own price in whole cents. Tax is six percent of the goods, rounded to the cent. Until the ZIP is valid the shipping row reads "After your ZIP" and the total is labelled "Total before shipping", so no figure is a guess.
What does Continue to payment check?
The email must look like an address, the name needs two characters and the ZIP five digits. A field shows its problem after you leave it, or all of them when you press Continue; the press says how many fields need fixing and moves focus to the first. When everything passes it says the details are checked and that payment is next, and goes no further.
What stays local, and how do I connect it for real?
All of it: the lines, the zones and the tax rate are typed in the file and nothing is sent or saved. To connect it, replace LINES with your cart, replace zoneOf and taxOf with your shipping and tax service (call it when the ZIP becomes valid), and have Continue post the details to your checkout session before routing to payment.