A particle library for React. Explore 171 morphing shapes across AI, productivity, media, commerce, and navigation. Use ready-made components, customize their appearance and behavior, or create your own shapes in Studio. Built for interactive interfaces, animated states, loaders, controls, visual effects, and UI that can transform from one form into another.

👋 Hey Product Hunt! I'm Hamza. I built Dots UI because I thought morphing interfaces made out of particles looked cool, and I wanted an easy way to build them in React. What started as a visual experiment turned into a library of 171 shapes that can morph between each other and be used as real interface elements. ✨ What’s inside: • Over 170 Shapes across AI, productivity, media, commerce, navigation, and more. • Morphing – Transition smoothly from one shape into another using the same particle system. • React Components – Drop them directly into your app and control them like normal UI. • Studio – Create your own shapes and export them for use in your project. • Customization – Adjust things like particles, motion, size, and behavior to fit your interface. The idea is to make it easy to build interfaces that feel more alive without having to create the particle system from scratch. It’s free to explore and use with a pro version containing even more shapes and configurations. I’d love to see what people build with it, and what shapes you think I should add next. ❤️

@hamza_al_sorkhy The morphing part is what I'd try first. A loading dot turning into a checkmark with the same particles sounds so much nicer than swapping icons

@hamza_al_sorkhy Can I trigger the morph from my own state, like when something finishes loading or I click a button? Or does it just run on a timer?

Lovely work, Hamza. As a solo dev shipping both Next.js web apps and Expo mobile apps, my first question is always performance and portability. What's rendering under the hood canvas, WebGL or SVG and how does it hold up on mid-range phones? Any plans for a React Native version, or a way to export shapes for use outside React?

@hamza_al_sorkhy The morphing part is what I'd try first. A loading dot turning into a checkmark with the same particles sounds so much nicer than swapping icons

@hamza_al_sorkhy Can I trigger the morph from my own state, like when something finishes loading or I click a button? Or does it just run on a timer?

Dots UI

A React library for morphable particle interfaces

A React library for morphable particle interfaces