Calendar

Deadline Countdown

A deadline card: the remainder spelled out instead of a ticking timer, a ring of elapsed time and the due date in a human-readable line.

What you can change

the due date through deadline, the reference time through now and the start of the count through startedAt
the task name through heading
the wording through unitsText, remainingText, overdueText and dueText

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

Use it with AI

1. Copy the link.
2. Write to your agent in your own words and drop the link into the sentence.
3. The agent opens the link and installs the component from the registry.

Name

Due date

Label language

Accent

Surface

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/calendar-020?lang=en&theme=dark

2Paste into the chat

3Get it in your project

Not sure where to paste it? Step-by-step guide

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

Loading…

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

Use it with AI

1. Copy the link.
2. Write to your agent in your own words and drop the link into the sentence.
3. The agent opens the link and installs the component from the registry.

Name

Due date

Label language

Accent

Surface

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/calendar-020?lang=en&theme=dark

2Paste into the chat

3Get it in your project

Not sure where to paste it? Step-by-step guide

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

Loading…

For developers

The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.

Technical notes

A server component: both the deadline and the reference "now" arrive as strings, so the render is deterministic and hydration does not drift — new Date() in the markup would be a mistake. The remainder is turned into words with Russian declension: for a term of weeks the seconds are useless, and a ticking timer requires a client. The ring shows the share of the term burned from startedAt to deadline: a percentage frightens more precisely than the remaining days on their own. The hole in the ring is made by a mask on a separate layer rather than a plug circle: a plug has to match the card background, while a mask works on any surface and does not eat the caption above it. The tone is switched by the data-tone attribute: three days before the due date the card turns yellow, after the due date it turns red and changes the wording to "overdue".