6 UX websites that you cannot miss

They stack, and that matters more than any single one of them. Five of the six are built on the same foundation (React, Tailwind, shadcn conventions), so a hero from one site and a pricing table from another end up in the same codebase without a fight.

ui.shadcn.com↗ (opens in a new tab)Free and open source

This is not a package you install and forget. Run the CLI and the component’s source code lands inside your repo. You own it. You can change the padding, the colours, the behaviour, anything, without waiting on a maintainer or fighting a wrapper.

It covers roughly 70 components, all the boring load-bearing ones:

• Forms and inputs: Form fields, Input, Select, Combobox, Date Picker, Input OTP
• Data: Data Table (sorting, filtering, pagination), Chart, Pagination
• Structure: Sidebar, Dialog, Sheet, Tabs, Command (the ⌘K palette)

The real shortcut: blocks

Most people stop at components and miss the blocks. A block is a whole screen, not a button. One command and you have a working layout:

npx shadcn add dashboard-01   # sidebar + charts + data tablenpx shadcn add sidebar-07     # sidebar that collapses to iconsnpx shadcn add sidebar-03     # sidebar with submenusnpx shadcn add login-04       # login page with form and imagenpx shadcn add login-03       # login page, muted background

For an internal tool or an admin panel, dashboard-01 plus your own data gets you 80% of the way in an afternoon.

21st.dev↗ (opens in a new tab)Free to browse · 2 copies a day · membership for unlimited

Think of it as npm for design engineers. Thousands of components published by other developers, all shadcn-compatible, each with a live preview and the full source.

The sections that matter for a landing page, with counts at the time of writing:

• Hero sections — 284 of them. Worth opening: Animated hero by Tommy Jepsen, Sunset Skyline Hero, SaaS Template, Responsive Hero Banner
• Pricing — 43. Start with Toggle Pricing Cards (monthly/annual switch already built) or Two-Plan Pricing Cards
• Testimonials — 161+. Staggered Testimonials Grid is the one I keep coming back to
• Navbars — 43. Navbar 5 by shadcnblocks is a clean starting point

Whole registries live here too: Magic UI, Aceternity UI, Origin UI, Kokonut UI, ReUI and hundreds more, in one search box instead of twelve open tabs.

Two ways to take a component

Option 1: the CLI, straight into your repo:

npx shadcn@latest add "https://21st.dev/r/shadcn/accordion"

Option 2: the prompt. Every component has a copy-ready prompt. Paste it into Cursor, Claude Code, v0 or Lovable and the agent writes that component into your project and wires it to your existing files. This is the one I use. It sorts out the import paths and the Tailwind config for me.

motionsites.ai↗ (opens in a new tab)Free prompts · paid plans for the full library

This one is different. You are not copying code, you are copying a prompt. Each design comes with a written prompt you paste into an AI builder (Lovable, Bolt, Cursor, Claude) and the builder generates the animated section in your stack.

The library is mostly hero sections, plus footers, pricing, CTA and feature sections, grouped by type: SaaS, agency, portfolio, landing page. Named examples on the site: EMBER.dsgn, Digital Epoch, Aetheris Voyage, Nexus IT Solutions, NOVA Space Systems, Slam Dunk. As of mid-2026 they list around 364 prompts, 159 looping video backgrounds and 40 Lovable templates.

Why it works: the hard part of a hero section is not the code, it is deciding what it should look like. Someone already made those decisions here. You get a layout, a motion idea and a tone in one paste.

reactbits.dev↗ (opens in a new tab)Free and open source · 200+ components · optional Pro

Four categories: text animations, animations, components, backgrounds. Every component comes in JavaScript or TypeScript, with plain CSS or Tailwind, and the code lands in your repo the same way shadcn’s does. No runtime dependency on React Bits itself.

The ones I actually use:

Text

• Split Text — headline animates in letter by letter. Best single upgrade to a hero headline.
• Blur Text — words resolve from blurred to sharp.
• Shiny Text — a light sweep across text. Good for a “New” badge or a CTA.
• Count Up — numbers roll up. Perfect for a stats strip: users, uptime, requests handled.
• Decrypted Text — characters scramble then settle. Developer-tool sites love this.

BackgroundsPick exactly one per page

• Aurora — soft flowing gradient. The safest, most reusable one on the list.
• Silk, Threads, Waves — quiet, textured, won’t fight your text.
• Particles, Galaxy, Hyperspeed — loud. Use on a landing page, never behind a form.

UI

• Spotlight Card — a glow follows the cursor across the card. Turns a plain features grid into something people hover over.
• Tilted Card — 3D tilt on mouse move.
• Magic Bento — the bento grid layout every good landing page has now.
• Card Swap, Dock, Masonry — for galleries, portfolios and app-style navigation.

Each component page gives you a copy-ready CLI command, in the shadcn registry format:

npx shadcn@latest add "https://reactbits.dev/r/SplitText-TS-TW"

Pick the variant that matches your stack (TS or JS, Tailwind or CSS) on the page itself.

originkit.dev↗ (opens in a new tab)Free · account needed to pull code

This is the loudest library on the list, in a good way. Hundreds of animated components across six categories: interactive elements, image galleries, text effects, animations, animated backgrounds and buttons.

Three worth opening right now:

• Black Hole — a 3D particle field orbiting a glowing event horizon, with real depth sorting and gravity pulling particles inward. You control particle count (1,000 by default), orbit radius, gravity speed, trail length, tilt and up to ten particle colours. Absurd, and absurdly good for a dev-tool or AI product hero.
• Infinity Canvas — an infinitely zoomable, draggable image gallery with momentum. The best portfolio or case-study grid I have seen in a free library.
• User Cursor — replaces the pointer with a custom one. Small change, big change in feel.

Others in the catalogue: Fluid Trail, SVG Particles, Kinetic Grid, Spiral Images, Coverflow Carousel, Swipe Stack, Smoky Text, Text Morph, Scramble Text, Pixel Reveal, Star Burst, Particle Tunnel, Snow Fall, Character Waves, Emoji Burst.

How to get the code

Tune the component in the live preview first: colours, size, speed, particle count. Then take it one of three ways.

• React / Next.js / Vite: copy the code with your stack and styling selected (CSS, Tailwind or CSS Modules).
• Framer: Copy to Framer, then Insert → Code → New Component, paste, and edit settings from the property panel.
• AI editor: connect their MCP server and tell your assistant “get the blackhole component for Next.js with Tailwind”. It pulls the source itself.

forgeui.in↗ (opens in a new tab)Free blocks · Pro $99 one-time

Forge UI ships whole page sections in shadcn style, built with Tailwind and Framer Motion. The block list is exactly what a landing page is made of: header, hero section, logo cloud, feature, pricing, FAQ, testimonial, call to action, footer, stats, contact, auth and a 404 page.

There are 15 hero section variants alone, with and without imagery, badges and video, each installable through the shadcn CLI:

npx shadcn@latest add @forgeui/hero-section01

The one to look at first is the animated form. It is a sign-up form that types out a name and password on its own and ticks off each field with an animated checkmark, then loops every few seconds. Use it as the visual in a hero section, next to your headline, instead of yet another dashboard screenshot. Setup is three lines:

npm i motion react-icons clsx tailwind-merge

Then add your cn utility file, paste the component, and change the name prop.

Pro is a one-time $99 (listed down from $169) and adds 10 full Next.js + Tailwind templates and 250+ blocks. Only worth it if you are building landing pages regularly.

1. Steal the structure, not the pixels. Open 21st.dev heroes and Motion Sites and pick one hero you like. Do not copy it yet. Note what it does: headline left, product visual right, one primary button, one quiet secondary link. That is your skeleton.
2. Lay the foundation. Install shadcn/ui and set your colours and font once, in your theme file. Every component from every other site on this list reads from those variables, so getting this right now means the rest arrives already matching. Grab the nav from 21st.dev navbars and a footer from Forge UI.
3. Build the hero. Section background: Aurora from React Bits, opacity dialed down. Headline: Split Text. Buttons: plain shadcn buttons. Visual on the right: the Forge UI animated form if you sell a product people sign into, or Black Hole if you sell something that sounds like infrastructure.
4. Fill the middle. Features as a bento grid using Magic Bento or a three-card row with Spotlight Card. A stats strip with Count Up. Social proof from 21st.dev testimonials. Pricing from 21st.dev pricing with the monthly/annual toggle already handled.
5. Close it. CTA block and footer from Forge UI. Done.

Every single piece came from somewhere. Nothing started from a blank screen. That is the whole trick.

1. One animation budget per screen. One thing should move at a time. An animated background plus animated text plus hovering cards plus a custom cursor reads as a 2008 Flash site, not a 2026 product.
2. Set colours and type once, at the theme level. If you are picking a colour inside a component, you have already lost. Every library here reads from your CSS variables.
3. Spacing beats decoration. Most “cheap-looking” pages are not badly coloured, they are badly spaced. Double your section padding and half your problems disappear.
4. Test the loud stuff on a real phone. Particle fields and shader backgrounds eat battery and frame rate. If it stutters on a ₹15,000 Android, cut it.
5. Respect prefers-reduced-motion. One media query. It is also the accessibility box most of these pages never tick.

If you pick one: shadcn/ui, and specifically npx shadcn add dashboard-01. It is the highest return for the least effort, and everything else on this list plugs into it later.

If your landing page is the problem, not your app: one hero from 21st.dev, one background from React Bits, and stop there.

Either way, the blank screen was never the real problem. Starting from one was.