Skip to content

shadcn.io is an independent project built on shadcn/ui

Pro

Sale Product Card Block for Svelte

Three bed-linen tiles on sale with a switch that shows the same saving as a percent, an amount or a struck-through old price, plus the end date and an Add to bag with Undo.

UI library: Ark UI

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

Show a markdown the way your shoppers read it with this sale product card for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds three tiles, each marked at its own corners by Guides. A tile has a drawn greyscale picture, the name and a fact, the sale price and the saving, the end date with the days to go, and an outline Button that says "Add to bag". A Toggle Group at the end of the header, "Show savings as", changes the saving on every tile at once: a Badge with "-25%", a Badge with "Save $18", or the old price struck through beside the sale price. Each tile has one typed pair of prices, and the percent is rounded once from the cents. Add turns into "Added" with an Undo, the heading row's "Bag" count follows and a polite status line says what changed. Nothing is stored or bought. On a phone the tiles are a row you swipe, with the next one showing. For sale pages, promotions and any shop that wants to test its wording.

FAQ

How do I change the prices?

Edit LINENS. Each piece has a wasCents and a nowCents, so $72 is 7200. The percent, the amount saved and the struck-through price are all worked out from those two numbers, which means they always agree. Whole dollars are shown without cents.

Why does one tile say -21% when the saving is $10 on $48?

The percent is rounded once to a whole number, from the cents: $10 off $48 is 20.8%, which reads 21%. Nothing is rounded twice, and the amount and the old price are exact.

Is there a countdown?

No clock runs. The end is a typed date (ENDS) and the days to go are counted from a fixed "today" (AS_OF), so the page is the same on every load. In a real shop count from the visitor's date, on the server, and say "Ends 20 Oct" in the shop's time zone.

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

The wording choice and the bag are page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart. The pictures are typed shapes: swap Picture for an img of each product.

How does it look on a phone?

The tiles become a row you swipe sideways, each about three quarters of the width so the next one shows. The row is a focusable region, so a keyboard user can scroll it with the arrow keys. The switch drops under the sentence.

Is it accessible?

The saving is always a word and a sign, never only a color, and a struck-through price is announced as "was $72". Each picture is a named image, each tile has an h3, and the buttons name their product. Changing the wording is announced by the polite status line.

All 100 product cards blocks