Vibes logo

Footer

Installation

Run the following command

npx vibes@latest add footer

Usage

import { Footer } from '@/vibes/soul/sections/footer';function Usage() {  return (      <Footer          contactInformation={contactInformation}          logo={logo}          sections={sections}      />  );}export const sections = [  {    title: 'Help & Support',    links: [      { label: 'FAQs', href: '#' },      { label: 'Contact Us', href: '#' },      { label: 'Returns', href: '#' },      { label: 'Shipping', href: '#' },    ],  },];export const logo = 'SOUL';export const contactInformation = {  address: 'info@soul.com',  phone: '+(1) 408 123 4567',};

API Reference

FooterProps

PropTypeDefault
logo*
Streamable<string | Image>
sections*
Streamable<Section[]>
copyright
Streamable<string>
contactInformation
Streamable<ContactInformation>
paymentIcons
Streamable<ReactNode[]>
socialMediaLinks
Streamable<SocialMediaLink[]>
contactTitle
string
className
string
logoHref
string
logoLabel
string
logoWidth
number
logoHeight
number

Section

PropTypeDefault
title
string
links*
Link[]
PropTypeDefault
label*
string
href*
string

ContactInformation

PropTypeDefault
address
string
phone
string
PropTypeDefault
icon*
ReactNode
href*
string

Image

PropTypeDefault
src*
string
alt*
string

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --footer-focus: var(--primary);  --footer-background: var(--background);  --footer-border-top: var(--contrast-100);  --footer-border-bottom: var(--primary);  --footer-contact-title: var(--contrast-500);  --footer-contact-text: var(--foreground);  --footer-social-icon: var(--contrast-400);  --footer-social-icon-hover: var(--foreground);  --footer-section-title: var(--foreground);  --footer-link: var(--contrast-500);  --footer-link-hover: var(--foreground);  --footer-copyright: var(--contrast-500);}