Skip to content

Frontend

Component libraries, animation, CSS tooling and starters for building in the browser.

Your tool hereOn tool pages, blog posts and the feeds, next to what people came to read.$19 / 3 months →

Component libraries

8
  1. shadcn/uiBeautifully designed, copy-paste React components built on Radix and Tailwind.FrontendPickOpen source
  2. ThreeUICopy-ready Three.js components, WebGL backgrounds, hero sections, and full templates with source.FrontendFreemium
  3. 21st.dev12,000+ hand-crafted React and Tailwind components, templates, and shadcn themes — preview live, install with one command.FrontendFreemium
  4. Component GalleryA cross-reference of UI components as they appear in dozens of real design systems — see how everyone else named and built a combobox.FrontendFree
  5. mapcnOpen-source map components and ready-made blocks for React — store locators, heatmaps, choropleths and delivery trackers built on MapLibre GL, shadcn/ui and Tailwind, installed with one shadcn CLI command.FrontendOpen source
  6. Aceternity UI200+ animated copy-paste React components, blocks and landing templates built with Tailwind CSS and Motion.FrontendFreemium
  7. Magic UIAnimated React components and landing-page templates built with Tailwind and Motion, installable via the shadcn CLI.FrontendFreemium
  8. UIAbleAn open-source component library for Next.js — customizable blocks you copy in and make your own.FrontendOpen source

Animation & motion

10
  1. Fancy ComponentsUnusual React and Motion components for the parts of a site meant to show off — text effects, physics, and deliberately playful hovers.FrontendOpen source
  2. Motion PrimitivesAnimated React components built on Motion and Tailwind — copy the source in, tune the springs, and skip writing the transitions yourself.FrontendFreemium
  3. NumberFlowA component that animates numbers as they change — digit-by-digit transitions for counters, prices, and dashboards, in React, Vue, or Svelte.FrontendOpen source
  4. React BitsA large collection of animated React components — text effects, backgrounds, and interactions, shipped in JS or TS and CSS or Tailwind.FrontendFree
  5. Theatre.jsA motion design library with a visual editor — animate anything in JavaScript, three.js scenes included, and keyframe it in the browser.FrontendOpen source
  6. Kinetics150+ spring-physics micro-interactions with CSS, React code and build prompts — tune the physics, copy the motion.FrontendOpen source
  7. MicroKit UIFree copy-paste microinteractions for React, CSS and Tailwind — animated buttons, hovers, tabs and inputs, no package to install.FrontendOpen source
  8. Liquid GlassLiquid-glass refraction components that bend the live DOM behind them, in every browser.FrontendFree
  9. loading.dev29 drop-in React loading spinners, from arcs to bouncing dots, installed as one npm package.FrontendFree
  10. MotionA production-grade animation library for React and vanilla JS — springs, gestures, layout and scroll animations.ReposOpen source

CSS & Tailwind tools

3
  1. Easing GradientsGenerates CSS gradients that fade along an easing curve instead of a straight line — the fix for banded, muddy-looking gradient edges.Developer ToolsFree
  2. UiverseA community library of open-source UI elements — buttons, loaders, toggles, cards — copyable as CSS or Tailwind.FrontendOpen source
  3. CSS Text Effects90 pure-CSS animated text effects — gradient, glitch, typewriter, neon — click to copy, no JavaScript.FrontendOpen source

Starters & templates

1
  1. Framer UniversityFree Framer components, templates, and tutorials — drop-in effects and layouts for people building sites in Framer rather than in code.FrontendFreemium