1

Centered

A centered footer stack: wordmark, a wrapping row of links, icon links and the copyright line.

Dependencies

@radix-ui/react-slot@hugeicons/react@hugeicons/core-free-icons

Interaction Type

A footer landmark with labelled nav regions. Links brighten from muted to foreground on hover and keyboard focus, with the accent focus ring. Links grow to 44px targets on touch screens, and icon links always are.

Props

Options you can pass to customize this component.

Prop
Type
Description
links
{ label: string; href: string }[]

Links in the footer nav.

socials
{ label: string; href: string; icon: ReactNode }[]

Icon links with 44px targets. The label becomes the aria-label. Defaults to GitHub and X.

navLabel
string

Accessible name of the nav. Defaults to "Footer".

brand
ReactNode

Wordmark or logo. Defaults to the "Nexvyn UI" wordmark.

copyright
ReactNode

Small print line. Defaults to "© 2026 Nexvyn". Pass null to hide it.

className
string

Merged onto the footer with cn().

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/footer-centered.json

How to use

<FooterCentered
  links={[
    { label: 'Docs', href: '/docs' },
    { label: 'Blog', href: '/blog' },
  ]}
/>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
acme.app
npx shadcn@latest addhttps://ui.nexvyn.dev/r/footer-centered.json