github.com/ui-layouts/uilayouts @main

UI-LAYOUTs is an open-source component library that makes easier for developers and designers to build websites. It's focused on creative designs. I love to create comopnent that really matter or need your site and I belive in future I'll bring more as i kept bringing more just support me

Installation

You must install tailwindcss. As most of our components use framer-motion install it too.

npm install motion clsx tailwind-merge

Must Add it in the utils.ts:

```tsx title="utils.tsx" import { type ClassValue, clsx } from 'clsx' import { twMerge } from 'tailwind-merge'

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

use this hooks for mediaQueries:

```tsx title="use-media-query.tsx"
import { useEffect, useState } from 'react'

export function useMediaQuery(query: string) {
  const [value, setValue] = useState(false)

  useEffect(() => {
    function onChange(event: MediaQueryListEvent) {
      setValue(event.matches)
    }

    const result = matchMedia(query)
    result.addEventListener('change', onChange)
    setValue(result.matches)

    return () => result.removeEventListener('change', onChange)
  }, [query])

  return value
}

Most Used Components

• R3F Blob Effect
• Image Ripple Effect
• Buy Me Coffee
• Youtube Tags
• File Upload
• Password
• Range Slider
• Motion Number
• Embla Carousel
• Sparkles
• Drag Items
• Timeline Animation
• Clip Path Image
• Buttons
• Image Mousetrail
• Image Reveal

Visit all the components.

Labs

Visit Labs to explore more experiments and ideas.

👤 Author (Naymur)

• X: @naymur_dev
• LinkedIn: in/naymur-rahman

Be A Sponsor