Primitives
Animated Number Avatar Badge Button Button Group Toggle Toggle Group Checkbox Chip Countdown Divider Fab Grid Icon Image Input Search Input Textarea Label Loader Marquee Masked Input Message Bubble Notification Banner Offline Banner Progress Progress Ring Radio Group Range Slider Rating Separator Skeleton Slider Stack Stepper Switch Text Theme Toggle Ticker Typing IndicatorComposed
Accordion Achievement Badge Action Bar Action Sheet Action Swap Activity Rings Add to Cart Button Address Card Agenda List Alert Amount Keypad Animated Icons App Bar Audio Message Audio Recorder Autocomplete Avatar Group Balance Display Bar List Barcode Before After Biometric Gate Bloom Menu Bottom Sheet Paywall Sheet Side Sheet Breadcrumb Calendar Calendar Strip Card Carousel Cart Item Character Charts Chat Composer Chat List Item Choice Card Circle Reveal Coach Marks Collapsible Collapsible Header Color Picker Combobox Command Palette Comment Thread Confetti Consent Sheet Context Menu Copy Field Country Picker Coupon Input Currency Input Data Table Date Range Picker Day Schedule Dialog Dock Donut Chart Drawer Driver Card Dropdown Menu Drum Picker Emoji Picker Empty State Error State Event Card Expandable Control Fader Feature Gate File Picker Filter Bar Follow Button Form Gauge Glass Glass Cluster Glass Dock Morph Glass Fab Morph Glass Lab Glass Orb Glass Search Morph Glass Sheet Edge Gradient Button Headline New Heatmap Image Cropper Image Viewer Kanban Card Keyboard Avoiding Keyboard Toolbar Leaderboard Level Progress Lightbox Like Button Line Chart List Reorderable List Swipeable Row Location Card Location Search Map Sheet Map View Markdown View Media Controls Media Picker Media Tile Mention Input Meter Bar Mini Player Mood Slider Morphing Modal Multi Select Navigation Rail Notification Item Number Input Onboarding Pager Order Card Order Summary OTP Input Pagination Paper Clip New Parallax Header Pass Card Password Strength Payment Button Payment Card Payment Method Permission Primer Phone Input PIN Pad Polaroid New Poll Popover Post Card Postage Stamp New Price Tag Pricing Table Product Card Product Gallery Profile Header Promo Banner Prompt Input Property Card Pull To Refresh QR Code Quick Actions Quick Replies Rating Summary Reaction Picker Resend Timer Review Card Review Prompt Ride Option Save Button Scan Frame Scroll Spy Tabs Seat Map Section Header Section Index Segmented Control Select Share Button Share Sheet Shutter Button Signature Pad Slide to Confirm Slot Picker Smart Banner Social Login Button Sparkline Splash Screen Split Button Stat Card Stateful Button Status Dot Step Flow Steps Sticker New Stopwatch Stories Progress Stories Viewer Story Ring Streak Counter Streaming Text Success Seal Swipe Deck Tabs Tag Input Tape New Text Reveal Thinking Indicator Time Picker Timeline Timer Ring Tip Selector Toast Toolbar Tooltip Track Row Transaction Row Trip Progress Variant Picker Video Controls Waveform Weather Card Weekday Picker Zoom TransitionScreens
Account Switcher Biometric Setup Delete Account Forgot Password Grow Auth Login Login — Dark Stage Login — Dense Work Login — Editorial Login — Illustrated Login — Minimal Ink Login — Social Login — Video Loop Food Onboarding Onboarding Onboarding Dark Objects Onboarding Editorial Onboarding Illustrated Onboarding Personalize Onboarding Photo Carousel OTP Verification Passkey — Create Password Reset Permission — Notifications Phone Verification Onboarding Quiz Session Devices Signup Sign-up Chat Sign-up Photo Sheet Social Auth Split Auth Verify Identity Welcome AI Chat AI Assistant Channels List Chat Info Chat List Chat Media Chat Thread Create Group Group Info Message Requests New Message Kept Messages Accessibility Activity Log Appearance Authenticator Blocked Accounts Export Your Data Downloads Edit Profile Edit Profile — Rows Emergency Call Empty States Set Error State Send Feedback Device Locator Help Center Home — Bento Home — Dark Home — Editorial Home Feed Invite Friends Language & Region Linked Accounts Not Found (404) Notification Settings Notifications Password Vault Paywall Paywall — Comparison Paywall — Dark Stage Paywall — Editorial Paywall — Photo Paywall — Trial Timeline Privacy Profile Profile — Gamified Profile — Minimal Profile — Photo Hero QR Scanner Report Issue Saved Items Phone Time Search Search — Command Palette Search — Visual Account Health Settings Settings — Dark Device Settings — Search Storage & Data Terms & Privacy Dating Chat Dating Filters Profile Discover Its A Match Into You Matches Profile Detail Profile Editor Courier Matching Delivery History Delivery Support Package Schedule Parcel Tracking Proof Of Delivery Quick Aisle Quick Home Send Package Substitutions Add Payment Address Book Cart Categories Checkout Checkout — Steps Checkout Success Delivery Filters & Sort Flash Sale Gift Cards Loyalty Points Order Cancel Order Detail Orders Pay Later Checkout Payment Methods Product Detail Product Detail — Hero Product Grid Product Reviews Promo Codes Recently Viewed Return Items Search Results Shop Assistant Store Home Tip & Rate Courier Order Tracking Wishlist Write a Review Event Checkin Event Hero Events Discover My Tickets Seat Selection Ticket Checkout Add Card Bank Accounts Dashboard — Bento Bill Pay Budgets Card Details Crypto Portfolio Finance Dashboard Dashboard — Dark Exchange Currency Expense List Invoice Detail Manage Cards Plan Management Savings Goals Send Money Spending Analytics Split Bill Subscriptions Token Detail Token Swap Transactions Wallet Home Wallet Movers Courier Tracking Food Cart Food Home Food Orders Grocery List Recipe Detail Restaurant — Dark Restaurant Detail Activity Rings Fitness Home Habit Quest Habit Tracker Meal Planner Med Store Meditation Player Mood Check-in Nutrition Home Period Tracker Prior Auth Prior Auth Cases Quest Complete Run Tracking Rx Scan Sleep Tracker Telehealth Booking Walk Map Water Tracker Workout Complete Workout Detail Workout Session Applications Apply Company Interview Schedule Job Detail Job Feed Resume Saved Jobs Create Listing Item Chat Listing Detail Make Offer Market Checkout Market Home Market Search My Listings Offers Inbox Seller Profile Audiobook Player Camera Gallery Albums Game Store Mini Player Music Player Photo Editor Photo Gallery Playlist Detail Podcast Player Clips Feed Serene Home Sound Mixer Stories Video Call Video Player Article Reader Course Detail Event Detail Memory Onboarding Icon Lab Leaderboard Lesson Player Match Detail News Editorial News Home Plant Care Prediction Live Prediction Welcome Smart Home Standings Ticket Wallet Topics Follow Weather Detail Add Task Sheet Alarm Clock Calendar Day Calendar Month Doc Scanner File Manager Focus Timer Journal Kanban Board Mail Inbox Mail Thread Note Editor Notes List Reminders Task List Time Blocks Agent Profile Compare Homes Mortgage Calculator Property Detail Rental Application Saved Homes Schedule Tour Search List Search Map Complete Destination Driver Arriving Ev Charging History Home In Trip Matching Options Parking Receipt Safety Schedule Scooter Unlock Booking Confirmed Booking Review Booking Slots My Bookings Pro On The Way Provider Detail Provider List Rate Service Services Home Arc Create Arc Detail Arc Onboarding Avatar Creator Comments Sheet Create Post Explore Grid Followers List Hashtag Feed Mentions Post Detail Post Hero Social Profile Boarding Pass Booking Confirm Car Rental Trip Discover Flight Live Flight Preferences Flight Results Flight Search Hotel Detail Live Transit Trip — Map Day Trip — Rideshare Request Seat Select Travel Home Trip Itinerary Trip OnboardingNothing matches — try another word.
Product Card
ProProduct card in grid, list-row and hero layouts. Adding to the bag can send a small copy of the photo flying to your basket, quick-add turns into a quantity stepper, and saving fills the heart.
Preview
Pro source · 567 lines
Part of LumioUI Pro. With Pro, the full file shows here and npx @lumioui/cli add pro/product-card writes it into your repo. Unlocking your Pro source… Couldn't load the source. Refresh to try again.
import { ProductCard } from "@/components/ui/product-card/product-card";
export function Example() {
return (
<ProductCard />
);
}Installation
Install the dependencies
npx expo install react-native-reanimatedAdd the components it builds on
Copy the source from the Code tab into your project
components/ui/product-card/product-card.tsxcomponents/ui/product-card/index.tsIcons it renders
Update the import paths to match your project setup.
star
heartUsage
import { ProductCard } from "@/components/ui/product-card/product-card";<ProductCard />Examples
A 2-up outerwear catalogue, in ink.
Pro source · 90 lines
Part of LumioUI Pro. With Pro, the full file shows here and npx @lumioui/cli add pro/product-card-grid writes it into your repo. Unlocking your Pro source… Couldn't load the source. Refresh to try again.
The featured drop at the top of a running store's shop tab, lime to match the shoe.
Pro source · 42 lines
Part of LumioUI Pro. With Pro, the full file shows here and npx @lumioui/cli add pro/product-card-hero writes it into your repo. Unlocking your Pro source… Couldn't load the source. Refresh to try again.
The "Popular" section of a delivery-app restaurant menu, orange.
Pro source · 130 lines
Part of LumioUI Pro. With Pro, the full file shows here and npx @lumioui/cli add pro/product-card-row writes it into your repo. Unlocking your Pro source… Couldn't load the source. Refresh to try again.
API reference
image* string Product photo URL.
—title* string Product name.
—price* number Current price, major units.
—layout "grid" | "row" | "hero" Shape. Default "grid".
"grid" imageAspect number Photo width/height ratio. Default 4/5 grid · 1 row · 4/3 hero.
—brand string Brand / maker / restaurant line.
—description string One or two lines of description (row + hero).
—compareAt number Compare-at price — struck through when higher.
—unit string Unit for a unit price ("lb", "kg").
—priceBadge PriceTagProps["badge"] Sale badge mode forwarded to PriceTag. Default "percent" when on sale.
—badge string Overlay pill on the photo — "New", "Bestseller", "Just in".
—rating number Average rating 0–5.
—reviewCount number Review count shown beside the rating.
—swatches string[] Colour dots under the title (grid). Any colour strings.
—maxSwatches number Max dots before "+N". Default 4.
4 favorite boolean Controlled wishlist state.
—defaultFavorite boolean Uncontrolled initial wishlist state. Default false.
false onFavoriteChange (favorite: boolean) => void — showFavorite boolean Show the wishlist heart (grid + hero). Default true.
true quickAdd boolean Show the add control. Default true.
true quantity number Controlled bag quantity for the add control.
—defaultQuantity number Uncontrolled initial bag quantity.
—onQuantityChange (quantity: number) => void — addMode AddToCartButtonProps["mode"] Hero add-button behaviour. Default "confirm".
"confirm" addLabel string Hero add-button label. Default "Add to bag".
"Add to bag" onAdd () => void | Promise<unknown> Hero add handler (may be async — the button shows a spinner).
—soldOut boolean Out of stock — dims the photo, swaps the add control for "Sold out".
false onPress (e: GestureResponderEvent) => void Opens the product.
—format FormatPriceOptions Money formatting.
—flyTo React.RefObject<View | null> Where an add flies to — the basket bar or bag count.
—onAddLanded () => void Fires when the flying photo lands in flyTo (or at the commit without one).
bagChip boolean Show the "n in bag" chip on the photo while the product is in the bag. Default true.
true className string —