1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Tipografíatypographyhighlightneon

Neon Highlight

Resaltador de texto con resplandor de neón vibrante para destacar palabras clave.

Neon Highlight

Uso

Copia y pega este código directamente en tu componente React:

tsx
import { NeonTextHighlight } from 'react-component-kit-ui/typography';

<NeonTextHighlight>Content</NeonTextHighlight>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/NeonTextHighlight.tsx + NeonTextHighlight.css:

NeonTextHighlight.tsx
'use client';

import type { ReactNode } from 'react';
import './NeonTextHighlight.css';

/** NeonTextHighlight — ported from astro-component-kit. */
export interface NeonTextHighlightProps {
  children?: ReactNode;
}

export function NeonTextHighlight({ children }: NeonTextHighlightProps) {
  return (
    <>
      <span className="neon-hi" data-rk-42042c="">{children}</span>
    </>
  );
}

export default NeonTextHighlight;
NeonTextHighlight.css
/* NeonTextHighlight — ported from astro-component-kit (typography/NeonTextHighlight.astro) */

.neon-hi:where([data-rk-42042c]) { color: #fff; background: rgba(99,102,241,0.2); padding: 0.1em 0.3em; border-radius: 4px; box-shadow: 0 0 10px rgba(99,102,241,0.3); border: 1px solid rgba(99,102,241,0.4); }

Información Rápida

Categoría
Tipografía
Nombre de archivo
NeonTextHighlight.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
typographyhighlightneon