Flip Clock
A retro-style mechanical flip clock with real-time and countdown modes.
2
2
2
2
0
0
0
0
4
4
4
4
8
8
8
8
2
2
2
2
0
0
0
0
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.
0
0
0
0
0
0
0
0
1
1
1
1
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
Sizes & Variants
Supports multiple sizes (sm, md, lg, xl) and standard theme variants.
2
2
2
2
0
0
0
0
4
4
4
4
8
8
8
8
2
2
2
2
0
0
0
0
2
2
2
2
0
0
0
0
4
4
4
4
8
8
8
8
2
2
2
2
0
0
0
0
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. |