Someone Open-Sourced The Expensive Part Of A Web Page

# ThreeUI

Someone open-sourced the parts of a web page you have been skipping.

Not a component library in the shadcn sense — buttons, cards, dialogs, the things
you already have. The other layer: a liquid-metal button whose surface actually
flows, a particle field that follows the mouse, a nebula background running a real
shader, a flow field, cloth that hangs and moves. The pieces that make a site look
like it cost money, and the ones most people ship without because writing GLSL is
a specialist job.

It is called ThreeUI. Meng To open-sourced it on 21 August 2026 and it took 3,393
stars in three days.

The repo is the Community edition and it is MIT licensed. The README's own
arithmetic: 50 parent components, 111 routes, 141 free variant records plus 23
singleton components — 164 browse results. Meng To's own launch post puts it
at "160+ are free."

That is the number worth holding on to, because there is a second one that will
confuse you: Pro is advertised as "50+ extra components." If you go looking and
see 50, you are looking at the paid tier, not the free one.

npm install @designcodeio/threeui

import { AtTheHorizon } from "@designcodeio/threeui";
import "@designcodeio/threeui/style.css";

export function Hero() {
  return <AtTheHorizon />;
}

Or run the whole catalog on your own machine and click through it:

git clone https://github.com/MengTo/threeui
cd threeui
npm install
npm run dev

No account, no API key, no token anywhere in that path. The repo describes itself
as the "login-free edition" and it means it.

Most components are one install and one import. But the ones that render **full
HTML documents** expect their runtime files at the same root-relative URLs the
ThreeUI preview serves them from. If you drop one of those in and get a blank
box, that is why: copy what it needs out of
node_modules/@designcodeio/threeui/lib-dist/assets/ into your app's public/
directory, or override the component's sourceUrl or assetBaseUrl prop.

Buttons, backgrounds and fields need none of that.

Worth saying plainly, because the boundary is easy to trip over.

Free: the Community catalog, MIT, including the ThreeUI-authored images and
textures those components need. The bundled three.js runtime is MIT. The fonts —
Fragment Mono, Instrument Serif, Newsreader, Lexend, Onest — are SIL Open Font
License 1.1, which is still free to use and redistribute.

Not free: Pro and Beta components are stripped out of this repo, and their source
is not published to npm at all — Pro members pull it through an OAuth CLI.

Also not free, and this is the one that would have been the best part: ThreeUI
ships an MCP server at threeui.com/api/mcp with search_catalog,
get_catalog_item, get_item_source and get_item_prompt — your coding agent
browsing and installing 3D components on its own. It is Pro-only. The server
checks a Supabase entitlement and fails closed for anonymous, expired, non-OAuth
and non-Pro requests. If you read "open-sourced" and assumed the agent
integration came with it, it does not.

One more caveat that is not a licence issue: the catalog thumbnails and preview
videos are served from threeui.com and are not redistributed by the repo. That
affects the browse UI, not the components you ship.

If you ship products, the honest case is narrow and real: the visual layer is the
part that signals effort, and it is the part you are least likely to build
yourself. 160 of them, MIT, one install.

The honest case against: a repo taking a thousand stars a day is a homogenizing
force. In a month a lot of pages will have the same nebula on them. That is the
shadcn story again. Use the pieces as a floor to build on, not as the whole look.