Wishlist Button
Heart icon toggle button with filled/outline states and optional count badge.
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/wishlist-button.tsx
Installation
Using shadcn CLI
npx shadcn add wishlist-button --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated Ecommerce Components
Cart Item
Cart row with thumbnail, title, price, quantity controls, subtotal, and remove button.
Checkout Summary
Order totals panel with items list, subtotal, shipping, tax, discount line, promo input, and checkout call to action.
Price Tag
Price display with currency symbol, strikethrough for discounts, and optional sale badge.
Product Card
E-commerce product card with image, title, price, rating stars, add-to-cart button, sale badge, and wishlist toggle.
Quantity Selector
Numeric stepper with minus/plus buttons, number input, min/max limits, and disabled states.
Rating Display
Read-only star rating display with filled, empty, and half stars using inline SVG, plus optional review count.