Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Storefront blocks

Pro

Comparison Storefront Block for Svelte

Pick up to three of eight small kitchen appliances from a grid of drawings, see the picks in a dock, and compare their price, power, weight and cord as proportional bars in a side sheet, with the rest in words.

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 shortlist and compare, with this comparison section for Svelte with Ark UI. A header says what Cobweb & Cog sells. A hairline frame with a plus mark on each corner holds eight drawn appliances in hairline cells, each with its price and a native checkbox. At three picks the other checkboxes are disabled and say "Limit 3: remove one". A dock at the foot of the frame, pinned to the bottom of the screen on a phone, shows the picks as three small slots with a remove button each, a status line and the block's one Shine Button, "Compare 2" (or 3), which opens a real Sheet. The sheet draws four numbers (price, power, weight and cord length) as bars in proportion to the largest, marks the largest in words, and sets "Best for" and "Controls" as words. Compare needs two picks and says so; closing the sheet returns focus to the Compare button. It's built from Button, Sheet, Shine Button and Guides, with a CSS entrance only. For a category page or a collection with many similar products.

FAQ

How do I fill it with my own products and specs?

Edit APPLIANCES and SPECS. An appliance has an id, a name, a drawing kind, best and controls as words, and its numbers (price in cents, watts, grams, cord in centimetres). To add a number, add a field, a case in figureOf and textOf, and an entry in SPECS.

How are the bars scaled?

Each bar is the value's share of the largest value among your picks, as a whole percent, with a small minimum so the smallest still shows. The largest is marked "(largest)" in words, so neither the length nor a colour is the only signal.

How is the limit of three enforced?

At three picks the unpicked checkboxes are disabled and say so, and each pick has a remove button in the dock. Compare needs at least two picks and answers with a message if you press it with fewer.

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

The picks, the sheet and the numbers are all in the page; nothing is saved. Load your products into APPLIANCES, and if you want the shortlist to persist, store picks in the URL or your own storage in tick.

How does it look on a phone?

The grid goes two across, the dock is pinned to the bottom of the screen with the slots above the button, and the sheet opens from the end edge of the layout, taking the full width of a small screen.

Is it accessible?

Each cell is a label around a real checkbox with a visible focus ring, the dock's remove buttons are named, the sheet traps focus and closes on Escape, and the status line is a polite live region present from the start. The drawings are decorative.

All 100 storefront blocks