Components
Every Solenne building block in one place, in both themes. Copy from here when you build a new screen.
Buttons
Rounded-full buttons in five variants and three sizes.
| Variant | sm | md | icon |
|---|---|---|---|
| primary | |||
| secondary | |||
| outline | |||
| ghost | |||
| danger |
Badges & status
Badges label state; Status pairs a dot with text so color is never alone.
Inputs
Every control sits in a pressed-in well with a label.
Shown on the home screen.
Tabs
Underline tabs with arrow-key navigation.
Progress
Thin tracks for goals, charge and setup steps.
Avatars
Initials on a soft tint in three sizes.
Energy
Fixed colors for every source, device tiles, figures and the 3D illustrations.
SourceIcon
DeviceIcon · on and off
Value
BatteryCell · 20%, 72% charging, 100%
SunOrb and HouseScene
EnergyFlow · live
Solar 5.6 kW, home 1.9 kW, battery 2.3 kW at 72%, grid -1.4 kW.
Charts
Series keep their source color: solar, home, battery, grid. Hover for values.
Solar this month
518 kWh
▲ 9%Home use this month
425 kWh
▼ 6%Saved this month
$118.59
▲ 12%LineChart · today, solar and home
- Solar
- Home
BarChart · solar produced, last 14 days
Donut · where today's home energy came from
- Solar64%
- Battery24%
- Grid12%
Sparkline · battery, solar and grid
Modal
Native dialog with focus trap, Escape and backdrop close.
Menu
Click-to-open actions. Closes on outside click and Escape.
Empty state
For lists with nothing in them yet.
No devices in the garage yet
Add a charger or smart plug and Solenne will run it when the sun is doing the work.