shadcn.io is not affiliated with official shadcn/ui
Feature Promise Grid Footer Block for Vue
A footer that leads with three promises: icon cells with a one-line promise and a Learn more link, then the brand beside two link columns, and a legal band.
Installation
Overview
A footer for Vue with Ark UI, for products that win people over with promises. Across the top, three cells, each an icon, a one-line promise and a Learn more link to the page that backs it up; each cell's hairlines run a little past its corners with a + on each corner. Under a ruled band, the wordmark and one sentence at the start and a nav labelled Footer with two columns (Product, Resources) at the end. A legal band closes the page. The page's rails and top rule come from the Guides spine. On a phone the promises become compact rows with the icon beside the text, then the brand, then the two columns side by side. It's built from Guides, plain links and your theme's tokens.
FAQ
How do I change the promises?
Edit PROMISES at the top of the file: each is a promise (one sentence), an icon (any Lucide icon), the href it links to and about, the topic that finishes the link's accessible name. Keep each to one line of thought: they sit three across from lg, and past about 60 characters a promise wraps to three lines.
Won't three links named Learn more confuse a screen reader?
No. Each link carries a visually hidden ending, so it reads "Learn more about data and privacy", "Learn more about importing" and so on, and a list of links says what each one is. The arrow is decorative and hidden from assistive technology.
How do screen readers move through it?
The block is a footer element, the page's content-info landmark when placed outside main. Each promise is an h2 in a list, so a heading jump lands on the three promises and then the two link columns. The two columns sit in a nav labelled Footer, and the policy links are a list named Legal.