Skip to content
X GitHub

Header

fulldev/ui
---
import { Button } from "@/components/ui/button"
import { Header, HeaderActions, HeaderContent } from "@/components/ui/header"
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
---
<Header>
<HeaderContent>
<Logo href="/">
<LogoText>fulldev/ui</LogoText>
</Logo>
<HeaderActions class="ml-auto">
<Button size="sm" variant="ghost">Sign In</Button>
<Button size="sm">Sign Up</Button>
</HeaderActions>
</HeaderContent>
</Header>

To install the header component, run the following command:

Terminal window
pnpm dlx shadcn@latest add @fulldev-ui/header
import { Button } from "@/components/ui/button"
import { Header, HeaderActions, HeaderContent } from "@/components/ui/header"
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"```
```astro
<Header>
<HeaderContent>
<Logo href="/">
<LogoText>fulldev/ui</LogoText>
</Logo>
<HeaderActions class="ml-auto">
<Button size="sm" variant="ghost">Sign In</Button>
<Button size="sm">Sign Up</Button>
</HeaderActions>
</HeaderContent>
</Header>
fulldev/ui
---
import { Button } from "@/components/ui/button"
import { Header, HeaderActions, HeaderContent } from "@/components/ui/header"
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
---
<Header variant="ghost">
<HeaderContent>
<Logo href="/">
<LogoText>fulldev/ui</LogoText>
</Logo>
<HeaderActions class="ml-auto">
<Button size="sm" variant="ghost">Sign In</Button>
<Button size="sm">Sign Up</Button>
</HeaderActions>
</HeaderContent>
</Header>
fulldev/ui
---
import { Button } from "@/components/ui/button"
import { Header, HeaderActions, HeaderContent } from "@/components/ui/header"
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
---
<Header variant="muted">
<HeaderContent>
<Logo href="/">
<LogoText>fulldev/ui</LogoText>
</Logo>
<HeaderActions class="ml-auto">
<Button size="sm" variant="ghost">Sign In</Button>
<Button size="sm">Sign Up</Button>
</HeaderActions>
</HeaderContent>
</Header>
fulldev/ui
---
import { Button } from "@/components/ui/button"
import { Header, HeaderActions, HeaderContent } from "@/components/ui/header"
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
---
<Header frame="float">
<HeaderContent>
<Logo href="/">
<LogoText>fulldev/ui</LogoText>
</Logo>
<HeaderActions class="ml-auto">
<Button size="sm" variant="ghost">Sign In</Button>
<Button size="sm">Sign Up</Button>
</HeaderActions>
</HeaderContent>
</Header>
fulldev/ui
---
import { Button } from "@/components/ui/button"
import { Header, HeaderActions, HeaderContent } from "@/components/ui/header"
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
---
<Header frame="float" variant="muted">
<HeaderContent>
<Logo href="/">
<LogoText>fulldev/ui</LogoText>
</Logo>
<HeaderActions class="ml-auto">
<Button size="sm" variant="ghost">Sign In</Button>
<Button size="sm">Sign Up</Button>
</HeaderActions>
</HeaderContent>
</Header>