Glass Header

A header component with animated glass morphism effects on scroll.

Default

Default glass header with default content.

Brand

default-example.tsx

1import { GlassHeader } from "@/registry/ui";
2
3export function GlassHeaderDefaultExample() {
4  return (
5    <div className="w-full">
6      <div className="relative h-200 w-full overflow-hidden rounded-xl border bg-linear-to-b from-muted/40 to-background">
7        <GlassHeader className="absolute! h-16" />
8      </div>
9    </div>
10  );
11}

Installation & source

Install via the shadcn CLI or copy the registry files manually.

bash

npx shadcn@latest add @tt-ui/glass-header

Props

Name	Type	Default	Description
children	ReactNode	Default header content	Custom content to display in the header.
className	string		Tailwind classes for additional styling.