Todo List blocks for every framework.

They are 100 React task list blocks in 14 groups, from list basics, row depth and task fields to life and money and lists for things. Each is a working list with checkboxes, a foot that counts what is done, and a behaviour of its own, such as sorting, repeating or planning a day.

Basic Task List is the plain list every other one starts from, with an add field, due dates, a done count and an undo. Task List with Subtasks and Nested Task Tree add children, Drag to Sort Task List lets you reorder, and Search and Filter Task List finds tasks in a long list.

Kanban Task List has To do, Doing and Done lanes with a limit on Doing, Calendar View Task List and Gantt Chart Task List lay tasks on dates, Eisenhower Matrix Task List sorts them by urgent and important, and Daily Planner Task List and Time Blocking Task List plan a day.

A task is a small typed object, usually an id, a title, a done flag and sometimes a due date, kept in React state with the sample tasks typed at the top of the file. The fixed date the due dates are worked out from is typed there too.

They are not saved: the blocks use no localStorage and no fetch, so a list resets when the page reloads. Basic Task List says this in its comment: write each change to your own store from the add, toggle and delete handlers, and load the saved tasks as the initial state.

Drag to Sort Task List reorders by dragging a row's grip, and its Move up and Move down buttons are the keyboard and touch route on their own. After each move focus stays on the control used and a status line says where the row went. Save the new order from the move handler.

Quick Add Task Dialog reads marks such as !high, @nora, #home and >fri as you type, and Natural Language Task List reads phrases like next Friday at 5pm. Both use a short list of typed patterns, not a model, and show what they understood as chips you can remove. Add a pattern to the list, or call your own parser from add.

Recurring Task List gives each task a rule (daily, every weekday, weekly on a day, monthly on a date) and works out its next date. Ticking one records the turn and moves Next to the following date the rule allows, and a Repeats popover changes the rule. Store the rule on the task and run the same date step on your server.

Search and Filter Task List marks the matching words, uses All, Open and Done tabs whose counts follow the search, and says exactly what is shown. Its list keeps a fixed height, so nothing jumps while you filter. Replace the filter with a query to your own API for a long list.

Import and Export Task List reads pasted Markdown checkboxes, bullets, numbered lines or a CSV with a title,done,due header, and writes the list as text, Markdown, CSV or JSON, with a Download made in the browser. Nothing is uploaded. Keyboard Shortcuts Task List adds j, k, x, e and n keys on the list. For shared lists, Collaborative Task List only shows typed presence, so connect your own realtime channel.

This page lists 100 of the category's 100 todo list blocks for React on Base UI. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The todo list blocks here are written on Base UI primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/todo-list-accessibility-check.json). The other bases are one picker away from /todo-list-block.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on Base UI. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/todo-list-accessibility-check.json for Accessibility Check. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Accessibility Check brings Accordion, Badge, Checkbox, Copy Button, Guides and Progress, installed before it. Nothing else changes in your project.

Use the filters above the grid: 14 kinds of todo list block, led by gates and audits (8), lists for things (8), list basics (7) and row depth (7), and sort by popular or name. A good first look: Accessibility Check, Task Analytics Task List and Approval Task List. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a todo list block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the the list itself, views and plans and day and calendar kinds.

Open its page and use the full-screen viewer (/view/todo-list/accessibility-check) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each todo list block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Base UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the todo list blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 todo list blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a todo list block, read it with get_block and install it on your React on Base UI stack.

Pass `category: "todo-list"` to search_blocks to search only the 100 todo list blocks, or to list_blocks for the 14 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "todo-list", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.