Loading...
Loading...
The PackingList component displays interactive packing checklists with categorized items (Essential, Optional, Not Needed), optional checkboxes, packing tips, and print-friendly formatting. Perfect for weather pages and travel guides.
Interactive packing list with checkboxes for Florence in January. Click items to check them off as you pack.
Multiple layers for variable indoor/outdoor temperatures
January in Florence can be cold, especially in mornings and evenings
Lightweight waterproof or water-resistant jacket
January is one of the wettest months in Florence
Sturdy, waterproof shoes for walking on cobblestones
Essential for exploring Florence on foot
Compact, foldable umbrella
High chance of rain in January
Warm accessories for morning and evening
Mornings can be quite cold, especially near the river
DSLR or mirrorless camera with weather protection
Florence is beautiful even in winter, but protect your equipment
European Type C adapter
Italy uses Type C plugs
Power bank for long days of sightseeing
Cold weather drains battery faster
Too cold for open-toed shoes
Temperatures are too low for sandals in January
Not appropriate for January weather
Temperatures are too cold for summer clothing
Not needed in winter months
UV index is very low in January
Pre-grouped packing list with packing tips included. This example uses the groupedItems prop for better organization.
Breathable fabrics for hot weather
Wide-brimmed hat for sun protection
High SPF sunscreen for beach and city exploration
Sandals suitable for walking on uneven paths
For beach days along the coast
Compact, quick-dry towel
For rocky beaches
Most places accept cards, but cash is useful for small vendors
Some small shops and restaurants prefer cash
Too hot for summer
Summer temperatures are very warm
Not needed in summer
Too hot for boots
Compact grid layout for alpine winter packing essentials.
Heavy, waterproof insulated jacket
Merino wool or synthetic thermal underwear
Waterproof, insulated boots with good grip
Essential cold weather accessories
UV protection for snow reflection
Basic packing list without location or month context. Useful for general travel packing lists.
import { PackingList, PackingItem } from '@/components/composite/PackingList';
import { Shirt, Umbrella, Footprints } from 'lucide-react';
const items: PackingItem[] = [
{
id: '1',
name: 'Warm layers (sweaters, long-sleeve shirts)',
category: 'essential',
description: 'Multiple layers for variable temperatures',
icon: Shirt,
reason: 'January in Florence can be cold',
quantity: '3-4 pieces',
},
{
id: '2',
name: 'Waterproof jacket',
category: 'essential',
icon: CoatHanger,
quantity: '1 jacket',
},
{
id: '3',
name: 'Camera (weather-resistant)',
category: 'optional',
icon: Camera,
quantity: '1 camera',
},
{
id: '4',
name: 'Sandals',
category: 'not-needed',
reason: 'Too cold for open-toed shoes',
},
];
<PackingList
items={items}
month="January"
location="Florence"
showCheckboxes={true}
onItemToggle={(id, checked) => console.log(id, checked)}
showPrintButton={true}
showShareButton={true}
layout="list"
/>
// With pre-grouped items and tips
<PackingList
groupedItems={{
essential: [...essentialItems],
optional: [...optionalItems],
notNeeded: [...notNeededItems],
tips: [
'Pack light layers for variable temperatures',
'Bring a reusable water bottle',
],
}}
month="July"
location="Amalfi Coast"
layout="grid"
columns={2}
/>Array of PackingItem objects (will be automatically grouped by category)
Pre-grouped items by category (takes precedence over items prop)
Optional month name for context (e.g., "January")
Optional location name for context (e.g., "Florence")
Enable interactive checkboxes for tracking packing progress (default: false)
Layout variant: 'list' (default), 'grid', or 'accordion'
Show print button in header (default: false)
Show share button using Web Share API (default: false)