# Ruixen UI

> Beautifully designed landing page components built with React & Tailwind CSS.

This file provides LLM-friendly entry points to documentation and examples.

## Components

- [About Portfolio](https://pro.ruixen.com/docs/components/about-portfolio): An editorial portfolio-style About block — role + bio at the top, functional tabs + location metadata in the middle, large hero image at the bottom, all aligned to a shared 3+4 column rhythm.
- [About Staggered](https://pro.ruixen.com/docs/components/about-staggered): An editorial two-column About-Us block with text and image clusters, where the right column is offset by 12rem on lg+ to create a staggered diagonal rhythm.
- [About Team Bento](https://pro.ruixen.com/docs/components/about-team-bento): Multi-section About block — centered title, asymmetric 3×3 bento grid (dark stat card + team photos + tall founder portrait + yellow stat card), and two-tone-headline closers with body copy, icon-chip and rounded CTA.
- [About Visual Storytelling](https://pro.ruixen.com/docs/components/about-visual-storytelling): Editorial dark-theme About section — large serif headline with marker-highlighted phrases, a staggered bottom-aligned portrait strip (skyline silhouette), and a closing serif sub-headline plus body paragraph.
- [Accordion With Image Tooltip](https://pro.ruixen.com/docs/components/accordion-with-image-tooltip): An accordion component with image tooltips on hover.
- [Account Stats Pill](https://pro.ruixen.com/docs/components/account-stats-pill): Install via CLI or Copy the code and paste it in your project
- [Animated Shine Text](https://pro.ruixen.com/docs/components/animated-shine-text): Text with animated shining effect using motion.
- [Apple Mega Nav](https://pro.ruixen.com/docs/components/apple-mega-nav): Apple-style mega navigation menu.
- [Bloom Text](https://pro.ruixen.com/docs/components/bloom-text): Text with blooming flower animation effect.
- [Bottom Menu](https://pro.ruixen.com/docs/components/bottom-menu): A bottom navigation menu component.
- [Changelog](https://pro.ruixen.com/docs/components/changelog): A changelog section component with version badges, dates, and entry cards.
- [CTA Avatar Mosaic](https://pro.ruixen.com/docs/components/cta-avatar-mosaic): A pixel-grid mosaic of customer avatars that resolves into an organic silhouette above a centered headline and CTA pair. Pure CSS animations, no runtime motion library.
- [CTA Meteor](https://pro.ruixen.com/docs/components/cta-meteor): A stunning CTA section with meteor/asteroid animation that falls and expands, featuring gradient effects, particle animations, and customizable content.
- [CTA Window Mock](https://pro.ruixen.com/docs/components/cta-window-mock): A two-column CTA card with a stylised stacked-window product mockup on the right and copy + button on the left.
- [Display Card](https://pro.ruixen.com/docs/components/display-card): A display card component for real estate listings.
- [Dock Tooltip](https://pro.ruixen.com/docs/components/dock-tooltip): Install via CLI or Copy the code and paste it in your project
- [Draggable Progress Bar](https://pro.ruixen.com/docs/components/draggable-progress-bar): An interactive draggable progress bar component.
- [Email Draft Chat](https://pro.ruixen.com/docs/components/email-draft-chat-card): Install via CLI or Copy the code and paste it in your project
- [FAQ Section](https://pro.ruixen.com/docs/components/faq-section): A customizable FAQ accordion section with multiple variants, icons, and smooth animations.
- [Feature Bento Grid](https://pro.ruixen.com/docs/components/feature-bento-grid): A beautiful bento grid layout for showcasing features with corner accents, dot patterns, and various card styles.
- [Feature Illustrated Split](https://pro.ruixen.com/docs/components/feature-illustrated-split): Split-panel feature section — two side-by-side panels with subgrid-aligned headlines and stacked-card illustrations (an invoice card and a spending-limit chart with hover-animated bars), closed by a four-tile icon-led feature grid below.
- [Feature Trio Illustrated](https://pro.ruixen.com/docs/components/feature-trio-illustrated): Three-column feature card — a single bordered surface that splits into three subgrid-aligned columns at md+ (chat bubble, uptime bar chart, audit timeline) and stacks vertically on smaller screens.
- [File Import Card](https://pro.ruixen.com/docs/components/file-import-card): Install via CLI or Copy the code and paste it in your project
- [Filmstrip Timecode](https://pro.ruixen.com/docs/components/filmstrip-timecode): A filmstrip with timecode display.
- [Flicker Footer](https://pro.ruixen.com/docs/components/flicker-footer): A sticky reveal footer with tube light flicker animation effect on headline text.
- [Footer Reveal](https://pro.ruixen.com/docs/components/footer-reveal): A sticky reveal footer with navigation, hero typography, and optional images that reveals on scroll.
- [Glass Split Card](https://pro.ruixen.com/docs/components/glass-split-card): A glassmorphism split card component.
- [Hero Bars](https://pro.ruixen.com/docs/components/hero-bars): Animated hero bars with customizable gradient colors, wave effects, and centered title.
- [Hero Contact Enrichment](https://pro.ruixen.com/docs/components/hero-contact-enrichment): Customer-360 marketing hero — title and CTAs above a framed showcase of four signal-source chips converging on an enriched contact card with summary, schedule, company, outreach progress and an activity timeline.
- [Hero CRM Dashboard](https://pro.ruixen.com/docs/components/hero-crm-dashboard): CRM marketing hero — title and CTAs above an auto-rotating stack of contact cards (highlights, details, activity) with a sticky tab bar pinned to the viewport bottom while the section is in view.
- [Hero Cursor Cards](https://pro.ruixen.com/docs/components/hero-cursor-cards): A hero section with floating cursor pointers, following cursor effect, three overlapping cards in diamond layout, and logo cloud.
- [Hero Dot Pattern](https://pro.ruixen.com/docs/components/hero-dot-pattern): A hero section with dot pattern background, fixed navbar with scroll-aware styling, logo cloud slider, and themed dashboard preview.
- [Hero Globe Grid](https://pro.ruixen.com/docs/components/hero-globe-grid): Marketing hero with a half-cut interactive cobe globe rising from the bottom, floating job-listing cards and a 3×3 rounded-card grid backdrop whose meeting corners form rounded "+" gaps around the headline.
- [Hero Mobile Showcase](https://pro.ruixen.com/docs/components/hero-mobile-showcase): A hero section with animated split text and centered mobile phone mockup.
- [Hero Reporting Dashboard](https://pro.ruixen.com/docs/components/hero-reporting-dashboard): Reporting marketing hero — eyebrow tag, large title and CTAs above a 10-ring concentric backdrop and a full multi-section product dashboard preview (workspace chrome + sidebar + stock-analysis data table).
- [Hero Split Dashboard](https://pro.ruixen.com/docs/components/hero-split-dashboard): Two-column marketing hero — headline, sub-headline and CTA pair on the left with a 2×2 stats grid, anchored by a full multi-section product dashboard preview that bleeds toward the right edge, plus a brand logo strip below.
- [Hero Tabs Dashboard](https://pro.ruixen.com/docs/components/hero-tabs-dashboard): A hero section with tabbed feature navigation, dashboard sidebar preview, junction dot accents, and crosshatch background pattern.
- [Instagram Stories](https://pro.ruixen.com/docs/components/instagram-stories): A fully-featured Instagram Stories component with progress bars, video support, swipe navigation, like/reply actions, and mobile-first design.
- [Integrations Arc](https://pro.ruixen.com/docs/components/integrations-arc): Centered heading with brand logos sitting on a dashed arc that fades into the page; logos parallax horizontally as the section scrolls through the viewport.
- [Integrations Grid](https://pro.ruixen.com/docs/components/integrations-grid): A responsive grid layout showcasing integration cards with brand logos, titles, and descriptions.
- [Logo Cloud](https://pro.ruixen.com/docs/components/logo-cloud): Install via CLI or Copy the code and paste it in your project
- [Logo Cloud Animated](https://pro.ruixen.com/docs/components/logo-cloud-animated): An animated logo cloud with cycling logos, grid layout, and corner plus icons.
- [Logo Cloud Strip](https://pro.ruixen.com/docs/components/logo-cloud-strip): Install via CLI or Copy the code and paste it in your project
- [Logo Cloud Underline](https://pro.ruixen.com/docs/components/logo-cloud-underline): Install via CLI or Copy the code and paste it in your project
- [Map Location Picker](https://pro.ruixen.com/docs/components/map-location-picker): An interactive map component with location cards, pagination, and real-time selection.
- [Masonry Grid](https://pro.ruixen.com/docs/components/masonry-grid): A responsive masonry grid layout with scroll-driven animations and hover effects.
- [Minimal Header](https://pro.ruixen.com/docs/components/minimal-header): A minimal sticky site header with text-only mega-menu dropdowns split into two divided columns — Features grid plus a focused secondary section.
- [Models Carousel](https://pro.ruixen.com/docs/components/models-carousel): A carousel component for displaying models.
- [Notes App Mockup](https://pro.ruixen.com/docs/components/notes-app-mockup): Install via CLI or Copy the code and paste it in your project
- [Notification Stack](https://pro.ruixen.com/docs/components/notification-stack): Install via CLI or Copy the code and paste it in your project
- [Platform Header](https://pro.ruixen.com/docs/components/platform-header): A sticky platform-style site header with backdrop blur on scroll, multi-column mega-menu dropdowns for Product and Company, and a portaled animated mobile drawer.
- [Pricing Feature Comparison](https://pro.ruixen.com/docs/components/pricing-feature-comparison): Install via CLI or Copy the code and paste it in your project
- [Pricing Sectioned Grid](https://pro.ruixen.com/docs/components/pricing-sectioned-grid): Install via CLI or Copy the code and paste it in your project
- [Pricing Tier Cards](https://pro.ruixen.com/docs/components/pricing-tier-cards): Install via CLI or Copy the code and paste it in your project
- [Product Card Carousel](https://pro.ruixen.com/docs/components/product-card-carousel): Install via CLI or Copy the code and paste it in your project
- [Profile Card Stack](https://pro.ruixen.com/docs/components/profile-card-stack): Install via CLI or Copy the code and paste it in your project
- [Project Title Morph](https://pro.ruixen.com/docs/components/project-title-morph): A morphing project title animation component.
- [Real-time UI Generation](https://pro.ruixen.com/docs/components/realtime-ui-generation): Install via CLI or Copy the code and paste it in your project
- [Referral Network](https://pro.ruixen.com/docs/components/referral-network): Install via CLI or Copy the code and paste it in your project
- [Rich Text Editor](https://pro.ruixen.com/docs/components/rich-text-editor): Install via CLI or Copy the code and paste it in your project
- [Scroll FX](https://pro.ruixen.com/docs/components/scroll-fx): A cinematic scroll-driven media component.
- [Scroll FX Timeline](https://pro.ruixen.com/docs/components/scroll-fx-timeline): A scroll-driven timeline component with visual effects.
- [Scroll Split Video Gallery](https://pro.ruixen.com/docs/components/scroll-split-video-gallery): A split-screen video gallery with scroll interaction.
- [Services Bento Grid](https://pro.ruixen.com/docs/components/services-bento-grid): A bento grid layout for services with dashboard preview, stats, testimonial, kanban board, and resource usage cards.
- [Services Interactive Cards](https://pro.ruixen.com/docs/components/services-interactive-cards): A services section with three interactive cards showcasing AI task breakdown, team workflow diagram, and automated engagement carousel.
- [Services Scroll](https://pro.ruixen.com/docs/components/services-scroll): A scroll-driven services section with animated cards that stack and transform as you scroll.
- [Services Tabs Charts](https://pro.ruixen.com/docs/components/services-tabs-charts): Two-column tabbed services section with shadcn charts on a dotted backdrop.
- [Star Counter Wheel](https://pro.ruixen.com/docs/components/star-counter-wheel): An animated star counter with scrolling numbers and tick sound effects.
- [Stats Counter](https://pro.ruixen.com/docs/components/stats-counter): An animated stats section with scroll-triggered number counters, customizable values, and responsive grid layout.
- [Stats Row](https://pro.ruixen.com/docs/components/stats-row): A horizontal stats section with staggered animations, vertical dividers, and descriptions for each metric.
- [Tasks Chat Card](https://pro.ruixen.com/docs/components/tasks-chat-card): Install via CLI or Copy the code and paste it in your project
- [Testimonials Map](https://pro.ruixen.com/docs/components/testimonials-map): A world map testimonials component that displays user testimonials as image dots positioned by country with tooltips and animations.
- [Testimonials Split Tabs](https://pro.ruixen.com/docs/components/testimonials-split-tabs): Expandable split-layout testimonial tabs with smooth motion and image-only collapsed state
- [Voice Recorder Button](https://pro.ruixen.com/docs/components/voice-recorder-button): An animated voice recorder button with frequency visualization and timer display.
- [Web Search Chat](https://pro.ruixen.com/docs/components/web-search-chat-card): Install via CLI or Copy the code and paste it in your project
- [Wordmark Footer](https://pro.ruixen.com/docs/components/wordmark-footer): A centered-brand site footer with social icons, a 5-column link grid bordered by dotted corner markers, and a giant outlined wordmark.
- [Workflow Automation](https://pro.ruixen.com/docs/components/workflow-automation): Install via CLI or Copy the code and paste it in your project
- [Workflow Bento Grid](https://pro.ruixen.com/docs/components/workflow-bento-grid): A bento grid layout showcasing workflow automation features with connected cards, status indicators, and dot patterns.
- [Workflow Timeline](https://pro.ruixen.com/docs/components/workflow-timeline): Install via CLI or Copy the code and paste it in your project

## Examples

- [Accordion With Image Tooltip Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/accordion-with-image-tooltip-demo.tsx): Example usage
- [About Staggered Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/about-staggered-demo.tsx): Example usage
- [About Portfolio Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/about-portfolio-demo.tsx): Example usage
- [About Team Bento Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/about-team-bento-demo.tsx): Example usage
- [About Visual Storytelling Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/about-visual-storytelling-demo.tsx): Example usage
- [Hero Bars Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/hero-bars-demo.tsx): Example usage
- [Hero Contact Enrichment Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/hero-contact-enrichment-demo.tsx): Example usage
- [Hero CRM Dashboard Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/hero-crm-dashboard-demo.tsx): Example usage
- [Hero Globe Grid Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/hero-globe-grid-demo.tsx): Example usage
- [Feature Trio Illustrated Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/feature-trio-illustrated-demo.tsx): Example usage
- [Feature Illustrated Split Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/feature-illustrated-split-demo.tsx): Example usage
- [Hero Split Dashboard Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/hero-split-dashboard-demo.tsx): Example usage
- [Hero Reporting Dashboard Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/hero-reporting-dashboard-demo.tsx): Example usage
- [Animated Shine Text Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/animated-shine-text-demo.tsx): Example usage
- [Apple Mega Nav Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/apple-mega-nav-demo.tsx): Example usage
- [Bloom Text Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/bloom-text-demo.tsx): Example usage
- [Bottom Menu Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/bottom-menu-demo.tsx): Example usage
- [Draggable Progress Bar Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/draggable-progress-bar-demo.tsx): Example usage
- [Feature Bento Grid Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/feature-bento-grid-demo.tsx): Example usage
- [Filmstrip Timecode Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/filmstrip-timecode-demo.tsx): Example usage
- [Glass Split Card Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/glass-split-card-demo.tsx): Example usage
- [Map Location Picker Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/map-location-picker-demo.tsx): Example usage
- [Integrations Grid Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/integrations-grid-demo.tsx): Example usage
- [Integrations Arc Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/integrations-arc-demo.tsx): Example usage
- [Masonry Grid Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/masonry-grid-demo.tsx): Example usage
- [Models Carousel Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/models-carousel-demo.tsx): Example usage
- [Project Title Morph Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/project-title-morph-demo.tsx): Example usage
- [Display Card Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/display-card-demo.tsx): Example usage
- [Scroll FX Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/scroll-fx-demo.tsx): Example usage
- [Scroll FX Timeline Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/scroll-fx-timeline-demo.tsx): Example usage
- [Scroll Split Video Gallery Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/scroll-split-video-gallery-demo.tsx): Example usage
- [Star Counter Wheel Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/star-counter-wheel-demo.tsx): Example usage
- [Testimonials Map Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/testimonials-map-demo.tsx): Example usage
- [Testimonials Split Tabs Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/testimonials-split-tabs-demo.tsx): Example usage
- [Voice Recorder Button Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/voice-recorder-button-demo.tsx): Example usage
- [Workflow Bento Grid Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/workflow-bento-grid-demo.tsx): Example usage
- [FAQ Section Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/faq-section-demo.tsx): Example usage
- [Logo Cloud Animated Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/logo-cloud-animated-demo.tsx): Example usage
- [Logo Cloud Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/logo-cloud-demo.tsx): Example usage
- [Logo Cloud Underline Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/logo-cloud-underline-demo.tsx): Example usage
- [Logo Cloud Strip Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/logo-cloud-strip-demo.tsx): Example usage
- [Pricing Feature Comparison Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/pricing-feature-comparison-demo.tsx): Example usage
- [Pricing Tier Cards Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/pricing-tier-cards-demo.tsx): Example usage
- [Pricing Sectioned Grid Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/pricing-sectioned-grid-demo.tsx): Example usage
- [Services Tabs Charts Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/services-tabs-charts-demo.tsx): Example usage
- [Hero Dot Pattern Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/hero-dot-pattern-demo.tsx): Example usage
- [Hero Mobile Showcase Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/hero-mobile-showcase-demo.tsx): Example usage
- [Footer Reveal Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/footer-reveal-demo.tsx): Example usage
- [Flicker Footer Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/flicker-footer-demo.tsx): Example usage
- [Wordmark Footer Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/wordmark-footer-demo.tsx): Example usage
- [Instagram Stories Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/instagram-stories-demo.tsx): Example usage
- [CTA Meteor Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/cta-meteor-demo.tsx): Example usage
- [Platform Header Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/platform-header-demo.tsx): Example usage
- [Minimal Header Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/minimal-header-demo.tsx): Example usage
- [Services Bento Grid Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/services-bento-grid-demo.tsx): Example usage
- [Services Scroll Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/services-scroll-demo.tsx): Example usage
- [Hero Tabs Dashboard Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/hero-tabs-dashboard-demo.tsx): Example usage
- [Hero Cursor Cards Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/hero-cursor-cards-demo.tsx): Example usage
- [Stats Counter Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/stats-counter-demo.tsx): Example usage
- [Stats Row Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/stats-row-demo.tsx): Example usage
- [CTA Avatar Mosaic Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/cta-avatar-mosaic-demo.tsx): Example usage
- [CTA Window Mock Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/cta-window-mock-demo.tsx): Example usage
- [Services Interactive Cards Demo](https://github.com/ruixenui/ruixen.com/blob/main/example/services-interactive-cards-demo.tsx): Example usage

## Optional

- [Repository](https://github.com/ruixenui/ruixen.com): Source code and issues
- [Sitemap](https://pro.ruixen.com/sitemap.xml): Indexable pages