DocsdisplayTask widget

Task widget

An iOS-inspired glass widget with a live clock, weather and task cards you can tick off — on its own radius or the Calamansi corner.

Palette
Calamansi
Sunny

9:41

AM

Today's Focus

1/6

Click any task card to focus and toggle completion. Scroll the tasks deck to smoothly animate away the overflow blur and expand the progress indicator. Inspired by Jay Dwivedi's design.

Installation

npx shadcn@latest add fujiDevv/calamansi-ui/task-widget

How to use

demo.tsx
import { TaskWidget } from "@/components/ui/task-widget"
export function Demo() {
  return (
    <TaskWidget
      variant="calamansi"
      corner="rounded"
      title="Today's Priorities"
    />
  )
}

Props

Options you can pass to customize this component.

  • tasksoptional
    TaskItem[]

    Controlled array of task items with id, title, completed, and icon.

  • defaultTasksoptional
    TaskItem[]

    Initial task items when using uncontrolled state.

  • onTaskToggleoptional
    (taskId: string | number, completed: boolean) => void

    Callback fired when a task checkbox is pressed.

  • titleoptional
    string

    Section header above the task cards.

  • weatheroptional
    { condition?: string; temperature?: string; icon?: ReactNode }

    Weather indicator condition and icon.

  • showClockoptional
    boolean

    Toggle visibility of the large live digital clock.

  • timeFormatoptional
    12h24h

    Display time in 12-hour or 24-hour mode.

  • variantoptional
    calamansislatecitrusblack

    Glass tint background gradient and specular accents.

  • corneroptional
    roundedsquircle

    Shell corner. "rounded" is the widget's own large radius, the shape it shipped with; "squircle" swaps the surface onto the kit's clipped squircle layer, which repaints the lip and the inset highlights along the new curve.

  • classNameoptional
    string

    Extra classes merged onto the widget container.

Dependencies

motionlucide-reactfigma-squirclereact-use-measure

Credits

Contact

Found a bug or issue? Open an issue or send a note.

License & Usage

  • •Free to use and modify in personal and commercial projects.
  • •Attribution to Calamansi UI is appreciated when using a component.
  • •Please do not resell the components as your own kit.
PreviousDuration picker
NextMorning widget