Electricity Price
Real-time electricity pricing card with charts, trends, and smart tips.
Interactive Demo
Electricity Price
SE31.85kr/kWh
Medium
— stableLow
0.85
Avg
1.45
High
2.35
Cheapest today:03:00(0.85 kr)
Adjust Values
1.85 kr/kWh
Features
- Current price display with unit and region
- Price level badge (Low/Medium/High)
- Trend indicator (Rising/Stable/Falling)
- Interactive price chart with tooltips
- Price statistics (Low/Avg/High)
- Collapsible smart tips section
- Cheapest time indicator
- Dark mode support
Usage
import { ElectricityPrice, generateDemoPriceData } from "@/components/ui/electricity-price"
// Basic usage
<ElectricityPrice
currentPrice={1.85}
unit="kr/kWh"
region="SE3"
priceLevel="medium"
/>
// Full featured
<ElectricityPrice
currentPrice={1.85}
unit="kr/kWh"
region="SE3"
priceLevel="high"
trend="rising"
priceData={generateDemoPriceData()}
lowPrice={0.85}
avgPrice={1.45}
highPrice={2.35}
cheapestTime="03:00"
cheapestPrice={0.85}
tips={[
"Charge during night hours for lowest rates",
"Solar peak expected at noon",
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| currentPrice | number | - | Current electricity price |
| unit | string | "kr/kWh" | Price unit display |
| region | string | - | Price region (e.g., SE3) |
| priceLevel | "low" | "medium" | "high" | "medium" | Price level indicator |
| trend | "rising" | "falling" | "stable" | "stable" | Price trend indicator |
| priceData | PriceDataPoint[] | [] | Price chart data |
| tips | string[] | [] | Smart tips to display |
| cheapestTime | string | - | Time of cheapest price |
Dependencies
npm install recharts