Todo List Keyboard Shortcuts
A keyboard navigation focused todo list block for React and Next.js with shortcut hints, active row highlighting, and toggleable shortcut legend built with shadcn/ui and Tailwind CSS
Navigate tasks entirely with your keyboard using this shortcut-driven todo list block for React and Next.js. Features visible keyboard shortcut hints for new task, navigation, toggle, delete, and edit actions, an active row with ring highlight, and a toggleable shortcut legend panel. Built with TypeScript, shadcn/ui Button, Kbd, Badge, and Input components, framer-motion staggered animations, and Tailwind CSS. Perfect for power-user productivity apps, developer task managers, and keyboard-first interfaces.
Related Components
Automation Todo
Task automation rules
Natural Language Todo
Smart text parsing task input
Emoji Status Todo
Emoji-based status indicators
Import Export Todo
Import and export tasks
Voice Memo Todo
Tasks with voice memo attachments
Dark Minimal Todo
Dark-themed minimal design
FAQ
Was this page helpful?
Sign in to leave feedback.
Kanban
A kanban-style todo list block for React and Next.js with three-column workflow, task cards, and click-to-move progression built with shadcn/ui and Tailwind CSS
Learning Path
A course progress tracker block for React and Next.js with module sections, lesson checkboxes, duration labels, type badges for video, quiz, and exercise, module progress bars, and streak indicator built with shadcn/ui and Tailwind CSS