KQ-1696 · NAME/PLATE

Name Plate

The workspace-creation step: as a name is typed its letters are set onto a plate that swings into the preview sidebar on a pendulum spring — slid along the rail on springs.glide, tilted, and falling through a few decaying swings to hang from its nail — while the address forms beneath the name with each new letter dropping in on springs.flick. Every keystroke is a small impulse to the same pendulum, a new colour re-tints the plate with a bigger push, the address is checked live with a status icon that morphs on springs.snap, and a taken address offers alternatives. Icons and colours are radiogroups the arrow keys move through, Create may return a promise, and a failed create keeps every field.

KQ-1696 · NAME/PLATE

Name your workspace

You can change all of this later

fieldline.app/harbour-crew · checking address

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/name-plate

Props

value / defaultValue: NamePlateValue; default — / defaultNamePlateValue; The name, address, icon and colour, controlled or initial.
onChange: (value: NamePlateValue) => void; default —; Fires from the field, chip or radio that changed it, with the whole value.
onCreate: (value: NamePlateValue) => void | Promise<unknown>; default —; Create was pressed with a valid, available address. Return a promise to show it working; a rejection keeps every field and shows its message.
icons: NamePlateIcon[]; default defaultNamePlateIcons; The icons on offer, { id, label, icon }; eight Lucide glyphs by default.
colors: NamePlateColor[]; default defaultNamePlateColors; The colours on offer, { id, label, value }; six token hues at a fixed lightness by default.
addressPrefix: string; default "fieldline.app/"; What comes before the address slug.
takenAddresses: string[]; default defaultNamePlateTaken; Addresses already in use, checked after a 250 ms pause in typing.
checkAddress: (slug: string) => "available" | "taken" | Promise<…>; default —; Asks the host whether an address is free, sync or async; only the newest answer counts. Overrides takenAddresses.
plateStyle: "enamel" | "brass" | "timber"; default "enamel"; An enamel sign in the colour with a cream inset rule, an engraved brass plate with screw heads and a colour inlay, or a timber board with a painted panel.
swingAmount: number; default 0.6; How lively the pendulum is, 0 to 1: the entrance tilt, the impulses and the damping ratio (0.62 down to 0.1).
accent: string; default "var(--accent-bright)"; The form's accent: the chosen icon's ring, the primary button and the rail's nail. Any CSS colour.
nav: string[]; default ["Inbox", "Jobs", "Crews", "Reports"]; The preview sidebar's sections.
maxLength: number; default 32; The longest name allowed; the counter in the field shows it.
maxHeight: number; default 560; The tallest the step grows before its body scrolls, px.
disabled: boolean; default false; Nothing can be changed or created; fields turn read-only and the step dims.
className: string; default —; Classes for the outer section.

Prop	Type	Default	Description
value / defaultValue	NamePlateValue	— / defaultNamePlateValue	The name, address, icon and colour, controlled or initial.
onChange	(value: NamePlateValue) => void	—	Fires from the field, chip or radio that changed it, with the whole value.
onCreate	(value: NamePlateValue) => void \| Promise<unknown>	—	Create was pressed with a valid, available address. Return a promise to show it working; a rejection keeps every field and shows its message.
icons	NamePlateIcon[]	defaultNamePlateIcons	The icons on offer, { id, label, icon }; eight Lucide glyphs by default.
colors	NamePlateColor[]	defaultNamePlateColors	The colours on offer, { id, label, value }; six token hues at a fixed lightness by default.
addressPrefix	string	"fieldline.app/"	What comes before the address slug.
takenAddresses	string[]	defaultNamePlateTaken	Addresses already in use, checked after a 250 ms pause in typing.
checkAddress	(slug: string) => "available" \| "taken" \| Promise<…>	—	Asks the host whether an address is free, sync or async; only the newest answer counts. Overrides takenAddresses.
plateStyle	"enamel" \| "brass" \| "timber"	"enamel"	An enamel sign in the colour with a cream inset rule, an engraved brass plate with screw heads and a colour inlay, or a timber board with a painted panel.
swingAmount	number	0.6	How lively the pendulum is, 0 to 1: the entrance tilt, the impulses and the damping ratio (0.62 down to 0.1).
accent	string	"var(--accent-bright)"	The form's accent: the chosen icon's ring, the primary button and the rail's nail. Any CSS colour.
nav	string[]	["Inbox", "Jobs", "Crews", "Reports"]	The preview sidebar's sections.
maxLength	number	32	The longest name allowed; the counter in the field shows it.
maxHeight	number	560	The tallest the step grows before its body scrolls, px.
disabled	boolean	false	Nothing can be changed or created; fields turn read-only and the step dims.
className	string	—	Classes for the outer section.