Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Storefront blocks

Pro

Free Swatch Request Storefront Block for React Aria

A free swatch request for a curtain fabric shop: eight drawn swatches with checkboxes, a tray of three slots that fills as you tick, a limit of three that disables the rest and says so, and a send button.

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 shoppers try before they buy, with this free swatch request for React with React Aria. A header names the offer and says what Wheatear & Wren, a curtain fabric shop, sells. A hairline frame with a plus mark on each corner holds a tray of three slots that fills as you tick fabrics, each filled slot with a Remove button, and under it eight drawn swatches in hairline cells. Each weave is a repeating gradient in a grey step, with a checkbox. At three, the unticked cells are disabled and say "Limit 3: remove one to swap", and the status line announces it. A line says the swatches are free and posted flat in three to five working days, and Send my samples is the one Shine Button: it needs at least one swatch and then says "Requested in this demo, nothing is sent". It's built from Button, Badge, native checkboxes and Guides, with drawn swatches and a CSS entrance only. For a fabric, paint, tile or flooring shop.

FAQ

How do I use my own fabrics?

Edit FABRICS: each has an id, a name, a meta line, a ground grey step (0 to 3) and a weave that picks one of the gradients in WEAVES. Change LIMIT for a different allowance; the tray and the messages follow.

How is the limit enforced?

Once the tray holds LIMIT swatches, every cell that is not ticked is disabled, so you cannot go past it, and the cell says why. Remove a swatch from the tray or untick one to free a slot.

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

Nothing is sent; the choices stay in the page and the status line says so. In your app, post the chosen ids with the shopper's address in send and confirm with your own message.

Can I use photographs of the fabrics?

Yes. The swatch is a small drawn tile; swap Tile for an img and keep its square box so the cells keep their size.

How does it look on a phone?

The swatches are two across, the tray stays three across, and the foot with Send my samples rides the bottom of the screen.

Is it accessible?

Each swatch is a real checkbox named by its fabric, the tray is an ordered list with Remove buttons that name the swatch, and a disabled cell says why in text. The status line is a polite live region that is there from the start.

All 100 storefront blocks