Ruixen UI

Overview

Ruixen UI is an MIT-licensed library of marketing UI for shadcn/ui: 240+ React sections and components aimed at the landing page around an app, such as hero blocks, pricing tables, FAQs, navbars and footers. Components install with the shadcn CLI and land in the project as editable JSX.

Every component is generated from one source codebase into four registry variants, covering Tailwind CSS v4 or v3 on either Radix UI or Base UI. Interactive primitives use spring physics from Motion and an optional Web Audio click, and all styling reads from shadcn theme tokens. A paid Pro tier adds 50+ premium components and two templates.

Features

• 59 marketing sections: Navbars (16), hero sections (9), pricing (10), FAQs (6), featured, testimonials, clients and footers
• Components in 24 categories: Buttons, inputs, cards, forms, text effects, loaders, carousels, AI chat inputs, charts, dialogs, docks and steppers
• App UI catalog: Calendars, event calendars, date pickers, pagination, file management, notifications, drawers and menus
• Four registry variants: r/, r/tw3/, r/baseui/ and r/baseui/tw3/ paths for each stack combination
• Spring motion and sound: Buttons, switches, badges and accordions use motion/react springs, with a 3ms click that can be disabled via sound={false}
• Token-based theming: Components use classes like bg-card and text-foreground, so one CSS variable change re-skins the catalog
• Gradients: 31 4K gradients across 6 collections, free for personal and commercial use

Tech stack

• Next.js 15, React 19, TypeScript 5
• Tailwind CSS v3 and v4, shadcn theme tokens
• Radix UI and Base UI
• Motion, GSAP, Web Audio API
• Content Collections and MDX docs

Getting started

npx shadcn@latest add "https://ruixen.com/r/staggered-faq-section"