components / display
Logo
The cd/ui mark, wordmark, and terminal prompt, in three sizes.
1.1 kB gzip client componentbase ui · merge-props, use-render
cd/uicd/ui
logo-default.tsx
import { Logo } from "@/components/ui/logo";
export default function LogoDefault() {
return (
<div className="flex flex-col items-center gap-6">
<div className="flex items-center gap-4">
<Logo size="sm" variant="mark" />
<Logo size="md" variant="mark" />
<Logo size="lg" variant="mark" />
</div>
<Logo variant="wordmark" />
<Logo variant="prompt" />
</div>
);
}Installation
$ npx shadcn@latest add https://cd-ui.vercel.app/r/logo.jsonfirst time? set up components.json and the theme first: see installation.
Usage
import { Logo } from "@/components/ui/logo"
<Logo variant="prompt" />
<Logo render={<a href="/" />} variant="mark" />Examples
As a link
With render, the logo becomes an <a> (or Next's <Link>).
logo-link.tsx
import { Logo } from "@/components/ui/logo";
export default function LogoLink() {
return (
<div className="flex items-center gap-6">
<Logo render={<a href="https://github.com/di0rio" rel="noopener noreferrer" target="_blank" />} variant="mark" />
<Logo render={<a href="https://github.com/di0rio" rel="noopener noreferrer" target="_blank" />} variant="wordmark" />
</div>
);
}API
Logo
The cd/ui logo. Client component (uses render). The prompt variant's blink needs the theme CSS (animate-caret).
| prop | type | default |
|---|---|---|
variantGlyph, text, or terminal line. | "mark" | "wordmark" | "prompt" | "wordmark" |
sizeSize of the glyph or the text. | "sm" | "md" | "lg" | "md" |
renderSwaps the rendered element while keeping behavior and style (e.g. become an | ReactElement | (props) => ReactElement | - |
classNameExtra classes, merged with | string | - |
Accessibility
- The mark is an image named "cd/ui"; the wordmark and prompt are named by their text. Inside an icon-only link, the mark names the link.