@xiping/react-components

A modern React component library built with TypeScript, providing rich animation components, media components, and interactive components.

Documentation & Demo

View Documentation and Demo

Installation

npm i @xiping/react-components
# or
yarn add @xiping/react-components
# or
pnpm add @xiping/react-components

Usage

Basic Import

import { ShinyButton, BlurFade } from "@xiping/react-components";

function App() {
  return (
    <div>
      <ShinyButton>Click me</ShinyButton>
      <BlurFade>
        <h1>Hello World</h1>
      </BlurFade>
    </div>
  );
}

Global Styles (Optional)

If your project uses Tailwind CSS, you can import the global styles:

import "@xiping/react-components/style.css";

Requirements

• React: >= 18 || >= 19
• React DOM: >= 18 || >= 19

Components

Text Animations

• BlurFade - Blur fade-in animation
• BlurText - Blur text effect
• TypingAnimation - Typewriter effect
• TextType - Text type animation
• SplitText - Text split animation
• FlipText - Text flip animation
• GradientText - Gradient text
• HyperText - Hyperlink text effect
• MorphingText - Text morphing animation
• VariableProximity - Variable proximity effect
• ComicText - Comic-style text
• TextAnimate - Generic text animation
• SparklesText - Sparkling text effect
• ShinyText - Shiny text

Buttons

• ShinyButton - Shiny button
• ShimmerButton - Shimmer button
• ConfettiButton - Confetti celebration button

Media

• VideoSubtitlePlayer - Video subtitle player
• SubtitlePlayer - Subtitle player
• VideoDialog - Video dialog
• ImageViewer - Image viewer
• ImageCompare - Image comparison
• DomeGallery - Dome gallery

Interactions

• ScratchToReveal - Scratch card effect
• Pointer - Custom pointer
• PinchContent - Pinch to zoom
• Dock - macOS-style Dock
• ReactForceGraph3D - 3D force-directed graph
• Message - Message toast

Editors

• TxtEditor - Text editor
• TxtReader - Text reader

License

MIT