Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Storefront blocks

Pro

Quick View Storefront Block for React Aria

A grid of six drawn homeware products whose Quick view opens the real Dialog on that product, with Previous and Next, a count like 3 of 6, arrow keys, sizes with derived prices and a quantity, and Add that raises the panel's bag count.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people look at a product without leaving the shelf with this quick view block for React with React Aria. A header introduces Bracken & Bloom, a homeware shop. In a hairline frame with a plus mark on each corner, six drawn products sit in cells, each with its name, a From price and a Quick view button. Pressing one opens the real Dialog on that product: its drawing, a description, a ToggleGroup of three sizes with derived prices, a quantity stepper, the total and the Shine Button. Previous and Next walk the grid, wrapping at the ends, and the header counts 3 of 6. The dialog keeps its size from product to product. Add says so inside the dialog and raises the bag count in the panel. The dialog is closed on load and it is a modal one, so Escape closes it and focus returns to the cell of the product you last saw. It suits a shop page, a collection or a search result.

FAQ

How do I use my own products?

Edit PRODUCTS: a name, a drawing kind and grey step, a description, and three sizes, each with a label and a price in cents. Keep three sizes on every product, so the dialog keeps one height as people page through. The From price on a cell is the lowest of its sizes.

Which keys work?

Inside the open dialog the Left and Right arrow keys step to the previous and next product (mirrored in a right-to-left page), and Home and End jump to the first and last. They are left to the size group while focus is inside it. Escape closes the dialog.

Where does focus go when I close it?

To the Quick view button of the product you last saw, not the one you opened. If you paged from the first product to the fourth, closing returns to the fourth.

What stays local in the demo?

The bag count lives in the page and nothing is bought or sent. To wire it, send the product, the size id and the quantity from add to your cart, and keep the line inside the dialog and the status line outside it.

How does it look on a phone?

The cells go two across. The dialog fills the screen, with the count and Close at the top, the picture, the sizes and Add scrolling in the middle, and Previous and Next pinned at the foot.

Is it accessible?

The dialog is modal with a title and a description, focus is trapped inside it and returned afterwards, each Quick view button is read with its product's name, and the sizes are a named group. The line inside the dialog and the status line outside it are polite live regions.

All 100 storefront blocks