Dots UI
A React library for morphable particle interfaces
About Dots UI
Dots UI is an innovative React library designed for creating dynamic, morphable particle interfaces. It offers developers a rich collection of 171 pre-built shapes that can seamlessly transition and transform, making it ideal for interactive UI elements such as loaders, visual effects, and animated controls. Its versatility spans various industries including AI, media, commerce, productivity, and navigation, enabling the creation of visually compelling and engaging user experiences. The library stands out by providing ready-made components that are highly customizable, allowing developers to modify appearance and behavior or craft their own shapes using the Studio feature. Built with interactivity and animation in mind, Dots UI is perfect for projects requiring fluid, transforming interfaces that captivate users and enhance usability.
Screenshots





Pros
- ✓Extensive library of 171 morphing shapes for versatile design options
- ✓Highly customizable components for appearance and behavior
- ✓Supports creation of unique shapes with an integrated Studio tool
- ✓Ideal for interactive interfaces, loaders, and visual effects
- ✓Designed specifically for React, ensuring smooth integration
Cons
- ✗Limited information on pricing and licensing details
- ✗Potential learning curve for those unfamiliar with advanced React animations
- ✗No user votes on Product Hunt, indicating limited community feedback
Use Cases
Pricing
Pricing not verified
Quick Info
Topics
Makers
Hamza Al Sorkhy
Alternatives
Similar Tools in AI Image & Design
Embed Badge
Add this badge to your website to show that Dots UI is featured on Visalytica.
<a href="https://www.visalytica.com/tool/dots-ui" target="_blank" rel="noopener noreferrer" style="display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:#7c3aed;color:#fff;border-radius:8px;font-family:-apple-system,system-ui,sans-serif;font-size:13px;font-weight:600;text-decoration:none;transition:background .2s" onmouseover="this.style.background='#6d28d9'" onmouseout="this.style.background='#7c3aed'"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>Featured on Visalytica</a>