Form
The one page in the kit that shadcn/ui has no component for: its three forms guides are the same bug report card behind three different libraries, so the card is what got built.
shadcn/ui has no Form component. Its three forms pages, React Hook Form, TanStack Form and Formisch, are the same card wired to three different libraries. The wiring is code; what a design file can carry is the card and the states it passes through.
The title row is a real Input instance, the description is Input Group with Type set to Textarea, and both footer buttons are Button. Switching State swaps those instances to Filled, Invalid and Disabled rather than repainting them by hand.
Three states are 464 tall. Invalid is 492, because the error message is a real row under the description rather than a replacement for it. Both sentences are on screen at once, which is what the shadcn markup does too.
Field Error, the message Field did not have
Field already carries a Data Invalid axis, but it only repaints the label and the border. It has nowhere to say what went wrong. Field Error is that sentence: one line at 14/400 in base.destructive, or a disc list when a value fails more than one rule at once.
Two variants and no icon axis, because shadcn's FieldError has no icon. The red sentence next to a red border is already the loudest thing on the card; adding a glyph would compete with the control rather than point at it.
Four forms, none of them a new component
1000 by 1342. The bug report from the docs failing validation, a sign-up card, a settings fieldset made of real Field / Legend, Field Group, Field / Separator and Field / Buttons instances, and one field failing two rules at once. Three of them are below.
Two components, six variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Form
Because all three of its forms guides, React Hook Form, TanStack Form and Formisch, show the same bug report card. The part that differs between them is the wiring, which is code. The part a design file can carry is the card and the four states it passes through, so that is what was built.
One thing: Field Error. Field already has a Data Invalid axis, but it only repaints the label and the input border; there was nowhere to say what went wrong. Everything else on the page is Field, Field Group, Field / Legend, Field / Separator, Field / Buttons, Input, Input Group and Button doing their existing jobs.
Because a value can fail more than one rule at once, and shadcn renders that as a disc list rather than a run-on sentence. Many is two rows at 14/400 in base.destructive with 4px discs and a 4px gap, which is the ms-4 list-disc gap-1 from the source.
Only Invalid, at 492 against 464. The error message is a real row under the description rather than a replacement for it, so both sentences are on screen at once. That matches the markup, where FieldDescription and FieldError are siblings.
Yes. The title row is an Input, the description is Input Group with Type set to Textarea, and both footer buttons are Button. Switching the State axis swaps those instances to Filled, Invalid (Filled) and Disabled, so the states come from the components that own them rather than from hand-applied colour.
Four forms at 1000 by 1342: the bug report failing validation, a sign-up card, a settings fieldset built from real Field / Legend, Field Group, Field / Separator and Field / Buttons instances, and one field failing two rules at once. None of them needed a new component.