Code Card

Display

Code snippet card with a rotated language label on the side.

Code Card — linguagem rotacionada na lateral, desloca no hover

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Instalação via CLI

$ npx kikitocn add code-card

Interno:

@/lib/utils

Exemplo de uso

Code CardExample.tsx

import { CodeCard } from "@/components/ui/cn/code-card/CodeCard";

export function CodeCardExample() {
  return (
    <CodeCard code="Exemplo" language="Exemplo" />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`code*`	`string`	—	Código a ser exibido
`language*`	`string`	—	Label da linguagem, rotacionado na lateral
`className`	`string`	—	Classes CSS extras
`style`	`React.CSSProperties`	—	Estilos inline extras

Voltar para Display

Carregando…