Flip Clock
A retro-style mechanical flip clock with real-time and countdown modes.
1
1
1
1
7
7
7
7
3
3
3
3
0
0
0
0
2
2
2
2
5
5
5
5
Installation
npx shadcn-vue@latest add https://raya-ui.com/registry/flip-clock.jsonOr manually:
npm install clsx tailwind-merge class-variance-authorityExamples
Countdown Mode
Use the countdown prop with a targetDate.
2
2
2
2
3
3
3
3
5
5
5
5
9
9
9
9
5
5
5
5
9
9
9
9
Sizes & Variants
Supports multiple sizes (sm, md, lg, xl) and standard theme variants.
1
1
1
1
7
7
7
7
3
3
3
3
0
0
0
0
2
2
2
2
5
5
5
5
1
1
1
1
7
7
7
7
3
3
3
3
0
0
0
0
2
2
2
2
5
5
5
5
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| countdown | boolean | false | If true, counts down to targetDate. Otherwise shows current time. |
| targetDate | Date | string | - | Required if countdown is true. |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | The size of the clock digits. |
| variant | string | 'default' | Color theme variant (default, secondary, destructive, outline, muted). |
| showDays | 'auto' | 'always' | 'never' | 'auto' | Controls visibility of the days section in countdown mode. |