Primitives

Core UI building blocks: buttons, sliders, number inputs, selects, checkboxes, color swatches, separators, labels, and icon buttons.

CategoryControls
Sourcepackages/ui-components/src
Preview Portpsd.pg.yatsyk.com (dev)

Live Preview

Dev only:Run cd apps/ui-preview && pnpm dev -p 7041 for live preview. Source: packages/ui-components/src

Variants

ButtonsDefault, Primary, Danger, and Disabled states
CheckboxesChecked and unchecked states
Color SwatchesRGB color preview squares
InputsSelect, NumberInput, and Slider controls
LabelsXS, SM, and Base size labels

Props

PropTypeDescription
labelstringDisplay text for buttons and labels
variant"default" | "primary" | "danger"Visual variant for buttons
disabledbooleanDisables interaction
valuenumberCurrent value for sliders and number inputs
min / maxnumberRange bounds for sliders and number inputs
onChange(value) => voidChange handler callback

Source Code

Component source: packages/ui-components/src

UI Preview page: apps/ui-preview/app/primitives/page.tsx