Snappy UI - Modern UI Library

Basic Usage

This card creates a subtle radial glow that follows your cursor position.

This card creates a depth effect with multiple parallax layers that move at different speeds.

This card is attracted to your cursor with physics-based spring animation.

This card features animated particles and a gentle floating animation on hover.

Background morphs and follows cursor.

Creates ripple effects on mouse movement

Vibrant neon border glow effect

Rainbow holographic effect that changes with angle

pnpm dlx shadcn@latest add http://snappyui.in/api/registry/glowcard

pnpm dlx shadcn@latest add http://snappyui.in/api/registry/parallaxcard

pnpm dlx shadcn@latest add http://snappyui.in/api/registry/magneticcard

pnpm dlx shadcn@latest add http://snappyui.in/api/registry/floatingcard

pnpm dlx shadcn@latest add http://snappyui.in/api/registry/morphcard

pnpm dlx shadcn@latest add http://snappyui.in/api/registry/ripplecard

pnpm dlx shadcn@latest add http://snappyui.in/api/registry/neoncard

pnpm dlx shadcn@latest add http://snappyui.in/api/registry/holographiccard

Name	Type	Default	Card	Description
strength	`number`	`40`	`MagneticCard`	The strength of the magnetic pull effect
particleCount	`number`	`-`	`FloatingCard`	The number of particles for the floating effect
className	`string`	`-`	`All Cards`	This prop is applied to the `motion.div` element, which represents the card itself and undergoes the motion effect
containerClassName	`string`	`-`	`All Cards`	This prop is applied to the outermost `div` element, which acts as the container for the entire magnetic card effect
neonColor	`string`	`#ff00ff`	`MagneticCard`	The color of the neon glow effect