Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Storefront blocks

Pro

Product Dimensions Storefront Block for React Aria

A dimensioned drawing of a duffel with cm or in labels, a Product or Package view with the weight, and a Will it fit check that compares a space you type against each axis.

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

Answer the shopper's first luggage question, whether it will fit, with this dimensions panel for React with React Aria. A header says what Saltash, a luggage shop, sells and holds a Segment Group for cm or in. In a hairline frame with a plus mark on each corner, the first cell draws the duffel with its width, height and depth lines labelled in the chosen unit, under a Product or Package switch and the weight (kg or lb). The side cell asks Will it fit: type the width, depth and height of a space in Input fields and each axis says how much is to spare or how far over the bag is, with one sentence for the result, such as Fits with 2 cm to spare or Too wide by 4 cm. Switching to Package redraws the bag larger and changes every number together, and typed values convert when the unit changes. It's built from Segment Group, Input, Field and Guides, with a drawn product and a CSS entrance only. For a luggage or furniture product page, a shipping box guide or a carry-on checker.

FAQ

How do I fill it with my own product?

Edit DIMS: a product and a package entry, each with a width, depth and height in centimetres and a weight in grams. The drawing is sized from those numbers, so a deeper or taller product is drawn deeper or taller.

How is the check worked out?

Each axis of the space is compared with the same axis of the bag, with no rotation: spare room is the space minus the bag. If every axis is zero or more, the answer is the smallest spare room; otherwise it names the axis that is over by the most. Every axis is also listed under the fields.

Are the converted numbers exact?

They are rounded to one decimal. The check is always worked out in centimetres, so the answer does not change with the unit, only the way it is written.

What stays local, and how do I wire it to real data?

The sizes and the space are samples and nothing is sent. To use real data, load your product's dimensions into DIMS. To check a stored space, such as a locker or a cabin allowance, set the initial space from it.

How does it look on a phone?

The drawing sits under the view switch and the check follows it; the three fields go side by side and their results stack under them. The unit labels are chips on the dimension lines, so nothing is cut off at 320 px.

Is it accessible?

The unit and view switches are named radio groups, each field has a visible label that includes its unit, the drawing is decorative because the dimensions are also written beside the fields, and the result is a polite live region present from the start.

All 100 storefront blocks