Installation
Nothing to add. This component ships as source in your download, so it is already in your project.
src/vui/profile-form.tsx@viliha/vui-react/profile-formThe exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.
Usage
import { ProfileForm } from "@viliha/vui-react/profile-form";Exports
Everything this family exports. They are read from the source, so this list is what the package actually ships.
| Prop | Type | Default |
|---|---|---|
| ProfileForm | component | — |
ProfileForm props
| Prop | Type | Default | What it does |
|---|---|---|---|
| data | T | null | — | The record to show. `null` renders the loading skeleton. |
| fields | RecordField<T>[] | — | Fields, grouped into sections with each field's `group` (any title). |
| onSave | (next: T) => void | — | Persist the edited record. Called on Save; the form returns to view mode. |
| getPrimary | (row: T) => { title: string; initials: string; subtitle?: string; } | — | Header/initials for the record. |
| title? | string | "Profile" | Collection/section title (breadcrumb parent + form heading). |
| singular? | string | "profile" | Singular noun used in the default breadcrumb ("Update {singular}"). |
| icon? | IconType | — | |
| formDescription? | string | — | Intro text for the "About" info panel beside the form. |
| columns? | 1 | 2 | 2 | Section layout: 1 or 2 columns. Default 2. |
| onExit? | () => void | — | Pressed on Close/back in view mode (e.g. navigate away). |
| onHome? | () => void | — | Navigate Home from the breadcrumb. |
| crumbs? | Crumb[] | — | Breadcrumb override (defaults to Home › {title} › {record}). |
| loading? | boolean | — | Force the loading skeleton. Defaults to `data == null`. |
Customize
Every value this component draws comes from the theme: the colours, the radius, the control height and the type scale. Change a token and this moves with everything else, which is the difference between theming the product and overriding a component. See Theming for the token contract, and Swapping defaults for replacing the markup itself.