Header

Work in progress

This header component is a work in progress. To see it in action, have a look at:

/blocks/header/

Installation

To install the header component, run the following command:

npx shadcn@latest add @fulldev/header

Usage

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>

Examples

Floating

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="floating">
  <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>