{"id":22260651,"url":"https://github.com/ui-layouts/uilayouts","last_synced_at":"2025-05-14T15:09:18.987Z","repository":{"id":252737268,"uuid":"840979384","full_name":"ui-layouts/uilayouts","owner":"ui-layouts","description":"🔥100+ Free beautifull interactive react/nextjs component based on tailwindcss, framer-motion, gsap etc","archived":false,"fork":false,"pushed_at":"2025-03-25T07:04:37.000Z","size":124108,"stargazers_count":1619,"open_issues_count":3,"forks_count":104,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-04-03T02:16:12.325Z","etag":null,"topics":["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"],"latest_commit_sha":null,"homepage":"https://www.ui-layouts.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ui-layouts.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-11T09:28:21.000Z","updated_at":"2025-03-31T06:07:22.000Z","dependencies_parsed_at":"2024-08-29T19:23:43.067Z","dependency_job_id":"34b82939-7bfe-49e2-bfb7-c61fe11a71f5","html_url":"https://github.com/ui-layouts/uilayouts","commit_stats":{"total_commits":80,"total_committers":2,"mean_commits":40.0,"dds":0.125,"last_synced_commit":"43e1ef7729892acdff053879ec0d51bbde408d0e"},"previous_names":["naymurdev/uilayout","ui-layouts/uilayouts"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-layouts%2Fuilayouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-layouts%2Fuilayouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-layouts%2Fuilayouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-layouts%2Fuilayouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ui-layouts","download_url":"https://codeload.github.com/ui-layouts/uilayouts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248161242,"owners_count":21057552,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-12-03T09:09:28.677Z","updated_at":"2025-05-14T15:09:18.968Z","avatar_url":"https://github.com/ui-layouts.png","language":"TypeScript","funding_links":["https://buymeacoffee.com/naymurdev"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cbr /\u003e\r\n\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"https://github.com/naymurdev/uilayout\"\u003e\r\n    \u003cimg src=\"main-logo.png\" alt=\"uilayout\" width=\"450\" /\u003e\r\n  \u003c/a\u003e\r\n\u003cp\u003e\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\u003cimg alt=\"UI-Layout - Design That Really Makes Sense\" src=\"ui-layouts.gif\" width=\"100%\"\u003e\r\n\u003c!-- \u003ch3 align=\"center\"\u003eUI-Layout\u003c/h3\u003e\r\n\u003cp align=\"center\"\u003e\r\n    Design That Really Makes Sense\r\n\u003c/p\u003e --\u003e\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(() =\u003e {\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 () =\u003e 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://ui-layouts.com/components/r3f-blob)\r\n- [Image Ripple Effect](https://ui-layouts.com/components/image-ripple-effect)\r\n- [Buy Me Coffee](https://ui-layouts.com/components/buy-me-coffee)\r\n- [Youtube Tags](https://ui-layouts.com/components/tags-input)\r\n- [File Upload](https://ui-layouts.com/components/file-upload)\r\n- [Password](https://ui-layouts.com/components/password)\r\n- [Range Slider](https://ui-layouts.com/components/range-slider)\r\n- [Motion Number](https://ui-layouts.com/components/motion-number)\r\n- [Embla Carousel](https://ui-layouts.com/components/embla-carousel)\r\n- [Sparkles](https://ui-layouts.com/components/sparkles)\r\n- [Drag Items](https://ui-layouts.com/components/drag-items)\r\n- [Timeline Animation](https://ui-layouts.com/components/timeline-animation)\r\n- [Clip Path Image](https://ui-layouts.com/components/clip-path-image)\r\n- [Buttons](https://ui-layouts.com/components/buttons)\r\n- [Image Mousetrail](https://ui-layouts.com/components/image-mousetrail)\r\n- [Image Reveal](https://ui-layouts.com/components/image-reveal)\r\n\r\nVisit all the [components](https://www.ui-layouts.com/components).\r\n\r\n## Labs\r\n\r\nVisit [Labs](https://www.ui-layouts.com/labs) to explore more experiments and ideas.\r\n\r\n## 👤 Author (Naymur)\r\n\r\n- X: [@naymur_dev](https://x.com/naymur_dev)\r\n- LinkedIn: [in/naymur-rahman](https://www.linkedin.com/in/naymur-rahman/)\r\n\r\n## Be A Sponsor\r\n\r\n\u003ca href=\"https://buymeacoffee.com/naymurdev\"\u003e \u003cimg align=\"left\" src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" height=\"50\" width=\"210\" alt=\"naymur-uilayout\" /\u003e\u003c/a\u003e\r\n\u003cbr/\u003e\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-layouts%2Fuilayouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fui-layouts%2Fuilayouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-layouts%2Fuilayouts/lists"}