Trending Society

Sort Toolbar | UI components | Trending Society

More from @ecomcn, 8 components

All @ecomcn

Announcement Bar component
@ecomcn
The thin inverted ink bar above everything — free-shipping thresholds, sale windows, drops — with a brand dot between messages. Static, or a marquee at 26s a loop that holds still under the pointer or focus and has a pause button; under reduced motion the marquee doesn't run. Dismissing folds it away and is remembered per version, so it stays gone across routes and visits until the announcement changes; pass `dismissed` from a cookie to skip it on the server.
Marketing1 registry dep · 2 packages
Cart Line Item component
@ecomcn
One line in a bag: thumbnail, name and variant, a quantity stepper, a right-aligned tabular line total, and save-for-later / remove. Removing never asks — the row folds into a "Removed — Undo" bar, focus moves to Undo, and onRemove runs only once the undo window has passed or the line leaves the page. Quantity changes show at once and reach onQuantityChange once, after the shopper settles. Either handler can reject: the line puts itself back and says so. Rows fold to their measured height with Motion (a fade under reduced motion). Compound, through useCartLineItem().
Navigation2 registry deps · 2 packages
Checkout Stepper component
@ecomcn
Where the shopper is in checkout: a rail of equal ruled cells, edge to edge. Done steps carry a check and are buttons back to them; the current step is aria-current="step"; steps to come are not clickable. Never colour alone — a check, a number, and a heavy rule under the current step that slides on as the shopper moves (Motion; a fade under reduced motion). On a phone the rail shows numbers, with the step named below it.
Navigation2 packages
Empty Results component
@ecomcn
A no-match state that names the filters that emptied the grid, offers the single change that brings the most back, and lets shoppers remove filters one at a time. Left-aligned, never centred.
Feedback1 registry dep · 1 package
Load More component
@ecomcn
Progressive loading for a product list: a progress rule and “Showing 24 of 312” count, a Load more button, optional hybrid or infinite auto-loading, focus moved to the first new item, and an announced count. The pattern Baymard found performs best, in one component.
Navigation1 registry dep
Price Tag component
@ecomcn
Locale-aware price with compare-at strike, computed discount badge and a screen-reader announcement. No dependencies.
Marketing
Product Details Accordion component
@ecomcn
Materials, care, shipping and maker sections on your shadcn Accordion, first section open. Each closed row carries a one-line summary, so shoppers get the answer without opening it, and panels open with a Motion height morph. One tag from data, or composed from sections and a specs list; open state is shared through context. Works on Radix and Base UI.
Layout1 registry dep · 2 packages
Size Guide Dialog component
@ecomcn
A measurement table in your shadcn Dialog that morphs out of a quiet link beside the size label, and back into it (Motion; a fade under reduced motion). Centimetres and inches with tape-honest rounding, the shopper's selected size marked and announced, ranges and size equivalents (EU 38) in the same table, and a size column that stays put while the measurements scroll sideways on narrow screens. Composed from parts that share the unit through context.
Overlays2 registry deps · 2 packages

Sort Toolbar

Install

Live preview

Registry dependencies0

Packages1

Sort Toolbar

Install

Live preview

Registry dependencies0

Packages1

Source

More from @ecomcn, 8 components

The Signal

Install

Live preview

Registry dependencies0

Packages1

Install

Live preview

Registry dependencies0

Packages1

Source

More from @ecomcn8, 8 components

More from @ecomcn, 8 components