1 GitHub star = 1 new component.

Star the repo
Typographytypographyhighlightneon

Neon Highlight

Text highlight with neon background glow.

Neon Highlight

Usage

Copy and paste this code into your React component:

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

<NeonTextHighlight>Content</NeonTextHighlight>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: 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); }

Quick Info

Category
Typography
Filename
NeonTextHighlight.tsx
Dependencies
None โ€” pure React + CSS
Tags
typographyhighlightneon