[V0_FILE]typescriptreact:file="marquee.tsx" isMerged="true" "use client" import type React from "react" import { useRef, useEffect, useState } from "react" import { cn } from "@/lib/utils" interface MarqueeProps { className?: string children: React.ReactNode pauseOnHover?: boolean direction?: "left" | "right" speed?: "slow" | "normal" | "fast" repeat?: number } export default function Marquee({ children, className, pauseOnHover = true, direction = "left", speed = "normal", repeat = 2, }: MarqueeProps) { const containerRef = useRef(null) const [contentWidth, setContentWidth] = useState(0) const speedMap = { slow: "20s", normal: "15s", fast: "8s", } useEffect(() => { if (containerRef.current) { setContentWidth(containerRef.current.scrollWidth) } }, [children]) return (

{[...Array(repeat)].map((_, i) => (

{children}

))}

) } [V0_FILE]typescriptreact:file="demo.tsx" isMerged="true" import Marquee from "./marquee" export default function Demo() { return (

Basic Marquee

Welcome to our website • Thanks for visiting • Check out our latest products

Fast Speed, Right Direction

🚀 Flash Sale! 50% Off Everything! Limited Time Only! 🚀

With Icons

{[1, 2, 3, 4, 5, 6].map((i) => (

Item {i}

))}

) } [V0_FILE]typescriptreact:file="cute-landing-page.tsx" isMerged="true" "use client" import type React from "react" import { useRef, useEffect, useState } from "react" import { Heart, Star, Sparkles, Menu, X, Github } from "lucide-react" import { cn } from "@/lib/utils" export default function CuteLandingPage() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false) return (

{/* Cute Navbar */}

{/* Mobile Navigation */} {mobileMenuOpen && (

Home Features Pricing About

)}

{/* Hero Section with Marquees */}

Featured on Product Hunt

Make your website super cute with our components

Beautiful, playful, and easy-to-use UI components that will make your visitors smile.

{/* Marquee Section */}

{/* Cute Footer */}

) } // Marquee Component interface MarqueeProps { className?: string children: React.ReactNode pauseOnHover?: boolean direction?: "left" | "right" speed?: "slow" | "normal" | "fast" repeat?: number } function Marquee({ children, className, pauseOnHover = true, direction = "left", speed = "normal", repeat = 2, }: MarqueeProps) { const containerRef = useRef(null) const [contentWidth, setContentWidth] = useState(0) const speedMap = { slow: "25s", normal: "15s", fast: "8s", } useEffect(() => { if (containerRef.current) { setContentWidth(containerRef.current.scrollWidth) } }, [children]) return (

{[...Array(repeat)].map((_, i) => (

{children}

))}

) } // Helper Components function NavLink({ href, children, active = false }) { return ( {children} ) } function SocialIcon({ icon }) { return ( {icon} ) } function FooterLinks({ title, links }) { return (

{title}

{link}

) } function MarqueeContent() { const items = [ "✨ Cute Components", "🌈 Beautiful Designs", "💖 Made with Love", "🎨 Customizable", "🚀 Fast & Responsive", "🌟 Premium Quality", ] return ( <> {items.map((item, index) => ( {item} ))} ) } function MarqueeContent2() { const items = [ { icon: "⭐", text: "5-star rated" }, { icon: "🏆", text: "Award winning" }, { icon: "👩‍💻", text: "Developer friendly" }, { icon: "🔒", text: "Secure by default" }, { icon: "📱", text: "Mobile optimized" }, { icon: "🌐", text: "Global support" }, ] return ( <> {items.map((item, index) => (

{item.icon} {item.text}

))} ) } function MarqueeContent3() { const testimonials = [ '"I love how cute everything looks!" - Sarah K.', '"Best UI components ever!" - Mike T.', '"My website looks amazing now!" - Jessica L.', '"So easy to use!" - David R.', '"My visitors love the new design!" - Emma P.', ] return ( <> {testimonials.map((testimonial, index) => (

{testimonial}

))} ) } [V0_FILE]typescriptreact:file="professional-landing-page.tsx" "use client" import type React from "react" import { useRef, useEffect, useState } from "react" import { ArrowRight, Code, ExternalLink, Menu, X, Github, BookOpen, Check } from "lucide-react" import { cn } from "@/lib/utils" export default function ProfessionalLandingPage() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false) return (

{/* Professional Navbar */}


              
                MarqueeFlow



            {/* Desktop Navigation */}
            
              
                Home
              
              Documentation
              Examples
              GitHub
              
            

            {/* Mobile Menu Button */}



        {/* Mobile Navigation */}
        {mobileMenuOpen && (
          
            
              
                Home
              
              Documentation
              Examples
              GitHub
              
            
          
        )}



      {/* Hero Section with Marquees */}
      
        
          
            
              Lightweight • Responsive • Customizable
            
            
              Professional Marquee Components
            
            
              High-performance, customizable scrolling components for modern web applications.
            

            {/* Marquee Section */}
            
              
                
              

              
                
              

              
                
              
            

            
              
              
            
          
        

        {/* Documentation Section */}
        
          
            
              Documentation
              
                Everything you need to know about implementing and customizing MarqueeFlow components.
              
            

            
              
                Basic Usage
                
  Your scrolling content here


// With custom options

  Fast scrolling content going right
`}
                />
                
                  
                    Learn more
                    
                  
                
              

              
                Props Reference
                
                  
                  
                  
                  
                  
                
                
                  
                    View full API
                    
                  
                
              
            
          
        

        {/* Skewed Marquee Section */}
        
          
              
                  
                
          
          
              
                  
                
          

        

        {/* Simple text signature */}
        
          Made with Bahrawy
        
      

      {/* Professional Footer */}
      
        
          
            
              
                
                
                  MarqueeFlow
                
              

              Professional scrolling components for modern web applications.
              
                } />
                } />
                } />
              
            


            

            

            
          


          
            © {new Date().getFullYear()} MarqueeFlow. All rights reserved.


  )
}

// Marquee Component
interface MarqueeProps {
  className?: string
  children: React.ReactNode
  pauseOnHover?: boolean
  direction?: "left" | "right"
  speed?: "slow" | "normal" | "fast"
  repeat?: number
}

function Marquee({
  children,
  className,
  pauseOnHover = true,
  direction = "left",
  speed = "normal",
  repeat = 2,
}: MarqueeProps) {
  const containerRef = useRef(null)
  const [contentWidth, setContentWidth] = useState(0)

  const speedMap = {
    slow: "25s",
    normal: "15s",
    fast: "8s",
  }

  useEffect(() => {
    if (containerRef.current) {
      setContentWidth(containerRef.current.scrollWidth)
    }
  }, [children])

  return (
    
      
        {[...Array(repeat)].map((_, i) => (
          
            {children}
          
        ))}
      

      
    
  )
}

// Helper Components
function NavLink({ href, children, active = false }) {
  return (
    
      {children}
    
  )
}

function SocialIcon({ icon }) {
  return (
    
      {icon}
    
  )
}

function FooterLinks({ title, links }) {
  return (
    
      {title}
      
        {links.map((link, index) => (
          
            
              {link}
            
          
        ))}
      
    
  )
}

function MarqueeContent() {
  const items = [
    "High Performance",
    "Responsive Design",
    "Customizable Options",
    "Easy Integration",
    "Cross-Browser Compatible",
    "Lightweight",
  ]

  return (
    <>
      {items.map((item, index) => (
        
          {item}
        
      ))}
    
  )
}

function MarqueeContent2() {
  const items = [
    { icon: , text: "Enterprise Ready" },
    { icon: , text: "Developer Friendly" },
    { icon: , text: "Secure Implementation" },
    { icon: , text: "Mobile Optimized" },
    { icon: , text: "Global Support" },
    { icon: , text: "Regular Updates" },
  ]

  return (
    <>
      {items.map((item, index) => (
        
          {item.icon}
          {item.text}
        
      ))}
    
  )
}

function MarqueeContent3() {
  const testimonials = [
    '"Excellent component library" - TechCorp',
    '"Improved our site engagement by 40%" - DataSystems',
    '"Seamless integration with our stack" - WebSolutions',
    '"Best marquee implementation we\'ve used" - DevTeam',
    '"Highly recommended for any project" - BuilderTech',
  ]

  return (
    <>
      {testimonials.map((testimonial, index) => (
        
          {testimonial}
        
      ))}
    
  )
}

function SkewedMarqueeContent() {
  const items = [
    "PREMIUM QUALITY",
    "ENTERPRISE READY",
    "PROFESSIONAL DESIGN",
    "DEVELOPER FRIENDLY",
    "PERFORMANCE OPTIMIZED",
    "SEAMLESS INTEGRATION",
  ]

  return (
    <>
      {items.map((item, index) => (
        
          {item}
        
      ))}
    
  )
}

function CodeBlock({ code }) {
  return (
    
      {code}
    
  )
}

function PropItem({ name, type, defaultValue }) {
  return (
    
      
        {name}
        {type}
      
      
        Default: {defaultValue}
      
    
  )
}

[V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

About

Tags

Share

About

Tags

Share

More from bahrawyx

More Templates Like This

About

Tags

Share

About

Tags

Share

More from bahrawyx

More Templates Like This