Installation
npx shadcn@latest add @fulldev/headerUsage
import { Button } from "@/components/ui/button"
import { Header, HeaderContainer, HeaderGroup } from "@/components/ui/header"
import { Logo, LogoText } from "@/components/ui/logo"Examples
---
import { Button } from "@/components/ui/button"
import { Header, HeaderContainer, HeaderGroup } from "@/components/ui/header"
import { Logo, LogoText } from "@/components/ui/logo"
---
<Header>
<HeaderContainer>
<HeaderGroup>
<Logo href="/">
<LogoText>Fulldev UI</LogoText>
</Logo>
</HeaderGroup>
<HeaderGroup class="ml-auto justify-end">
<Button size="sm" variant="ghost">Sign In</Button>
<Button size="sm">Sign Up</Button>
</HeaderGroup>
</HeaderContainer>
</Header>---
import { Button } from "@/components/ui/button"
import { Header, HeaderContainer, HeaderGroup } from "@/components/ui/header"
import { Logo, LogoText } from "@/components/ui/logo"
---
<Header variant="floating">
<HeaderContainer>
<HeaderGroup>
<Logo href="/">
<LogoText>Fulldev UI</LogoText>
</Logo>
</HeaderGroup>
<HeaderGroup class="ml-auto justify-end">
<Button size="sm" variant="ghost">Sign In</Button>
<Button size="sm">Sign Up</Button>
</HeaderGroup>
</HeaderContainer>
</Header>Notes
Headercontrols the layout —defaultis full-width,floatingis a constrained rounded card.HeaderGroupis an unopinionated flex row. Use utility classes likeml-autoorjustify-endon the group when you need alignment.HeaderContaineris an optional middle slot when you need a flex region between left and right groups.- For a mobile menu, use
SheetandSheetTriggerfrom@/components/ui/sheetdirectly inside aHeaderGroup.
API Reference
See the GitHub source code for more information on props.