carbon-components-svelte VS open-props

Svelte/SvelteKit does have some high-quality libraries available like carbon-components-svelte but there's just nothing near as much.

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:

You could check out Carbon https://carbon-components-svelte.onrender.com/

Carbon Desing

We will quickly add carbon-components-svelte using the minimum required steps, but you can check the library’s documentation for more detailed information and examples.

+1 for carbon. The npm package is really well-made; all of the Carbon components are native Svelte components and the docs are excellent. It's a really good port; all of the svelte stuff like bind:toggled, custom Svelte events, etc. all works really nicely.

And other pre-built component that I used and I think it's worth mentioning is the Accordion that exists in Carbon Components for Svelte. It's really pretty and works great too!

Some time ago I discovered Open Props which provides a lot of design tokens as CSS variables and started using it in some of my projects.

CSS: Open Props (https://open-props.style/)

https://open-props.style/ gives you design tokens as CSS variables. It’s CSS only and not Svelte specific.

I haven’t seen it mentioned in this thread but for those who like Tailwind in theory but hate all it’s drawbacks you might be interested in Open Props (https://open-props.style/) which is put together by a member of Chrome’s devrel team.

The first 10 minutes or so of this video is also a decent introduction it seems which will help put this project into context for you so you can see specifically what kinds of problems it solves in a way that Tailwind doesn’t and vice versa. https://youtu.be/O53MwmolKP4

You could combine styled-components/emotion with something like open-props[0]. You get all the power that comes with CSS and a set of variables to help you create a consistent design. That's how I manage my styling.

[0] https://open-props.style

Not much.

Tailwind's @apply just lets you apply Tailwind design tokens to CSS classes. It's useful for keeping designs looking consistent if you're already heavily invested in Tailwind.

This is probably not something you need to worry about unless you're working at a very large organization with many teams and web properties.

And there are other CSS-native ways of doing this without Tailwind too. Open Props is a good example (https://open-props.style/).

What kind of bugs and quirks are we talking about? There is almost no difference between browsers these days. Vanilla CSS is enough. You can also use it with Open Props to add extra CSS custom properties.

For layout/design, there’s open props [1].

[1]: https://open-props.style/

Learn and understand CSS variables, this is a superb example https://open-props.style/