New (update: 6th Oct)Launched Animated Blocks + 56+ New Blocks & Components - production-grade & copy-paste ready
Shadcn Dots are small, playful characters made of a colorful shape and a pair of eyes that blink and look around on their own. Built with React, Tailwind CSS, and Motion.
Each dot is a single self-contained file with no shared primitive, so you can copy one into your project and change its shape, color, or eyes without touching anything else.
Shadcn Dots is a collection of animated avatar-style shapes, from flowers and clovers to teardrops and triangles. Every dot has its own eye style, such as chevrons, carets, plus signs, ovals, or tiny dots, and the eyes come alive with random blinks and glances.
Dots are commonly used for:
A character with moving eyes adds warmth to an interface, but building one usually means hand-tuned SVG, timers, and pointer math. Shadcn Dots packages the shape, the eyes, the blink cycle, and the cursor tracking into one small component, so you get a lively avatar with a single import and two props.
Shadcn Dots works smoothly with other components:
scaleY every 2 to 5 seconds. Both are animated with motion/react springs and the timers are cleaned up on unmount.size prop in pixels, for example <Dot size={64} />. The body, eyes, and eye movement all scale together. Use className for spacing or positioning.followCursor prop as true and the eyes track the pointer. With false they look around on their own.Our Dots components are free and open-source. Copy the clean TypeScript and Tailwind CSS code into your project to bring a little personality to your interface in minutes.