Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Travel Bookings Todo List Block for Svelte

A trip checklist with a tab per day, timed items that each have a Booked, Pending or Flexible status, a booking reference field for booked items, and a switch that narrows each day to what is still to book.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Know what is booked and what is not, with this travel to-do list block for Svelte with Ark UI. Tabs switch between four days (Day 1 to Day 4, Mon 2 to Thu 5 Nov), each tab showing how many items are still to book. Every day lists three timed items with a Native Select for Booked, Pending or Flexible and the transport to the next item as plain text ("Tram, 12 min"). A booked item shows an Input for its booking reference in a slot that is always reserved, so rows never change height; leaving it empty says "Add the booking reference." The header counts what is still to book, and a Switch narrows each day to the items that were pending when it was turned on, with an Empty state if a day has none. Guides rule the bands. For travel apps, itinerary tools and group trips.

FAQ

What counts as still to book?

Items whose status is Pending. Booked items are done and Flexible items need no booking, so changing a status moves the count in the header, the tab badges and the status line together.

Why does a row stay when I book it with the switch on?

The switch keeps the items that were pending at the moment you turned it on. A row you book remains until you turn the switch off and on again, so the control under your pointer or focus never disappears.

When is the booking reference required?

When an item is Booked and its field has been visited and left empty. The message appears in a reserved line under the row, so nothing shifts, and the field is wired to it with aria-describedby.

What stays local, and how do I save for real?

Statuses and references live in the page and reset on reload, and nothing is booked or sent. Persist from the pick and edit handlers; the transport text is typed data you would load with the trip.

How does it look on a phone?

The day tabs scroll sideways inside their strip, each row's select takes a full-width line and the reference field sits under it with the transport text.

All 100 todo list blocks