A compact single row footer: brand, copyright, link groups as pill menus and a back to top button whose arrow launches up and drops back in. It wraps into stacked rows on small screens.
npx shadcn@latest add https://hyperblur.dev/r/footer-links-rail.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/footer-links-rail.tsx.
import { FooterLinksRail } from "@/components/hyperblur/footer-links-rail"
<FooterLinksRail brand="Relay" showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Relay" | Product name next to the logo. |
| copyright | string | "© 2026 Relay Systems" | Copyright text after the brand. |
| groups | { label: string; links: { label: string; href: string }[] }[] | Product, Company, Legal | Link groups, each rendered as a labeled pill menu. |
| backToTopLabel | string | "Back to top" | Text and accessible name of the back to top button. |
| onBackToTop | () => void | Replace the default smooth scroll to the top of the window, for example to scroll a container. | |
| accent | string | "#2f7bff" | Color of the logo bar, the arrow button and focus rings. |
| showBackdrop | boolean | true | Render a faded page ending above the rail for previews. Turn it off in a real layout. |