Docs Playground

Docs Playground

Getting started

Introduction Skills MCP server Spark UI Theme Playground

Components

Accordion Alert Dialog Avatar Badge Box Breadcrumbs Button Button Group Calendar Callout Card Checkbox Dialog Drawer Dropdown Menu Empty State Field Field Matrix Icon Input Input Date Input Group Input OTP Label List Number Flow Pill Popover Progress Radio Radio Card Group Responsive Dialog Scroll Area Segmented Control Select Separator Sheet Skeleton Slider Spinner Stepper Switch Tabs Textarea Thumbnail Toast Tooltip Typography

Utilities

cn Reparent Scroll Fade Shimmer

Chat

Message Scroller Message Bubble Attachment Marker

Charts

Line Chart Bar Chart Donut Chart Series Legend Chart Tooltip

HEMS

Device Card Feed-in Hero Power Network Energy Breakdown Energy Bar Graph Energy History Chart Power History Chart Sankey Chart Solar Forecast Chart Info Block Onboarding Layout Page Header Page Spinner Period Tabs

Portal Blocks

Block Catalog Quick Actions Teaser & Campaign Portal Page Example

Spark SDK

Getting started

Core concepts

Session & bridge Entities Use cases

Portal integration

Theming Localization Dialogs Toasts Custom events

Recipes

Reference

Errors API reference

Playground

Flip the theming knobs and watch the components re-theme live.

ThemeT

Accent

4.88:1

Neutral

Radius

Primary emphasis

High contrast

Input color

Card style

Card color

Spacing

Scaling

Appearance

Home energy

Live

All devices and usage at a glance

Scheduled to finish at 18:30

Charging preferences

Applies to all wallboxes

Device name

Charging mode

EcoBalancedFast

Smart chargingNotifications

Charge limit

Where it went todayAcross all consumers

Home8.4 kWh52 %

EV charger5.1 kWh31 %

Heat pump2.7 kWh17 %

Account

Manage account preferences.

Installing firmware…

info

Update available

A new firmware version is ready to install.

Theme Accordion