Lamphome

A stylish, animated header component with dark/light mode toggle functionality.

Installation

npx shadcn@latest add @scrollxui/lamphome

Usage Examples

Basic Usage

import { Lamphome } from '@/components/ui/Lamphome';
 
export default function MyPage() {
  return <Lamphome />;
}

With Custom Title and Description

import { Lamphome } from '@/components/ui/Lamphome';
 
export default function MyPage() {
  return (
    <Lamphome
      title={title}
      description={description}
      logoSrc={logo.src}
      logoAlt={logo.alt}
      navItems={navItems}
      className='bg-gray-50 dark:bg-neutral-900'
    >
      {content}
    </Lamphome>
  );
}

With Child Components

import { Lamphome } from '@/components/ui/Lamphome';
import { MyComponent } from '@/components/MyComponent';
 
export default function MyPage() {
  return (
    <Lamphome>
      <MyComponent />
      <div className='my-custom-content'>Additional content here</div>
    </Lamphome>
  );
}

API Reference

Lamphome

The root container for the Lamphome component. A stylish, animated header component with dark/light mode toggle functionality.

Props

Property	Type	Default	Description
`title`	string	`"SCROLLX UI"`	Main heading displayed in the component.
`description`	string	`"An open-source collection."`	Descriptive text displayed below the title.
`logoSrc`	string	`optional`	URL or path for the logo image displayed on the navbar.
`logoAlt`	string	`"Logo"`	Alt text for the logo image.
`navItems`	Array<{ href: string; label: string }>	`[]`	Navigation links rendered in the navbar.
`children`	ReactNode	`optional`	Custom content rendered below the description.
`className`	string	`""`	Additional custom CSS classes for the root container.

Integration with next-themes

This component is designed to work with the ThemeProvider from next-themes. Ensure you have this provider set up in your layout file:

// In your layout.tsx
import { ThemeProvider } from 'next-themes';
 
export default function RootLayout({ children }) {
  return (
    <ThemeProvider
      attribute='class'
      defaultTheme='system'
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </ThemeProvider>
  );
}

Styling

The component uses Tailwind CSS for styling with automatic dark mode support via the dark: variant. It leverages CSS transitions and Framer Motion animations for smooth visual effects.