shadcnblocks

Vertical timeline with a left-aligned separator, filled dot markers, and card-wrapped entries showing dates, titles, and prose content.

A task manager for organizing items by due date, project, and priority, with subtasks, drag-and-drop, filters, starring, and add, edit, and delete actions.

A simple todo list with a heading, task titles, and checkboxes that toggle completion and fade completed items.

A todo list with grip handles for drag-and-drop reordering, checkboxes to toggle completion, and keyboard-accessible sort controls.

A drag-and-drop todo list that splits active tasks from a collapsible completed section, with checkboxes and animation when items move.

A drag-and-drop todo list that lets users add tasks from an inline input, cancel creation, reorder items, and toggle completion.

A drag-and-drop todo list for creating, reordering, editing, and deleting tasks, with a dropdown of actions and a delete confirmation dialog.

A drag-and-drop todo list with priority badges, starred items, filter and sort dropdowns, and controls to add and complete tasks.

A task list for creating items with due dates, priorities, reminders, and project tags, plus drag-and-drop reordering, filtering, and sorting.

A drag-and-drop todo list where tasks expand to show nested subtasks, progress, checkboxes, and a field to add new subtasks.

A drag-and-drop todo list with real-time search, per-task tags, tag filters, and controls to add or remove tags on each item.

Small Toggle Group.

Default Size Toggle Group.

Large Toggle Group.

Default Toggle Group.

Outline Toggle Group.

Single Selection Toggle Group.

Disabled Toggle Group.

Small Toggle.

Default Size Toggle.

Large Toggle.

Default Toggle.

Outline Toggle.

Disabled Toggle.

Toggle with Text.

Tooltip with Title and Description.

Tooltip with Icon.

Tooltip with Keyboard Shortcut.

Tooltip with Image.

Simple Tooltip.

Tooltip Positions.

Tooltip with Longer Text.

Tooltip on Icon.

A button whose outline draws itself on hover with SVG stroke effects including draw, loop, dual, dash, and glow.

Tree with defaultExpandedIds preset to open specific folders on load.

File tree with connector lines enabled via showLines.

Tree with multiSelect enabled for choosing several nodes with Ctrl or Cmd.

File tree with folder and file icons hidden using showIcons false.

Selectable tree where one node can be highlighted at a time.

Basic nested folder and file tree with expand and collapse.

A four-column strip of trust items, each with an icon, title, and short description covering shipping, returns, payment, and ratings.

A trust strip with star rating, review count, customer total, and an as-seen-in row of press names.

A strip of certification badges with icons plus a row of guarantee labels such as money-back, authenticity, and secure checkout.

A compact trust bar with star rating, verified review count, shipping and support icons, and a verified seller badge.

Full-screen second-step card with a six-digit authenticator input and a continue button.

Two-column second-step screen with a six-digit code form and a full-height photograph.

Two-column pairing screen with a scannable authenticator QR code on one side and a six-digit code form on the other.

Second-step panel that shows a grid of one-time recovery codes with a download action.