Ruixen UI

Marketing UI for shadcn — in any stack.

The component library for the page that wraps your app. 240+ React sections and components for landing pages — hero blocks, pricing tables, FAQs, footers, navbars, and the primitives around them. Generated from a single source codebase into four registry variants (Tailwind v3/v4 · Radix/Base UI) and installed with one CLI command.

Sections  ·  Components  ·  Pro Templates  ·  Gradients  ·  Blog

What Ruixen is for

shadcn solved primitives. Ruixen solves the surface that ships when you publish — the hero that gets the click, the pricing table that converts, the FAQ that closes the deal, the footer customers actually read.

If you've ever opened a fresh Next.js project, scaffolded shadcn, and then realized you still need to design every marketing block from scratch — that's the gap. Ruixen fills it. Sections, components, gradients, and templates that look like they shipped in 2026, not 1995.

In any stack — really

Every component in the catalog is generated into four registry variants from one source codebase at build time:

	Tailwind v4	Tailwind v3
Radix UI	r/<name>	r/tw3/<name>
Base UI	r/baseui/<name>	r/baseui/tw3/<name>

Pick the URL that matches your stack from the docs sidebar. The CLI does the rest — no peer-dep gymnastics, no provider to wrap, no global CSS to import. Pinned to Tailwind v3 for legacy compatibility? Evaluating Base UI for accessibility or licensing? Running the latest? Ruixen ships for all of you.

Quick start

# Tailwind v4 + Radix  (default)
npx shadcn@latest add "https://ruixen.com/r/staggered-faq-section"

# Tailwind v3 + Radix
npx shadcn@latest add "https://ruixen.com/r/tw3/staggered-faq-section"

# Tailwind v4 + Base UI
npx shadcn@latest add "https://ruixen.com/r/baseui/staggered-faq-section"

# Tailwind v3 + Base UI
npx shadcn@latest add "https://ruixen.com/r/baseui/tw3/staggered-faq-section"

The component lands in your project with dependencies resolved. Just JSX — yours to edit, ship, and refactor.

Built with intention

The catalog isn't styled to look good in a screenshot — it's built to feel right in production. Where it matters, components carry weight:

• Motion as physics, not transitions. Buttons, switches, badges, and accordions use spring configs from motion/react — momentum, overshoot, settling. Not a 300ms ease-out timer pretending to be life.
• Audio as feedback. Interactive primitives ship with a 3ms Web Audio click on press for a tactile feel. Opt out per-component with sound={false}.
• Tokens, not hex. Every component reads from shadcn theme tokens (bg-card, border-border, text-foreground). Change one CSS variable, re-skin the catalog.
• Identical code, different wrappers. Switching from Radix to Base UI doesn't change the component file — just the underlying primitive layer. Component logic stays portable.

Most of the catalog is pure render. Physics and audio are a flavor on the interactive primitives, not a tax on everything else.

Showcase

What's inside

Sections — 59 marketing blocks across 8 categories

Navbars (16)	Hero Sections (9)	Pricing (10)	FAQs (6)
Featured (6)	Testimonials (4)	Clients (4)	Footers (4)

Components — primitives and effects across 24 categories

Buttons · Inputs · Cards · Forms · Accordions · Avatars · Badges · Banners · Backgrounds · Text Effects · Loaders · Carousels · AI Chat Inputs · Audio & Media · Image Tools · Video Players · Checkboxes · Selects · Sliders · Tabs · Charts · Dialogs · Docks · Stepper

App UI — bonus catalog for product interfaces

Calendars · Event Calendars · Date Pickers · Pagination · File Management · Notifications · Drawer · Menu · Breadcrumbs

Gradients — 31 hand-tuned 4K gradients (3840 × 2160) across 6 collections: Shade Shifters, Crimson Aura, Fractional Walls, Hero Gradients, Hue Flows, Moon Backgrounds. Free for personal and commercial use.

Pro

When the free catalog isn't enough — when you need everything to look like it shipped from a design team that's been working together for a year:

• 50+ premium components with motion polish and theme depth beyond the OSS catalog
• 2 production-ready templates — Intellune (SaaS) and Nguyen (portfolio)
• Lifetime updates — every new component we ship lands in your project for as long as the project exists
• Commercial license included
• Priority Discord support
• 14-day money-back guarantee

$59 once. No subscription.

ruixen.com/pricing  ·  pro.ruixen.com

Ships in public

New sections and components every week. Spring configs, interaction breakdowns, and the build itself happens on Twitter — follow @ruixen_ui to see what lands next.

The roadmap lives in ROADMAP.md.

Tech Stack

Framework	Next.js 15 · React 19 · TypeScript 5
Styling	Tailwind CSS v3 & v4 · CSS Variables · shadcn theme tokens
Motion	Motion (framer-motion successor) · GSAP · Web Audio API
Primitives	Radix UI & Base UI — component code is identical; only the wrapper layer differs
Registry	shadcn CLI · JSON-based component registry · one source → four variants at build time
Content	Content Collections · MDX docs

Contributing

You only need to change 5 files to add a new component. It takes about 10 minutes.

git clone https://github.com/ruixenui/ruixen.com.git
cd ruixen.com
pnpm install
pnpm dev

Read the Contributing Guide for the full walkthrough, or study the example PR to see exactly which files to touch.

Contributors

Community

License

MIT — see LICENSE for details. The free catalog is yours to use in any project, commercial or otherwise.

---