{"id":15481270,"url":"https://github.com/gfazioli/mantine-reflection","last_synced_at":"2026-02-17T08:21:00.782Z","repository":{"id":222443049,"uuid":"756712347","full_name":"gfazioli/mantine-reflection","owner":"gfazioli","description":"A Mantine UI Library Extension component for creating stunning reflection effects.","archived":false,"fork":false,"pushed_at":"2025-04-14T14:38:33.000Z","size":15236,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T15:49:33.928Z","etag":null,"topics":["component","effects","mantine","mantine-ui","mantine-v7","nextjs","ractjs","reflection","typescipt","typescript","typescript-component","typescript-react"],"latest_commit_sha":null,"homepage":"https://gfazioli.github.io/mantine-reflection/","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/gfazioli.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["gfazioli","wpbones"]}},"created_at":"2024-02-13T06:44:15.000Z","updated_at":"2025-04-14T14:38:09.000Z","dependencies_parsed_at":"2024-06-10T08:38:22.164Z","dependency_job_id":"04848c60-9109-47cb-af46-020675261cff","html_url":"https://github.com/gfazioli/mantine-reflection","commit_stats":{"total_commits":32,"total_committers":2,"mean_commits":16.0,"dds":0.09375,"last_synced_commit":"c73400e247da75193e7e0b50df20f65d53905571"},"previous_names":["gfazioli/mantine-reflection"],"tags_count":15,"template":false,"template_full_name":"gfazioli/mantine-flip","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-reflection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-reflection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-reflection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-reflection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gfazioli","download_url":"https://codeload.github.com/gfazioli/mantine-reflection/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250265577,"owners_count":21402133,"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":["component","effects","mantine","mantine-ui","mantine-v7","nextjs","ractjs","reflection","typescipt","typescript","typescript-component","typescript-react"],"created_at":"2024-10-02T05:03:17.201Z","updated_at":"2026-01-19T15:11:17.145Z","avatar_url":"https://github.com/gfazioli.png","language":"TypeScript","funding_links":["https://github.com/sponsors/gfazioli","https://github.com/sponsors/wpbones","https://github.com/sponsors/gfazioli?o=esc"],"categories":[],"sub_categories":[],"readme":"# Mantine Reflection Component\n\n\u003cimg alt=\"Mantine Reflection\" src=\"https://github.com/gfazioli/mantine-reflection/blob/master/logo.png\" /\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  [![NPM version](https://img.shields.io/npm/v/%40gfazioli%2Fmantine-reflection?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-reflection)\n  [![NPM Downloads](https://img.shields.io/npm/dm/%40gfazioli%2Fmantine-reflection?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-reflection)\n  [![NPM Downloads](https://img.shields.io/npm/dy/%40gfazioli%2Fmantine-reflection?style=for-the-badge\u0026label=%20\u0026color=f90)](https://www.npmjs.com/package/@gfazioli/mantine-reflection)\n  [![NPM License](https://img.shields.io/npm/l/%40gfazioli%2Fmantine-reflection?style=for-the-badge)](https://github.com/gfazioli/mantine-flip/blob/master/LICENSE)\n\n---\n\n[\u003ckbd\u003e \u003cbr/\u003e ❤️ If this component has been useful to you or your team, please consider becoming a sponsor \u003cbr/\u003e \u003c/kbd\u003e](https://github.com/sponsors/gfazioli?o=esc)\n\n\u003c/div\u003e\n\n## Overview\n\nThis component is created on top of the [Mantine](https://mantine.dev/) library.\n\n[Mantine Reflection](https://gfazioli.github.io/mantine-mask/) provides a simple wrapper—Reflection—that adds a mirrored version of its children, enabling polished visual effects for images and components within Mantine‑based interfaces. Developers can tune reflection characteristics including distance from the source, opacity, blur level, stretch, and gradient start/end to achieve subtle or pronounced looks. It also includes comprehensive shadow controls (offset, opacity, blur, size, scale X/Y, and color) to complement the reflection for more realistic depth.\n\nThe package ships global styles via styles.css and a layer‑scoped variant via styles.layer.css for integration with CSS @layer mantine-reflection. When reflecting images, setting display: block on img prevents baseline padding artifacts. A dedicated reflectionBlur prop adds pixel‑based blur to the reflection, with guidance to use small values or padding to avoid edge clipping. Overall, the component is designed to be drop‑in, flexible, and precise for creating refined mirror and shadow effects around arbitrary React children.\n\n\u003e [!note]\n\u003e\n\u003e → [Demo and Documentation](https://gfazioli.github.io/mantine-mask/) → [Youtube Video](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4) → [More Mantine Components](https://mantine-extensions.vercel.app/)\n\n\n## Installation\n\n```sh\nnpm install @gfazioli/mantine-reflection\n```\nor \n\n```sh\nyarn add @gfazioli/mantine-reflection\n```\n\nAfter installation import package styles at the root of your application:\n\n```tsx\nimport '@gfazioli/mantine-reflection/styles.css';\n```\n\n## Usage\n\n```tsx\nimport { Reflection } from '@gfazioli/mantine-reflection';\n\nfunction Demo() {\n  return (\n    \u003cReflection\u003e\n      \u003cimg\n        width={150}\n        style={{ display: 'block', borderRadius: '50%' }}\n        alt=\"test\"\n        src=\"https://source.unsplash.com/9QmbsTDAI4g/150x150\"\n      /\u003e\n    \u003c/Reflection\u003e\n  );\n}\n```\n## Sponsor\n\n\u003cdiv align=\"center\"\u003e\n\n[\u003ckbd\u003e \u003cbr/\u003e ❤️ If this component has been useful to you or your team, please consider becoming a sponsor \u003cbr/\u003e \u003c/kbd\u003e](https://github.com/sponsors/gfazioli?o=esc)\n\n\u003c/div\u003e\n\nYour support helps me:\n\n- Keep the project actively maintained with timely bug fixes and security updates\t\n- Add new features, improve performance, and refine the developer experience\t\n- Expand test coverage and documentation for smoother adoption\t\n- Ensure long‑term sustainability without relying on ad hoc free time\t\n- Prioritize community requests and roadmap items that matter most\n\nOpen source thrives when those who benefit can give back—even a small monthly contribution makes a real difference. Sponsorships help cover maintenance time, infrastructure, and the countless invisible tasks that keep a project healthy.\n\nYour help truly matters.\n\n💚 [Become a sponsor](https://github.com/sponsors/gfazioli?o=esc) today and help me keep this project reliable, up‑to‑date, and growing for everyone.\n\n---\n  \n[![Star History Chart](https://api.star-history.com/svg?repos=gfazioli/mantine-reflection\u0026type=Timeline)](https://www.star-history.com/#gfazioli/mantine-reflection\u0026Timeline)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgfazioli%2Fmantine-reflection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgfazioli%2Fmantine-reflection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgfazioli%2Fmantine-reflection/lists"}