📝 Todo Swipe Card - Stylish, Swipeable Todo Lists

Share your Projects! Dashboards & Frontend
,
1

Hello Home Assistant community! :wave:

I’m sharing my latest creation: Todo Swipe Card - a specialized card for todo lists with built-in styling and swipe functionality.

todo-swipe-card-example

The Story Behind This Card :books:

I wanted a way to organize multiple shopping lists on my dashboard, each representing a different store with its own background image with the colors and logo from the store. This was already partially possible with the native shopping-list card, but because I wanted to use multiple shopping-list cards and swipe them, I developed my own custom card that fits my needs.

Now I can swipe between my store-specific lists, each with customized styling that makes it instantly recognizable.

Features :sparkles:

  • Swipe between multiple todo lists
  • Built-in styling with customizable background images
  • Pagination dots for quick reference
  • Options to show/hide completed items
  • Delete completed items button with optional confirmation dialog
  • Full visual editor support

:warning: Important: This card requires card-mod to be installed!

Configuration Example :clipboard:

yaml

type: custom:todo-swipe-card
entities:
  - todo.shopping_list
  - todo.home_tasks
  - todo.work_projects
show_pagination: true
show_addbutton: true
show_create: true
show_completed: true
show_completed_menu: true
delete_confirmation: true
card_spacing: 15
background_images:
  todo.shopping_list: /local/images/shopping_bg.jpg
  todo.home_tasks: /local/images/home_bg.jpg

Visual Editor :paintbrush:

The card includes an easy-to-use visual editor for easy configuration from the dashboard without the need to edit any yaml. Please see the Github repository for a screenshot.

My Use-Case :100:

My personal setup has a todo list for each grocery store with their logo and brand colors as the background, as seen in the example .gif. When I drive near Albert Heijn, Jumbo, Ikea, or any other store, Home Assistant sends me the appropriate list via a notification. It’s been a huge help for remembering those little items we always forget! :shopping_cart:
If you’re interested I can send you the automation.

Installation & More Information :package:

For installation instructions and complete documentation:

:point_right: GitHub - nutteloost/todo-swipe-card: A specialized swipe card for todo lists in Home Assistant with custom styling

Let me know if you have any questions or suggestions.

1 Like