{"id":14962766,"url":"https://github.com/svonic/svonic","last_synced_at":"2025-10-25T00:30:49.590Z","repository":{"id":41282531,"uuid":"494953752","full_name":"svonic/svonic","owner":"svonic","description":"Svonic is a UI component library for Svelte based on the Ionic Framework.","archived":false,"fork":false,"pushed_at":"2024-09-18T00:58:44.000Z","size":5901,"stargazers_count":14,"open_issues_count":4,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-09-29T12:06:13.138Z","etag":null,"topics":["ionic","ionic-framework","svelte","svelte-kit","sveltejs","sveltekit","svonic","svonicui","ui"],"latest_commit_sha":null,"homepage":"https://www.svonic.dev","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/svonic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-05-22T03:57:57.000Z","updated_at":"2023-10-06T07:30:35.000Z","dependencies_parsed_at":"2024-06-21T14:09:39.251Z","dependency_job_id":"83a7da40-c6cd-41d6-873b-a3ecf21aaeed","html_url":"https://github.com/svonic/svonic","commit_stats":{"total_commits":12,"total_committers":2,"mean_commits":6.0,"dds":"0.33333333333333337","last_synced_commit":"a91fcb58b664b80473898cec0d4259c7811e4f46"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svonic%2Fsvonic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svonic%2Fsvonic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svonic%2Fsvonic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svonic%2Fsvonic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svonic","download_url":"https://codeload.github.com/svonic/svonic/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219867388,"owners_count":16555891,"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":["ionic","ionic-framework","svelte","svelte-kit","sveltejs","sveltekit","svonic","svonicui","ui"],"created_at":"2024-09-24T13:30:28.863Z","updated_at":"2025-10-25T00:30:47.652Z","avatar_url":"https://github.com/svonic.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 👷 ⚠️  READ THIS FIRST!\n**Svonic** so far is more of a proof of concept and very much in an Alpha state and under construction.\n\n#  Svonic\n\nSvonic is a UI component library based on the [Ionic Framework](https://ionicframework.com).  Svonic so far consists of the following 3 ideas for packages.\n\n#### Svonic Core\nSvonic Core attempts to make it easier to construct a Svelte application using Ionic Web Components. Svonic Core wraps the Ionic Web Components to make them easier to use in a Svelte application.\n\n#### Svonic UI\nSvonic UI uses Svonic Core as a base to build components that Ionic has not created yet or is not interested in making. These missing components can take inspiration from other libraries like [Microsoft FluentUI ](https://developer.microsoft.com/en-us/fluentui#/controls/web) and [Mantine](https://github.com/mantinedev/mantine/).\n\nBy using a Svelte wrapper around the Ionic Web Components we could change or replace the underlying Ionic component in the future if necessary. Svonic UI can become a library of complex components, blocks and templates.\n\n#### Svonic Forms\nThe Enterprise apps I normally build are very complex form applications with similar user interfaces to like [Microsoft Dynamics 365](https://dynamics.microsoft.com/en-us/sales/overview/) or [NetSuite](https://www.netsuite.com/portal/products/erp/order-management.shtml). Coming from Angular I wanted something similar to [Angular Material Form Fields.](https://material.angular.io/components/form-field/overview) Svonic Forms attempts to recreate these to make it easier to build complex forms UIs.\n\u003c/br\u003e\n\n## 🤔 Why use Ionic?\n\nIonic has a \"particular set of features\" that makes it a great component framework to build SPA and MPA applications.\n\nSome of these features are...\n\n- Dark Mode\n- RTL support\n- Adaptive Styling for iOS and Material Design\n- Keyboard shortcuts for Desktop\n\nThe full list of Ionic components can be found [here](https://ionicframework.com/docs/components).\n\n\u003cbr /\u003e\n\n## ⬇️ Installation\n\n```\npnpm i -D @svonic/core\n```\n\n\n```\npnpm i -D @svonic/ui\n```\n\n\n```\npnpm i -D @svonic/forms\n```\n\n\u003cbr /\u003e\n\n## 👩‍🚀 Getting Started\nAll Svonic components should be placed inside an Application component at the root of your application. The Application component helps bootstrap Ionic and make sure all the components are rendered correctly.\n\n\n```svelte\n\u003cscript\u003e\n\timport { Application, Content, Footer, Header, Title, Toolbar } from '@svonic/core';\n\u003c/script\u003e\n\n\u003cApplication\u003e\n\t\u003cHeader\u003e\n\t\t\u003cToolbar\u003e\n\t\t\t\u003cTitle\u003eHeader\u003c/Title\u003e\n\t\t\u003c/Toolbar\u003e\n\t\u003c/Header\u003e\n\n\t\u003cContent\u003e\n\t\t\u003ch1\u003eMain Content\u003c/h1\u003e\n\t\t\u003cslot /\u003e\n\t\u003c/Content\u003e\n\n\t\u003cFooter\u003e\n\t\t\u003cToolbar\u003e\n\t\t\t\u003cTitle\u003eFooter\u003c/Title\u003e\n\t\t\u003c/Toolbar\u003e\n\t\u003c/Footer\u003e\n\u003c/Application\u003e\n```\n\n\u003cbr /\u003e\n\n## 📦 Packages\n### Currently Svonic has these packages.\n[Svonic Core](https://github.com/svonic/svonic/tree/main/packages/core)\n\n[Svonic Forms](https://github.com/svonic/svonic/tree/main/packages/forms)\n\n[Svonic UI](https://github.com/svonic/svonic/tree/main/packages/ui)\n\n\n\u003cbr /\u003e\n\n## 🏫 Example Apps\nThe [Ionic Conference App](https://github.com/svonic/svonic/tree/main/examples/ionic-conference-app) example app developed as a SvelteKit MPA.\n\n![image](https://user-images.githubusercontent.com/6476560/172846750-dac9e9e3-313b-4cf8-b4ff-5af270fef9f9.png)\n\n\u003cbr /\u003e\n\n## 📘 Documentation\nThe Svonic Documentation can be found here...\n\u003cbr /\u003e\n💻 [Github](https://github.com/svonic/test/tree/main/documentation)\n\u003cbr /\u003e\n📚 [Docs](https://www.svonic.dev/)\n\nThere are demos for most Svonic Core components.\n\n![image](https://user-images.githubusercontent.com/6476560/172847270-12aa3d5b-c71e-4cad-84c5-163b30053b7c.png)\n\n\n\u003cbr /\u003e\n\n## 💔 Not what you are looking for?\n### 💡 Try these other great libraries!\n\n#### DaisyUI\n💻 [Github](https://github.com/saadeghi/daisyui)\n\u003cbr /\u003e\n📚 [Docs](https://daisyui.com/)\n\n#### SvelteUI\n💻 [GitHub](https://github.com/svelteuidev/svelteui)\n\u003cbr /\u003e\n📚 [Docs](https://www.svelteui.org)\n\n#### Carbon Components\n💻 [Github](https://carbon-components-svelte.onrender.com/)\n\u003cbr /\u003e\n📚 [Docs](https://carbon-components-svelte.onrender.com/)\n\n\u003cbr /\u003e\n\n## 🥶 Stop. Collaborate. Listen.\nIf you have feedback, ideas, questions, feature requests we can discuss all these and more in the [Github discussions](https://github.com/svonic/svonic/discussions).\n\n\u003cbr /\u003e\n\n\n## 🙏 Acknowledgments\n### Tan Li Hau 👋 👋\nI really learn so much from Li Hau. I wouldn't be able to do any of this without this amazing Youtube Channel.\n\n💻 [Github](https://github.com/tanhauhau)\n\u003cbr /\u003e\n📺 [Youtube](https://www.youtube.com/c/lihautan)\n\n### Other great resources that helped me a lot...\n\n#### Johnny Magrippis\n💻 [Github](https://github.com/jmagrippis)\n\u003cbr /\u003e\n📺 [Youtube](https://www.youtube.com/channel/UCm1ALyg61uhPoTnZBm7mY2g/featured)\n\n####  Joy of Code\n💻 [Github](https://github.com/mattcroat)\n\u003cbr /\u003e\n📺 [Youtube](https://www.youtube.com/c/JoyofCodeDev/featured)\n\n#### Tommertom\nThank you to Tommertom for showing the possibilities of using Ionic together with Svelte.\n\n💻 [Github](https://github.com/Tommertom/svelte-ionic-app)\n\n\n#### twMVC\nSpecial thanks to the Taiwan MVC Group. ☕ 🇹🇼\n\n🧑‍🎓 [Facebook](https://www.facebook.com/twmvc)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvonic%2Fsvonic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvonic%2Fsvonic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvonic%2Fsvonic/lists"}