Add a countdown timer to Framer and display something when the date is reached ✨
Need to create a countdown on your Framer site? Want to display a live countdown with full control and even the ability to trigger an action when the specified date is reached? With Framer, you can easily implement a dynamic countdown timer that provides a visually appealing and interactive experience for your users.
![](https://cdn.prod.website-files.com/5beab1239ac8840644a660b4/6470157ed2977ff306e1bd73_Framer%20Countdown%201.png)
To add the component paste this URL in your Framer Canvas 🥳
https://framer.com/m/Countdown-rrlY.js@qioiIhXiGx0CqfBdybLZ
OR Remix the project here 👉
https://framer.com/projects/new?duplicate=aOL4VFpzErCV6dTzkF6p
How does it work?
1. Add the component to your project
To add the countdown component to your project, copy the component link: https://framer.com/m/Countdown-rrlY.js@qioiIhXiGx0CqfBdybLZ
Highlight and copy the full URL of the countdown component. Ensure that you capture the entire link to avoid any issues. Alternatively, you can remix our project and copy the component from the remix (Linked above)
2. Customise the styles and layout
With Framer's UI, you have the ability to fully customize every aspect of the countdown, including the layout, colors, typography, and much more. Here's how you can personalize your countdown to match your design vision.
![](https://cdn.prod.website-files.com/5beab1239ac8840644a660b4/647016fa5b998388bcedd165_Framer%20Countdown%202.png)
3. Display something when the date is reached
Once the specified date is reached, you can seamlessly replace the countdown element with a new element of your choice, such as displaying a message like "Our Sale is Over
![](https://cdn.prod.website-files.com/5beab1239ac8840644a660b4/64701bbf5b998388bcf20c68_Framer%20Countdown%204.png)
4. Publish and enjoy
That's it, just publish the project and your countdown will work perfectly on every load. Remember to adjust any settings or configurations as needed to match your specific countdown requirements. Enjoy the flexibility and control provided by this countdown component in your Framer project!
![](https://cdn.prod.website-files.com/5beab1239ac88487c3a6608f/65b87e142e6ead53235883aa_flowbase-blog.png)