shadcn.io is not affiliated with official shadcn/ui
Repeatable Group Quote Form Block for Solid
A quote form of repeatable line-item groups, each with a description, quantity, unit price and computed amount, Duplicate and Remove, and whole-cent subtotal, VAT and total, with an empty state when the last is removed.
Installation
Overview
Add up a list of things that each have several fields, with this repeatable group form for Solid with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner. Each quote item is a native fieldset with a legend ("Item 2") holding a description, a quantity and a unit price in Inputs, its amount, and Duplicate and Remove buttons. On a wide screen the groups line up under one set of column heads; on a phone each is a small stacked group. Amounts, the subtotal, VAT at 20% and the total are whole cents worked out from the fields. Add item and Duplicate focus the new item's description; Remove moves focus to the item before it, or to Add item. Removing the last shows an Empty state, "No items yet", and Save quote then asks for one. The Shine Button is the only colored control. It's built from Input, Button, Empty, Label, Shine Button and Guides, with a CSS entrance only. For invoices, quotes, orders and any form of repeated records.
FAQ
Why whole cents?
Prices are parsed from text into integer cents, multiplied by the quantity and summed, and VAT is rounded once on the subtotal, so the figures never carry a floating-point tail and the total is always the sum of what you see. Prices are typed as 45 or 45.50.
Why text fields for quantity and price?
They are plain inputs with a numeric keyboard hint, checked by the block, so they behave the same on every library and can show a problem in words instead of silently rounding. Swap in a number field if your project prefers one.
What does Duplicate do?
It inserts a copy of the item right after it, with a new key, and focuses the copy's description, so repeated lines such as pipe fittings take one press and an edit.
What happens when I remove every item?
The list keeps its height and shows an empty state with Add item. Save quote with no items says "Add at least one item." and moves focus to Add item.