1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Типографикаtypographyhighlightneon

Neon Highlight

Яркий маркерный акцент на тексте с неоновым свечением ключевых слов.

Neon Highlight

Использование

Скопируйте и вставьте этот код в ваш React-компонент:

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

<NeonTextHighlight>Content</NeonTextHighlight>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: 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); }

Краткая информация

Категория
Типографика
Имя файла
NeonTextHighlight.tsx
Зависимости
Нет — чистый React + CSS
Теги
typographyhighlightneon