Blocks

Blocks are arranged top-to-bottom inside a screen. In the current dashboard editor, blocks are grouped as Content, Interaction, Permissions, and Utility.

This page documents the blocks currently available in the dashboard block picker. Legacy block types are omitted.

Content blocks

Primary title with optional subtitle.

Property	Type	Description
`type`	`"header"`	Block type.
`title`	`string`	Main heading text.
`subtitle`	`string`	Optional subheading text.
`align`	`"left" \| "center" \| "right"`	Text alignment.
`color`	`string`	Title color.
`opacity`	`number`	Title opacity (0-100).
`fontWeight`	`"normal" \| "bold"`	Title weight.
`fontStyle`	`"normal" \| "italic"`	Title style.
`fontSize`	`number`	Title size (px).
`spacing`	`number`	Letter spacing (px).
`subtitleColor`	`string`	Subtitle color.
`subtitleOpacity`	`number`	Subtitle opacity (0-100).
`subtitleFontSize`	`number`	Subtitle size (px).
`subtitleAlign`	`"left" \| "center" \| "right"`	Subtitle alignment.
`subtitleSpacing`	`number`	Subtitle letter spacing (px).

{
  "type": "header",
  "title": "Welcome",
  "subtitle": "Let’s personalize your onboarding",
  "align": "left"
}

Description

Body copy block.

Property	Type	Description
`type`	`"description"`	Block type.
`text`	`string`	Description text.
`align`	`"left" \| "center" \| "right"`	Text alignment.
`color`	`string`	Text color.
`opacity`	`number`	Text opacity (0-100).
`fontWeight`	`"normal" \| "bold"`	Text weight.
`fontStyle`	`"normal" \| "italic"`	Text style.
`fontSize`	`number`	Text size (px).
`spacing`	`number`	Letter spacing (px).

Media

Image/video block.

Property	Type	Description
`type`	`"media"`	Block type.
`assetId`	`string`	Uploaded asset ID.
`url`	`string`	External media URL.
`aspect`	`"square" \| "wide" \| "tall"`	Aspect preset.
`align`	`"left" \| "center" \| "right"`	Horizontal alignment.
`width`	`number \| "auto"`	Width.
`height`	`number`	Height (px).
`padding`	`{ vertical?: number, horizontal?: number }`	Internal spacing.
`margin`	`{ top?: number, bottom?: number, left?: number, right?: number }`	External spacing.
`borderRadius`	`number`	Corner radius (px).

Benefits List

List of short benefit items with icons.

Property	Type	Description
`type`	`"benefits_list"`	Block type.
`items`	`{ text: string }[]`	Benefit rows.
`icon`	`string`	Icon name.
`iconColor`	`string`	Icon color.
`iconSize`	`number`	Icon size (px).
`color`	`string`	Text color.
`opacity`	`number`	Text opacity (0-100).
`fontWeight`	`"normal" \| "bold"`	Text weight.
`fontStyle`	`"normal" \| "italic"`	Text style.
`fontSize`	`number`	Text size (px).
`align`	`"left" \| "center" \| "right"`	Alignment.
`spacing`	`number`	Letter spacing (px).

Testimonial

Quote/social proof card.

Property	Type	Description
`type`	`"testimonial"`	Block type.
`quote`	`string`	Quote text.
`author`	`string`	Author name.
`meta`	`string`	Extra author context.
`color`	`string`	Text color.
`opacity`	`number`	Text opacity (0-100).
`fontWeight`	`"normal" \| "bold"`	Text weight.
`fontStyle`	`"normal" \| "italic"`	Text style.
`fontSize`	`number`	Text size (px).
`align`	`"left" \| "center" \| "right"`	Alignment.
`spacing`	`number`	Letter spacing (px).
`backgroundColor`	`string`	Background color.
`backgroundOpacity`	`number`	Background opacity (0-100).
`width`	`number \| string`	Width.
`height`	`number`	Height (px).
`borderColor`	`string`	Border color.
`borderOpacity`	`number`	Border opacity (0-100).
`borderWidth`	`number`	Border width (px).
`borderRadius`	`number`	Corner radius (px).

Comparison Table

Side-by-side before/after style comparison.

Property	Type	Description
`type`	`"comparison_table"`	Block type.
`headline`	`string`	Title text.
`leftLabel`	`string`	Left column header.
`rightLabel`	`string`	Right column header.
`rows`	`ComparisonTableRow[]`	Table rows.

ComparisonTableRow

Property	Type	Description
`feature`	`string`	Row label.
`leftValue`	`string`	Left value.
`rightValue`	`string`	Right value.
`highlighted`	`boolean`	Highlight row visually.

Interaction blocks

CTA

Primary/secondary action buttons.

Property	Type	Description
`type`	`"cta"`	Block type.
`primary`	`{ label: string, action: CTAAction }`	Main button.
`secondary`	`{ label: string, action: CTAAction }`	Optional secondary button.
`sticky`	`boolean`	Stick to bottom.
`color`	`string`	Text color.
`opacity`	`number`	Text opacity (0-100).
`fontWeight`	`"normal" \| "bold"`	Text weight.
`fontStyle`	`"normal" \| "italic"`	Text style.
`fontSize`	`number`	Text size (px).
`align`	`"left" \| "center" \| "right"`	Alignment.
`spacing`	`number`	Letter spacing (px).
`backgroundColor`	`string`	Button background.
`backgroundOpacity`	`number`	Background opacity (0-100).
`width`	`number \| "auto"`	Width.
`height`	`number`	Height (px).
`borderColor`	`string`	Border color.
`borderOpacity`	`number`	Border opacity (0-100).
`borderWidth`	`number`	Border width (px).
`borderRadius`	`number`	Corner radius (px).

CTAAction = "next" | "back" | "skip" | "close" | "complete"

Choice

Selectable options block.

Property	Type	Description
`type`	`"choice"`	Block type.
`key`	`string`	Answer key.
`mode`	`"single" \| "multi"`	Selection mode.
`style`	`"list" \| "cards"`	Display style.
`options`	`ChoiceOption[]`	Options list.
`required`	`boolean`	Require answer before continue.
`color`	`string`	Text color.
`opacity`	`number`	Text opacity (0-100).
`fontWeight`	`"normal" \| "bold"`	Text weight.
`fontStyle`	`"normal" \| "italic"`	Text style.
`fontSize`	`number`	Text size (px).
`align`	`"left" \| "center" \| "right"`	Alignment.
`spacing`	`number`	Letter spacing (px).
`backgroundColor`	`string`	Option background color.
`backgroundOpacity`	`number`	Option background opacity (0-100).
`activeBackgroundColor`	`string`	Active option background color.
`activeBackgroundOpacity`	`number`	Active background opacity (0-100).
`width`	`number \| "auto"`	Option width.
`height`	`number`	Option height (px).
`borderColor`	`string`	Border color.
`borderOpacity`	`number`	Border opacity (0-100).
`borderWidth`	`number`	Border width (px).
`borderRadius`	`number`	Corner radius (px).

ChoiceOption

Property	Type	Description
`label`	`string`	Visible option text.
`value`	`string`	Stored option value.
`emoji`	`string`	Optional emoji prefix.
`action`	`CTAAction`	Optional per-option action.

Text Input

Single-line text answer block.

Property	Type	Description
`type`	`"text_input"`	Block type.
`key`	`string`	Answer key.
`label`	`string`	Optional field label.
`placeholder`	`string`	Placeholder text.
`required`	`boolean`	Require value before continue.
`maxLength`	`number`	Maximum length.
`color`	`string`	Text color.
`opacity`	`number`	Text opacity (0-100).
`fontWeight`	`"normal" \| "bold"`	Text weight.
`fontStyle`	`"normal" \| "italic"`	Text style.
`fontSize`	`number`	Text size (px).
`align`	`"left" \| "center" \| "right"`	Alignment.
`spacing`	`number`	Letter spacing (px).
`backgroundColor`	`string`	Input background color.
`backgroundOpacity`	`number`	Input background opacity (0-100).
`width`	`number \| "auto"`	Input width.
`height`	`number`	Input height (px).
`borderColor`	`string`	Border color.
`borderOpacity`	`number`	Border opacity (0-100).
`borderWidth`	`number`	Border width (px).
`borderRadius`	`number`	Corner radius (px).

Swipe Cards

Stacked swipeable opinion cards.

Property	Type	Description
`type`	`"swipe_cards"`	Block type.
`headline`	`string`	Block title.
`cards`	`SwipeCard[]`	Cards to swipe through.
`onComplete`	`"next_screen" \| "complete_flow"`	Action when all cards are processed.

SwipeCard

Property	Type	Description
`id`	`string`	Card ID.
`text`	`string`	Card text.
`emoji`	`string`	Optional emoji.

Permission blocks

FlwKit currently supports these permission block variants:

notification_permission
health_permission
tracking_permission
camera_permission
location_permission
microphone_permission
photo_library_permission

All use the same schema:

Property	Type	Description
`type`	Permission block type	One of the variants above.
`icon`	`string`	Icon name shown in the block.
`headline`	`string`	Permission prompt title.
`description`	`string`	Permission explanation text.
`ctaLabel`	`string`	Primary button label.
`skipLabel`	`string`	Secondary button label.
`onGranted`	`"next_screen" \| "complete_flow"`	Action if granted.
`onDenied`	`"next_screen" \| "complete_flow"`	Action if denied.

{
  "type": "tracking_permission",
  "icon": "chart",
  "headline": "Help us improve your experience",
  "description": "We use anonymous data to show more relevant content.",
  "ctaLabel": "Continue →",
  "skipLabel": "Not now",
  "onGranted": "next_screen",
  "onDenied": "next_screen"
}

Utility blocks

Progress Bar

Shows progression through the flow.

Property	Type	Description
`type`	`"progress_bar"`	Block type.
`backgroundColor`	`string`	Track color.
`backgroundOpacity`	`number`	Track opacity (0-100).
`width`	`number \| string`	Width.
`height`	`number`	Height (px).
`borderColor`	`string`	Border color.
`borderOpacity`	`number`	Border opacity (0-100).
`borderWidth`	`number`	Border width (px).
`borderRadius`	`number`	Corner radius (px).
`fillColor`	`string`	Fill color.
`fillOpacity`	`number`	Fill opacity (0-100).
`showSteps`	`boolean`	Show step markers.
`stepColor`	`string`	Step marker color.
`stepActiveColor`	`string`	Active step marker color.

Processing Animation

Animated “setting things up” style block with timed auto-advance.

Property	Type	Description
`type`	`"processing_animation"`	Block type.
`headline`	`string`	Main line.
`subHeadline`	`string`	Secondary line.
`durationSeconds`	`number`	Total duration before auto-advance.
`items`	`string[]`	Checklist/progress lines.
`autoAdvance`	`boolean`	Auto move after duration.

Spacer

Adds vertical whitespace.

Property	Type	Description
`type`	`"spacer"`	Block type.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	Token size.
`height`	`number`	Exact pixel height.

Footer links block.

Property	Type	Description
`type`	`"footer"`	Block type.
`links`	`{ label: string, url: string }[]`	Footer links.

{
  "type": "footer",
  "links": [
    { "label": "Privacy", "url": "https://example.com/privacy" },
    { "label": "Terms", "url": "https://example.com/terms" }
  ]
}