shadcn.io is not affiliated with official shadcn/ui
Tinted Strip Legal Footer Block for Vue
A legal-only footer for a code-review tool: one row on a full-width tinted strip, the copyright at the start and three legal links at the end.
Installation
Overview
A footer for Vue with Ark UI reduced to its legal minimum. The whole footer element carries a faint tint that runs to both edges of the viewport, with the page's top rule as its only hairline, and holds a single row: the product's small mark and the copyright at the start, three links (Terms, Privacy, Security) at the end. There are no link groups and no brand sentence, so it suits a product page or an app shell whose real navigation lives elsewhere. It's built from Guides, plain links and your theme's tokens, with no JavaScript of its own.
FAQ
Why is it called dark if it follows the theme?
The slug keeps its old name so existing links keep working. The strip is a tint of your theme's muted colour, so it is a little deeper than the page in a light theme and a little lighter in a dark one. Nothing forces a dark scope.
How do I change the links?
Edit the arrays at the top of the file: LEGAL, a list of labels and hrefs; add or drop links and the row adapts. Every link is a plain anchor with href="#": point each at its page, or swap the anchor for your router's link.
How do screen readers move through it?
The block is a footer element: placed at the end of the page, outside main, it is the page's content-info landmark. The three links are a list inside a nav labelled Footer, so the landmark exists even though the footer has no link groups. Every link shows the theme's focus ring when reached by keyboard.