# Component properties A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Research & design](https://beamline.io/components/apps/research-design) app. Live demo: https://beamline.io/components/component-properties 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` | — | 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, 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` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - tabs - select - [segmented-control](https://beamline.io/components/segmented-control) - input - switch - checkbox - popover - [search-field](https://beamline.io/components/search-field) - button ## Dependencies `lucide-react` ## Import ```tsx 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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Research & design - [Research synthesis](https://beamline.io/components/research-synthesis): A research study turned into evidence in one place. Transcripts: passages marked as accepted highlights or as the assistant's suggestions (dashed)… - [Study setup](https://beamline.io/components/study-setup): Set up an unmoderated test and its screener. Test: what's tested (a website, a prototype by its share link, an app by its store page), who takes it… - [Study flow](https://beamline.io/components/study-flow): A study's blocks in order, each with where people go next. A block that routes by its answer (multiple choice, scale, open question, prototype task) has… - [Participant review](https://beamline.io/components/participant-review): One participant's session, answer by answer, beside the list of everyone who took the study. The list filters (finished, left early, with a recording)… - [Click heatmap](https://beamline.io/components/click-heatmap): One screen of a usability task as it looked (your prototype's frame or a page built from your parts, scaled into a phone) with where people clicked over… - [Tree test](https://beamline.io/components/tree-test): A tree test: build a navigation tree and read where people went. Build: pages added at the top or under any page, indented under the page above or moved… - [Prototype task](https://beamline.io/components/prototype-task): A prototype task in a study. The linked prototype refreshes from the design keeping the task and paths (a start screen gone from the new version said, a… - [Task results](https://beamline.io/components/task-results): A usability task's results, from headline outcomes down to paths and screens. Outcomes (direct success, indirect success, gave up) say their share and… - [Matrix question](https://beamline.io/components/matrix-question): A matrix question and the participant's side of it, side by side. Rows (up to ten) share one set of choices (two to seven); Enter adds a row, several… - [Prototype review](https://beamline.io/components/prototype-review): Reviewing a design file's clickable prototype. Present: the board on a stage with its wireframe, the flow chosen (an unavailable one can't be), Back… - [Report builder](https://beamline.io/components/report-builder): Build a chart from your metrics without code: choose metrics, how to group them over time, an optional breakdown, filters, the range and the chart, see… - [Report library](https://beamline.io/components/report-library): A business's reports in one place. The directory: reports by topic and group with search, each with what it answers; one this person can't open says why… - [Review page builder](https://beamline.io/components/review-page-builder): Building the page reviewers use to go through records one by one. The queue of records (one with no title shows its id instead of a blank); the record as… - [Database builder](https://beamline.io/components/database-builder): What a database does for the people who use it, built in one place. Templates: starting values per property (a relation default points at an existing… - [Workflow builder](https://beamline.io/components/workflow-builder): Automation rules for a SaaS without code: a trigger, conditions built with the query builder that branch into Yes and No, actions and waits, drawn as a… - [Workflow library](https://beamline.io/components/workflow-library): The automation library: every automation as a row (what starts it, whether it's live, a draft or paused, who owns it, when it last ran, and its runs this… - [Drawing board](https://beamline.io/components/drawing-board): A whiteboard a team already knows how to use, like FigJam: tools in a floating bar at the bottom (Select V, Hand H, Sticky note S, Shape R/O/D, Connector… - [Model workbench](https://beamline.io/components/model-workbench): A CAD model's workbench around a large isometric scene of its bodies, each shaded from its material's appearance with a soft ground shadow and an axis… - [Slot editor](https://beamline.io/components/slot-editor): Slots in a design system component, from making to filling. The main component's layer tree with a checkbox per layer: a nested frame converts to a slot… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).