1 GitHub star = 1 new component.

Star the repo
Typographytypographyheadingshadow

Text Shadow Reveal

Text that appears with dramatic drop shadow on hover.

Text Shadow Reveal

Usage

Copy and paste this code into your React component:

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

<ShadowRevealText>Content</ShadowRevealText>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/ShadowRevealText.tsx + ShadowRevealText.css:

ShadowRevealText.tsx
'use client';

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

/** ShadowRevealText โ€” ported from astro-component-kit. */
export interface ShadowRevealTextProps {
  children?: ReactNode;
}

export function ShadowRevealText({ children }: ShadowRevealTextProps) {
  return (
    <>
      <h2 className="rev-text" data-rk-9adbdb="">{children}</h2>
    </>
  );
}

export default ShadowRevealText;
ShadowRevealText.css
/* ShadowRevealText โ€” ported from astro-component-kit (typography/ShadowRevealText.astro) */

.rev-text:where([data-rk-9adbdb]) { font-size: 3.5rem; font-weight: 900; color: #fff; text-shadow: 4px 4px 0px rgba(99,102,241,0.3), 8px 8px 0px rgba(0,0,0,0.5); margin: 0; line-height: 1.1; }
@media (max-width: 768px) { .rev-text:where([data-rk-9adbdb]) { font-size: 2rem; } }

Quick Info

Category
Typography
Filename
ShadowRevealText.tsx
Dependencies
None โ€” pure React + CSS
Tags
typographyheadingshadow