> For the complete documentation index, see [llms.txt](https://help.twinr.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twinr.dev/native-screen/countdown-timer.md).
# Countdown Timer
{% tabs %}
{% tab title="Content Tab" %}
## Configure Timer
⏰ **Timer Setup**\
Add a timer block and set your countdown details.
**Timer Fields:**
* **End Date & Time** – Select when the countdown will finish.
* **Time Zone** – Choose the correct time zone for accuracy.
* **Action on Completion** – Decide what happens when the timer hits zero (e.g., redirect, show message, or hide element).
🧮 **Display Options**
* **Format:** Choose what units to display (Days, Hours, Minutes, Seconds).
* **Initial State:** Option to hide timer until loaded.
{% endtab %}
{% tab title="Settings Tab" %}
## Customize Appearance
### 🎨 **Timer Design**
* **Background Color:** Add a background to the timer area.
* **Corner Radius:** Round off the timer edges for smoother visuals.
* **Padding & Spacing:** Adjust internal and external margins.
🏷 **Text & Number Styles**
* **Font Style:** Heading, Label, or Custom size.
* **Color:** Match your app theme.
* **Alignment:** Centered or aligned to the edges.
🎯 **Timer Box Style**
* **Border or Shadow:** Add subtle borders or drop shadows to enhance visibility.
* **Animation:** Enable smooth transitions as numbers change.
### 👁️ **Visibility**
* **Platform:** Android, iOS, or PWA
* **Device:** Mobile / Tablet
* **User Type:** Guest / Logged-in
{% endtab %}
{% endtabs %}
### ✅ **Use Case Examples**
* **Flash Sale:** Countdown to the end of an offer.
* **Event Launch:** Show time remaining until an event begins.
* **Feature Unlock:** Display time left until a new update goes live.
## 📱 How It Looks
Below are example of how the Countdown Timer appears in the app:
> 