🧭 A collection of 4 sites for designing and building interfaces: where to grab ready-made animated components, small UI elements, and visual inspiration. For each one — a link, what it is, and a "how to use" cheat sheet.

Quick comparison

Site What it gives you Tech Format
reactbits.dev Animated React components (text, backgrounds, effects) React + Framer Motion / GSAP Ready-made code (copy / CLI)
uiverse.io Small UI elements: buttons, cards, loaders, toggles Pure CSS or Tailwind Ready-made code (copy)
styles.refero.design Inspiration & styles from real interfaces — (visual references) Screenshots, styles, prompts
ui.aceternity.com Eye-catching sections & components React / Next.js + Tailwind + Framer Motion Ready-made code (copy / CLI)

1. React Bits — reactbits.dev

What it is. An open-source (free) collection of animated, interactive, and fully customizable components for React. Inside you'll find text animations, animated backgrounds, hover effects, and other "wow" elements for landing pages and portfolios.

How to use it:

  1. Open the site and pick a category from the left menu (Text Animations, Backgrounds, Components, Animations).
  2. Choose the component you want and check the preview.
  3. Switch the variant to match your stack: JS / TS and CSS / Tailwind.
  4. Copy the code with the Copy button, or install via the CLI (jsrepo) — the command is shown on the component page.
  5. Drop the component into your project. It often needs dependencies like framer-motion or gsap — they're listed in the instructions.

Best for: bringing an existing React/Next.js site to life with polished animations without coding them from scratch.

2. Uiverse — uiverse.io

What it is. The largest open-source, community-made, free UI element library. Thousands of small elements: buttons, cards, checkboxes, toggles, loaders, inputs, forms. Each element is built with pure CSS or Tailwind.

How to use it:

  1. Open the site and pick an element type (Buttons, Cards, Loaders, Toggles, etc.).
  2. Find a variant you like in the gallery.
  3. Switch the code format: CSS or Tailwind.