shadcn.io is not affiliated with official shadcn/ui
Framed Panels Footer Block for Svelte
A footer for an AI notes tool with the brand above three link groups, each in its own panel framed by hairlines that overshoot the corners, and a legal band under them.
Installation
Overview
A footer for Svelte with Ark UI whose link groups are framed panels. The brand line, the wordmark and a sentence, sits above three panels (Product, Resources, Company). Each panel is a cell drawn by hairlines that run a little past its corners, with a + at its start, and opens with a small icon tile and the group's name over a rule before its five links. A legal band with the copyright and three policy links closes the page. The slug keeps its old name, but the block draws one solid line style and no gradient: the emphasis comes from the framing. It's built from Guides, plain links and your theme's tokens, with no JavaScript of its own.
FAQ
Where did the gradient border go?
The block uses one solid hairline style, the same as every other block, so a footer stacked under a hero or pricing section reads as part of one drawing. The slug keeps its old name so existing links keep working; the emphasis comes from each panel's overshooting frame and the icon tile above its links.
How do I change the links?
Edit the arrays at the top of the file: GROUPS (each an icon, a title and its links) and LEGAL; icons come from your icon set. 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 panels sit in one nav labelled Footer, each a small h2 over a list. The icon tiles are decorative and hidden from screen readers. Every link shows the theme's focus ring when reached by keyboard.