DocsdisplayMorning widget

Morning widget

A Calamansi card with a drifting sunrise mesh that greets you by name, keeps a live clock and cycles motivational lines.

Morning motivation

The clock ticks digit by digit, the card leans towards your pointer, and each line arrives in stages.

Palette
Calamansi

9:41 AM

Click the card to skip to the next line. Hovering holds it so you can finish reading.

Installation

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

How to use

demo.tsx
import { MorningWidget } from "@/components/ui/morning-widget"
export function Demo() {
  return (
    <MorningWidget
      name="Josh"
      interval={12}
      quotes={[
        {
          text: "Ship it, then make it better.",
          emphasis: ["Ship it"],
        },
      ]}
    />
  )
}

Props

Options you can pass to customize this component.

  • nameoptional
    string

    Name the greeting is addressed to.

  • quotesoptional
    MotivationQuote[]

    Lines the card rotates through. Each one takes a text and an optional list of phrases to emphasise.

  • showClockoptional
    boolean

    Show the live clock above the card.

  • timeFormatoptional
    12h24h

    Render the clock with an AM/PM badge or on the 24-hour clock.

  • intervaloptional
    number

    Seconds a line stays up before the next one, or 0 to hold the first line.

  • tiltoptional
    boolean

    Lean the card towards the pointer.

  • variantoptional
    whitecalamansislatecitrus

    Surface palette, which recolours the mesh and the ink on it. White is a neutral dawn, Calamansi is the brand greens, Citrus keeps the warm sunrise.

  • classNameoptional
    string

    Extra classes merged onto the outer container.

Dependencies

motionlucide-reactfigma-squirclereact-use-measure

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.
PreviousTask widget
NextGitHub activity