Patterns

Patterns in Aura are the ways components combine, not a separate visual language. Three are specified: Radix composition, the form system, and the spacing rhythm for sections and dense data. A pattern library of named page templates is not defined beyond that.

Compose with asChild

Components sit on Radix primitives. asChild merges the primitive’s behavior onto your element instead of rendering the default one. The child has two jobs: spread incoming props onto the DOM node, and forward the ref. You can nest primitives (a tooltip and a dialog on one trigger) when each child still forwards both.

Changing the element means you keep it operable. A trigger that becomes a link still needs to be focusable and respond to keyboard and pointer.

The full walkthrough, including nested primitives, is the composition handbook.

Forms

Forms are a pattern with a single error channel:

1. Hold state with useFormDynamic(initialValues, formRef?).
2. Wrap fields in <Form ref={formRef} onSubmit={...} errors={errors} id="...">. Errors are not passed per field. Form matches instancePath to field.name.
3. Validate with validateFormData(schema, formData.getValues()). On failure, call touchForm() and pass errors to Form.
4. Submit with <FormSubmit form={id} fetchStatus={...}>.
5. For Select, Combobox, Editor, SignaturePad, and SortableList, write changes through field.setValue.

That contract is the form rule and DESIGN.md appendix B.

Section rhythm

Asymmetric overlap — a rounded-xl panel with a negative margin and a stacking order — is described in DESIGN.md §5 as an editorial option. It is not a component.

Related

• Handbook — Composition
• Handbook — Customization
• Components
• Layout
• DESIGN.md §4 and §5