ui/components/logo

Logo

Renders static text or caller-provided ASCII art without loading figlet from the default component export.

Preview

tsx

1 import { Logo } from "@/components/ui/logo";2 3 const DG_MARK = " ____   ____ \n|  _ \\ / ___|\n| | | | |  _ \n| |_| | |_| |\n|____/ \\____|";4 5 export default function LogoDefault() {6   return (7     <div className="space-y-6">8       <Logo text="DG" asciiText={DG_MARK} className="text-foreground text-sm" />9       <Logo text="diffgazer" className="text-foreground" />10     </div>11   );12 }13

Installation

$pnpm exec dgadd add ui/logo

[Installs to]src/components/ui/logo[Item]ui/logo

dgadd is not public on npm yet. Until the first release, pack @diffgazer/add from the repository and install that tarball into this app, which is what puts dgadd on pnpm exec.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS once packages are available.

The base Logo item stays figlet-free. Package consumers can import the optional helper from @diffgazer/ui/components/logo/figlet. Copy, dgadd, and direct registry consumers install the separate ui/logo-figlet item (dgadd add ui/logo-figlet) to get the helper source.

Usage

tsx

1 import { Logo } from "@/components/ui/logo";2 3 const DG_MARK = " ____   ____ \n|  _ \\ / ___|\n| | | | |  _ \n| |_| | |_| |\n|____/ \\____|";4 5 export default function LogoDefault() {6   return (7     <div className="space-y-6">8       <Logo text="DG" asciiText={DG_MARK} className="text-foreground text-sm" />9       <Logo text="diffgazer" className="text-foreground" />10     </div>11   );12 }13

Figlet integration

The optional getFigletText helper generates ASCII art at runtime using the figlet library. It is available at @diffgazer/ui/components/logo/figlet in package mode. Copy, dgadd, and direct registry consumers add ui/logo-figlet and import from the copied @/components/ui/logo/figlet module. The helper supports two fonts: "Big" and "Small".

tsx

import { getFigletText } from "@diffgazer/ui/components/logo/figlet"

const ascii = await getFigletText("DG", "Big")

figlet is an optional peer dependency. Install it with npm install figlet @types/figlet before using getFigletText.

ASCII art has a fixed column count, so it does not reflow. Scale the font size from the container width instead of setting a fixed text-* class — for example clamp(), a container query, or the measured container width divided by the art's column count. Logo clips accidental overflow inside itself (max-w-full overflow-hidden) so it never scrolls the page horizontally.

Examples

ASCII Text

Preview

tsx

1 import { Logo } from "@/components/ui/logo";2 3 export default function LogoFonts() {4   return (5     <div className="space-y-4">6       <Logo7         text="DG"8         asciiText={" ____   ____ \n|  _ \\ / ___|\n| | | | |  _ \n| |_| | |_| |\n|____/ \\____|"}9         className="text-foreground text-2xs"10       />11       <Logo12         text="UI"13         asciiText={" _   _ ___ \n| | | |_ _|\n| | | || | \n| |_| || | \n \\___/|___|"}14         className="text-muted-foreground text-2xs"15       />16     </div>17   );18 }19

Styled

Preview

tsx

1 import type { ReactNode } from "react";2 import { Logo } from "@/components/ui/logo";3 4 function Case({ caption, children }: { caption: string; children: ReactNode }) {5   return (6     <div className="space-y-1">7       <p className="text-2xs uppercase tracking-[0.08em] text-muted-foreground">{caption}</p>8       {children}9     </div>10   );11 }12 13 export default function LogoStyled() {14   return (15     <div className="space-y-4">16       <Case caption="Responsive sizing — text-[8px] → sm:text-2xs → md:text-xs">17         <Logo text="@diffgazer/ui" className="text-foreground text-[8px] sm:text-2xs md:text-xs" />18       </Case>19       <Case caption="Color override — text-error on a failure banner">20         <Logo text="error" className="text-error text-xs" />21       </Case>22       <Case caption="ASCII art — asciiText renders inside role=img">23         <Logo24           text="ok"25           asciiText={" ___  _  __\n/ _ \\| |/ /\n| | | | ' / \n| |_| | . \\ \n\\___/|_|\\_\\"}26           className="text-foreground text-2xs"27         />28       </Case>29     </div>30   );31 }32

Figlet Integration

Preview

tsx

1 "use client";2 // @hidden-imports-ok — demo imports optional figlet helper from logo-figlet registry item3 4 import { useEffect, useState } from "react";5 import { Logo } from "@/components/ui/logo";6 import { type FigletFont, getFigletText } from "@/components/ui/logo/figlet";7 8 type FigletSlotState =9   | { status: "pending" }10   | { status: "ready"; text: string }11   | { status: "error" };12 13 function useFigletAscii(text: string, font: FigletFont) {14   const [state, setState] = useState<FigletSlotState>({ status: "pending" });15   const [attempt, setAttempt] = useState(0);16 17   // attempt is the intentional retry trigger; omitting it would freeze retries.18   // biome-ignore lint/correctness/useExhaustiveDependencies: retry counter must re-run the effect19   useEffect(() => {20     let active = true;21     setState({ status: "pending" });22 23     getFigletText(text, font)24       .then((ascii) => {25         if (active) setState({ status: "ready", text: ascii });26       })27       .catch(() => {28         if (active) setState({ status: "error" });29       });30 31     return () => {32       active = false;33     };34   }, [text, font, attempt]);35 36   return { state, retry: () => setAttempt((value) => value + 1) };37 }38 39 function FigletLogo({40   text,41   font,42   className,43 }: {44   text: string;45   font: FigletFont;46   className?: string;47 }) {48   const { state, retry } = useFigletAscii(text, font);49 50   return (51     <div className="space-y-1">52       <Logo53         text={text}54         asciiText={state.status === "ready" ? state.text : undefined}55         className={className}56       />57       {state.status === "error" ? (58         <button type="button" className="text-2xs text-muted-foreground underline" onClick={retry}>59           Retry ASCII render60         </button>61       ) : null}62     </div>63   );64 }65 66 export default function LogoFiglet() {67   return (68     <div className="space-y-4">69       <FigletLogo text="DG" font="Big" className="text-foreground text-2xs" />70       <FigletLogo text="diffgazer" font="Small" className="text-muted-foreground text-2xs" />71     </div>72   );73 }74

API Reference

Logo

Name	Type	Default	Description
textrequired	string	—	Display text, also used as the accessible name when asciiText is provided.
asciiText	string	—	Precomputed ASCII art. When set, renders inside <pre role="img" aria-label={text}>.

Accessibility

Notes

ASCII Text

Precompute ASCII art and pass it through asciiText. The Logo component itself never imports figlet, so consumers stay in control of the ASCII source.

Optional figlet helper

The Logo component stays figlet-free by default. Package consumers can import the optional helper from @diffgazer/ui/components/logo/figlet. Copy, dgadd, and direct registry consumers can add the separate ui/logo-figlet item; it installs the helper source and declares figlet as an optional runtime dependency.

Sizing

ASCII output can be large. Use small text sizes (text-[6px] to text-2xs) and responsive sizing to fit it in your layout.

Source

Install via CLI: pnpm exec dgadd add ui/logo.

Highlighted source loads after this disclosure opens. Browse the source repository.

Logo

Installation

Usage

Figlet integration

Examples

ASCII Text

Styled

Figlet Integration

API Reference

Logo

Accessibility

Notes

ASCII Text

Optional figlet helper

Sizing

Source

View component source (6 files)