ThreeUI — Three.js components, templates & shaders

Use when

You need copy-ready Three.js / WebGL pieces—hero templates, shader backgrounds, buttons, and interactive UI—to drop into a React site instead of authoring every GPU effect from scratch.

Skip when

You only need static design-system primitives, CSS/Framer motion blocks without WebGL, procedural Three.js factories from a photo, or a full browser 3D modeling canvas.

Try instead

Browse animated React UI catalogs, image-to-Three.js converters, component marketplaces, and browser 3D tools on Uwarp when a Three.js shader kit is not the job.

• React Bits
• img2threejs
• 21st.dev
• Womp

• ThreeUIThis page

  Pricing

  Community free (MIT npm); Pro yearly or lifetime for premium source—confirm on site

  Learning cost

  Browse live demos → copy or install React + Three.js snippets; Pro via CLI—short ramp for React/WebGL teams

  Output limits

  Three.js/WebGL heroes, backgrounds, shaders, UI effects, and full landing templates; Community vs Pro catalog size differs

  Privacy

  Components run in your app after copy/install; browsing and Pro auth happen on threeui.com

• Spline

  Pricing

  Free tier plus paid plans for exports, collaboration, and seats—confirm live tiers

  Learning cost

  Visual scene editor → export/embed to the web—short ramp for designers, moderate for deep code edits

  Output limits

  Interactive 3D scenes and embeds authored in a visual tool—not a copy-paste Three.js component kit

  Privacy

  Cloud projects on Spline—confirm sharing and export terms on site

• React Bits

  Pricing

  Freemium catalog; free components plus paid unlocks—confirm live coverage

  Learning cost

  Browse → copy or install animated React snippets—short ramp for React developers

  Output limits

  Animated React UI patterns (text, cards, backgrounds, loaders)—typically CSS/Framer-style, not GPU shader packs

  Privacy

  Components run in your app after copy/install; browsing is on the catalog site

1. ThreeUI — official site
2. ThreeUI — pricing
3. Spline — official site
4. React Bits — official site

Free tier

Yes

Pricing summary

ThreeUI Community is free and MIT-licensed via npm. Pro adds premium components, full source, MCP access, and commercial entitlements on yearly or lifetime plans. Confirm live tiers on the official pricing page—this page does not list currency amounts.

Reviewed on 14 September 2026 · ThreeUI — pricing

• Three.js and WebGL components

  Heroes, backgrounds, shaders, buttons, and interactive UI effects built for the browser.

• Landing templates

  Complete marketing and product page layouts with tasteful variants and live controls.

• Community npm package

  Install free Community components with @designcodeio/threeui under an MIT license.

• Pro source and MCP

  Paid Pro unlocks premium items, entitled source via CLI, and agent-oriented MCP workflows.

1. 1

   Match the visual job

   Pick a hero, shader background, or UI effect that fits the screen—not every demo in the grid.

2. 2

   Check Community vs Pro

   Confirm whether the item you need is on the free catalog before you plan a launch.

3. 3

   Install into React

   Use the npm Community package or the Pro CLI, then align tokens and performance budgets with your app.

4. 4

   Perf-test on target devices

   Validate GPU cost on mobile and low-power hardware before shipping WebGL-heavy sections.

• Front-end developers

  Ship polished Three.js landings without authoring every material and post-process from zero.

• Creative technologists

  Prototype interactive heroes and shader backgrounds with shared live demos.

• Marketing site teams

  Add distinctive WebGL sections to React sites under tight deadlines.

React + Three.js runtime

Catalog items target React sites with Three.js / Canvas / WebGL. Confirm peer dependency ranges on the official docs and npm package.

Community MIT vs Pro entitlements

Community source is MIT; Pro source ships through authenticated CLI access. Confirm commercial terms per plan on threeui.com/pricing.