Countdown
A countdown component that displays the time left until a specified date.
- Displays the time left until a specified date.
- Supports varying layouts (default, full, split, and banner).
- Customizable with a title and target date.
Installation
Run the following command
npx vibes@latest add countdownUsage
Import the component.
import { Countdown } from '@/vibes/soul/primitives/countdown'Display the component.
<Countdown title="Sale ends in" targetDate={new Date('2025-06-30')} />API Reference
Default
| Prop | Type | Default |
|---|---|---|
type | default | |
images | string[] |
Full
| Prop | Type | Default |
|---|---|---|
type | full | |
backgroundImage | string |
Split
| Prop | Type | Default |
|---|---|---|
type | split | |
image | string |
Banner
| Prop | Type | Default |
|---|---|---|
type | banner |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --countdown-default-split-background: var(--primary-shadow); --countdown-number-default-background: var(--primary); --countdown-number-default-text: var(--primary-shadow); --countdown-number-full-background: var(--primary-shadow); --countdown-number-full-text: var(--primary); --countdown-image-background: var(--primary-shadow); --countdown-text: var(--background); --countdown-icon: var(--background); --countdown-font-family: var(--font-family-body);}