Checklist With CMS
Interactive Checklist with drag gestures, completion animations, tags, CMS integration, and customizable styles.
Made with Workshop
Build your own component with AI
About this Component
This Checklist Component is a highly interactive, animated task manager designed for modern React + Framer environments. It supports both manual todos and CMS-powered collections, making it flexible for static use or dynamic syncing with Framer’s CMS.
Each todo item includes a checkbox, completion animations, optional tags with custom colors, and timestamps. Users can drag right to mark as complete or drag left to reveal action buttons (complete/delete). The component uses Framer Motion for smooth animations, hover states, and transitions, making interactions fluid and intuitive.
Key Features:
Drag Gestures: Swipe right to complete, swipe left for action buttons.
Animations: Strikethrough line, checkbox tick, button transitions, and smooth layout shifts.
CMS Integration: Sync with Framer’s CMS items or use manual todo arrays.
Customizable Styles: Background, text, border radius, spacing, and button states are fully configurable.
Tags & Priorities: Optional colored tags for categorization (e.g., Work, Code, Maintenance).
Action Buttons: Complete or delete with hover states and animations.
This component is ideal for productivity dashboards, project management apps, or Framer prototypes where interactive task tracking is needed with CMS syncing.
