{"id":20295860,"url":"https://github.com/andrejnemec/mantine-vaul","last_synced_at":"2025-05-07T02:42:56.169Z","repository":{"id":235296626,"uuid":"789789757","full_name":"AndrejNemec/mantine-vaul","owner":"AndrejNemec","description":"Mantine port of Vaul drawer component optimized for mobile devices.","archived":false,"fork":false,"pushed_at":"2024-09-24T19:37:30.000Z","size":653,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-29T10:50:07.751Z","etag":null,"topics":["dialog","drawer","mantine","mantine-v7","react","responsive-dialog","vaul"],"latest_commit_sha":null,"homepage":"https://mantine-vaul.vercel.app/","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/AndrejNemec.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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}},"created_at":"2024-04-21T15:05:23.000Z","updated_at":"2025-01-23T20:58:05.000Z","dependencies_parsed_at":"2024-04-23T00:31:45.492Z","dependency_job_id":"e3611803-3f91-44e5-992a-a035f6041c77","html_url":"https://github.com/AndrejNemec/mantine-vaul","commit_stats":null,"previous_names":["andrejnemec/mantine-vaul"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrejNemec%2Fmantine-vaul","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrejNemec%2Fmantine-vaul/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrejNemec%2Fmantine-vaul/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrejNemec%2Fmantine-vaul/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrejNemec","download_url":"https://codeload.github.com/AndrejNemec/mantine-vaul/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252802607,"owners_count":21806537,"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":["dialog","drawer","mantine","mantine-v7","react","responsive-dialog","vaul"],"created_at":"2024-11-14T15:36:29.758Z","updated_at":"2025-05-07T02:42:56.141Z","avatar_url":"https://github.com/AndrejNemec.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mantine-vaul\n\n**A drawer component library for mobile devices, leveraging the power of Vaul for seamless integration.**\n\n**Library works only with mantine v7.9.0+**\n\n([Live example](https://mantine-vaul.vercel.app/))\n\n## install:\n\n`pnpm add mantine-vaul @mantine/core @mantine/hooks`\n\n## Use the drawer in your app.\n\n**Only Vaul:**\n\n```tsx\nimport \"mantine-vaul/style.css\";\nimport { Box, Button, Text } from \"@mantine/core\";\nimport { Vaul } from \"mantine-vaul\";\n\nexport const App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cBox\u003e\n        \u003cVaul\n          title=\"Vaul\"\n          target={\u003cVaul.Target component={Button}\u003eOpen vaul\u003c/Vaul.Target\u003e}\n        \u003e\n          \u003cBox maw=\"600px\" mx=\"auto\"\u003e\n            \u003cText\u003e\n              This component can be used as a Dialog replacement on mobile and\n              tablet devices. You can read about why and how it was built{\" \"}\n            \u003c/Text\u003e\n          \u003c/Box\u003e\n        \u003c/Vaul\u003e\n      \u003c/Box\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n**Responsive dialog:** (Show vaul, classic drawer or classic dialog by responsive breakpoint)\n\n```tsx\nimport \"mantine-vaul/style.css\";\nimport { Box, Button, Text } from \"@mantine/core\";\nimport { ResponsiveDialog } from \"mantine-vaul\";\n\nconst resposiveDialogMatches = {\n  base: \"vaul\",\n  lg: \"modal\",\n  xl: \"drawer\",\n};\n\nexport const App = () =\u003e {\n  const [open, setOpen] = useState\u003cboolean\u003e(false);\n\n  return (\n    \u003cdiv\u003e\n      \u003cButton onClick={() =\u003e setOpen(true)}\u003eOpen\u003c/Button\u003e\n      \u003cBox\u003e\n        \u003cResponsiveDialog\n          opened={open}\n          onClose={() =\u003e setOpen(false)}\n          title=\"Vaul\"\n          matches={resposiveDialogMatches}\n        \u003e\n          \u003cBox maw=\"600px\" mx=\"auto\"\u003e\n            \u003cText\u003e\n              This component can be used as a Dialog replacement on mobile and\n              tablet devices. You can read about why and how it was built{\" \"}\n            \u003c/Text\u003e\n          \u003c/Box\u003e\n        \u003c/ResponsiveDialog\u003e\n      \u003c/Box\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## Props:\n\n`opened`: This prop determines whether the drawer is currently open or closed. When set to true, the drawer is displayed in the open state, while setting it to false closes the drawer.\n\n`onOpenChange`: Called when vaul is closed or opened.\n\n`closeThreshold`: Number between 0 and 1 that determines when the drawer should be closed. Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.\n\n`scrollLockTimeout`: Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms\n\n`snapPoints`: Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Example [0.2, 0.5, 0.8]. You can also use px values, which doesn't take screen height into account.\n\n`fadeFromIndex`: Index of a snapPoint from which the overlay fade should be applied. Defaults to the last snap point.\n\n`direction`: Direction of the drawer. Can be top or bottom, left, right. Defaults to bottom.\n\n`shadow`, `radius`... and more\n\n### Credits:\n\n- Emil Kowalski (Vaul)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrejnemec%2Fmantine-vaul","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrejnemec%2Fmantine-vaul","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrejnemec%2Fmantine-vaul/lists"}