Browse components
Morning Widget
A squircle card on a drifting sunrise mesh that greets you by name, rolls a live clock digit by digit and rotates motivational lines.
Credit: Calamansi UI (MIT)
Installation
npx shadcn@latest add @glint-ui/morning-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/morning-widget.json
Usage
import { MorningWidget } from "@/components/ui/morning-widget";
<MorningWidget name="Gab" variant="calamansi" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "Friend" | Name the greeting is addressed to. |
| variant | "calamansi" | "white" | "slate" | "citrus" | "calamansi" | Mesh palette. |
| showClock | boolean | true | Show the live clock. |
| timeFormat | "12h" | "24h" | "12h" | Clock format. |
| interval | number | 9 | Seconds each line stays up; 0 holds it. Hover or focus also holds it. |
| tilt | boolean | true | Lean the card towards the pointer. |
| quotes | ReactNode | — | `{ text, emphasis?: string[] }[]`. Emphasis phrases are matched literally. Ships with five lines. |
| className | string | — | Extra classes for the root element. |