Site Shell
A marketing-site skeleton: a glass header that condenses, ONE morphing mega-menu panel, a mobile drawer and a footer.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
The mega-menu is a single panel that animates its width and height and slides its content in the direction you move between sections. The header condenses into glass on scroll, a dismissible announcement bar sits on top, and the Wordmark Footer closes the page. Put your page in `children`.
Installation
$ npx shadcn@latest add https://guetix.com/r/site-shell.json
Uses the shadcn CLI. It creates components/guetix/site-shell.tsx and installs nothing else.
Usage
example.tsx
import { SiteShell } from "@/components/guetix/site-shell";
export default function Example() {
return <SiteShell />;
}
New marketing siteProduct siteStarter for AI-generated pages
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01One shared panel instead of one per menu item: it resizes, and its content slides by direction.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | — | Brand. |
| children | ReactNode | — | Your page content. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Menu buttons with aria-expanded; the mobile drawer is a modal dialog.