Logo

A component for displaying a brand logo.

Fulldev UI

---
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
import logoDark from "@/assets/logo-dark.svg"
import logoLight from "@/assets/logo-light.svg"
---

<Logo>
  <LogoImage srcLight={logoLight} srcDark={logoDark} alt="Logo" />
  <LogoText>Fulldev UI</LogoText>
</Logo>

Installation

npx shadcn@latest add @fulldev/logo

Usage

import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
import logoDark from "@/assets/logo-dark.svg"
import logoLight from "@/assets/logo-light.svg"

<Logo>
  <LogoImage srcLight={logoLight} srcDark={logoDark} alt="Logo" />
  <LogoText>Fulldev UI</LogoText>
</Logo>

Notes

Logo becomes an anchor automatically when you pass href.
LogoImage is optional, which makes text-only marks straightforward.
Use src for a single logo, or srcLight and srcDark when the logo changes by theme.
Use Logo for compact brand marks and site headers, not for general-purpose hero artwork.

Example

---
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
import logoDark from "@/assets/logo-dark.svg"
import logoLight from "@/assets/logo-light.svg"
---

<Logo href="/">
  <LogoImage srcLight={logoLight} srcDark={logoDark} alt="Logo" />
  <LogoText>Fulldev UI</LogoText>
</Logo>

API Reference

See the GitHub source code for more information on props.