Components

Footer

Fully customizable footer: minimal, columns, centered, and mega variants with link groups, social links, newsletter, and accent color system.

npx neonblade add footer

Minimal · Cyan

Centered · Pink

Columns · Green

Mega · Cyan · With Newsletter

Props Configuration

Prop	Type	Default	Description
`variant`	`"minimal" \| "columns" \| "centered" \| "mega"`	`"columns"`	"minimal" — single-row with brand, nav links, socials. "columns" — multi-column link groups + bottom bar. "centered" — all content centered. "mega" — full layout with logo, description, columns, optional newsletter.
`color`	`"cyan" \| "pink" \| "green" \| string`	`"cyan"`	Accent color applied to link hovers, social icon borders, newsletter button, group titles, and the top border glow. Preset name or any CSS color.
`logo`	`string \| ReactNode`	-	Logo: an image URL string (rendered as <img>) or any ReactNode (e.g. a custom SVG component).
`logoText`	`string`	-	Brand text displayed beside the logo.
`logoHref`	`string`	`"/"`	href the logo links to.
`description`	`string`	-	Short brand description shown below the logo. Used in columns and mega variants.
`linkGroups`	`FooterLinkGroup[]`	`[]`	Columns of links. Each group has a title and a links array. Used in columns and mega variants.
`navLinks`	`FooterLink[]`	`[]`	Flat navigation links. Shown inline in minimal and centered variants, and in the bottom bar of columns/mega.
`socialLinks`	`FooterSocialLink[]`	`[]`	Social icon links. Each entry has label, href, and an icon ReactNode. Built-in icons: GithubIcon, TwitterIcon, DiscordIcon, LinkedInIcon.
`copyright`	`string`	`"© {year} All rights reserved."`	Copyright text. Use {year} as a placeholder — it is automatically replaced with the current year.
`showNewsletter`	`boolean`	`false`	Show an email newsletter subscription form. Available in the mega variant.
`newsletterPlaceholder`	`string`	`"Enter your email"`	Placeholder text for the newsletter email input.
`newsletterButtonLabel`	`string`	`"Subscribe"`	Label for the newsletter submit button.
`onNewsletterSubmit`	`(email: string) => void`	-	Callback fired when the newsletter form is submitted. Receives the trimmed email string.
`background`	`"transparent" \| "glass" \| "solid"`	`"solid"`	Background style. "solid" uses an opaque dark surface. "glass" adds a frosted blur. "transparent" removes the background entirely.
`topBorder`	`boolean`	`true`	Show a top accent-colored glow border line at the top of the footer.
`className`	`string`	-	Extra CSS class names applied to the <footer> element.