# Resources

> 102 hand-picked resources for web developers: component libraries, UI components, motion, visual effects, 3D and design inspiration. Most are free.

Canonical page: https://sitepeel.dev/resources/

UI libraries, components, motion and design inspiration for building websites, picked by hand. Curated on [buildcool.sh](https://buildcool.sh/resources). Each entry links to the creator's own site. Any of them can be opened in the Sitepeel tools: [Get DESIGN.md](https://sitepeel.dev/design-md/) or [Clone prompt](https://sitepeel.dev/free-tools/clone-prompt/).

## Component libraries

- [Driver.js](https://driverjs.com/): A lightweight, no-dependency JavaScript library for product tours, feature highlights, hints, and contextual help. Open source.
- [Ant Design](https://ant.design/): A mature open-source React design system with components and patterns. Open source.
- [assistant-ui](https://assistant-ui.com/): Open-source React primitives for building polished AI chat interfaces. Open source.
- [dqnamo Kitchen](https://www.dqnamo.com/kitchen): Component experiments and interface studies by dqnamo. Free.
- [Lightswind](https://lightswind.com/): Animated and expressive React components for building distinct products. Free + paid plans.
- [Skiper UI](https://skiper-ui.com/): A curated suite of modern reusable interface components. Free + paid plans.
- [Smooth UI](https://smoothui.dev/): Polished UI pieces and animated building blocks for the web. Free + paid plans.
- [React Bits](https://reactbits.dev/): Animated React components, text effects, and backgrounds. Open source.
- [Watermelon UI](https://ui.watermelon.sh/): A bright collection of elements for web and product interfaces. Free + paid plans.
- [MVP Blocks](https://mvpblocks.vercel.app/): Reusable blocks for moving an early product from idea to interface. Free + paid plans.
- [Coss UI](https://coss.com/ui): Thoughtful interface building blocks from the Coss ecosystem. Open source.
- [UI Layouts](https://www.ui-layouts.com/): A large set of practical UI layouts and component patterns. Free + paid plans.
- [8bitcn](https://8bitcn.com/): A playful source of interface components and patterns. Open source.
- [Cult UI](https://cult-ui.com/): Beautifully composed interface elements to copy and adapt. Open source.
- [HeroUI](https://www.heroui.com/): A comprehensive React UI library with accessible foundations. Open source.
- [HextaUI](https://hextaui.com/): Modern React and Tailwind components ready to adapt. Free + paid plans.
- [Luxe UI](https://luxeui.com/): A visual component collection for sharper product interfaces. Free + paid plans.
- [shadcn/ui](https://ui.shadcn.com/): Accessible, open code components you own and adapt inside your project. Open source.
- [Reverse UI](https://reverseui.com/): Open source React components with an experimental visual edge. Free + paid plans.
- [Basecn](https://basecn.dev/): A set of practical, copyable components for modern product interfaces. Open source.
- [Aceternity UI](https://ui.aceternity.com/): High impact components and backgrounds for React and Tailwind. Free + paid plans.
- [Tailark](https://tailark.com/): Free Tailwind CSS components and landing page sections. Free + paid plans.
- [Kibo UI](https://www.kibo-ui.com/): Accessible open source components and blocks for web applications. Open source.
- [Eldora UI](https://www.eldoraui.site/): Open source animated components for expressive landing pages. Free + paid plans.
- [Magic UI](https://magicui.design/): Animated React components and effects made for shipping quickly. Free + paid plans.
- [21st.dev](https://21st.dev/): Community made React components and blocks ready to install. Open source.
- [Animate UI](https://animate-ui.com/): Motion aware React components with production friendly defaults. Free + paid plans.
- [Fancy Components](https://www.fancycomponents.dev/): Motion rich components built to make interfaces feel alive. Free + paid plans.

## Components

- [snapcn](https://snapcn.dev/): A collection of polished interface components and visual building blocks. Free.
- [Morphicons](https://morphicons.com/): An SVG icon library focused on expressive, animated icon transitions. Free.
- [beUI](https://beui.dev/): A library of animated UI components and interaction effects for building web interfaces. Free.
- [Shoogle](https://shoogle.dev/): A search engine for shadcn UI blocks, components, and templates across shadcn registries. Free.
- [The Component Gallery](https://component.gallery/): A reference archive of real interface components and design systems. Free + paid plans.
- [CTA.gallery](https://www.cta.gallery/): A curated gallery of call-to-action design references for designers looking for clearer conversion moments. Free + paid plans.
- [Navbar Gallery](https://www.navbar.gallery/): A focused collection of navigation patterns across real websites. Free + paid plans.
- [Saaspo](https://saaspo.com/): A searchable reference for SaaS websites, pages, sections, and social previews. Free + paid plans.
- [Rebrand](https://www.rebrand.gallery/): A gallery of visual identity launches, design systems, and rebrand reveal videos. Free + paid plans.
- [Beautiful UI](https://www.beautifului.dev/): Crafted primitives for AI-native interfaces, from loading and reasoning states to data-rich app surfaces. Free + paid plans.
- [Amicro](https://amicro.vercel.app/): A curated library of premium React micro-interactions and transition components built with Motion. Open source.
- [Curated](https://curated.design/): A gallery of real, live websites selected for their craft, structure, and interaction. Free + paid plans.
- [landing.love](https://www.landing.love/): A visual library of landing pages with full-page recordings to study motion and composition. Free + paid plans.
- [Hugeicons](https://hugeicons.com/): An icon library with a broad range of consistent styles for product interfaces. Free + paid plans.
- [Seesaw](https://www.seesaw.website/): A visual index of hand-picked websites, fonts, and digital references. Free + paid plans.

## Inspiration

- [Rakazo](https://rakazo.com/): An open-source alternative to Grok for running persistent AI teammates with your own keys, model, and machine. Free.
- [Design Minis](https://designminis.com/): Small, approachable design references and creative resources worth saving. Free.
- [The Internet Designs](https://theinternetdesigns.com/): Curated UI design inspiration from X and Pinterest, including landing pages, interfaces, motion, branding, and product design. Free.
- [Framer Gallery](https://www.framer.com/community/gallery/): A community gallery for exploring polished Framer sites, templates, and ideas. Free.
- [Best Designs on X](https://bestdesignsonx.com/): Hand-picked design inspiration from creatives on X, including visual showcases, logos, UI, branding, and more. Free.
- [DesEngs](https://desengs.com/): Curated tools, articles, videos, communities, and inspiration for design engineers working across design and code. Free.
- [Get Design](https://getdesign.com/): A resource for finding copy-ready interface ideas and design references. Free.
- [Toolfolio](https://toolfolio.com/): A broad directory for discovering useful design, developer, and creative tools. Free.
- [Talark](https://talark.com/): A curated source of web design inspiration and standout digital work. Free.
- [CollectUI](https://collectui.com/): A daily gallery of UI designs, portfolios, and creative inspiration. Free.
- [Inspora](https://www.inspora.design/): A curated archive of recent visual design and creative work. Free.
- [Unsection](https://unsection.com/): A broad collection of web sections for finding a useful starting point. Free.
- [One Page Love OG](https://onepagelove.com/og): Real Open Graph card examples for better social previews. Free.
- [Brandfetch](https://brandfetch.com/): Brand assets and visual identity details in one useful place. Free.
- [Gridddy](https://gridddy.framer.website/): A gallery dedicated to the often overlooked pre-footer call to action. Free.
- [Codrops Creative Hub](https://tympanus.net/codrops/hub/): Editorial experiments, tutorials, and expressive web interaction studies. Free.
- [SupaHero](https://supahero.io/): A focused gallery of hero sections worth studying. Free.
- [BentoGrids](https://bentogrids.com/): A reference collection for bento layouts and modular page composition. Free.
- [404s.design](https://404s.design/): Creative error pages with more personality than a dead end. Free.
- [Mobbin](https://mobbin.com/): A large archive of mobile and web app screens for UI research and product teams. Free.
- [Footer.design](https://footer.design/): A reference shelf for effective, well-finished footers. Free.

## Motion

- [Transitions.dev](https://transitions.dev/): A collection of ready-to-use transitions for modern interface work. Free.
- [Svelte Animations](https://sv-animations.vercel.app/): A library of 50+ free, open-source animated components and effects built with Svelte, Tailwind CSS, and Motion. Free.
- [60fps](https://60fps.design/): A gallery of smooth interface motion and web interaction details. Free.
- [React Genie](https://www.npmjs.com/package/react-genie): A React reveal animation package by Kitze. Free.
- [AutoAnimate](https://auto-animate.formkit.com/): A tiny library that adds natural movement when the DOM changes. Open source.
- [Motion](https://motion.dev/): The animation library for React, JavaScript, and modern interface work. Open source.
- [Web Haptics](https://haptics.lochie.me/): Haptic feedback for the mobile web, crafted by Lochie. Open source.
- [UseAnimations](https://useanimations.com/): Animated icons and Lottie assets ready to add to apps and websites. Open source.
- [Make It Animated](https://makeitanimated.dev/): Browse React Native animations built with Reanimated, Gesture Handler, the Animated API, and Skia. Free.

## AI tools

- [NameThatUI](https://namethatui.com/): A visual reference tool for recognizing and naming interface patterns. Free.
- [Ditto](https://ditto.site/): Turn a public URL into a byte-stable, componentized Next.js or Vite copy without LLM guesswork. Free.
- [GetLayers AI](https://www.getlayers.ai/): An AI-native library of website templates, motion, scenes, and design layers. Free + paid plans.
- [Unicorn Studio](https://www.unicorn.studio/): A browser-based tool for creating interactive motion and real-time graphics for the web. Free + paid plans.
- [Swishy AI](https://swishy.ai/): A generative creative tool for exploring visual directions quickly. Free + paid plans.
- [Spline](https://spline.design/): A browser based 3D design tool for interactive scenes and experiences. Free + paid plans.
- [morflax](https://morflax.com/): Creative work and experiments from morflax. Free + paid plans.

## Visual effects

- [Liquid Orb Editor](https://lersen001.github.io/orb/): An interactive browser experiment for shaping luminous liquid-orb visuals. Free.
- [Bible Strong Avatar Lab](https://avatars.bible-strong.app/): A browser-based studio for designing procedural 2D avatars, expressions, and reusable animations. Free.
- [Liquid Gooey](https://gooey.jakubantalik.com/): A playful liquid and gooey-effect experiment for visual interface work. Free.
- [Gradii](https://gradii.kshv.me/): A gradient generator for creating customizable colors, text, and effects. Free + paid plans.
- [Snipzy](https://snipzy.dev/snippets/liquid-glass-card.html): A liquid-glass card effect with Apple-style distortion animation for modern UI elements. Free.
- [Specy Liquid Glass](https://liquid-glass.specy.app/): A 3D glass-effect component that recreates Apple-style liquid glass. Free.
- [ShaderGradient](https://shadergradient.co/): Interactive WebGL gradients and animated shader backgrounds. Open source.
- [PatternCraft](https://patterncraft.fun/): Hundreds of copyable CSS and Tailwind background patterns. Open source.
- [PhotoGradient](https://photogradient.com/): Generate gradients from chosen colors or a photo. Free + paid plans.
- [Shaders.com](https://shaders.com/): A collection of ready to use shader effects for the web. Open source.
- [Liquid Glass JS](https://github.com/dashersw/liquid-glass-js): A JavaScript implementation of the liquid glass visual effect. Open source.

## 3D

- [Wiggle Bones](https://wiggle.three.tools/): A Three.js tool for adding natural secondary motion to rigs. Open source.
- [WebGPU Water](https://jeantimex.github.io/webgpu-water/): A WebGPU water simulation experiment by Yong Su. Open source.
- [Countertype Three Text](https://countertype.com/tools/three-text/demo): An interactive demo of three-text, a 3D text rendering and layout engine for Three.js. Open source.

## Micro interactions

- [Design Spells](https://www.designspells.com/): Small interface interactions with a little magic in them. Free.
- [Theme Toggle View Transitions](https://theme-toggle.rdsx.dev/): A compact set of theme change effects powered by the View Transitions API. Open source.
- [Cursify](https://cursify.ui-layouts.com/): A cursor animation library for React and Next.js. Free.
- [CSS Hover Effects](https://ianlunn.github.io/Hover/): A large collection of CSS powered hover effects by Ian Lunn. Open source.

## Assets

- [Fontshare](https://www.fontshare.com/): A free font service from the Indian Type Foundry, making quality fonts accessible to all. Free + paid plans.
- [mapcn](https://mapcn.dev/): Accessible, customizable map components built on MapLibre GL, Tailwind CSS, and shadcn/ui. Open source.
- [SVG Pattern Builder](https://svg.designcode.io/): Create, customize, and download animated SVG patterns for web and design projects. Open source.
- [UNCUT](https://uncut.wtf/): A free catalogue of contemporary typefaces. Free + paid plans.