DOCSEARCHbyAlgolia
Submit Docs

Ruixen UI

repository·main·Indexed 41 days ago

https://github.com/ruixenui/ruixen.com

A marketing-focused React component library for shadcn users featuring 240+ high-fidelity sections and primitives. It provides a CLI for installation and supports multiple registry variants for Tailwind v3/v4 and Radix UI or Base UI. Components include advanced animations, spring physics, and 'liquid-glass' aesthetics, utilizing standard shadcn theme tokens for customization.

Tokens
197.3K
Snippets
664
Records
1K
Agent score
48%

What's inside Ruixen UI

  1. Overview of Ruixen UI catalogs

    main

    Ruixen UI provides three main categories of UI elements:

    • Sections (51): Full landing-page blocks including Hero, Pricing, FAQs, Footers, Navbars, Featured, and Client sections.
    • Components (88): Primitives and effects such as Buttons, Inputs, Cards, Forms, Backgrounds, Text Effects, AI Chat Inputs, and Audio & Media.
    • App UI (39): Interface elements for application logic, including Calendars, File Management, Pagination, and Notifications.

  2. Overview of Ruixen UI capabilities

    main

    Ruixen UI is a multi-stack marketing UI library designed for shadcn projects. It provides over 240 React sections and components specifically optimized for landing pages.

    Key features include:

    • Registry Variants: Components are generated into four distinct registry variants based on your stack:
      • Tailwind v3 + Radix
      • Tailwind v4 + Radix
      • Tailwind v3 + Base UI
      • Tailwind v4 + Base UI
    • Component Categories: Extensive coverage including Hero sections, Pricing, Calendars & Schedulers, Buttons, Inputs, Tables, Navigation/Docks, and Background Effects.
    • Additional Assets: 23+ Premium 4K gradients and CSS generators for Glass Morphism, Shadows, and Gradients.
    • Framework Support: Compatible with Next.js, Vite, Remix, Astro, Laravel, and Gatsby.
    • Installation: Managed via a CLI for easy component integration.

  3. Features of Trusted Clients Showcase

    main

    The component includes several built-in visual and functional features:

    • Staggered Blur-Up Entrance: Logos fade from blur(4px) + translateY(8px) to clear, staggered 60ms apart, triggered by IntersectionObserver when the section enters the viewport.
    • Collective Spotlight: Hovering any logo lifts it to 100% opacity with translateY(-2px), while all other logos dim to 20% opacity.
    • Dual-Speed Transitions: Uses a 500ms deceleration for the entrance animation and a 250ms transition for hover interactions.
    • Text-Based Defaults: If no logo is provided, clients are rendered as clean, semibold text.
    • Zero Dependencies: Uses pure CSS transitions and IntersectionObserver; no framer-motion or next/image required.
    • Accessibility: Uses semantic HTML, includes aria-label on linked logos, and is keyboard-focusable.

  4. Features of ScrollTextRise

    main

    The ScrollTextRise component includes several built-in animation and UI behaviors:

    • Self-Contained Scroll: Creates its own scrollable container; page scroll has zero effect. This makes it ideal for previews and iframes.
    • Staggered Word Animation: Each word has its own scroll range, creating a sequential wave effect.
    • Dual Transform: Words animate both opacity (0 $\rightarrow$ 1) and y-translate (20px $\rightarrow$ 0) for a natural rising feel.
    • Ghost Text Underlay: A faint 30% opacity text remains visible beneath the animation to provide a preview of the content.
    • Hidden Scrollbar: The scrollbar is hidden for a clean look, using the dimmed text as a visual affordance for scrolling.
    • Responsive Typography: Text scales across breakpoints from text-xl to text-[3.1rem] automatically.

  5. Password Field features

    main

    The PasswordField component provides a comprehensive suite of password management features:

    • Password Strength Meter: A visual indicator that evaluates strength from Very Weak to Very Strong.
    • Requirements Checklist: Real-time validation of password criteria (length, uppercase, numbers, and special characters).
    • Password Generation: One-click generation of secure random passwords.
    • Copy to Clipboard: Built-in functionality to copy generated passwords.
    • Toggle Visibility: Ability to show or hide the password text.
    • Strength Calculation: Logic based on length, uppercase letters, numbers, and special characters.

  6. Stack Pagination Features and Interactions

    main

    The Stack Pagination component provides a highly interactive 3D experience:

    Visual Features

    • 3D Card Stack: Cards use z-transforms to create a sense of depth.
    • Perspective: Employs CSS perspective for realistic 3D effects.
    • Smart Pagination: Automatically handles large page counts by showing ellipsis (...).

    User Interactions

    • Click Card: Flips the card to reveal back content using a rotateY(180deg) animation.
    • Hover: Cards lift up using z-axis translation and 3D transforms.
    • Navigation: Use Prev/Next buttons to move through pages.
    • Active State: The current page card is visually elevated.

  9. Features of the Automated Tasks Panel

    main

    The Automated Tasks Panel is a Shadcn-style feature section designed for displaying workflows. Key features include:

    • Animated scrolling task list: Powered by framer-motion for smooth transitions.
    • Workflow automation badges: Visual indicators for task types.
    • Fade effect overlay: Provides smooth visual transitions during scrolling.
    • Task icons and descriptions: Structured layout for task details.
    • Responsive design: Optimized for both desktop and mobile devices.

  10. Morphing Expandable Menu features and interactions

    main

    The MorphingExpandableMenu is a multi-state React component with the following capabilities:

    State Transitions

    • Pill to Dock: Clicking the plus button expands the compact pill into a 4-icon dock.
    • Panel Expansion: The dock can expand into specialized panels including:
      • Search Panel: Includes a full search input and a list of recent items.
      • Music Player: Features album art, a progress bar, and playback controls.
      • Focus Timer: A 25-minute Pomodoro timer with start, pause, and reset functionality.
      • Quick Note: A textarea with a character count and a save button.

    Interaction & UX

    • Spring Animations: Uses physics-based transitions for smooth state changes.
    • Keyboard Support: Pressing the Escape key navigates backward through the state history.
    • Click Outside: Clicking outside the component automatically collapses it back to the pill state.
    • Theming: Supports Light and Dark modes using semantic tokens.

  11. Magic Tree features and visual effects

    main

    The Magic Tree is a React-based file manager component featuring:

    • Sparkle Effects: Special nodes include magical sparkle indicators.
    • Interactive Animations: Includes hover and tap animations powered by Framer Motion.
    • Star Selection: Selected items are visually identified with a star icon.
    • Visual Styling: Uses smooth transitions and purple accent color-coded borders for magical elements.
    • Sample Data: Includes a default magical folder structure for immediate use.

  12. Features of the URL Input component

    main

    The URL Input is a smart React input field designed for handling website addresses. Key capabilities include:

    • Automatic Favicon Detection: Automatically retrieves and displays the website's favicon once a valid URL is entered.
    • Smart URL Parsing: Capable of parsing URLs whether they include a protocol prefix (e.g., https://) or not.
    • Fallback Icon: Automatically displays a globe icon if no favicon can be found for the provided URL.
    • Error Handling: Built-in handling for invalid URL formats and missing favicon resources.