Menus & Actions

Animated Task List

체크 동작에 짧은 애니메이션을 더한 작은 투두 리스트입니다.

Preview

action control

Animated Task List

check tasks with motion

Code in Assembly 💾

Present a bug as a feature 🪲

Push to prod on a Friday 🚀

bash

Copied

1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/playful-todolist.json

bash

Copied

1npx shadcn@latest add https://ryong-blog.vercel.app/r/playful-todolist.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong-blog.vercel.app/r/playful-todolist.json

bash

Copied

1bunx shadcn@latest add https://ryong-blog.vercel.app/r/playful-todolist.json

typescript

Copied

1import { PlayfulTodoList } from "@/components/playful-todolist"23export default function Example() {4  return <PlayfulTodoList />5}

Prop	Type	Default	Description
className	string	-	Additional classes merged onto the component.
items	TodoItem[]	built-in list	Todo labels and initial checked states.