---
title: Beautiful open-source React components
slug: beautiful-open-source-components
url: "https://dontmakeitugly.com/collections/beautiful-open-source-components"
resources:
  - origin-ui
  - tremor
  - magic-ui
  - number-flow
  - thinking-orbs
  - liquid-glass-js
createdAt: "2026-09-02"
updatedAt: "2026-09-03"
---

# Beautiful open-source React components

Component libraries and single components that are free, well made, and easy for an agent to install.

All of these are MIT or similarly licensed, all have public source, and all install or copy cleanly into a React project. Ordered from foundations to finishing touches.

## Resources, in order

1. [Origin UI](https://dontmakeitugly.com/resources/origin-ui.md) — Hundreds of polished, practical components built on shadcn/ui conventions.
   Agent: Excellent.
   Quietly one of the most useful component resources around. Less flashy than Magic UI or Aceternity, far more useful for actual product interfaces.
2. [Tremor](https://dontmakeitugly.com/resources/tremor.md) — Copy-paste React components for dashboards and charts.
   Agent: Excellent.
   If you're building anything with numbers in it, start here. The charts have sensible defaults, and the KPI and table components save you from inventing dashboard patterns from scratch.
3. [Magic UI](https://dontmakeitugly.com/resources/magic-ui.md) — Animated React components and effects for landing pages, built to sit alongside shadcn/ui.
   Agent: Excellent. Install: `npx shadcn@latest add "https://magicui.design/r/marquee"`
   The quickest way to make a landing page feel alive. Use two or three effects with restraint; a page made entirely of Magic UI components starts to look like a demo.
4. [NumberFlow](https://dontmakeitugly.com/resources/number-flow.md) — Animated number transitions that make counters, prices and stats feel expensive.
   Agent: Excellent. Install: `npm install @number-flow/react`
   A tiny detail that makes dashboards, pricing toggles and stat counters feel like a premium product. Use it on numbers that actually change.
5. [Thinking Orbs](https://dontmakeitugly.com/resources/thinking-orbs.md) — An animated orb that shows what your AI is doing: listening, thinking, searching, working.
   Agent: Excellent. Install: `npm install thinking-orbs`
   Most agent-powered apps show a spinner or three dots while the model works. This is a better answer, and a rare example of motion designed for AI products rather than bolted on. Use one state per moment and keep the size modest.
6. [Liquid Glass JS](https://dontmakeitugly.com/resources/liquid-glass-js.md) — Apple's Liquid Glass look on the web: real-time refraction, blur and masking in WebGL.
   Agent: Excellent.
   Listed because it's the most faithful web recreation of the effect, not because you should cover a page in it. Glass on glass on glass is exactly the kind of thing this site's name warns about. One control, one moment, on a busy background where refraction has something to bend.

Work down the list in order. Each linked page says what the resource is, why it's here and how an agent can use it.