Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Dual Audience Footer Block for Vue

A footer for a design tool with two audience cells on one hairline, builders and teams, each with a sentence, three points and its own action, over a row of links and a legal band.

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 for Vue with Ark UI that gives two kinds of visitor their own way in. Two cells share one hairline: For builders and For teams. Each has a title, one sentence, three checked points and an action at its foot: the Shine Button "Start building" in the first, an outline "Talk to sales" in the second, so only one control is primary. Under the cells, a band holds the wordmark with one sentence and the links in one row, in a nav labelled Footer, and a legal band closes the page. It is a footer first: the cells are part of it, with the links and the legal row under them, not a closing section of their own. On a phone the cells stack and the links wrap. It has no state: plain links, Guides and your theme's tokens.

FAQ

How do I change the two audiences?

Edit the BUILDERS and TEAMS constants at the top of the file: each is a title, a sentence and three points. Both cells are drawn by one AudienceCell component, and each action is passed to it as children, so you can change a label or a link in the footer's markup without touching the cell.

Why is only one of the two buttons filled?

A filled button says "this is the main thing", and two of them split the visitor's attention. The Shine Button goes to the lower-friction path (building is free) and the outline button to the one that needs a conversation. Swap them if your business works the other way round; keep one of each.

How are the buttons links on each library?

Both are real links styled as buttons. The button wraps an anchor. Point each href at its page.

How does it read to a screen reader?

The block is a footer. Each audience has an h2 over a real list; the links are in a nav labelled Footer and the policies in a list named Legal. The check marks are decorative and hidden: the points are read as plain list items.

How does it fit on a phone?

The cells stack, builders first, each with its action under its list, and the link row wraps under the brand. Nothing scrolls sideways at 320 pixels, and the navigation is on the first screen.

Where does the copyright year come from?

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

All 100 footer blocks