Getting Started
Templates
Blocks
Components
A sticky platform-style header with backdrop blur on scroll, multi-column mega-menu dropdowns for Product and Company, and a portaled animated mobile drawer.
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
A production-ready marketing-site header with two mega-menu dropdowns. The Product menu fans out into three panels — a Features list, a 2-column More features grid, and a featured promo card with a stacked-cards visual. The Company menu has a 2-column Use cases card, an Apps list, and a borderless Content sub-section. Backdrop blur kicks in once the page scrolls past 10px; the burger button morphs into an arrow when the mobile drawer opens.
Key Features:
bg-background/95 + backdrop-blur once scrolledcreatePortal so it escapes any overflow ancestorsMenuToggleIcon) using stroke-dasharray animationuseScroll hook (no extra deps)| Element | Purpose |
|---|---|
<header> | Sticky shell that gains a translucent backdrop on scroll |
<NavigationMenu> (desktop) | Hosts the Product / Company mega-menus and the inline Pricing link |
productFeaturesLinks | Narrow left column of the Product menu — three top-level features |
productMoreFeaturesLinks | Center 2-column grid of secondary features |
| Featured promo card | Right column of the Product menu — gradient + <StackedCardsGlyph> + title + description |
companyUseCasesLinks | Left 2-column grid of the Company menu — audience-based use cases |
companyAppsLinks | Center column — first-party apps |
companyContentLinks | Borderless right column — flat icon + title links (Changelog / Blog / Help Center) |
MobileMenu | Portaled full-screen drawer for sub-md viewports |
MenuToggleIcon | Animated SVG burger that morphs into an arrow when open is true |
FullListItem | Icon container + title + description row used in card panels |
SimpleListItem | Flat icon + title row used in the Content sub-section |
SectionLabel | Uppercase muted small-caps label that sits at the top of each panel |
document.body scroll while open via a useEffect and cleans up on unmount.createPortal mounts the drawer to document.body, so it ignores any overflow: hidden on intermediate ancestors.border-b border-transparent by default and only swaps the border color in once scrolled is true — that prevents a layout shift when the page mounts.min-w-0 on the <li> and <a> plus flex-1 + w-full on the title/description spans, so long copy gets a clean … ellipsis instead of overflowing into the adjacent grid column.