Components

Shared primitives from @polystaq/ui plus product-specific UI patterns from apps/app.

Button

Variants

6 intent variants. Default maps to the neutral primary token.

Sizes

8 sizes including icon-only variants.

States

Card

Anatomy

Default card
Supporting description in muted foreground.

Body content, data, or nested components.

Small variant
Reduced padding for dense layouts.
StatusActive
PlanPro
Regionus-east-1

Input & Label

States

Inline title input

Used in the properties panel to edit block and connector names. Strips all borders and rings.

Alert

Variants

Product Patterns — Canvas Toolbar

Floating toolbar

The only dark surface in the product. Position: absolute inset-x-0 bottom-5, centered. Active tool uses #0c8ce9 electric blue.

Product Patterns — Canvas Block

Block element

rounded-[5px] tight radius. Inset shadow gives depth against the white canvas. Bold 18px white text.

Start event
Review
Handoff
Done

Note element

Yellow sticky. All styling hardcoded — not theme tokens. Resizable via ReactFlow NodeResizer.

Add note

Product Patterns — Properties Panel

Panel layout

max-w-[460px], absolute right-0 inset-y-0, border-l border-border, bg-background p-6. Backdrop is bg-black/10.

Block page

Start event

All properties for this block.