Per-day weather strip for an upcoming trip with emoji glyphs, high/low, and an amber packing tip.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Travel24 } from "@/components/beste/piece/travel24";
<Travel24
city="Lisbon · Jun 14 – 18"
days={[
{
"date": "Fri 14",
"high": 27,
"low": 18,
"icon": "sun"
},
{
"date": "Sat 15",
"high": 26,
"low": 19,
"icon": "partly"
},
{
"date": "Sun 16",
"high": 23,
"low": 18,
"icon": "cloud"
},
{
"date": "Mon 17",
"high": 21,
"low": 17,
"icon": "rain"
},
{
"date": "Tue 18",
"high": 24,
"low": 18,
"icon": "partly"
}
]}
advisory="Pack a light jacket for Mon evening showers."
/>Quick language helper with English meaning, native script, and romanized transliteration per row.
Pre-trip card with a focal day count, a thin progress line toward departure, and a boarding-detail caption.
Hotel result row with a square gradient thumbnail, location line, star rating, and per-night price.
Poster-style destination tile with a warm gradient, corner save heart, category tag, and city label.
Day-of-trip card with a destination header and a vertical timeline of timed stops linked by a rail.
Minimal place row showing name, distance, and an ETA pill with an optional travel-mode caption.