Task Cards

A swipeable project task card stack where each card has a unique accent colour, status badge, and due date. Drag left or right to cycle through tasks — springs back the dismissed card to the bottom of the deck.

Cards & ModalsInteractive
Design

Brand Overhaul

Complete visual identity refresh — logo, type scale, and colour system across all brand touchpoints.

Progress0%
Marketing

Product Launch

Coordinate go-to-market strategy, press kit, social assets, and launch-day campaign timeline.

Progress0%
Engineering

API Migration

Migrate three legacy endpoints to v3 schema with full backward-compatibility and rollback plan.

Progress0%
Analytics

Q2 Metrics

Build consolidated dashboard — retention, revenue, and activation funnels with weekly drill-down.

Progress0%

Add to your project

One command adds this component to your project.

1

Run the following command:

npx shadcn@latest add "https://aicanvas.me/r/task-cards.json"
2

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

Optional
<html class="dark">

More like this

AI Job Cards

AI Job Cards

Label Cards

Label Cards

Slide Deck

Slide Deck