Components
Every primitive in Spark UI, as used in a HEMS.
@epilot/spark-ui ships the building blocks behind epilot's portal blocks. Every
component below is used in production by a HEMS,
and each page shows how it's wired up there.
Previews
A live preview of every component. Click any tile to open its page.
Volume by month
6,450Your changes have been saved.
#OP-6894
No devices yet
Add your first device to start tracking energy.
Energy today
Energy this week
Connect your battery
Step 2 of 4Pair the inverter so we can read the live state of charge.
Wallbox
Power today
kWPower distribution
Spark UI
An open-source UI component library.
Live load
2,140 WBrowse by category
Actions & inputs
Button
Trigger actions and events.
Input
Single-line text field with label, hint, and error states.
Label
Accessible label for form controls.
Checkbox
Toggle a single option on or off.
Switch
On/off toggle for settings.
Slider
Pick a value or range along a track.
Radio Card Group
Choose one option from rich, selectable cards.
Navigation & flow
Page Header
Title, back action, and right-aligned controls for a view.
Breadcrumbs
Show the path to the current page.
Tabs
Switch between sections of content.
Period Tabs
Day / week / month / year time-range selector.
Stepper
Increment or decrement a numeric value.
Onboarding Layout
Full-screen scaffold for multi-step onboarding flows.
Overlays & disclosure
Dialog
Modal for focused, important interactions.
Popover
Floating panel anchored to a trigger.
Tooltip
Contextual hint on hover or focus.
Accordion
Collapsible sections to manage density.
Feedback & status
Callout
Inline info / success / warning / error messages.
Empty State
Placeholder when there's nothing to show yet.
Spinner
Inline loading indicator.
Page Spinner
Centered, full-area loading state.
Skeleton
Placeholder blocks while content loads.
Progress
Determinate progress bar.
Badge
Compact status or count label.
Content & layout
Box
Generic chrome for arbitrary content, with no content slots of its own.
Card
Surface that groups related content.
Info Block
Labelled key/value block for read-only data.
Number Flow
Animated number that transitions between live values.
Separator
Divide content horizontally or vertically.
Typography
Tailwind classname recipes for headings, body, muted text, and values.
Energy & HEMS
Energy-domain components live in their own section.