Day 16 - Animate UI Playful Todolist

前言

#

在使用框架時，我們常常希望能有現成的元件可快速套用，或只需稍加修改就能使用。今天要介紹的，就是 Animate UI Community 所提供的元件 —— Playful Todolist。這是一個充滿趣味的待辦清單，每當任務完成時，會自動顯示帶有波浪動畫的刪除線效果，讓你在建立這類功能時能更輕鬆、更快速地完成。

Playful Todolist

#

1. 使用 Shadcn CLI 加入 Playful Todolist

   npx shadcn@latest add @animate-ui/components-community-playful-todolist
   npx shadcn@latest add label
   

2. Import 元件並將元件放在想要的位置上

   import { PlayfulTodolist } from '@/components/animate-ui/components/community/playful-todolist';
   

   <PlayfulTodolist />
   

   

3. 可以結合 LocalStorage 或其他資料庫，讓網頁端的待辦清單能夠真正落實使用

   

   這邊偷懶一下，請 Copilot 幫我作 😂 Copilot 設定如下：

   • 串接 Animate UI MCP
   • Agent Mode
   • Claude Sonnet 3.5

   咒語在這邊：

   將 PlayfulTodolist 中的 checkboxItems
   結合 localstorage 儲存資料
   

   若有儲存到 LocalStorage 網頁關掉還是會有資料儲存～(非無痕的情況下)

4. 結合 Input Box 和 Button，可以動態增加 Items

   

   畫面中有閃一下是我按了 F5 重新整理，若有儲存到 LocalStorage 網頁關掉還是會有資料儲存～

   咒語在這邊：

   在 h1 旁邊加上 + Add
   可以動態增加 checkboxItems
   並讓使用者自行輸入 items label
   

小結

#

今天我們介紹了 Animate UI 的 Playful Todolist 元件，它是一款兼具趣味性與互動感的待辦清單元件，特別之處在於：當你標記任務為完成時，它會以波浪線（wavy strikethrough）的動畫效果劃過文字，營造一種活潑、有趣的視覺體驗。不僅提升 UI 的動感，也適合在產品管理、任務板、學習筆記等場景中使用，讓用戶在操作待辦事項時，感受到「做完一件事」的成就感。

Reference

#

• Animate UI Playful Todolist