Data Types

Types used in @param and @const.

boolean

A boolean value: true or false.

@param --disabled boolean;
@param --elevated? boolean: true;

In TypeScript it has the type boolean.

string

A string literal in single or double quotes.

@param --label? string: "Submit";
@param --href string;

In TypeScript it has the type string.

number

A numeric value — integer or fractional — without a unit.

@param --columns number;
@param --opacity? number: 1;

In TypeScript it has the type number.

unit

A CSS value with a unit.

@param --size unit;
@param --gap? unit: 0.5rem;

In TypeScript this is a string literal of the form "16px", "1.5rem" — a number with an allowed unit.

Main units:

Category	Units
Absolute	px, cm, mm, in, pt, pc
Relative (font)	em, rem, ex, ch, cap, lh
Viewport	vw, vh, vmin, vmax, dvw, dvh, svw, svh, lvw, lvh
Container	cqw, cqh, cqi, cqb, cqmin, cqmax
Angles	deg, grad, rad, turn
Time	s, ms
Frequency	hz, khz
Resolution	dpi, dpcm, dppx
Grid	fr
Percentages	%

color

A CSS color as a hex code or a color function.

@param --bg color;
@param --accent? color: #646cff;

In TypeScript it has the type string. The format is validated at compile time.

Allowed formats:

• Hex: #rgb, #rrggbb, #rrggbbaa
• Functions: rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch(), color(), color-mix()

WARNING

Named CSS colors (red, blue, transparent) are not supported. Use a hex code or a color function.

null

A special value representing absence. It is usually not written explicitly — it is used as the implicit default for optional @param parameters.

A ? after the parameter name makes it optional, and the default becomes null:

@param --label? string;    // default: null
@param --size? unit;       // default: null

In TypeScript, the type of an optional parameter is widened to T | null:

export interface CardParams {
  label?: string | null;
  size?: `${number}px` | `${number}rem` /* …and other units */ | null;
}

enum

A reference to an @enum — the parameter accepts one of the declared values. The name of the @enum is used as the type.

@enum Variant {
  values: "primary", "secondary", "danger";
}

@block Button {
  @param --variant Variant;
  @param --tone? Variant: "primary";
}

In TypeScript, a union type is generated from the enum values:

export interface ButtonParams {
  variant: 'primary' | 'secondary' | 'danger';
  tone?: 'primary' | 'secondary' | 'danger' | null;
}

enum is used only in @param. References to @enum are not supported in @const.

See also

• @param — declaring block parameters
• @const — named constants
• @enum — declaring enums
• @if — using types in conditions