Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Opening Hours Footer Block for Solid

A restaurant footer with the week's opening hours, today's row marked once the page has loaded, the address, and links to reserve a table or order.

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

A footer with the week's opening hours for Solid with Ark UI, shown here for Trencherby, a neighbourhood restaurant. A divider splits the page column. At the start are the wordmark, the address, two links (Reserve a table, Order online) and two link groups in a nav labelled Footer. At the end, seven days sit in a definition list, each span of hours in time elements. Today's row is tinted after the page loads in the browser, with no change in height. A legal band runs under both halves. It's built from Data List, Shine Button, Button and Guides.

FAQ

How do I set the hours?

Edit the DAYS array. Each day has a label, a weekday (0 is Sunday, matching the browser's clock), and an open and close in 24-hour form. The list runs Monday to Sunday. As written, the room opens at 17:00 on weekdays, at noon on Saturday and at 11:00 on Sunday.

How is today marked?

After the page has loaded, the footer reads the browser's weekday and tints that row. The day's name gains the word "today" for assistive technology, and the row is the current date. Until that moment no row is tinted, so the server's HTML and the first paint agree, and the tint does not change the row's height. Nothing is announced on its own when the highlight appears.

What do the two buttons do?

They are links. Reserve a table is the one primary button, and Order online is an outline button. Point them at your booking page and your ordering page. The footer does not take a reservation and does not send an order.

How do screen readers move through it?

The block is a footer. The address is an address, the hours are a definition list (the day, then the times), and the two link groups sit in one nav labelled Footer, each with its own heading. The legal links are a labelled list. Each time is a time element, and the range is kept in one direction so it does not reorder.

What is the line under the hours?

"The kitchen stops seating thirty minutes before close." It is a sentence in the file, not a calculation. Change it, or remove it, to match the room.

How does it fit on a phone?

The halves stack with a hairline between them: the wordmark, the address and the two links first (each link the full width), then the two link groups side by side, then the hours, then the legal band. Nothing scrolls sideways at 320 pixels.

All 100 footer blocks