# 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. [![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE) [![Components](https://img.shields.io/badge/Components-240+-8b5cf6.svg)](https://ruixen.com/docs) [![Pro](https://img.shields.io/badge/Pro-pro.ruixen.com-000.svg)](https://pro.ruixen.com) [![Twitter Follow](https://img.shields.io/twitter/follow/ruixen_ui?style=social)](https://twitter.com/ruixen_ui) [Sections](https://ruixen.com/docs) · [Components](https://ruixen.com/docs) · [Pro Templates](https://pro.ruixen.com) · [Gradients](https://ruixen.com/gradients) · [Blog](https://ruixen.com/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/` | `r/tw3/` | | **Base UI** | `r/baseui/` | `r/baseui/tw3/` | 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 ```bash # 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

FAQ Chat Accordion _{Conversational FAQ section}	Wordmark Footer _{Half-cut brand footer with luminance gradient}	Split Feature Showcase _{Side-by-side feature highlight section}
Integration & Stats Section _{Logos and metrics block for trust-building}	Rising Glow _{Animated particles for hero accents}	Badge Morph _{Spring-animated status badge}

Browse all 240+ components →

## 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](https://ruixen.com/pricing) · [pro.ruixen.com](https://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](https://twitter.com/ruixen_ui) to see what lands next. The roadmap lives in [ROADMAP.md](./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. ```bash git clone https://github.com/ruixenui/ruixen.com.git cd ruixen.com pnpm install pnpm dev ``` Read the [Contributing Guide](./CONTRIBUTING.md) for the full walkthrough, or study the [example PR](https://github.com/ruixenui/ruixen.com/pull/12) to see exactly which files to touch.
## Contributors

## Community

## License MIT — see [LICENSE](LICENSE) for details. The free catalog is yours to use in any project, commercial or otherwise.
---

ruixen.com
_{Marketing UI for shadcn — in any stack.}