Skip to content

Component System

Reusable UI primitives for the Travelio demo

This page shows the shared controls used across search, booking, account, and admin views so the project is easier to understand and extend.

Inputs

Text fields

Pickers

Date and select

Filters

Price slider

Price Range$300 - $950

Actions

Buttons

Chips

Badges

Best SellerTop RatedLimitedConfirmed

Cards

Tour card shell

Tropical beach experience
Best Seller
Bali, Indonesia

Island Hopper Adventure

4.9From $899

Charts

Dashboard charts

$24k
Jan
$36k
Feb
$42k
Mar
$58k
Apr
$46k
May
$64k
Jun
100%
Status
Confirmed48%
Completed25%
Pending15%
Cancelled12%

How to use it

src/components/ui

Low-level controls such as UiSelect, UiDateField, UiPopover, and UiPriceSlider live here.

src/components

Product components such as cards, headers, search, dashboards, and booking actions live here.

src/lib

Demo persistence for wishlist, saved plans, profile, settings, and admin drafts is isolated here.