Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Storefront blocks

Pro

Seller Profile Storefront Block for Svelte

A marketplace seller's store header: a drawn cover, verified ceramics shop, Follow toggle with a follower count, a message popover, four figures and Shop, Reviews, About and Policies tabs at one height.

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

Introduce a seller on a marketplace, with this store header for Svelte with Ark UI. A header names the page and says what Briar & Bell, a stoneware seller, makes. A hairline frame with a plus mark on each corner holds a drawn cover of pots on a shelf, a two-letter plate, the shop name with a Verified word, a Follow Toggle that counts followers from a typed base ("1,203" becomes "1,204") and Message the seller, the one Shine Button, which opens a Popover with a note to write. A row of figures gives the rating, sales, reply time and the month the seller joined. Four Tabs, Shop, Reviews, About and Policies, swap their content in place at one held height: the shop is four drawn pots in hairline cells, the reviews are three sample shoppers with initials. It's built from Toggle, Popover, Tabs, Rating and Guides, with drawn pots and a CSS entrance only. For a marketplace's seller page or a maker's shop.

FAQ

How do I use my own seller?

Edit POTS, REVIEWS, FIGURES, POLICIES and BASE_FOLLOWERS. The follower count is the base plus one while Follow is on, so it always matches the toggle. The cover is a list of pot sizes in COVER_POTS; swap Cover and PotArt for img elements when you have photographs.

Does Follow save anything?

No. It changes the toggle, the count and the status line. In your app, post the change to your API in follow and keep the count it returns.

What does Message the seller do?

It opens a popover with a text area. Write note closes the popover and says in the status line that nothing was sent in this demo. Wire send to your messaging endpoint for a real message.

Does the panel change height between tabs?

No. The four tabs share one grid cell with a minimum height that fits the tallest, so switching tabs never moves what is below.

How does it look on a phone?

The identity row stacks, the figures are two across, the pots are two across and the tab list scrolls sideways if it needs to.

Is it accessible?

Follow is a pressed button with a name that includes the count, the tabs are real tabs, the stars are read as "5 out of 5", and the popover returns focus to its button. The status line is a polite live region that is there from the start.

All 100 storefront blocks