componentes / exibição
Logo
A marca, o wordmark e o prompt de terminal do cd/ui, em três tamanhos.
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>
);
}Instalação
$ npx shadcn@latest add https://cd-ui.vercel.app/r/logo.jsonprimeira vez? configure o components.json e o tema antes: veja instalação.
Uso
import { Logo } from "@/components/ui/logo"
<Logo variant="prompt" />
<Logo render={<a href="/" />} variant="mark" />Exemplos
Como link
Com render, o logo vira um <a> (ou <Link> do Next).
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
O logo do cd/ui. Componente de cliente (usa render). O piscar da variante prompt precisa do CSS do tema (animate-caret).
| prop | tipo | padrão |
|---|---|---|
variantGlifo, texto ou linha de terminal. | "mark" | "wordmark" | "prompt" | "wordmark" |
sizeTamanho do glifo ou do texto. | "sm" | "md" | "lg" | "md" |
renderTroca o elemento renderizado mantendo comportamento e estilo (ex.: virar | ReactElement | (props) => ReactElement | - |
classNameClasses extras, mescladas com | string | - |
Acessibilidade
- A marca é uma imagem chamada "cd/ui"; o wordmark e o prompt são nomeados pelo texto. Dentro de um link só com a marca, ela dá nome ao link.