This is an automated archive made by the Lemmit Bot.
The original was posted on /r/homeassistant by /u/nutteloost on 2025-05-25 10:06:01+00:00.
Hi everyone 👋
I am excited to share Todo Swipe Card, a custom card I developed for Home Assistant. This card allows you to organize multiple todo lists in a single space and navigate between them with intuitive swipe gestures, making it perfect for optimizing dashboard space while keeping your tasks organized.
Why I Made This Card 🧐
While Home Assistant has excellent todo list functionality, I found myself wanting to group related lists together without cluttering my dashboard. Existing solutions either lacked the specific styling I wanted for todo lists or required complex configuration. I decided to build a dedicated card that combines multiple todo lists with built-in styling and smooth navigation.
This card requires card-mod to function properly, but it handles all the complex styling internally while still allowing full customization through CSS variables.
Features ⭐️
- Swipe between multiple todo lists with smooth animations
- Built-in styling with customizable options through themes and card mod
- Pagination dots for visual navigation
- Configurable spacing between cards
- Options to show or hide completed items
- Delete completed items button with optional confirmation dialog
- Background image support for individual lists
- Full visual editor support
- Mobile-friendly touch and mouse navigation
- Extensive customization through CSS variables
Demo 🎬
Example .gif
Configuration Example 🗒️
You can configure the card using the visual editor or with YAML:
type: custom:todo-swipe-card
show_pagination: false
show_addbutton: true
show_create: true
show_completed: true
show_completed_menu: true
delete_confirmation: true
card_spacing: 10
entities:
- todo.albert_heijn
- todo.jumbo
- todo.ikea
- todo.hornbach
- todo.action
background_images:
todo.albert_heijn: /local/images/background_image/albert_heijn.png
todo.jumbo: /local/images/background_image/jumbo.png
todo.ikea: /local/images/background_image/ikea.png
todo.hornbach: /local/images/background_image/hornbach.png
todo.action: /local/images/background_image/action.png
Visual Editor 🛠️
The card includes a comprehensive visual editor that allows you to add or remove todo lists, configure display options, set background images for individual lists, and adjust spacing without writing any YAML code.
You can show and hide several elements in the card such as the text input field, add button and the delete button. With these options it is possible to use this card as a 'read-only' task list which only shows tasks and the possibility to mark them as completed.
Customization Examples 🎨
The card supports extensive theming through 25 custom CSS variables. Here is an example of a customized colored list with square pagination dots:
https://preview.redd.it/6d13t7i7jw2f1.png?width=474&format=png&auto=webp&s=0a37111aa6d5f1ffd4c0f8b9c50d7c74b9ac23a0
Installation & More Information ℹ️
All installation instructions, configuration details, and customization options are available in the GitHub repository:
GitHub - nutteloost/todo-swipe-card: A specialized swipe card for todo lists in Home Assistant
Important Note: This card requires card-mod to be installed and working properly, as it uses internal card-mod styling for its core functionality.
I look forward to seeing how you integrate this card into your Home Assistant dashboards. If you have feedback or encounter any issues, please feel free to reach out through the GitHub repository.
