Plus UI

Product View UI (20 Variants)

Responsive product detail views for image-led commerce pages with pricing, delivery, rating, and purchase actions.

Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile
Preview Code
Desktop Tablet Mobile

Product View Blocks

Product view blocks present a single commerce item with product imagery, purchase context, and action controls. The collection now includes product-view-1 through product-view-20, preserving the original six Figma-backed examples and adding expansion variants for detail, subscription, low-stock, bundle, refill, and member-price product states.

Key Features

  • Product Image: A durable local product image keeps the product visually identifiable.
  • Static Gallery State: Gallery dots or thumbnail strips show the selected image without adding scripts.
  • Product Summary: Title, description, delivery helper, price, discount, rating, and reviews remain grouped according to the source design.
  • Wishlist Action: The favorite action stays visible beside the product title.
  • Size Selection: Static Plus UI select controls keep product choice visible without adding scripts.
  • Variant Selection: Static size, color, or product-image choices keep product options visible without adding scripts.
  • Purchase Actions: Add to Card and Buy Now actions remain grouped and become full-width on narrow screens.
  • Responsive Product Layout: One static markup structure shifts from a side-by-side product view on desktop to a stacked mobile view.

Best Practices

  • Use durable product imagery and descriptive alternative text.
  • Keep the image and purchase context in one bordered product-detail panel.
  • Use Plus UI chips and buttons for rating, discount, wishlist, and purchase states.
  • Keep gallery dots static and accessible instead of adding carousel scripts.
  • Preserve the product data hierarchy from the source design before adding extra commerce controls.

Future Shoes Product View

Future Shoes Product View is an image-led product detail block for a discounted shoe product. It uses a large shoe image, static gallery dots, title, description, free delivery helper, sale price, original price, discount badge, rating chip, review link, wishlist action, and Add to Card / Buy Now purchase actions.

Future Shoes Product View Data

  • Product: Shoes of the Future
  • Description: Experience unmatched comfort and style with our innovative design that adapts to every step you take.
  • Delivery: Free Delivery
  • Sale price: $110.97
  • Original price: $110.97
  • Discount: %40
  • Rating: 4.8
  • Reviews: 39 Reviews
  • Actions: Add to Card, Buy Now, Add Shoes of the Future to favorites

Cosmetics Product View

Cosmetics Product View is a responsive beauty product detail block. It uses a durable local cosmetics image, static gallery dots, category tagline, title, description, sale price, discount badge, rating summary, review count, free delivery helper, required size selector, wishlist action, and Add to Card / Buy Now purchase actions.

Cosmetics Product View Data

  • Category: Home and Life
  • Product: Cosmetics
  • Description: A lightweight daily cosmetic that hydrates the skin while enhancing its natural glow.
  • Delivery: Free Delivery
  • Sale price: $110.97
  • Original price: $110.97
  • Discount: %40
  • Rating: 4.3
  • Reviews: 210 Reviews
  • Selector: Size, Choose your size
  • Actions: Add to Card, Buy Now, Add Cosmetics to favorites

Premium Wine Product View

Premium Wine Product View is a responsive wine product detail block. It uses durable local wine imagery, a static thumbnail strip, title, sale price, discount badge, five-star rating, order metadata, description copy, required wine-type selector, quantity selector, wishlist action, and a Buy Now purchase action.

Premium Wine Product View Data

  • Product: Premium Wine
  • Description: A rich and full-bodied red wine with deep berry aromas and subtle oak notes. Smooth tannins and a balanced finish make it an excellent choice for relaxed evenings.
  • Sale price: $110.97
  • Original price: $110.97
  • Discount: 20% Off
  • Rating: 5 stars
  • Reviews: 70
  • Orders: 154 Orders
  • Selectors: Wine type, Quantity
  • Actions: Full View, Buy Now, Add Premium Wine to favorites

Design Mug Product View

Design Mug Product View is a responsive mug product detail block. It uses durable local mug imagery, a static thumbnail strip, title, rating summary, sale price, discount badge, description copy, color swatches, quantity selector, wishlist action, Add to Card action, and free-delivery helper.

Design Mug Product View Data

  • Product: Design Mug
  • Description: A modern, stylish mug created with a clean aesthetic and comfortable grip. Perfect for daily coffee or tea moments, combining functionality with a minimal design that fits seamlessly into any workspace or home setting.
  • Sale price: $110.97
  • Original price: $110.97
  • Discount: 20% Off
  • Rating: 4.3
  • Reviews: 210 Reviews
  • Color action: Pick a color
  • Quantity: 1
  • Delivery: Free Delivery, Enter your postal code for delivery Availability
  • Actions: Full View, Add to Card, Add Design Mug to favorites

Concept Dress Product View

Concept Dress Product View is a responsive fashion product detail block. It uses durable local fashion imagery, static gallery dots, title, sale price, discount badge, rating summary, review count, discount and delivery metadata, description copy, compact size selector, wishlist action, and Add to Card action.

Concept Dress Product View Data

  • Product: Concept Dress
  • Description: A bold and innovative design that blends art and fashion, perfect for making a statement at any occasion.
  • Sale price: $110.97
  • Original price: $110.97
  • Discount: -40%
  • Rating: 4.8
  • Reviews: 39 customer reviews
  • Promotion: Top Discount of the Sale
  • Delivery: Free Delivery
  • Size options: S, M, L
  • Actions: Add Wish List, Add to Card

Perfume Product View

Perfume Product View is a responsive fragrance product detail block. It uses durable local product imagery, static gallery dots, title, sale price, discount badge, rating summary, review count, free-delivery helper, description copy, image-card color choices, wishlist action, and Add to Card action.

Perfume Product View Data

  • Product: Perfume for woman
  • Description: A delicate and captivating fragrance that embodies elegance and sophistication for every moment.
  • Sale price: $90.97
  • Original price: $110.97
  • Discount: -40%
  • Rating: 4.3
  • Reviews: 210 Reviews
  • Delivery: Free Delivery
  • Color options: Crew Pink, Crew Black, Crew Red, Crew White
  • Actions: Add Wish List, Add to Card

Expansion Variations

  • Trail Runner Product View: Responsive shoe product view with durable imagery, delivery metadata, size buttons, rating proof, and purchase actions.
  • Clean Routine Product View: Cosmetics product view with subscription metadata, size selector, durable image, wishlist action, and grouped CTAs.
  • Reserve Cellar Product View: Wine product view with thumbnail strip, tasting metadata, quantity choice, durable bottle imagery, and buy action.
  • Studio Mug Gift Product View: Mug product view with durable thumbnail imagery, color swatches, quantity controls, rating metadata, and add action.
  • Runway Dress Product View: Fashion product view with durable dress imagery, fit selector, sale metadata, wishlist action, and purchase CTA.
  • Fragrance Discovery Product View: Fragrance product view with durable image-card options, sale metadata, rating proof, and static wishlist/cart actions.
  • Member Shoe Product View: Member-priced product view with durable shoe imagery, benefit chips, static size choices, and purchase actions.
  • Travel Skincare Product View: Travel kit product view with durable cosmetics imagery, compact plan selector, rating chip, and grouped purchase actions.
  • Cellar Subscription Product View: Subscription product view with durable wine imagery, static thumbnail choices, delivery cadence selector, and checkout CTA.
  • Coffee Break Product View: Mug product view with durable imagery, pickup metadata, color choice, quantity controls, and add-to-cart action.
  • Studio Capsule Product View: Fashion capsule product view with fit metadata, durable product image, rating proof, and wishlist/cart actions.
  • Scent Wardrobe Product View: Fragrance product view with durable image options, set comparison cards, sale metadata, and static cart controls.
  • Low Stock Runner Product View: Low-stock product detail with durable shoe imagery, stock progress, size state, delivery helper, and checkout actions.
  • Routine Refill Product View: Refill-focused product view with durable cosmetics imagery, saved-plan metadata, static choices, and reorder action.

Join to our newsletter

Join to our popular weekly newsletter Plus UI, packed with updates, tips on UX and get the latest news in your inbox.

Join now

© Plus UI 2026

Plus UI offers an integrated Design System and UI Library, featuring a versatile suite of components to elevate your development projects. We streamline the web app development process with fully customizable pre-built components, themes, and powerful integrations.

Our components are built on a centralized token architecture, ensuring consistency and efficiency across your design system and UI library. The UI Library's framework-agnostic technology allows seamless use of components across different frameworks. Optimized for speed, it offers fast loading times, high performance, and quick integration, making it the fastest component library for web applications. The token architecture ensures theming consistency, covering essential design aspects like Color, Typography, Icons, Borders, Spacing, Opacity, Shadows & Effects, and Breakpoints. Integrations with Tailwind CSS and Font Awesome enhance functionality. Ready-to-use themes include light and dark modes, with full customization to apply your branding. Plus UI is also compliant with WCAG 2.1 standards for accessible web design.

We have meticulously designed and developed a collection of 26 feature-rich core components, with over 2000 variants and more than 2000 free icons in our Freemium Plan. For more advanced needs, our Pro Plan provides access to professionally designed and developed components, blocks, and templates. Our core components include: Accordion, Alert, Avatar, Badge, Button, Button Group, Breadcrumb, Checkbox, Chip, Divider, Drawer, Dropdown, Input, Link, Modal, Progress, Popconfirm, Popover, Radio, Rating, Select, Tabs, Textarea, Toast, Toggle, and Tooltip. Advanced components feature Charts, Date & Time Pickers, Data Grids, and Tree Views. The Plus UI component library offers a robust and flexible solution for building user interfaces, with support for React, Vue.js, Angular, Svelte, Next.js, and other frameworks.

How We Differ from Other Market Providers:

Plus UI sets itself apart from other UI libraries and design systems. While systems like IBM's Carbon Design System excel in scalability for enterprise use, Plus UI integrates a centralized token system that unifies the design system and UI library, enhancing consistency and efficiency.

Unlike the Atlassian Design System, which focuses on simplicity for enterprise solutions, Plus UI provides a rich set of customizable and accessible components powered by Tailwind CSS and Font Awesome, ensuring a lightweight and flexible design framework.

The Figma Design System is known for its powerful collaboration features. Plus UI complements these by offering a meticulously organized suite of components compatible with Figma, allowing designers to leverage advanced features alongside our extensive library.

For Salesforce developers, the Lightning Design System offers robust tools. Plus UI provides similar robustness but extends its versatility by supporting multiple frameworks like React, Angular, Vue, and Svelte, making it adaptable to a wider range of applications.

The Airbnb Design System emphasizes user-centric principles. Plus UI builds on this with a centralized token system that enhances design coherence, ensuring all components adhere to consistent standards.

Apple’s Design System is celebrated for its sleek aesthetics and high performance. Plus UI matches this standard while providing a vast array of fully customizable and accessible components, including support for dark themes.

Atomic Design focuses on breaking down UIs into smaller, reusable components. Plus UI extends this approach with over 2000 variants and a rich set of properties and tokens, enabling efficient development of complex interfaces.

The IBM Design System is known for its comprehensive guidelines and accessibility. Plus UI offers user-friendly, accessible interfaces with detailed documentation and a component library that boosts productivity and design consistency.

The Salesforce Lightning Design System is optimized for Salesforce applications. Plus UI offers broader integrations, making it suitable for various frameworks beyond Salesforce, providing greater versatility.

Google's Material Design is a cohesive framework for responsive, mobile-first interfaces. Plus UI supports these principles but distinguishes itself with a lightweight package and a powerful combination of Tailwind CSS and Font Awesome for enhanced customization.

The Google Design System pioneered modern design principles. Plus UI builds on these by offering a comprehensive and highly adaptable system that caters to a broader range of needs.

The Uber Design System focuses on accessibility for a global user base. Plus UI shares this focus and expands on it by providing fully customizable components tailored to diverse user needs.

Microsoft's Fluent Design System emphasizes light, depth, and motion. Plus UI incorporates these principles while providing an extensive library of easy-to-use components for a seamless development process.

Finally, the Ant Design System is popular for its robust components in enterprise environments. Plus UI offers similar robustness but stands out with its centralized token system, extensive component library, and multi-framework compatibility, making it ideal for a wide range of applications.

In essence, Plus UI combines the strengths of these renowned design systems while offering unique features like a centralized token system, extensive customization, and framework-agnostic components, setting it apart as a versatile and powerful solution.

Plus UI Logo Plus UI

Copyright © 2026 Plus UI Inc. All rights reserved.