Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Time Zone Hours About Block for Svelte

Ways to reach a phone service, with reply times for email, chat and phone, and a week of coverage bars that shift when you pick a time zone.

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

Ways to reach a company for Svelte with Ark UI, written for Ringwell, a fictional phone service for small teams. At the start, a description list gives email, chat and phone, each with a typical reply. At the end, framed, the weekday hours are bars on a 24-hour track. A Select of four time zones shifts those bars: the home window is 8:00–18:00 Pacific, and a zone whose window crosses midnight draws two segments. Weekend rows stay closed. A Status dot marks the standing fact that the team is staffed on weekdays. It is not a contact form. It's built from Select, Status and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that should say how to reach a team and when someone is there. The address and the hours are example data.

FAQ

How do I change the methods and the hours?

METHODS is the email, the chat and the phone: a name, the address, where it links, and the reply line. ZONES is the Select, and OFFSETS is how many hours each zone adds to the Pacific window of 8:00–18:00. DAYS says which days are open. The bars and the weekday label are computed from that window, so a zone that crosses midnight gets two segments.

What happens when I pick a time zone?

The bars move to that zone and the label above them changes, for example 11:00–21:00 in Eastern. Saturday and Sunday stay closed in every zone. A polite line names the zone, the weekday window and the closed weekend. The page does not jump.

How does the time zone Select work from a keyboard?

The Select opens with Enter or Space and moves with the arrow keys on every library. Choosing a zone updates the chart. The trigger is named "Time zone".

How is it read by a screen reader?

The heading is an h2, and the hours chart is an h3. Email, chat and phone are a description list, and the address of each is a link. The week is a list of seven days. The bars are hidden from assistive technology because the clock time is written beside them. The status dot is decorative; the words "Staffed on weekdays" are what get read.

How does it fit on a phone?

The methods stack, then the hours card sits under them with its own top rule. The Select takes the full width of the card. Nothing in the block scrolls sideways at 320 pixels, and the clock times stay in reading order in a right-to-left layout.

Is this a contact form?

No. The links open mail, the in-app chat and the phone. The Select only changes which time zone the hours are drawn in. The status is a standing weekday fact, not a live open-or-closed clock.

All 150 about blocks