Baggage Add-on

Cards 51

About

Additional Baggage Selection UI designed for flight or travel booking apps. It allows users to choose extra baggage weight options (5 kg, 10 kg, 15 kg) with clear pricing. The selected option is highlighted with a radio button and summarized below for quick confirmation. Simple icons, dark theme, and concise layout make it easy to review and decide. Ideal for airline apps, ticket booking platforms, or travel management systems.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Baggage Add-on to your project and fits it to your theme.

Code

How Baggage Add-on is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import { MinimalistOptionSelector, Option } from '@/components/ui/baggage-add-on';
import { Briefcase, Luggage, ShoppingBag } from 'lucide-react';

// Data for the component options
const baggageOptions: Option[] = [
  {
    id: '5kg',
    icon: <ShoppingBag className="h-5 w-5" strokeWidth={1.5} />,
    label: '5 kg',
    price: 20,
  },
  {
    id: '10kg',
    icon: <Briefcase className="h-5 w-5" strokeWidth={1.5} />,
    label: '10 kg',
    price: 25,
  },
  {
    id: '15kg',
    icon: <Luggage className="h-5 w-5" strokeWidth={1.5} />,
    label: '15 kg',
    price: 30,
  },
];

export default function MinimalistOptionSelectorDemo() {
  const [selectedValue, setSelectedValue] = React.useState<string>('10kg');
  const selectedOption = baggageOptions.find(opt => opt.id === selectedValue);

  return (
    // The container div no longer has background color classes
    <div className="flex flex-col items-center justify-center min-h-[500px] w-full gap-6 p-4">
      <MinimalistOptionSelector
        options={baggageOptions}
        defaultValue="10kg"
        onValue-change={(id) => setSelectedValue(id)}
      />
      
      {/* Selection summary */}
      <div className="text-center">
        <p className="text-sm text-muted-foreground">
          Your selection:
        </p>
        <p className="text-base font-semibold text-foreground">
          {selectedOption?.label} - ${selectedOption?.price}
        </p>
      </div>
    </div>
  );
}