Columns

A sitemap footer: wordmark, a short description and icon links, then titled link columns, with copyright and legal links on a bottom bar. Columns stack on mobile.

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

description

ReactNode

Short text under the wordmark.

columns

{ title: string; links: { label: string; href: string }[] }[]

Titled link columns. Each title is a heading for its list.

socials

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

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

legal

{ label: string; href: string }[]

Small links on the bottom bar. Defaults to Privacy and Terms.

legalLabel

string

Accessible name of the legal nav. Defaults to "Legal".

brand

ReactNode

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

copyright

ReactNode

className

string

Merged onto the footer with cn().

Installation

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

How to use

<FooterColumns
  description="Tools for teams that ship."
  columns={[
    { title: 'Product', links: [{ label: 'Pricing', href: '/pricing' }] },
    { title: 'Company', links: [{ label: 'About', href: '/about' }] },
  ]}
/>

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-columns.json