{"id":18059252,"url":"https://github.com/flo-bit/svelte-swiper-cards","last_synced_at":"2025-07-08T18:05:00.328Z","repository":{"id":222557601,"uuid":"757562654","full_name":"flo-bit/svelte-swiper-cards","owner":"flo-bit","description":"tinder like swipeable cards component for svelte","archived":false,"fork":false,"pushed_at":"2025-03-22T02:07:13.000Z","size":28887,"stargazers_count":44,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-04T21:09:01.422Z","etag":null,"topics":["javascript","svelte","sveltekit","swipeable","tinder-ui","typescript"],"latest_commit_sha":null,"homepage":"https://flo-bit.dev/svelte-swiper-cards/","language":"Svelte","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/flo-bit.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,"zenodo":null}},"created_at":"2024-02-14T18:43:26.000Z","updated_at":"2025-06-18T16:14:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"baa922d3-212d-489b-be9c-f5f07be57ff2","html_url":"https://github.com/flo-bit/svelte-swiper-cards","commit_stats":null,"previous_names":["flo-bit/svelte-swiper-cards"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/flo-bit/svelte-swiper-cards","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flo-bit%2Fsvelte-swiper-cards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flo-bit%2Fsvelte-swiper-cards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flo-bit%2Fsvelte-swiper-cards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flo-bit%2Fsvelte-swiper-cards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flo-bit","download_url":"https://codeload.github.com/flo-bit/svelte-swiper-cards/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flo-bit%2Fsvelte-swiper-cards/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264320912,"owners_count":23590560,"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":["javascript","svelte","sveltekit","swipeable","tinder-ui","typescript"],"created_at":"2024-10-31T03:10:42.509Z","updated_at":"2025-07-08T18:05:00.186Z","avatar_url":"https://github.com/flo-bit.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-swiper-cards\n\nTinder-like swipeable cards component for svelte.\n\n[Try the demo here!](https://flo-bit.github.io/svelte-swiper-cards)\n\nhttps://github.com/flo-bit/svelte-swiper-cards/assets/45694132/61077605-b6f8-4114-aaa3-5527d8887f99\n\n## Features\n\n- Built with **tailwind**\n- **Reuses cards** (only two cards, that are swapped)\n- **Customizable** (easily customize the card ui and data)\n- **Modern**: uses @use-gesture/vanilla for gesture handling\n- Uses **TypeScript**\n\n## Installation\n\n- You need to have tailwind installed in your project, see [here for installation instructions](https://tailwindcss.com/docs/guides/sveltekit).\n\n- Download the [`CardSwiper`](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2Fflo-bit%2Fsvelte-swiper-cards%2Ftree%2Fmain%2Fsrc%2Flib%2FCardSwiper) folder from `src/libs` to your projects `src/lib` folder.\n\n- Install dependency `@use-gesture/vanilla`\n\n```bash\nnpm i @use-gesture/vanilla\n```\n\n## Usage\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { CardSwiper } from '$lib/CardSwiper';\n\n\t// function that returns the data for each card, by default has title, description and image\n\tlet data = (index) =\u003e {\n\t\treturn {\n\t\t\ttitle: 'Card ' + index,\n\t\t\tdescription: 'Description ' + index,\n\t\t\timage: '/profiles/' + index + '.webp'\n\t\t};\n\t};\n\u003c/script\u003e\n\n\u003cdiv class=\"h-screen w-screen\"\u003e\n\t\u003cCardSwiper cardData={data} /\u003e\n\u003c/div\u003e\n```\n\n### Customize\n\nCustomize the `Card.svelte` file to your needs, if you need to pass in more data to your card, edit the `CardData` type in `CardSwiper/index.ts` (and add the prop to `Card.svelte`).\n\n### Programmatic control\n\nYou can control the cards programmatically by calling the swipe function.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { CardSwiper } from '$lib/CardSwiper';\n\n\tlet swipe: (direction?: 'left' | 'right') =\u003e void;\n\u003c/script\u003e\n\n\u003cdiv class=\"h-screen w-screen\"\u003e\n\t\u003cCardSwiper bind:swipe /\u003e\n\t\u003cbutton on:click={() =\u003e swipe('left')}\u003eSwipe left\u003c/button\u003e\n\t\u003cbutton on:click={() =\u003e swipe('right')}\u003eSwipe right\u003c/button\u003e\n\u003c/div\u003e\n```\n\n### Events\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { CardSwiper } from '$lib/CardSwiper';\n\n\tfunction onSwipe(cardInfo: {\n\t\tdirection: Direction;\n\t\telement: HTMLElement;\n\t\tdata: CardData;\n\t\tindex: number;\n\t}) {\n\t\tconsole.log('swiped', cardInfo.direction, 'on card', cardInfo.data.title);\n\t}\n\u003c/script\u003e\n\n\u003cdiv class=\"h-screen w-screen\"\u003e\n\t\u003cCardSwiper {onSwipe} /\u003e\n\u003c/div\u003e\n```\n\n### Other props\n\n#### thresholdPassed\n\nShow a threshold overlay when swiping like so (set to 0 if no threshold reached, 1 if right threshold, -1 if left threshold is reached):\n\n```svelte\n\u003cscript\u003e\n\timport { CardSwiper } from '$lib/CardSwiper';\n\n\tlet thresholdPassed = 0;\n\u003c/script\u003e\n\n\u003cCardSwiper bind:thresholdPassed /\u003e\n\n{#if thresholdPassed !== 0}\n\t\u003cdiv class=\"absolute w-full h-full inset-0 flex items-center justify-center text-9xl\"\u003e\n\t\t{thresholdPassed \u003e 0 ? '👍' : '👎'}\n\t\u003c/div\u003e\n{/if}\n```\n\n#### minSwipeDistance, minSwipeVelocity\n\nYou can also set the minimum threshold as a percentage of the card width (default is 0.5) and the minimum speed (default is 0.5).\n\n```svelte\n\u003cCardSwiper minSwipeDistance={0.3} minSwipeVelocity={0.3} /\u003e\n```\n\n#### arrowKeys\n\nPer default Cards can be swiped with Arrow keys, too. You can disable this by setting `arrowKeys` to `false`.\n\n#### anchor\n\nif you want the user to just be able to move the card left or right in a curve, set the anchor to a high number (at least 1000, recommended \u003e5000).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflo-bit%2Fsvelte-swiper-cards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflo-bit%2Fsvelte-swiper-cards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflo-bit%2Fsvelte-swiper-cards/lists"}