Component properties

A React block (a whole screen) in Beamline's Research & design app.

A design system component from three sides. Its variants as a matrix on two chosen properties, the others filtering it, each cell drawing the variant; a combination with no variant is hatched Missing and one drawn twice is Duplicate, both counted. A value renamed in the inspector previews how many variants it changes and refuses a name the property already has. Its property schema: text, yes/no and swap properties with their defaults and the layers they drive, how many instances keep their own value, a type that can't drive its layer said; a swap's preferred components with one that left the library said and the rest searchable; which nested instances show their controls in the parent. One instance: a control per property (a switch for yes/no), the exact variant or the closest with why, its own label kept across a switch, nested controls grouped, and its fill fixed or bound to a colour variable picked by search and library, with Detach, Mixed, no match and a library that can't load said.

Use it for

A design or UI-builder tool where people define a component's variants and properties and set them on instances.
Any configurable template with a matrix of options (product variants, email modules) where gaps and duplicates matter.

Not for

Showing a code component's props as documentation (props-table).
Editing colour tokens themselves (a token editor).

Anatomy

tabs: Variants, Properties, Instance
variants: title with the count; Rows and Columns selects, a segmented control per remaining property; the problems line (missing, duplicate); the matrix with axis labels in each property's hue and a cell per combination (the variant drawn, Missing hatched, Duplicate)
inspector: each property in its hue with its values as chips; a chip opens a rename (the field, how many variants change or the clash, Rename / Cancel)
schema: each property (name, type, the layer it drives or none, an incompatible layer said), its default (field, switch or select) and how many instances keep their own; a swap's preferred list (unavailable said) and Search all
add a property: name, type, layer, Add (refused with the reason when the type can't drive the layer)
nested: a checkbox per nested instance with its properties and hidden by default, or none
instance: the stage drawing the instance, exact or the closest with why; the controls per property, the own label, swaps, nested groups, the fill with Use a variable or Detach
variable picker: search, library, variables by group with their swatch and library, a library that can't load, no match

States

complete matrix
missing combination
duplicate combination
rename preview
rename clash
property with default
keeps own values
incompatible layer
preferred unavailable
no preferred
nested hidden
no nested instances
exact variant
nearest variant
own label kept
fixed fill
bound fill
mixed fill
no compatible variable
library can't load

Keyboard

Tab through tabs, axis selects, filters, cells' inspector chips and controls; arrows move within tabs and segmented controls
Enter on a value chip opens its rename; Escape or Cancel closes it
Use a variable opens the picker with focus in the search; Enter on a variable binds it and closes

Props

Prop	Type	Default	Description
`family` (required)	`ComponentFamily`	—
`onFamilyChange`	`((f: ComponentFamily) => void)`	—
`layers` (required)	`ComponentLayer[]`	—
`schema` (required)	`SchemaProperty[]`	—
`onSchemaChange`	`((s: SchemaProperty[]) => void)`	—
`components` (required)	`LibraryComponent[]`	—
`nested` (required)	`NestedInstance[]`	—
`exposed` (required)	`string[]`	—	Nested instances whose controls the parent shows (ids).
`onExposedChange`	`((ids: string[]) => void)`	—
`instance` (required)	`ComponentInstance`	—
`onInstanceChange`	`((i: ComponentInstance) => void)`	—
`overrides`	`Record<string, number>`	—	How many instances in use keep their own value, by schema property id.
`variables` (required)	`ColorVariable[]`	—
`librariesDown`	`string[]`	—	Libraries that can't be loaded now, by name.
`renderVariant` (required)	`(values: Record<string, string>, label: string, fill?: string \| undefined) => ReactNode`	—	Draws a variant (or the instance) from its values; the block shows it in each cell.
`tab`	`ComponentTab`	—
`defaultTab`	`ComponentTab`	—
`onTabChange`	`((t: ComponentTab) => void)`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

tabs
select
segmented-control
input
switch
checkbox
popover
search-field
button

Dependencies

lucide-react

Import

import { ComponentProperties } from "@beamline/component-properties";

Get it

Component properties is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent