steep components
All components

GiftMessageInput

Toggle + textarea for adding a gift message at checkout. Optional fee hint.

components/gift-message-input.tsxPeer deps: lucide-react

Live preview

Usage

import { GiftMessageInput } from "@/components/gift-message-input";

const [giftEnabled, setGiftEnabled] = useState(false);
const [giftMessage, setGiftMessage] = useState("");

<GiftMessageInput
  enabled={giftEnabled}
  message={giftMessage}
  onToggle={setGiftEnabled}
  onMessageChange={setGiftMessage}
  feeCents={500}
/>