react-kino

A header that becomes sticky with a blurred background after scrolling past a threshold.

Overview

<StickyHeader> creates a header that sticks to the top of the viewport once the user scrolls past a configurable threshold. It applies a backdrop blur and background color for readability.

Usage

import { StickyHeader } from "react-kino";
 
<StickyHeader threshold={50} background="rgba(0, 0, 0, 0.8)" blur={12}>
  <nav style={{ padding: "16px 24px", display: "flex", justifyContent: "space-between" }}>
    <span>Logo</span>
    <div>
      <a href="#features">Features</a>
      <a href="#pricing">Pricing</a>
    </div>
  </nav>
</StickyHeader>

Props

Prop	Type	Default	Description
`threshold`	`number`	`0`	Scroll distance in pixels before the header becomes sticky
`background`	`string`	`"rgba(255, 255, 255, 0.8)"`	Background color when sticky
`blur`	`number`	`8`	Backdrop blur amount in pixels
`children`	`ReactNode`	--	Header content
`className`	`string`	--	CSS class for the header element
`style`	`CSSProperties`	--	Inline styles

Example: Dark theme header

<StickyHeader
  threshold={100}
  background="rgba(10, 10, 10, 0.9)"
  blur={16}
  style={{ borderBottom: "1px solid rgba(255, 255, 255, 0.1)" }}
>
  <div style={{ maxWidth: 1200, margin: "0 auto", padding: "12px 24px" }}>
    <a href="/">react-kino</a>
  </div>
</StickyHeader>

StickyHeader

Overview

Usage

Props

Example: Dark theme header

On this page