{"id":16792401,"url":"https://github.com/huntabyte/vaul-svelte","last_synced_at":"2025-05-14T13:06:58.886Z","repository":{"id":214727165,"uuid":"737216379","full_name":"huntabyte/vaul-svelte","owner":"huntabyte","description":"An unstyled drawer component for Svelte.","archived":false,"fork":false,"pushed_at":"2025-03-24T23:55:05.000Z","size":806,"stargazers_count":539,"open_issues_count":28,"forks_count":24,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-04-19T09:24:16.701Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://vaul-svelte.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/huntabyte.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":["huntabyte"],"patreon":null,"open_collective":null,"ko_fi":"huntabyte","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2023-12-30T08:05:34.000Z","updated_at":"2025-04-17T20:26:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"0fd83132-9890-4a97-a030-3d790c7cf28a","html_url":"https://github.com/huntabyte/vaul-svelte","commit_stats":{"total_commits":50,"total_committers":8,"mean_commits":6.25,"dds":0.48,"last_synced_commit":"e86ea13ac77d37a494520bb86766ecfa223852db"},"previous_names":["huntabyte/vaul-svelte"],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huntabyte%2Fvaul-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huntabyte%2Fvaul-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huntabyte%2Fvaul-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huntabyte%2Fvaul-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huntabyte","download_url":"https://codeload.github.com/huntabyte/vaul-svelte/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149955,"owners_count":22022851,"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":[],"created_at":"2024-10-13T08:45:45.882Z","updated_at":"2025-05-14T13:06:53.868Z","avatar_url":"https://github.com/huntabyte.png","language":"TypeScript","funding_links":["https://github.com/sponsors/huntabyte","https://ko-fi.com/huntabyte"],"categories":["TypeScript"],"sub_categories":[],"readme":"![](static/og.jpg)\n\n\u003c!-- automd:badges license name=\"vaul-svelte\" color=\"green\" github=\"huntabyte/vaul-svelte\" --\u003e\n\n[![npm version](https://flat.badgen.net/npm/v/vaul-svelte?color=green)](https://npmjs.com/package/vaul-svelte)\n[![npm downloads](https://flat.badgen.net/npm/dm/vaul-svelte?color=green)](https://npmjs.com/package/vaul-svelte)\n[![license](https://flat.badgen.net/github/license/huntabyte/vaul-svelte?color=green)](https://github.com/huntabyte/vaul-svelte/blob/main/LICENSE)\n\n\u003c!-- /automd --\u003e\n\nVaul-Svelte is an unstyled drawer component for Svelte that can be used as a Dialog replacement on tablet and mobile devices. It uses [Bits' Dialog primitive](https://www.bits-ui.com/docs/components/dialog) under the hood and is inspired by [this tweet](https://twitter.com/devongovett/status/1674470185783402496).\n\nThis is a port of [Vaul](https://github.com/emilkowalski/vaul) for React, which was created by [Emil Kowalski](https://twitter.com/emilkowalski_).\n\n## Usage\n\nTo start using the library, install it in your project:\n\n```bash\nnpm install vaul-svelte\n```\n\nUse the drawer in your app.\n\n```svelte\n\u003cscript\u003e\n\timport { Drawer } from \"vaul-svelte\";\n\u003c/script\u003e\n\n\u003cDrawer.Root\u003e\n\t\u003cDrawer.Trigger\u003eOpen\u003c/Drawer.Trigger\u003e\n\t\u003cDrawer.Portal\u003e\n\t\t\u003cDrawer.Content\u003e\n\t\t\t\u003cp\u003eContent\u003c/p\u003e\n\t\t\u003c/Drawer.Content\u003e\n\t\t\u003cDrawer.Overlay /\u003e\n\t\u003c/Drawer.Portal\u003e\n\u003c/Drawer.Root\u003e\n```\n\n## Examples\n\nPlay around with the examples on StackBlitz:\n\n- [With scaled background](https://stackblitz.com/edit/vaul-svelte-scaled?file=src%2Froutes%2F%2Bpage.svelte)\n- [Without scaled background](https://stackblitz.com/edit/vaul-svelte-without-scale?file=src%2Froutes%2F%2Bpage.svelte)\n- [With snap points](https://stackblitz.com/edit/vaul-svelte-snap-points?file=src%2Froutes%2F%2Bpage.svelte)\n- [Scrollable with inputs](https://stackblitz.com/edit/vaul-svelte-scrollable-with-inputs?file=src%2Froutes%2F%2Bpage.svelte)\n- [Nested drawers](https://stackblitz.com/edit/vaul-svelte-nested-drawers?file=src%2Froutes%2F%2Bpage.svelte)\n- [Non-dismissible](https://stackblitz.com/edit/vaul-svelte-non-dismissible?file=src%2Froutes%2F%2Bpage.svelte)\n\n## API Reference\n\n### Root\n\nContains all parts of a dialog. Use `shouldScaleBackground` to enable background scaling, it requires an element with `[data-vaul-drawer-wrapper]` data attribute to scale its background.\nCan be controlled by binding to the `open` prop, or using the`onOpenChange` prop.\n\nAdditional props:\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`, `bottom`, `left`, or `right`. Defaults to `bottom`.\n\n`backgroundColor`: Background color of the body when the drawer is open and `shouldScaleBackground` is true. Defaults to black.\n\n`[data-vaul-no-drag]`: When interacting with an element with this data attribute, the drawer won't be dragged.\n\n### Trigger\n\nThe button that opens the dialog. [Props](https://www.bits-ui.com/docs/components/dialog#trigger).\n\n### Content\n\nContent that should be rendered in the drawer. [Props](https://www.bits-ui.com/docs/components/dialog#content).\n\n### Overlay\n\nA layer that covers the inert portion of the view when the dialog is open. [Props](https://www.bits-ui.com/docs/components/dialog#overlay).\n\n### Title\n\nAn accessible title to be announced when the dialog is opened. [Props](https://www.bits-ui.com/docs/components/dialog#title).\n\n### Description\n\nAn optional accessible description to be announced when the dialog is opened. [Props](https://www.bits-ui.com/docs/components/dialog#description).\n\n### Close\n\nThe button that closes the dialog. [Props](https://www.bits-ui.com/docs/components/dialog#close).\n\n### Portal\n\nPortals your drawer into the body.\n\n## Sponsors\n\nThis project is supported by the following beautiful people/organizations:\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sponsors/huntabyte\"\u003e\n    \u003cimg src='https://github.com/huntabyte/static/blob/main/sponsors.svg?raw=true' alt=\"Logos from Sponsors\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## License\n\n\u003c!-- automd:contributors license=MIT author=\"huntabyte\" github=\"huntabyte/vaul-svelte\" --\u003e\n\nPublished under the [MIT](https://github.com/huntabyte/vaul-svelte/blob/main/LICENSE) license.\nMade by [@huntabyte](https://github.com/huntabyte) and [community](https://github.com/huntabyte/vaul-svelte/graphs/contributors) 💛\n\u003cbr\u003e\u003cbr\u003e\n\u003ca href=\"https://github.com/huntabyte/vaul-svelte/graphs/contributors\"\u003e\n\u003cimg src=\"https://contrib.rocks/image?repo=huntabyte/vaul-svelte\" /\u003e\n\u003c/a\u003e\n\n\u003c!-- /automd --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuntabyte%2Fvaul-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuntabyte%2Fvaul-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuntabyte%2Fvaul-svelte/lists"}