[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73740":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":47,"readmeContent":48,"aiSummary":49,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":50,"discoverSource":51},73740,"uilayouts","ui-layouts\u002Fuilayouts","ui-layouts","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.","https:\u002F\u002Fwww.ui-layouts.com",null,"TypeScript",3411,201,13,2,0,15,22,73,45,28.92,"MIT License",false,"main",true,[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46],"accertinity","accordion-component","animated-tabs","codehike","component-library","components","components-react","drawer","framer-motion","image-mousetrail","modal","mouse-animation","mousetrail","react","react-animation-components","shadcn","shadcnui","sparkles","spotlight","tailwindcss","2026-06-12 02:03:17","\u003Cimg alt=\"UI-Layout - Design That Really Makes Sense\" src=\"ui-layouts.jpg\" width=\"100%\">\r\n\r\nUI-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\r\n\r\n\u003C!-- \u003Ch3 align=\"center\">UI-Layout\u003C\u002Fh3>\r\n\u003Cp align=\"center\">\r\n    Design That Really Makes Sense\r\n\u003C\u002Fp> -->\r\n\r\n## Installation\r\n\r\nYou must install `tailwindcss`. As most of our components use `framer-motion` install it too.\r\n\r\n```bash\r\nnpm install motion clsx tailwind-merge\r\n```\r\n\r\nMust Add it in the `utils.ts`:\r\n\r\n```tsx title=\"utils.tsx\"\r\nimport { type ClassValue, clsx } from 'clsx'\r\nimport { twMerge } from 'tailwind-merge'\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs))\r\n}\r\n```\r\n\r\nuse this hooks for mediaQueries:\r\n\r\n```tsx title=\"use-media-query.tsx\"\r\nimport { useEffect, useState } from 'react'\r\n\r\nexport function useMediaQuery(query: string) {\r\n  const [value, setValue] = useState(false)\r\n\r\n  useEffect(() => {\r\n    function onChange(event: MediaQueryListEvent) {\r\n      setValue(event.matches)\r\n    }\r\n\r\n    const result = matchMedia(query)\r\n    result.addEventListener('change', onChange)\r\n    setValue(result.matches)\r\n\r\n    return () => result.removeEventListener('change', onChange)\r\n  }, [query])\r\n\r\n  return value\r\n}\r\n```\r\n\r\n\r\n\r\n## Most Used Components\r\n\r\n- [R3F Blob Effect](https:\u002F\u002Fui-layouts.com\u002Fcomponents\u002Fr3f-blob)\r\n- [Image Ripple Effect](https:\u002F\u002Fui-layouts.com\u002Fcomponents\u002Fimage-ripple-effect)\r\n- [Buy Me Coffee](https:\u002F\u002Fui-layouts.com\u002Fcomponents\u002Fbuy-me-coffee)\r\n- [Youtube Tags](https:\u002F\u002Fui-layouts.com\u002Fcomponents\u002Ftags-input)\r\n- [File Upload](https:\u002F\u002Fui-layouts.com\u002Fcomponents\u002Ffile-upload)\r\n- [Password](https:\u002F\u002Fui-layouts.com\u002Fcomponents\u002Fpassword)\r\n- [Range Slider](https:\u002F\u002Fui-layouts.com\u002Fcomponents\u002Frange-slider)\r\n- [Motion Number](https:\u002F\u002Fui-layouts.com\u002Fcomponents\u002Fmotion-number)\r\n- [Embla Carousel](https:\u002F\u002Fui-layouts.com\u002Fcomponents\u002Fembla-carousel)\r\n- [Sparkles](https:\u002F\u002Fui-layouts.com\u002Fcomponents\u002Fsparkles)\r\n- [Drag Items](https:\u002F\u002Fui-layouts.com\u002Fcomponents\u002Fdrag-items)\r\n- [Timeline Animation](https:\u002F\u002Fui-layouts.com\u002Fcomponents\u002Ftimeline-animation)\r\n- [Clip Path Image](https:\u002F\u002Fui-layouts.com\u002Fcomponents\u002Fclip-path-image)\r\n- [Buttons](https:\u002F\u002Fui-layouts.com\u002Fcomponents\u002Fbuttons)\r\n- [Image Mousetrail](https:\u002F\u002Fui-layouts.com\u002Fcomponents\u002Fimage-mousetrail)\r\n- [Image Reveal](https:\u002F\u002Fui-layouts.com\u002Fcomponents\u002Fimage-reveal)\r\n\r\nVisit all the [components](https:\u002F\u002Fwww.ui-layouts.com\u002Fcomponents).\r\n\r\n## Labs\r\n\r\nVisit [Labs](https:\u002F\u002Fwww.ui-layouts.com\u002Flabs) to explore more experiments and ideas.\r\n\r\n## 👤 Author (Naymur)\r\n\r\n- X: [@naymur_dev](https:\u002F\u002Fx.com\u002Fnaymur_dev)\r\n- LinkedIn: [in\u002Fnaymur-rahman](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fnaymur-rahman\u002F)\r\n\r\n\u003Cbr \u002F>\r\n\u003Cbr \u002F>\r\n\u003Ca href=\"https:\u002F\u002Fvercel.com\u002Foss\">\r\n  \u003Cimg alt=\"Vercel OSS Program\" src=\"https:\u002F\u002Fvercel.com\u002Foss\u002Fprogram-badge.svg\" \u002F>\r\n\u003C\u002Fa>\r\n\r\n## Be A Sponsor\r\n\r\n\u003Ca href=\"https:\u002F\u002Fbuymeacoffee.com\u002Fnaymurdev\"> \u003Cimg align=\"left\" src=\"https:\u002F\u002Fcdn.buymeacoffee.com\u002Fbuttons\u002Fv2\u002Fdefault-yellow.png\" height=\"50\" width=\"210\" alt=\"naymur-uilayout\" \u002F>\u003C\u002Fa>\r\n\u003Cbr\u002F>","ui-layouts 是一个全面的前端组件库，旨在帮助开发者和设计师更快速地构建现代界面。该项目使用 TypeScript 编写，并基于 Tailwind CSS 和 Framer Motion 提供了丰富的动画效果、创意设计工具及即用型组件。核心功能包括多种交互式组件如图像涟漪效果、文件上传、密码输入等，以及一些创新实验性功能。适合需要创建具有吸引力且响应迅速的用户界面的各种网站开发场景，尤其适用于追求独特视觉体验的应用。","2026-06-11 03:47:10","high_star"]