Vibes logo

Header

Installation

Run the following command

npx vibes@latest add header

Usage

import { Header } from '@/vibes/soul/sections/header';function Usage() {  return (      <Header          banner={{            id: 'example-banner',            children: <p>Get 15% off and free shipping with discount code.</p>,          }}          navigation={{            links: [              {                label: 'Shop',                href: '#',              },            ],            logo: 'Logo',            cartHref: '#',            accountHref: '#',            searchHref: '#',          }}      />  );}

API Reference

HeaderProps

PropTypeDefault
navigation
Navigation
banner
Banner

See the Navigation and Banner components for their respective props.

CSS Variables

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

:root {  --header-background: var(--background);}