Clock

The built-in clock tag — an analog clock that ticks live time, or shows a fixed time, with arcs, shapes, and timezone support.

clock is an analog clock. With no props it shows the live local time, ticking second by second; give it a value and running=false to freeze it on a fixed time, or a timezone to show another part of the world.

A Community Component — wraps Clock by gfazioli, MIT licensed, installed from npm as @gfazioli/mantine-clock.

Demonstrations

A bare {% clock %} renders a live analog clock showing the current local time.

{% clock %}

A fixed time

Pass a value ("HH:MM" or "HH:MM:SS") with running=false to show a static time instead of the live clock.

{% clock value='10:09:36' running=false size='lg' %}

Timezones

Set timezone to an IANA timezone name to show the live time elsewhere.

{% group %}
{% clock timezone='America/New_York' size='md' %}
{% clock timezone='Europe/London' size='md' %}
{% clock timezone='Asia/Tokyo' size='md' %}
{% endGroup %}

Shape and second-hand behavior

shape (circle or rounded-rect) restyles the face, and secondHandBehavior (smooth, tick, or tick-half) controls how the second hand moves.

{% group %}
{% clock shape='circle' secondHandBehavior='smooth' size='md' %}
{% clock shape='rounded-rect' secondHandBehavior='tick' size='md' %}
{% endGroup %}

Arcs

Toggle withSecondsArc, withMinutesArc, and withHoursArc to draw progress arcs around the face.

{% clock withSecondsArc withMinutesArc withHoursArc size='lg' %}

With other components

A clock anchors a “current time” panel inside a card.

{% card title="Server time" %}
{% center %}
{% clock timezone='UTC' size='lg' withSecondsArc %}
{% endCenter %}
{% endCard %}

Attributes

Omit any attribute to take its default (a live local-time clock). Bare flags (e.g. withSecondsArc) become =True.

The clock takes no body.

CSS Selector

The clock exposes Mantine Styles API selectors you can target with classNames in your own React, or style directly:

Forward a class with attr={…} (see below) to scope a stylesheet rule to one instance.

Injecting Attributes

The attr={…} channel forwards raw HTML attributes straight onto the rendered clock root — use it for id, class, data-*, ARIA attributes, or anything else not exposed as a typed parameter.