Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Product Card Skincare Routine
Skincare routine card with AM/PM products, application order, and skin type match for React beauty apps
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Display skincare routines on your Next.js beauty platform with this product card component. Features routine type toggle (AM/PM), product steps in order, application time estimate, skin type compatibility, and shop routine button. Built with shadcn/ui Card, Button, Badge, and Tabs components using Tailwind CSS. The skincare-focused design educates customers—perfect for Shopify headless beauty brands, skincare apps, or any React app selling beauty routines. Informative and conversion-driving.
Product Card
Hydration Hero Routine
Cleanser
Gentle Foam Wash
$28
1 min
Toner
Hydrating Essence
$34
30 sec
Serum
Hyaluronic Acid 2%
$42
1 min
Moisturizer
Daily Hydra Cream
$48
1 min
SPF
Invisible Shield SPF 50
$36
1 min
Complete routine
$448
$515
Installation
Related blocks you will also like
React Product Card Simple
Vertical product card
React Product Card Beauty
Beauty product card
React Product Card Bundle
Product bundle card
React Product Card Meal Kit
Step-by-step product
React Product Card Subscription
Subscription box card
React Product Card Grid
Product grid layout