{"id":40077168,"url":"https://github.com/gfazioli/mantine-picker","last_synced_at":"2026-02-17T08:03:31.238Z","repository":{"id":287432192,"uuid":"952062284","full_name":"gfazioli/mantine-picker","owner":"gfazioli","description":"A Mantine Picker extension","archived":false,"fork":false,"pushed_at":"2026-02-02T06:44:01.000Z","size":11987,"stargazers_count":10,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-02-13T18:42:32.354Z","etag":null,"topics":["component","ios-picker","mantine","mantine-ui","mantine-v7","picker","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://gfazioli.github.io/mantine-picker/","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":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["gfazioli"]}},"created_at":"2025-03-20T17:10:12.000Z","updated_at":"2026-02-10T14:17:45.000Z","dependencies_parsed_at":"2025-07-10T12:37:41.515Z","dependency_job_id":"b5e0d1a7-2671-4a62-95c2-9f594f5d84cf","html_url":"https://github.com/gfazioli/mantine-picker","commit_stats":null,"previous_names":["gfazioli/mantine-picker"],"tags_count":32,"template":false,"template_full_name":"gfazioli/mantine-marquee","purl":"pkg:github/gfazioli/mantine-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gfazioli","download_url":"https://codeload.github.com/gfazioli/mantine-picker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-picker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29537266,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-17T05:00:25.817Z","status":"ssl_error","status_checked_at":"2026-02-17T04:57:16.126Z","response_time":100,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","ios-picker","mantine","mantine-ui","mantine-v7","picker","reactjs","typescript"],"created_at":"2026-01-19T09:02:10.999Z","updated_at":"2026-02-17T08:03:31.222Z","avatar_url":"https://github.com/gfazioli.png","language":"TypeScript","funding_links":["https://github.com/sponsors/gfazioli","https://github.com/sponsors/gfazioli?o=esc"],"categories":[],"sub_categories":[],"readme":"# Mantine Picker Component\n\n\u003cimg alt=\"Mantine Picker\" src=\"https://github.com/gfazioli/mantine-picker/blob/master/logo.png\" /\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \n  [![NPM version](https://img.shields.io/npm/v/%40gfazioli%2Fmantine-picker?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-picker)\n  [![NPM Downloads](https://img.shields.io/npm/dm/%40gfazioli%2Fmantine-picker?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-picker)\n  [![NPM Downloads](https://img.shields.io/npm/dy/%40gfazioli%2Fmantine-picker?style=for-the-badge\u0026label=%20\u0026color=f90)](https://www.npmjs.com/package/@gfazioli/mantine-picker)\n  ![NPM License](https://img.shields.io/npm/l/%40gfazioli%2Fmantine-picker?style=for-the-badge)\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 Picker](https://gfazioli.github.io/mantine-picker/) is a versatile UI component for building iOS-like wheel pickers in React with Mantine, enabling selection through dragging, mouse wheel, clicking, and keyboard navigation. Developers can fully control state via value and onChange, or render bespoke item content with renderItem (e.g., color swatches, badges). \n\nThe component’s appearance and behavior are highly tunable: itemHeight, visibleItems, cylinderRadius, rotation (rotateY), blur/opacity/scale gradients, mask and highlight, dividers, loop, and animationDuration. Decorative sections (leftSection/rightSection) let you embed icons or labels that remain fixed while the list scrolls, and readOnly mode permits programmatic updates while preventing user changes—handy for counters and clocks.\n\nBeyond simple lists like cities or months, the Picker supports composite inputs such as time and date pickers by composing multiple instances (hours, minutes, AM/PM; day, month, year) and synchronizing their values. Styling can be adapted with variants, size presets, uppercase transforms, gradients, and custom shadows, and global styles are imported once via the package’s CSS. Altogether, Mantine Picker offers a polished, customizable selection experience that integrates cleanly with Mantine layouts and components for production-ready pickers.\n\n\u003e [!note]\n\u003e\n\u003e → [Demo and Documentation](https://gfazioli.github.io/mantine-picker/) → [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-picker\n```\nor \n\n```sh\nyarn add @gfazioli/mantine-picker\n```\n\nAfter installation import package styles at the root of your application:\n\n```tsx\nimport '@gfazioli/mantine-picker/styles.css';\n```\n\n## Usage\n\n```tsx\nimport { Picker } from '@gfazioli/mantine-picker';\n\nfunction Demo() {\n\n  return (\n    \u003cPicker data={['React', 'Angular', 'Vue', 'Svelte']} /\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---\nhttps://github.com/user-attachments/assets/520e4838-9f2f-4714-9de2-8067c7630d1d\n\n---  \n[![Star History Chart](https://api.star-history.com/svg?repos=gfazioli/mantine-picker\u0026type=Timeline)](https://www.star-history.com/#gfazioli/mantine-picker\u0026Timeline)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgfazioli%2Fmantine-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgfazioli%2Fmantine-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgfazioli%2Fmantine-picker/lists"}