Task CardsA swipeable project task card stack where each card has a unique accent colour, status badge, and due date.

Add to your project

One command adds this component to your project.

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.

About Task Cards

Task Cards is a swipeable project task stack where each card carries a unique accent color, a status badge, and a due date. Drag a card left or right and it spins out of the deck and settles into the back, ready for the next one to come forward. Motion drives both the drag tracking and the springy snap-back, and the colors adapt cleanly between light and dark themes. It is a good fit for productivity dashboards, agile boards, and onboarding flows where each card is a discrete next-action.

Built with

Frequently asked questions

Is Task Cards free to use?

Yes. Task Cards 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 Task Cards?

One command: npx shadcn@latest add https://aicanvas.me/r/task-cards.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Task Cards 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 Task Cards built with?

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

Where would I use Task Cards?

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

Can I remix Task Cards with AI?

Yes. Task Cards ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.

Featured in collections