Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Social Icons Footer Block for Vue

A two-row footer: a wordmark and tagline beside five social icon buttons with tooltips, and a ruled band with the copyright and the policy links.

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 simple footer for Vue with Ark UI, for an app or a personal site where people mostly want to find you elsewhere. The first row has the wordmark and one tagline at the start and, at the end, five social icon buttons: each is a ghost icon button that is a real link, with its network named for screen readers and in a tooltip on hover or keyboard focus. A band under it, ruled from the rails by Guides with a + where it meets them, carries the copyright at the start and the policy links, in a nav labelled Footer, at the end. It ends the page, so it draws no closing rule. On a phone both rows stack. The icons are generic glyphs, since the icon set has no brand logos.

FAQ

How do I change the social links?

Edit the SOCIAL array: each entry is an icon, a label and an href. The label is both the tooltip and the accessible name, so keep it as the network's name. To use the networks' own logos, swap the icon for your brand icons. Five fit comfortably beside the wordmark; add more and they wrap.

How do the tooltips work, and what about touch?

Each icon opens a tooltip with its name on hover and on keyboard focus, using the library's own tooltip. The tooltip trigger is the icon link itself, with no wrapper element. On touch screens the tooltip does not open, but the name is also in the link's hidden text, so screen readers and voice control still find it.

How do keyboard and screen reader users get around?

The block is a footer, the page's content-info landmark when placed outside main. The social links are a list named Follow Quirk, and the policy links sit in a nav named Footer. Every icon is a link in the tab order and shows the theme's focus ring.

How does it sit under the rest of the page?

The footer uses the spine every block shares, so its top rule is the only line between it and the block above. The band's rule is drawn by Guides inside the page column, and nothing is drawn under the band because the footer is the end of the page.

How does it fit on a phone?

The wordmark and tagline come first, then the five icons in a row, then the band with the copyright above the policy links. Nothing scrolls sideways at 320 pixels.

All 100 footer blocks