shadcn.io is not affiliated with official shadcn/ui
Customer Service Storefront Block for Svelte
A help page for a homeware shop: a topic field that shows a typed answer, and Chat, Email and Phone with their hours rewritten in London, New York or Sydney time, each marked Open or Closed from a fixed date.
Installation
Overview
Give a shopper the answer first and a person second, with this help page for Svelte with Ark UI. A header names the page and says what Jessop & Finch sells. In a hairline frame with a plus mark on each corner, a Native Select of six topics shows a typed answer, and in a side cell a time zone field (London, New York, Sydney) sits over three channels: Chat, Email and Phone, each with a Badge that says Open or Closed, a line in the visitor's own time ("Open until 18:00 your time", "Opens today 14:00 your time", "Opens Mon 09:00 your time") and its hours in UTC. The hours are typed by weekday, the open state comes from the sample date and the hours, and the zone only changes how times are written, with a weekday added when a time falls on another day. A channel button says it opens a draft in this demo. It's built from Native Select, Field, Badge, Button and Guides, with a CSS entrance only. For a contact, help or returns page.
FAQ
How do I fill it with my own topics and hours?
Edit TOPICS for the questions and answers, CHANNELS for each channel's name, weekdays and opening and closing hour in UTC, and ZONES for the time zones with their offset in minutes on the day you are showing. The open state, the next opening and every line come from those.
Why does the open state not change with the time zone?
Because a shop is open or shut at one moment for everyone; only the clock on the wall differs. The zone changes the words, from "Open until 18:00" in London to "Open until Sat 04:00" in Sydney. The offsets are for the sample date, 9 October 2026, because daylight saving changes them through the year.
Does choosing a topic move the page?
No. All six answers sit in one grid cell with the unseen ones invisible and inert, so the cell is as tall as the longest answer, and the side cell's lines have a reserved height too.
What stays local, and how do I wire it to real support?
Nothing is sent: a channel button writes "opens a draft in this demo", or says the channel is closed and would leave a message. To wire it up, open your chat widget, a mail link or a call-back form from each button, and replace the sample date with the current time on the client after mount, so the open state is live.