Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProDesktop widgets for weather, a calendar day and device batteries, in small, medium and large sizes that scale with their width.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import {
BatteryWidget,
CalendarWidget,
WeatherWidget,
} from "@/components/ui/widgets"<WeatherWidget city="Lisbon" temperature={72} high={78} low={61} />
<CalendarWidget date="2026-10-01" events={[{ id: "a", title: "Design review", time: "10:30 AM" }]} />
<BatteryWidget devices={[{ id: "phone", name: "Phone", level: 82, icon: <Smartphone /> }]} />| Prop | Type | Default | Description |
|---|---|---|---|
size | "small" | "medium" | "large" | "small" | Small is square, medium is twice as wide, large is twice as wide and tall. |
Every widget takes size and all <section> props. Set the width with className; text and spacing scale with it. Widget is exported as the frame for your own widgets and also takes label and surfaceClassName.
| Prop | Type | Default | Description |
|---|---|---|---|
city | string | - | Place name. |
temperature | number | - | Current temperature in degrees. |
high | number | - | Today's high. |
low | number | - | Today's low. |
condition | "clear" | "partly-cloudy" | "cloudy" | "rain" | "snow" | "storm" | "night" | "clear" | Current sky. Picks the gradient, icon and wording. |
hourly | HourlyForecast[] | - | Upcoming hours, shown on medium and large. |
daily | DailyForecast[] | - | Upcoming days, shown on large. |
| Prop | Type | Default | Description |
|---|---|---|---|
date | string | - | ISO date such as "2026-10-01", read as UTC. |
events | CalendarEvent[] | - | Events that day: id, title, time and an optional tone. |
| Prop | Type | Default | Description |
|---|---|---|---|
devices | BatteryDevice[] | - | Devices with id, name, level (0-100), icon and optional charging. |