{"id":14962744,"url":"https://github.com/mirkoschubert/sveltekit-components","last_synced_at":"2025-10-25T00:30:49.257Z","repository":{"id":50654332,"uuid":"474434708","full_name":"mirkoschubert/sveltekit-components","owner":"mirkoschubert","description":"An opinionated UI library of SvelteKit components","archived":false,"fork":false,"pushed_at":"2022-10-24T17:04:37.000Z","size":982,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-01-31T04:31:59.832Z","etag":null,"topics":["svelte","sveltekit","typescript","ui-components","uikit"],"latest_commit_sha":null,"homepage":"https://sveltekit-components.mirkoschubert.com","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/mirkoschubert.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":"SECURITY.md","support":null}},"created_at":"2022-03-26T18:34:16.000Z","updated_at":"2024-02-03T01:21:53.000Z","dependencies_parsed_at":"2023-01-20T11:00:15.062Z","dependency_job_id":null,"html_url":"https://github.com/mirkoschubert/sveltekit-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirkoschubert%2Fsveltekit-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirkoschubert%2Fsveltekit-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirkoschubert%2Fsveltekit-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirkoschubert%2Fsveltekit-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mirkoschubert","download_url":"https://codeload.github.com/mirkoschubert/sveltekit-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238046877,"owners_count":19407628,"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":["svelte","sveltekit","typescript","ui-components","uikit"],"created_at":"2024-09-24T13:30:27.106Z","updated_at":"2025-10-25T00:30:43.397Z","avatar_url":"https://github.com/mirkoschubert.png","language":"Svelte","funding_links":["https://www.buymeacoffee.com/musikuss"],"categories":[],"sub_categories":[],"readme":"# SvelteKit Components\n\n`sveltekit-components` is an opinionated UI kit with dozens of components dedicated to SvelteKit. For more information please visit the [Demo \u0026 Documentation](https://sveltekit-components.mirkoschubert.com) App!\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://www.buymeacoffee.com/musikuss\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-green.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px !important;width: 217px !important;\" \u003e\u003c/a\u003e\u003c/p\u003e\n\n**WARNING:** This library is an **early alpha** and under heavy development! Things might break in the future - please use it with care!\n\n## Installation\n\nIf you want to create a new project just type the following commands in your command line:\n\n```bash\n# create a new project in my-app\nnpm init svelte@next my-app\n\n# go to the project folder and install the dependencies\ncd my-app \u0026\u0026 npm install\n\n# start the development server\nnpm run dev\n```\n\nTo install the library just type:\n\n```bash\nnpm install -D sveltekit-components\n```\n\nYou can also use `yarn` or `pnpm` of course.\n\n## Usage\n\n### Import the CSS/ SASS\n\nTo use the library you first have to import the main CSS file. Please note that you can only use the SASS files at the moment. Make sure that SASS preprocessing is up and running!\n\nOpen or create your `__layout.svelte` file and import the main SASS file in the `\u003cscript\u003e` part.\n\n```js\n  import 'sveltekit-components/sass/main.sass'\n```\n\n### Install the Providers\n\nIf you want to use the `Theme` or `Notification` feature you should initialize the corresponding Providers in the `__layout.svelte` as well:\n\n```js\n  \u003cscript\u003e\n    import { ThemeProvider, NotificationProvider } from 'sveltekit-components'\n  \u003cscript\u003e\n\n  \u003cThemeProvider fromSystem /\u003e\n  \u003cNotificationProvider duration={3000} position=\"top-right\" closable=\"true\" /\u003e\n```\n\n### Using the Library Stores\n\nA few of the components are using their own stores. For example, if you want to send a notification to the `NotificationProvider` you have to import the notification store:\n\n```js\n  \u003cscript\u003e\n    import { Button } from 'sveltekit-components'\n  \u003c/script\u003e\n\n  \u003cButton\n    on:click={() =\u003e {\n      notification.add({\n        title: 'Example',\n        description: 'This is an example',\n        type: 'success'\n      })\n    }}\n  \u003e\n    Click me!\n  \u003c/Button\u003e\n```\n\n## License \u0026 Contribution\n\nThis software is licensed under the MIT License.\n\nTo contribute please fork the project and start a pull request once you're ready!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirkoschubert%2Fsveltekit-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmirkoschubert%2Fsveltekit-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirkoschubert%2Fsveltekit-components/lists"}