Browse components
Task Widget
An iOS-like glass widget with a live clock, weather line and tactile task cards that frost toward the tail of the list.
Credit: Calamansi UI (MIT)
Installation
npx shadcn@latest add @glint-ui/task-widgetFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/task-widget.json
Usage
import { TaskWidget } from "@/components/ui/task-widget";
<TaskWidget
weather={{ condition: "Sunny", temperature: "31°" }}
defaultTasks={[{ id: 1, title: "Review PRs" }, { id: 2, title: "Ship it", completed: true }]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "calamansi" | "slate" | "citrus" | "black" | "dark" | "calamansi" | Glass tint. |
| corner | "rounded" | "squircle" | "rounded" | Shell corner: large radius, or a squircle. |
| title | string | "Today" | Section title above the task list. |
| showClock | boolean | true | Show the live clock. |
| timeFormat | "12h" | "24h" | "12h" | Clock format. |
| tasks | ReactNode | — | Controlled `{ id, title, completed?, tag?, icon? }[]`. |
| defaultTasks | ReactNode | — | Initial tasks when uncontrolled. Ships with five samples. |
| onTaskToggle | ReactNode | — | `(id, completed) => void`, fired when a card is toggled. |
| weather | ReactNode | — | `{ condition?, temperature?, icon? }`. Falls back to Sunny / Starry by color scheme. |
| className | string | — | Extra classes for the root element. |