carbon-components-svelte
SveltePress
DISCONTINUED
Our great sponsors
carbon-components-svelte | SveltePress | |
---|---|---|
34 | 8 | |
2,595 | 211 | |
0.8% | - | |
9.0 | 9.7 | |
3 days ago | almost 2 years ago | |
Svelte | Svelte | |
Apache License 2.0 | The Unlicense |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
carbon-components-svelte
-
Svelte 4 Released
We did a pretty big one, integrated with a python/gtk app [yikes]. Anyways, svelte is a joy to work with, also on the note of libraries, svelte's community is smaller but I found by far my favourite component system I've ever used - https://carbon-components-svelte.onrender.com/.. surprising coming from IBM, but hey, I'll take it.
But in general electron was a pain, slow builds - had an adhoc solution for the svelte dev server, but its not great.
-
Any nice dashboard libraries?
https://carbon-components-svelte.onrender.com/ maybe this is something for you.
-
Are there any UI frameworks competitors to Vue Vuetify or React MUI?
I really liked Carbon Components Svelte but they lacked mobile support. I will have to check Framework7 .
-
Which UI Kit are you using with Svelte?
Carbon for Svelte
If you need something with a bit more functionality out of the box, I'd recommend -Carbon Components (https://carbon-components-svelte.onrender.com) -Skeleton(https://www.skeleton.dev)
- What UI framework would you recommend?
-
Are there any downsides in using svelte or sveltekit?
Svelte/SvelteKit does have some high-quality libraries available like carbon-components-svelte but there's just nothing near as much.
-
Carbon-design-system for Svelte: dynamic import is your only solution !
I've opened issue on IBM community to find a solution rather than importing via , although I could not even get any answer to that . After sometime of scratching my head and couple of tests on Webpack behaviour, I've managed to crack carbon-design-system for Svelte once and for all . Repeating myself:
-
Best practice for UI design in scientific app
You could check out Carbon https://carbon-components-svelte.onrender.com/
-
Observations about Svelte
Carbon Desing
SveltePress
-
KitDocs: Docs integration for SvelteKit (Vitepress alternative for Svelte)
I'm the author of SveltePress and as of some days ago I decided to declare the project EOL (due to limited time & constant feedback).
-
[AMA] IBM Carbon contributor – what are some pain points that you have when using Carbon? What are the "must haves"? What is your use case? More broadly, what would you like to see in Svelte design systems?
I don't personally have any feedback, but I'd transfer an issue/feedback from SveltePress (that might be outside of your control): The included font has some anti aliasing issues that are fixed by IBM Plex Sans VF. However that has its own issues, more on that along with the reporter's feedback at SveltePress#75.
-
How am I supposed to use IBM's Svelte Carbon Components when the CSS is so stupidly high?
Apart from the preprocessor, you can also just import only the css you need. I do it with SveltePress here: https://github.com/GeopJr/SveltePress/blob/main/src/lib/SveltePress/theme/styles/global.scss.
-
Help: Wasted my 3 hours with carbon components svelte
from: https://carbon-svelte.vercel.app/components/DataTable So headers is an array of objects with two keys (key, value) with string values and rows is an array of objects with a unique id key and string values that match the keys set in headers (eg Headers have a key with the value protocol so rows can set that in the table by setting their protocol key to the value you want). On SveltePress I override some of carbon's styles using a patches.scss file. You can then directly import it. Other than that, if you need more help with carbon components, feel free to take a look on these: Use of data table: https://github.com/GeopJr/SveltePress/blob/main/create-sveltepress-app/ui/src/routes/index.svelte Use of other carbon components: https://github.com/GeopJr/SveltePress/tree/main/src/lib/SveltePress/theme Carbon components source (very readable): https://github.com/carbon-design-system/carbon-components-svelte/blob/master/src/
-
SveltePress: Documentation for humans. (Similar to VuePress)
SveltePress is public domain allowing you to do whatever you want with it :)
What are some alternatives?
shoelace-css - A collection of professionally designed, every day UI components built on Web standards. Works with all frameworks as well as regular HTML/CSS/JS. 🥾
svelte-material-ui - Svelte Material UI Components
headlessui - Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
svelte-materialify - A Material UI Design Component library for Svelte heavily inspired by vuetify.
svelte-tutorial - All the course files for the Svelete (beginners) playlist on The Net Ninja YouTube channel.
svelte-grid-responsive - Responsive grid system based on Bootstrap for Svelte
open-props - CSS custom properties to help accelerate adaptive and consistent design.
sveltekit-instagram-infinite-scroll - SvelteKit infinite scroll: see how you can use Svelte stores and a reactive function to implement an infinite scrolling Instagram feed.
svelma - Bulma components for Svelte
svelte-bulma-components - Collection of Bulma UI components to be used in Svelte or standalone
svelte-infinite-scroll-example - Example of Infinite Scroll with Intersection Observer API and Svelte
flowbite-svelte - Official Svelte components built for Flowbite and Tailwind CSS