@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

``shell
npm i @xiping/react-components


or

yarn add @xiping/react-components

or

pnpm add @xiping/react-components
`

Usage

$3

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

function App() {
return (



);
}
`

$3

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

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

Requirements

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

Components

$3

- 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

$3

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

$3

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

$3

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

$3

- TxtEditor - Text editor
- TxtReader` - Text reader

License

MIT