UI Components tools

Curated ui components tools in the ToolFomo constellation. Each one is hand-picked and summarised in a single line.

• Locomotive Scroll — A lightweight JavaScript library for smooth scrolling, in-view detection, and parallax effects, built on top of Lenis. (Open source) Available on web.
• Animated Buttons (Colorion) — A copy-and-paste library of pure-CSS animated buttons from the Colorion family of tools. Each snippet is self-contained, MIT licensed, needs no JavaScript, and respects prefers-reduced-motion. (Open source) Available on web.
• BagUI — An open-source registry of shadcn/ui components, animated sections, and production-ready blocks, including navbars, heroes, footers, pricing tables, and CTAs. (Open source) Available on web.
• Originkit — A free library of animated components for modern websites, with code you can copy, use in Framer, or pull in through MCP. Covers text effects, image galleries, carousels, background animations, and interactive elements with customizable controls. (Free) Available on web, api.
• Cuelume — A tiny, dependency-free JavaScript library that adds interaction sounds to web interfaces. It synthesizes 14 UI cues live with Web Audio, so there are no audio files to load. (Open source) Available on web.
• daisyUI — daisyUI is a free, open-source Tailwind CSS component library that provides semantic class names and pre-built UI components for building web interfaces faster. It works on top of Tailwind CSS without requiring JavaScript. (Open source) Available on web.
• Base UI — Base UI is an open-source library of unstyled, accessible UI components for building design systems and web applications with React. It provides a set of low-level primitives that give developers full control over styling. (Open source) Available on web.
• React Bits — React Bits is an open-source collection of animated UI components, effects, and patterns built for React. Developers can copy-paste ready-made interactive components directly into their projects. (Open source) Available on web.
• SVG Loaders by MageCDN — A free collection of SVG loading spinners and animation loaders ready to copy and use in web projects. Offers a variety of animated SVG loader styles with no dependencies. (Free) Available on web.
• MageCDN Social Image Tools — A collection of free online tools for generating and previewing Open Graph, Twitter Card, and other social media images and meta tags for websites. (Free) Available on web.
• Built at Lightspeed — A curated directory of websites and products built with Astro, showcasing real-world examples of the Astro web framework in production. Helps developers and designers find inspiration from sites using Astro. (Free) Available on web.
• Kinetics — A library of 135 spring-driven micro-interactions for web interfaces, each shipped as CSS, React, and a copy-paste AI prompt with tunable stiffness and damping. (Open source) Available on web.
• 21st — A registry of 12,000+ React and Tailwind components, templates, and shadcn themes, built by design engineers, with AI-ready prompts to drop into Cursor, Claude Code, v0, or Lovable. (Freemium) Available on web.
• morphicons — SVG icon morphing library that animates one icon into another with spring physics, works with Lucide, Tabler, Heroicons and more in React, Vue, Svelte, React Native and Astro. (Open source) Available on web.
• Material Design — Google's open-source design system with comprehensive guidelines, components, and tools for creating beautiful, usable products across platforms. (Free) Available on web, android.
• Microsoft Fluent 2 — Microsoft's design system providing guidelines, components, and patterns for building consistent experiences across Microsoft products and services. (Free) Available on web, windows.
• TailGrids — TailGrids is a comprehensive library offering over 600 Tailwind CSS UI components, blocks, and templates for building web applications, landing pages, e-commerce sites, and dashboards across HTML, React, Vue, and Figma. (Freemium) Available on web.
• rené — rené is a lightweight CSS framework designed for clean, intentional interfaces, emphasizing AI compatibility and ease of use for developers. (Open source) Available on web.
• Swishy — AI motion design tool that turns text prompts into animations, kinetic typography, and motion graphics. Includes a template library for social media, UI elements, logo reveals, and data visualizations. (Freemium) Available on web.
• Untitled UI — Untitled UI is a large-scale Figma UI kit and design system containing thousands of components, styles, and templates built to help designers and teams build products faster. (Freemium) Available on web.
• The Component Gallery — An up-to-date repository of interface components from various design systems, serving as a reference for building user interfaces. (Free) Available on web.
• React Bootstrap — React Bootstrap replaces Bootstrap JavaScript with React components, providing the most popular front-end framework rebuilt for React. (Open source) Available on web.
• Chakra UI — Chakra UI is a simple, modular and accessible component library that provides building blocks for React applications with built-in dark mode support and excellent developer experience. (Open source) Available on web.
• Blueprint — Blueprint is a React-based UI toolkit for the web, optimized for building complex data-dense interfaces for desktop applications. (Open source) Available on web.
• Mantine — Mantine is a fully featured React components library with 100+ customizable components, hooks, and a powerful theming system for building modern web applications. (Open source) Available on web.
• Next UI — NextUI is a beautiful, fast and modern React UI library that provides a set of accessible, reusable components optimized for Next.js applications. (Open source) Available on web.
• Ant Design — Ant Design is an enterprise-class UI design system and React component library with a set of high-quality components and demos for building rich, interactive user interfaces. (Open source) Available on web.
• Material-UI (MUI) — Material-UI is a comprehensive React component library that implements Google's Material Design, offering production-ready components with extensive customization options. (Freemium) Available on web.
• Headless UI — Headless UI provides completely unstyled, fully accessible UI components for React and Vue, designed to integrate beautifully with Tailwind CSS. (Open source) Available on web.
• shadcn/ui — shadcn/ui is a collection of re-usable components built using Radix UI and Tailwind CSS that you can copy and paste into your apps, offering full control over the code. (Open source) Available on web.
• Radix UI — Radix UI provides unstyled, accessible components for building high-quality design systems and web apps in React, offering full control over styling and behavior. (Open source) Available on web.