{"id":17935986,"url":"https://github.com/sveltestrap/sveltestrap","last_synced_at":"2025-05-15T23:07:58.944Z","repository":{"id":212160166,"uuid":"727550476","full_name":"sveltestrap/sveltestrap","owner":"sveltestrap","description":"Bootstrap 5 components for Svelte 4+","archived":false,"fork":false,"pushed_at":"2025-02-21T00:24:48.000Z","size":5575,"stargazers_count":178,"open_issues_count":16,"forks_count":21,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-11T17:38:07.242Z","etag":null,"topics":["bootstrap","components","javascript","svelte","sveltekit","ui","ux"],"latest_commit_sha":null,"homepage":"https://sveltestrap.js.org","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/sveltestrap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-12-05T04:50:51.000Z","updated_at":"2025-05-02T19:53:17.000Z","dependencies_parsed_at":"2024-01-14T17:48:54.351Z","dependency_job_id":"c3eef11c-df59-4192-b1bb-6a91591e49d8","html_url":"https://github.com/sveltestrap/sveltestrap","commit_stats":{"total_commits":425,"total_committers":11,"mean_commits":38.63636363636363,"dds":"0.31999999999999995","last_synced_commit":"4fec0e1b18419ddc0b82aee6210838b37affad01"},"previous_names":["sveltestrap/sveltestrap"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sveltestrap%2Fsveltestrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sveltestrap%2Fsveltestrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sveltestrap%2Fsveltestrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sveltestrap%2Fsveltestrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sveltestrap","download_url":"https://codeload.github.com/sveltestrap/sveltestrap/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254436949,"owners_count":22070947,"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":["bootstrap","components","javascript","svelte","sveltekit","ui","ux"],"created_at":"2024-10-28T22:01:17.680Z","updated_at":"2025-05-15T23:07:52.794Z","avatar_url":"https://github.com/sveltestrap.png","language":"Svelte","readme":"![Unit Tests](https://github.com/Sveltestrap/sveltestrap/actions/workflows/unit.yml/badge.svg)\n![Integration Tests](https://github.com/Sveltestrap/sveltestrap/actions/workflows/integration.yml/badge.svg)\n[![license](https://img.shields.io/badge/license-MIT-%23bada55\u0026color=7289da)](https://github.com/sveltestrap/sveltestrap/blob/main/LICENSE)\n[![npm version](https://img.shields.io/npm/v/@sveltestrap/sveltestrap?logo=npm\u0026color=cb3837\u0026label=Latest)](https://www.npmjs.com/package/@sveltestrap/sveltestrap)\n\n## Bootstrap 5 Components for Svelte 4+\n\nSveltestrap is a library designed to simplify the integration of [Bootstrap 5](https://getbootstrap.com) components into your [Svelte](https://svelte.dev) applications. It eliminates the need for Bootstrap component classes, the inclusion of Bootstrap's JavaScript, and reliance on jQuery.\n\nThis open-source software is freely available under the permissive MIT license. It draws inspiration from the [reactstrap](https://reactstrap.github.io/?path=/story/home-installation--page) library for [React](https://react.dev/).\n\nPlease note that Sveltestrap \u003cu\u003e**does not directly embed Bootstrap style**\u003c/u\u003e. To use Bootstrap themes effectively, you must include Bootstrap 5 CSS using one of the methods outlined below.\n\n**Note**\nIf you looking for Svelte 3.x support, you can use the original [sveltestrap](https://github.com/bestguy/sveltestrap) package.\n\n### Join the Community\n[![Discord](https://img.shields.io/discord/1186498806460710973?label=Sveltestrap\u0026logo=discord\u0026color=7289da)](https://discord.gg/VS9T72ucaU)\n\n---\n\n## Install\n\n```bash\n# npm\n\u003e npm install svelte @sveltestrap/sveltestrap\n\n# pnpm\n\u003e pnpm install svelte @sveltestrap/sveltestrap\n\n# yarn\n\u003e yarn add svelte @sveltestrap/sveltestrap\n```\n\n## Bootstrap CSS\n\nIt's essential to note that Bootstrap 5 components do not come with Bootstrap styles preloaded, so you'll need to add the stylesheet manually. Here's how you can add them:\n\n1. Add to your apps static `index.html` file\n```html\n\u003chead\u003e\n  \u003clink\n    rel=\"stylesheet\"\n    href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css\"\n  /\u003e\n\u003c/head\u003e\n```\n\n2. Add to your main `App.svelte` file\n```html\n\u003csvelte:head\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css\"\u003e\n\u003c/svelte:head\u003e\n```\n\n3. Import the styles directly in your CSS bundle\n\n```html\n\u003cstyle\u003e\n  @import 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css';\n\u003c/style\u003e\n```\n\n4. Use the provided [Styles](/?path=/docs/components-styles--docs) component\n\n```html\n\u003cscript\u003e\n  import { Styles } from '@sveltestrap/sveltestrap';\n\u003c/script\u003e\n\n\u003cStyles /\u003e\n```\n\nThen use Sveltestrap components in your svelte component:\n\n```html\n\u003cscript\u003e\n  import { Button, Col, Row } from '@sveltestrap/sveltestrap';\n\u003c/script\u003e\n\n\u003cRow\u003e\n  \u003cCol\u003e\n    \u003cButton color=\"primary\" outline\u003eHello World!\u003c/Button\u003e\n  \u003c/Col\u003e\n\u003c/Row\u003e\n```\n\n## Bootstrap Icons\n\nIf you want to use the [Icon component](https://sveltestrap.js.org/?path=/story/components--icon),\nyou also must include a link to Bootstrap Icon CSS, for example:\n\nInclude it in your app's `App.svelte`:\n\n```html\n\u003csvelte:head\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css\"\u003e\n\u003c/svelte:head\u003e\n```\n\nor you can include it in your app's `index.html`:\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css\"\n/\u003e\n```\n\nor the [Styles](https://sveltestrap.js.org/?path=/story/components--styles) component includes the Bootstrap Icon CSS by default:\n\n```html\n\u003cscript\u003e\n  import { Styles } from '@sveltestrap/sveltestrap';\n\u003c/script\u003e\n\n\u003cStyles /\u003e\n```\n\n## Sponsors\n[![avatar](https://images.weserv.nl/?url=https://opensense.s3.amazonaws.com/logo-horizontal-white-colored-emblem.svg?v=4\u0026h=60\u0026w=260\u0026fit=cover\u0026maxage=5d)](https://www.opensense.com?utm_source=github)\n\n## Maintainers\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/1918732?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/dysfunc)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/405608?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/bestguy)\n\n## Contributors\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/145370889?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/msmauric)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/40482274?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/eddie0329)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/15244006?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/BlackFenix2)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/41120635?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/frederikhors)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/55523823?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/thomatha)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/13287984?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/mohe2015)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/305993?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/daytonlowell)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/in/29110?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/apps/dependabot)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/322311?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/benmccann)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/20725046?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/Renerick)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/28020151?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/rornic)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/26409015?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/DaniAcu)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/8082642?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/ladeiko)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/8957069?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/kaipaysen)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/140316503?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/dym-sh)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/1150472?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/GorbulasDev)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/552629?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/lovasoa)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/34311027?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/geoffreymugnier)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/342922?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/coyotte508)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/28934442?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/javajudt)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/50879193?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/demetrius-mp)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/47675451?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/deshartman)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/3946014?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/OJFord)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/26901342?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/mopeneko)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/9532377?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/baileyherbert)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/191226?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/ondrap)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/6368283?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/brocococonut)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/15998415?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/lgirma)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/4997633?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/grantyap)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/23123008?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/33KK)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/28984165?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/frantp)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/3984125?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/gryckelynck)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/6155705?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/davidroeca)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/562969?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/IAL32)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/65456722?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/Florian-Schoenherr)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/1134341?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/newbyca)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/60277151?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/ubersan)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/8332043?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/farskid)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/5259918?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/masrlinu)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/1515160?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/thecodejack)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/918405?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/nextinterfaces)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/38461562?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/jlith)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/385770?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/larryosborn)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/560312?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/TheBosZ)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/8826710?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/infanf)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/766828?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/RoryDuncan)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/11891837?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/splimter)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/2003039?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/glominashvili)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/16706735?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/urispmts)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/6674275?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/sebastienwarin)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/69360379?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/Inqnuam)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/1667261?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/lachlancollins)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/43024885?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/vostrnad)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/24857799?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/x64v)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/42283663?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/hutchisr)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/8121611?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/valmarv)\n[![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/1449602?v=4\u0026h=48\u0026w=48\u0026fit=cover\u0026mask=circle\u0026maxage=5d)](https://github.com/StagnantIce)\n","funding_links":[],"categories":["UI Libraries","Recently Updated"],"sub_categories":["Mobile","[Oct 27, 2024](/content/2024/10/27/README.md)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsveltestrap%2Fsveltestrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsveltestrap%2Fsveltestrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsveltestrap%2Fsveltestrap/lists"}