Is Flip Calendar free to use?

Yes. Flip Calendar is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.

How do I install Flip Calendar?

One command: npx shadcn@latest add https://aicanvas.me/r/flip-calendar.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Flip Calendar for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.

What is Flip Calendar built with?

Flip Calendar is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.

Where would I use Flip Calendar?

Common uses include Marketing site, Dashboard, and Reminder. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix Flip Calendar with AI?

Yes. Flip Calendar ships with one comprehensive AI prompt written against the real source code. Open "Remix with AI" on this page to read and copy it into Claude, Cursor, ChatGPT, or any AI tool. Prompts are for remixing your own variation; for the exact component, install it with the one-command CLI.

Flip CalendarA desk-calendar widget showing dates 1–31 with a satisfying flip-clock page-turn animation.

WidgetsMarketing siteDashboardReminder

↑ swipe ↓

Add to your project

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/flip-calendar

For dark mode, add the dark class to your <html> element:

Optional

<html class="dark">

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

Get MCP

About Flip Calendar

Flip Calendar is a desk-calendar widget showing dates one through thirty-one, each accompanied by a satisfying flip-clock style page-turn animation as the day advances. The flip is implemented with Motion driving a two-half transform so the page hinges through the middle, with a soft easing on the second half that lands like real paper. Use it as a "today is" widget on a marketing page, a date marker inside a dashboard, or a reminder card in a productivity tool.

Built with

MotionTailwind CSS

Frequently asked questions

Is Flip Calendar free to use?: Yes. Flip Calendar is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
How do I install Flip Calendar?: One command: npx shadcn@latest add https://aicanvas.me/r/flip-calendar.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Flip Calendar for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
What is Flip Calendar built with?: Flip Calendar is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.
Where would I use Flip Calendar?: Common uses include Marketing site, Dashboard, and Reminder. Like every AI Canvas component, it is self-contained and drops into any React project.
Can I remix Flip Calendar with AI?: Yes. Flip Calendar ships with one comprehensive AI prompt written against the real source code. Open "Remix with AI" on this page to read and copy it into Claude, Cursor, ChatGPT, or any AI tool. Prompts are for remixing your own variation; for the exact component, install it with the one-command CLI.