Transparent Header React component
A transparent responsive header with an optional frosted surface, desktop links, a keyboard-friendly mobile disclosure and a configurable call to action.
About the Transparent Header component
A transparent responsive header with an optional frosted surface, desktop links, a keyboard-friendly mobile disclosure and a configurable call to action.
Installation
Add the Transparent Header component to your project with the shadcn CLI. It lands in components/transparent-header.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/transparent-headerOr copy the source by hand and install its dependencies:
npm install motion lucide-react clsx tailwind-mergeProps
<TransparentHeader /> accepts 14 props, all optional. It also accepts the usual <header> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| logo | React.ReactNode | "Forme." |
| logoHref | string | "/" |
| items | { id: string; label: string; href: string; description?: string; badge?: string; icon?: React.ReactNode }[] | DEFAULT_LINKS |
| activeId | string | "work" |
| ctaLabel | string | "Let’s talk" |
| ctaHref | string | "/contact" |
| showCta | boolean | true |
| scrolled Switch from clear to frosted glass when the host page has scrolled. | boolean | false |
| sticky | boolean | false |
| open | boolean | — |
| defaultOpen | boolean | false |
- theme"dark" | "light"Default: "dark"
- logoReact.ReactNodeDefault: "Forme."
- logoHrefstringDefault: "/"
- items{ id: string; label: string; href: string; description?: string; badge?: string; icon?: React.ReactNode }[]Default: DEFAULT_LINKS
- activeIdstringDefault: "work"
- ctaLabelstringDefault: "Let’s talk"
- ctaHrefstringDefault: "/contact"
- showCtabooleanDefault: true
- scrolled
Switch from clear to frosted glass when the host page has scrolled.
booleanDefault: false - stickybooleanDefault: false
- openboolean
- defaultOpenbooleanDefault: false
Show all 14 propsShow fewer
| onOpenChange | (open:boolean)=>void | — |
| onNavigate | (item:NavbarLink,event:React.MouseEvent<HTMLAnchorElement>)=>void | — |
- onOpenChange(open:boolean)=>void
- onNavigate(item:NavbarLink,event:React.MouseEvent<HTMLAnchorElement>)=>void
npm dependencies
Installed for you by the shadcn CLI.
