Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Comparison Table Footer Block for Vue

A footer for an uptime monitor with a framed mini table, How we compare (four capabilities, Sandbar next to a typical tool, checks and minuses), beside the brand and two link columns.

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 "How we compare" footer for Vue with Ark UI. The start half holds the wordmark, one sentence and two link columns in a nav labelled Footer; the end half is a framed table with a caption, four capabilities and two columns, Sandbar and a typical tool, whose cells are a check (included) or a minus (not included). Each mark has a name in text, so the answer never rests on a symbol alone, and one row is a tie on purpose. A legal band closes the page. The comparison is an example, not a benchmark; it is not the pricing table. It's built from Guides, a plain table with a real caption, plain links and your theme's tokens.

FAQ

How do I change the comparison?

Edit the CAPABILITIES array at the top of the file: each row has a name and two booleans, ours and theirs. Keep four rows so the table stays beside the links, and compare against a tool you can describe fairly. Leave a tie in, because a table where you win every row is not believed.

Does it rely on colour or symbols alone?

No. A check and a minus differ in shape, not hue (both are in the foreground tone, the minus muted), and each has a hidden text name, "Included" or "Not included", so a screen reader reads the cell as a word. The column headers and the row names are real th cells with a scope.

Why is it a plain table on every target?

A comparison is static, so it needs no grid behaviour. A plain table keeps its row and column semantics, takes a real caption and adds no tab stops. The caption names the table ("How we compare") and a muted line says what is compared.

How do screen readers move through it?

The block is a footer element, so at the end of the page it is the content-info landmark. The link groups sit in one nav labelled Footer, each with an h2; the table is announced with its caption and its headers; the legal links are a labelled list.

How does it fit on a phone?

The halves stack, the links first, then the table at the full width with the capability column taking about half. Nothing scrolls sideways at 320 pixels.

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.

All 100 footer blocks