shadcn.io is not affiliated with official shadcn/ui
Footer Links Sidebar Block for Svelte
An invoicing app in a fixed-height window whose sidebar foot holds Docs, Status and Privacy links, the build number and a What's new button with a dot that opens two release notes and clears when opened.
Installation
Overview
Give the foot of the rail the small things an app keeps there with this footer links sidebar for Svelte with Ark UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar that filters twelve invoices (All invoices, Drafts, Sent, Overdue and Paid), each with a count worked out from the list. At its foot sit a What's new button with the build number and an unread dot, and a row of three meta links: Docs, Status and Privacy. Pressing What's new opens a panel drawn inside the rail, above the button, with two release notes; opening it clears the dot, and Escape, a close button or a press outside shuts it and returns focus to the button. The links say in the status line where they would go and stay on the page. The page is the filtered invoice list: customer, number, amount, the invoice's state as a glyph and a word, and its due date, with the unpaid total above it. Overdue is worked out from the due date, not typed. Folded to icons the foot is the What's new icon with its dot and a tooltip, and on a phone the sidebar is a sheet. It's built from Sidebar, Button, Badge and Guides, with a CSS entrance only. For invoicing and admin apps and any product with a footer of help, status and release notes.
FAQ
How does What's new work?
The button toggles a small panel inside the rail with the two notes in NOTES, each with a title, a day and a sentence. Opening it marks the notes as seen, so the dot disappears and the button's accessible name drops "unread"; the build number stays. Escape, the close button, or any press or focus outside the panel closes it, and focus goes back to the button. The panel is part of the rail's own markup and not a floating popup, so it also works in the phone sheet on every library.
What do Docs, Status and Privacy do?
They are links to #, and pressing one doesn't navigate: the status line says "Docs would open in your app. This demo stays here." so the press visibly does something. In your app, point them at your documentation, your status page and your policy, and open the outside ones in a new tab with a rel that names the destination. Folded to icons the row hides with the labels; unfold the rail to reach them.
Where do the counts and states come from?
From INVOICES, twelve typed invoices with a customer, number, amount in cents, due date and a state of draft, sent or paid. A sent invoice whose due date is before AS_OF (14 October 2026) counts as overdue, so the Sent and Overdue counts, the unpaid total and the glyphs are all worked out from the same list and can't disagree. Amounts go through Intl.NumberFormat in a left-to-right span. Replace the list with your API and keep the rule: one source, derived counts.
What stays in the page, and how do I connect it?
Everything. No invoice is saved or sent, the notes are typed and "seen" lasts until you reload; to remember it, store the last note's id you showed. The filters are links to # whose handler shows the list instead of navigating. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie.
Is it accessible?
The What's new button says whether its panel is open and which panel it controls, and reads "unread" while the dot shows; the dot itself is decorative. The panel is a labeled region that takes focus when it opens. The meta links are a labeled list, and each filter link says its count ("Overdue, 3 invoices") while the current one is marked as the current page. States are a glyph plus a word, never a color, and one polite status line says what each press did.