Spark UI
The React component library, covering primitives, HEMS components, and the theming engine.
Spark UI is the React component library behind epilot portals. Every component is built on Base UI behavior with Tailwind styling, reads the same CSS-first theming contract, and is tree-shakeable to the single component you import.
npm install @epilot/spark-uiComponents are imported by subpath, so you only ever ship what you use:
import { Badge } from '@epilot/spark-ui/badge'
import { Button } from '@epilot/spark-ui/button'Start here
Theme
The provider that writes the theming attributes: accent, neutral, radius, spacing, scaling, style, light/dark.
Playground
Flip every knob and watch the components re-theme live.
Families
Components
The primitives: buttons, forms, overlays, feedback, and navigation.
HEMS
Home Energy Management components: devices, power flow, and energy charts.
Chat
Conversation building blocks: scroller, message rows, bubbles, and attachments.
Utilities
Helpers that aren't components: cn, reparent, scroll fade, and shimmer.
Requirements
Spark UI is a Tailwind library, not a standalone one. tailwindcss and
tw-animate-css are required peer dependencies: the components ship class
names, not bundled CSS, so a project without Tailwind v4 cannot render them.
| Peer | Version |
|---|---|
react | >=18.0.0 |
react-dom | >=18.0.0 |
tailwindcss | >=4.1.0 |
tw-animate-css | >=1.4.0 |
Import the stylesheet once at your app root, then wrap your tree in
Theme:
import '@epilot/spark-ui/styles'Tailwind v4 skips node_modules during content detection, so without one more
step every component renders completely unstyled, with no error or warning:
add an explicit @source to your Tailwind entry stylesheet, pointing at the
package's dist:
@source '../node_modules/@epilot/spark-ui/dist';Building a block that runs inside a live portal? The SDK injects the operator's brand over the same tokens, so the components pick up tenant theming automatically.