@clock-ui/vue

Vue components for Clock UI, providing reactive clock widgets built with Vue 3 and Composition API.
879 5
vue typescript vue3 ui component composition-api vue-component css time zero-dependency clock timezone analog analog-clock
Install
npm install @clock-ui/vue
Latest Version:0.2.0
Vue:3
License:MIT
Last Updated:Oct 1, 2026
Links: GitHub  ·  npm
Maintainer: latamaosadi

@clock-ui/vue

Accurate, customizable analog clocks for Vue 3.5+.

npm npm downloads gzip size License: MIT

Two Clock UI clocks running side by side, one sweeping smoothly and one ticking

Playground · Documentation · Examples

Installation

# npm
npm install @clock-ui/vue

# yarn
yarn add @clock-ui/vue

# pnpm
pnpm add @clock-ui/vue

# bun
bun add @clock-ui/vue

Usage

LiveClock

A real-time clock component that displays the current time.

<template>
  <LiveClock />
</template>

<script setup>
import { LiveClock } from "@clock-ui/vue";
import "@clock-ui/vue/base.css";
</script>

BaseClock

A static clock component that displays a specific time.

<template>
  <BaseClock :hours="3" :minutes="30" :seconds="45" />
</template>

<script setup>
import { BaseClock } from "@clock-ui/vue";
import "@clock-ui/vue/base.css";
</script>

API

LiveClock Props

Prop Type Default Description
hideSeconds boolean false Hide the second hand
hideNumbers boolean false Hide hour numbers
useRoman boolean false Use Roman numerals instead of Arabic
cardinalOnly boolean false Show only cardinal hour numbers (3, 6, 9, 12)
noBorder boolean false Remove clock border
hideTicks boolean false Hide all tick marks
hideMajorTicks boolean false Hide major tick marks
hideMinorTicks boolean false Hide minor tick marks
dualTone boolean true Use dual-tone styling
smoothSweep boolean false Enable smooth second hand sweep
timezone string - Timezone for the clock (e.g., 'America/New_York')
hideDate boolean false Hide the date display

BaseClock Props

Prop Type Default Description
hours number - Hour to display (required)
minutes number - Minutes to display (required)
seconds number 0 Seconds to display
milliseconds number 0 Milliseconds to display
hideSeconds boolean false Hide the second hand
hideNumbers boolean false Hide hour numbers
useRoman boolean false Use Roman numerals instead of Arabic
cardinalOnly boolean false Show only cardinal hour numbers (3, 6, 9, 12)
noBorder boolean false Remove clock border
hideTicks boolean false Hide all tick marks
hideMajorTicks boolean false Hide major tick marks
hideMinorTicks boolean false Hide minor tick marks
dualTone boolean true Use dual-tone styling

Slots

BaseClock

  • info: Content displayed in the center of the clock (used by LiveClock for date display)

Development

Install dependencies

npm install

Run the playground

npm run play

Run tests

npm run test

Build the library

npm run build

Type checking

npm run typecheck

License

MIT © Robert Latamaosadi

Related Packages

vue-html-analog-clock

Analog Clock Component for VueJS

687 0
analog clock vue
vue-clock2

Vue component with clock.

8,402 85
clock component time vue
yi-ui

a lightweight ui for vue2.x

2,017 14
ui vue vue-component components
pragma-ui

A PragmaCSS-based set of UI elements

1,324
css ui forms pragma
@deppon/deppon-ui

Frontend UI component library

27,261
ui vue vue-component element-plus vue-library

Version History

Version Released Vue License
0.2.0 ^3.5.0 MIT
0.1.2 ^3.0.0 MIT
0.1.1 ^3.0.0 MIT
0.1.0 ^3.0.0 MIT