Lamphome

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

⌘K

SCROLLX UI

An open-source collection of animated, interactive & fully customizable components for building stunning, memorable user interfaces.

Installation

npx scrollx-ui@latest add 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="My Custom Header" 
      description="This is a custom description for my page" 
    />
  );
}

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 below the title.
`children`	ReactNode	`optional`	Custom content rendered in the body area.

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.