Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

One Row Footer Block for Solid

The smallest footer: one row on the spine with a wordmark and a copyright line at the start and four inline links with a drawn underline at the end.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A one-row footer for Solid with Ark UI, for a studio site or an app that needs little more than a way out. At the start sit the wordmark and a short copyright line; at the end, four links in a nav labelled Footer. Each link is muted until hovered or focused, when a hairline draws in under the word. There are no bands or columns: the spine's top rule and its two rails are the only lines, so the footer joins the block above it with a single line. It ends the page, so it keeps its bottom padding and draws no closing rule. On a phone the row wraps, wordmark first and links under it. It uses plain links and your theme's tokens, with no JavaScript of its own.

FAQ

How does the hover underline work?

It is a one-pixel background gradient in the link's own colour whose width goes from zero to full on hover and focus. There is no extra element and no script. It starts at the start of the word, so in a right-to-left page it draws in from the other side. With reduced motion the line simply appears.

What does a screen reader announce?

The block is a footer element, so placed outside main it is the page's content-info landmark. The links sit in a nav named Footer, in a list, so the reader hears how many there are. The wordmark is a link home, and its small glyph is hidden from assistive technology.

How does it sit under the rest of the page?

It uses the same spine as every other block: the page column, the two rails and one top rule with + marks where it meets them. Whatever block sits above it, that rule is the only line between them. The footer keeps its own bottom padding and draws no rule beneath.

Where does the copyright year come from?

It is the current year, read when the footer renders, so it never goes stale. The component has no state; the year is read when it renders.