# CountdownTimer

> Countdown timer for sales, launches, and urgency

Canonical URL: https://fa7e86e3d553:3005/islands/content/countdown-timer

> Countdown to sale end, launch, or restock. Creates urgency. Use sparingly for credibility.

## Preview

**Category**: Content

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| endDate | string | yes | - | Target date/time (ISO 8601 format: "2026-07-01T00:00:00Z") |
| labels | object | no | `{}` | Custom labels with days, hours, minutes, seconds (optional strings) |
| expiredMessage | string | no | "Time's up!" | Message shown when countdown ends |
| style | enum | no | simple | Display style: 'flip', 'simple', or 'circular' |

## Embed Example

```html
<lx-island name="CountdownTimer">
  <script type="application/json">
{
  "endDate": "example-endDate"
}
  </script>
</lx-island>
```

## Usage Patterns

**Sale banner** (above fold):

```html
<lx-island name="CountdownTimer">
  <script type="application/json">
{
  "endDate": "example-endDate"
}
  </script>
</lx-island>
```

**Inline with product** (minimal style):

```html
<lx-island name="CountdownTimer">
  <script type="application/json">
{
  "endDate": "example-endDate"
}
  </script>
</lx-island>
```

## Tips

- **Date format must be ISO 8601** (YYYY-MM-DDTHH:MM:SSZ) — include timezone "Z" for UTC
- style:'flip' — animated flip cards (high-impact, hero placement)
- style:'simple' — clean numbers with labels (most versatile)
- style:'circular' — circular progress indicators (modern, compact)
- Use sparingly — fake urgency damages trust
- Set realistic deadlines (verify sale actually ends on that date)
- expiredMessage hides timer and shows message when time hits zero
- Custom labels prop: `{"days":"D","hours":"H","minutes":"M","seconds":"S"}` for short labels

## Stylable Parts

Target internal elements via `data-part` selectors in section CSS:

| Part | Description |
|------|-------------|
| `box` | Each digit/unit box |
| `digit` | Number text inside box |
| `label` | Unit label text |
| `ring` | SVG progress ring (circular style) |
| `root` | Outermost container |
| `separator` | Divider between units |
| `unit` | Single unit wrapper (digit + label) |

```css
/* Example: circular gradient boxes */
[data-section-id='SECTION'] [data-part='box'] {
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 8px 24px rgba(102,126,234,0.3);
  border: none;
}
[data-section-id='SECTION'] [data-part='digit'] {
  color: white;
  font-size: 2rem;
}
```

## Related Islands

- [EmailCapture](/islands/engagement/email-capture) — Pair with signup form for early access/restock alerts
- [Modal](/islands/engagement/modal) — Use `trigger:"exit_intent"` for a last-chance offer