Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Storefront blocks

Pro

Looks in Your Size Lookbook Storefront Block for React Aria

A menswear lookbook that starts from your top and waist sizes: three drawn flat-lay looks whose pieces read In your size or Sold out, a derived look total and an Add the look button that explains why it is off.

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

Sell a whole outfit and keep it honest about sizes, with this lookbook for React with React Aria. A header names the idea and says what Wenlock & Rye, a menswear label, makes. A hairline frame with a plus mark on each corner opens with two Toggle Groups, your top size (S to XL) and your waist (30 to 36). Three Tabs, Weekend, Office and Rain, each show a drawn flat-lay of three pieces beside the pieces as rows, with the price and a word for your size: "In your size" or "Sold out in M". The look total is added up from the prices, and changing a size re-reads every row and every look at once. Add the look is the one Shine Button; while any piece is out in your size it is disabled, and the status line names the piece and the size. Adding raises the bag count by the look's pieces. It's built from Toggle Group, Tabs and Guides, with drawn flat-lays and a CSS entrance only. For a clothing label's look pages or an editorial shop.

FAQ

How do I use my own looks?

Edit LOOKS. Each look has an id, a label and three pieces; each piece has a name, a price in cents, a drawn kind and tone, the sizes sold out and which of your sizes it uses (top or waist). Keep the same number of pieces in every look so the tabs hold one height.

Why is Add the look off?

A look can only be added when every piece is in your size. The button is marked unavailable, not hidden, and pressing it puts the reason in the status line, for example that the blazer is sold out in M. Pick another size to turn it on.

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

The sizes live in the page and adding only raises the bag count. In your app, send the pieces and sizes to your cart API in add and take stock from your catalogue instead of the typed out lists.

Does the panel change height between looks?

No. Every look has three rows and a flat-lay of the same shape, and the tabs share one grid cell.

How does it look on a phone?

The flat-lay sits above the pieces, the two size groups stack, and the foot with Add the look rides the bottom of the screen.

Is it accessible?

The size choices are named groups of buttons, the looks are real tabs, and availability is text as well as a dot. The status line is a polite live region that is there from the start and explains a disabled button.

All 100 storefront blocks