UI
ui-layouts/uilayouts
UI Layouts isn’t just a library. It’s your complete front-end universe with components, effects, design tools, and ready-to-use blocks, everything you need to build modern interfaces, faster.
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-mergeMust Add it in the utils.ts:
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:
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
