Documentation

Getting Started

Welcome to Sniper UI — a collection of beautifully crafted, animated React components. Copy, paste, and customize to build stunning interfaces.

Installation

Sniper UI components are designed to be copied directly into your project. Each component is self-contained and uses:

  • React 19 + TypeScript
  • Tailwind CSS v4 for styling
  • Framer Motion for animations

Dependencies

Make sure you have these packages installed:

Terminal
1npm install framer-motion clsx tailwind-merge

Utility Function

Most components use a cn() utility for merging classnames. Create lib/utils.ts:

lib/utils.ts
1import { clsx, type ClassValue } from "clsx"; 2import { twMerge } from "tailwind-merge"; 3 4export function cn(...inputs: ClassValue[]) { 5 return twMerge(clsx(inputs)); 6}

Browse Components

Pick any component from the sidebar, or explore all of them below:

Buttons
Magnetic Button
A button that magnetically follows the cursor on hover.
View
Cards
Glow Card
A card with an animated glow border effect on hover.
View
Text Effects
Text Reveal
Text that reveals character-by-character on scroll.
View
Text Effects
Lightning Text
Text with Lightning effect animation .
View
Text Effects
Wave Text
Text with center Wave effect animation .
View