shadcn.io is not affiliated with official shadcn/ui
Raised Panel Dark Footer Block for Svelte
A footer for a spreadsheet-to-app builder that draws its weight from structure: the brand line on the page, four link groups on a raised card inside a tinted shell with a + on each corner, and a legal row.
Installation
Overview
A footer for Svelte with Ark UI that gets its presence from structure rather than a black background. The brand line, the wordmark and one sentence, sits on the page. Under it, the four link groups (Product, Build, Company, Support) sit on a raised card, a ring and a faint shadow, set in a tinted shell with a + mark on each of its corners, so the card reads as lifted. A legal row, the copyright and three policy links, closes the page under its own rule. The card holds only the links, never the whole footer. 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 block never forces a dark scope: in a light theme the card is a lighter surface on a slightly deeper shell, and in a dark theme both are dark. The lift comes from the card's ring and shadow and the shell's tint, so it holds in every preset.
How do I change the links?
Edit the arrays at the top of the file: GROUPS (each a title and its links) and LEGAL. 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 link groups sit in a nav labelled Footer, each group a small h2 over a list, and the policy links are a list named Legal. Every link shows the theme's focus ring when reached by keyboard.