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
Pair 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.