BlocksHeader

Header 3

Header with scroll-based backdrop blur animation using Framer Motion and rounded container

Preview

Props

The Header_3 block accepts the following props from PayloadCMS:

Prop

Type

MediaField

The brand logo field supports separate images for light and dark themes:

Prop

Type

Each navigation item in the menuItems array has the following structure:

Prop

Type

ActionButton

Each action button in the actionButtons array has the following structure:

Prop

Type

Installation

npx shadcn@latest add @uifoundry/header-3

If you encounter issues, check the registry setup guide for configuration help.

Registry Dependencies

This component uses the following registry components:

  • Style Utils - Tailwind utility functions including cn() class merger
  • Media Field - PayloadCMS media field with theme support
  • Block Constants - Block slug and group constants for PayloadCMS blocks
  • Button - Customizable button component with variants

Dependencies

This component requires the following NPM packages:

  • PayloadCMS - Headless CMS and application framework
  • Next.js - React framework for production
  • React - JavaScript library for building user interfaces
  • Lucide React - Beautiful & consistent icon toolkit
  • Motion - Production-ready motion library for React

Header 2

Full-width navigation header with border and backdrop blur effects

Header 4

Header with dashed border and light background styling with fixed positioning

On this page

PreviewPropsMediaFieldNavItemActionButtonInstallationRegistry DependenciesDependencies