What is the recommended UI framework for sveltekit now ?

[kuchaguangjie]

Possible options as I know:

• smui
• carbon-components-svelte
• flowbite-svelte

[eltigerchino]

Note that carbon-component-svelte will have breaking changes sooner or later as it makes it's way to a 1.0.0 release.
carbon-design-system/carbon-components-svelte#1614

[vitalijalbu]

try sveltestrap and extend it, try to copy some components from other react libs

[kuchaguangjie]

I'm looking for some open source ready to use UI library, seems no such UI for svelte yet.

[cnshsliu]

The Navbar seems not complete ? I need something like the multiple level tree on left side.

For multiple level tree-level on left side, take a look at:
https://menu-demo-lyart.vercel.app/

It has four styles:
browser: multiple-level tree-like on left side
pc: like desktop application menu
mobile: stay at left-bottom corner
windows: looks like Windows desktop menu

all styles support multiple level, tree-like.

• Multi-level
• Four styles: Browser/Windows/PC/Mobile
• Change dynamically on-demand
• Callback to functions
• Conditional menuitem visibility
• and more.

give it a try.

[kuchaguangjie]

@cnshsliu The feature looks good, but the scrollbar is always shown on my browser when view the official demo, I've created a issue cnshsliu/yarknodemenu#1

[cnshsliu]

they are northing special than normal divs.

I tried on Chrome/Edge/Safari and all look good. will dig then.

[dirk-bester]

I started with sveltestrap but was startled to learn the underlying Bootstrap 5.3 has no dark mode support and will not till version 6 at the earliest. Not sure how active it is either. I like what is there though but the darkmode thing is making me look for alternatives.

[Devr-pro]

Try daisyui , Only UI kit you may want (based on tailwindcss)

[kuchaguangjie]

This looks cool, but it also seems to lack of a tree-like sidebar , though its Navbar is close.
And, I'm not sure how good it is when integrate with svelte ?

[kuchaguangjie]

I've added it to my sveltekit project, and the style for a button does work, like this one: https://stackblitz.com/edit/daisyui-sveltekit

[Devr-pro]

Yeah, its quite simple to integrate it in sveltekit/svelte-app project as it only needs to be used as a taiwlind plugin ,and about tree-like side navbar ,what you can do is implement menu inside menu with little indentation or not at all , as of my thoughts

[ollyde]

It's not great for copy pasting tailwind blocks though as it uses tons of custom elements and styles.

[vekunz]

We built a custom UI library based on https://github.com/material-components/material-components-web. We checked several Material libraries for Svelte, but none were suitable for production use.

The problem is, that UI libraries for Svelte are often maintained by a single person only. So often some features are missing due to limited time the person can invest in the project. And often such projects are abandoned after some time without any comment.

For example, SMUI is missing several features of Material and the maintainer did not commit to the project for three months, so it seems to be abandoned.

[kuchaguangjie]

Without a nice UI, it's hard to make sveltekit projects.

[vekunz]

Yes, this is true. The "only one maintainer" reason was actually not a reason for us back then (respectively we just forgot it). Here is a list of the available Material Libraries for Svelte:

• Svelte Material UI -> abandoned
• MDBSvelte -> abandoned
• Smelte -> abandoned
• Svelte Materialify -> abandoned
• Svelterial -> abandoned
• Svelte Mui -> actually not abandoned, but currently still many missing components after several years of development

[CreedDE]

Maybe checkout https://www.svelteui.org/

heavily inspired by mantine

[kuchaguangjie]

This one looks really good, though still in beta, I hope it can keep improving.

[coryvirok]

Skeleton is pretty good but a bit too opinionated for my needs.

https://www.skeleton.dev/

[kuchaguangjie]

Looks good, but seems with pretty limited components so far.

[cheekybuddha]

Did you see these svelte UI kit reviews?

Joy of Code
LevelUpTuts

[kuchaguangjie]

So many frameworks are abandoned, wondering is that due to breaking features of svelte related frameworks.

[vekunz]

I think, most UI frameworks are created by devs, who need them for an own project. And if they either abandon their own project or their own project is ready, they stop the development of the UI framework also.

[nosovk]

https://picocss.com/ - it's easy to use it in svelte

[kuchaguangjie]

Looks not updated for over 3 months.

[nosovk]

https://github.com/picocss/pico/pull/261/commits
it's alive, just new version is not published yet

[vekunz]

The commit view proves that there is no activity in the last three months.

[jgod]

That's not really a UI framework. More a "library" of a few styles.

[kuchaguangjie]

Maybe sveltejs official can:

• Lead / coordinate / fork one (or more) UI projects, to keep up with the svelte / svelte-kit progress.
  • Maybe you can choose one from existing UI projects, then:
    • help with it,
    • or fork & take over (if it's abandoned).
• Take into consideration when change svelte/svelte-kit structure/feature, so that the UI project maintainer/developer can keep their work more easily, and get less chance to abandon it.
  • Then the community will be easier to grow too, I think.

[vekunz]

Making some UI components based on the native HTML elements just for an own project is not that hard. But I agree that it is very hard to create and maintain a universal component library, that includes nearly any component someone can think off, and supports any use case also.

[kuchaguangjie]

Making some UI components based on the native HTML elements just for an own project is not that hard.

For example a tree-like sidebar panel, it's hard to impl, at least takes time to make it fully featured & easy to use.

it is very hard to create and maintain a universal component library, that includes nearly any component someone can think off, and supports any use case also.

There are certain common components, impl those ones for reuse will save project's time. If u don't like it you can implement one, or a specific component is missing, then you can implement that one, not a whole set of components for every project.

A set of components maintained by a community, is much useful than a single person / small team maintained several components.

And, as I already mentioned, it's much harder to maintain by a single person, than by a community.

Otherwise, things like Svelte / jQuery / tailwind no need to exists, because you can also invent your own framework & tools for your project. No single framework can fit every project, doesn't mean no framework should be created for reuse.

[vekunz]

It seems that you imply that we do not think that UI libraries are a good thing. This is totally wrong. I just explained, why it is not an easy "just make a UI library" thing. To have a well-maintained and complete UI library is a very good thing. And this is the reason, why there are so many UI libraries for Svelte. But most times, there is no community that supports the development, only a community that consumes the library.
But for any library, there are two options, from which at least one has to be fulfilled. Either several "independent" maintainers or a company that somehow makes money with the library (whereby the library's core has to be open source and free of charge of course). In any other case, unfortunately, you can never be sure if a library is not abandoned anytime soon. We have been in this situation some years ago. Many teams of our company used one specific UI library (for Angular), that was maintained by a single person. But then, he abandoned the project (i.e. archived the GitHub Repo). And we did not have the time to maintain the package ourselves.

[kuchaguangjie]

What u wrote make me think so.
What I originally said is exactly a propose to make the development of a svelte ui lib easier. That's all.

[B-Esmaili]

I used pico css in my first sveltekit project , i built my own data-grid (based on pico table styling), date-picker , calendar for a project with 2-3 month deadline. That was unbelievable. Being my first svelte experience it was simply jaw dropping. I still wonder how i toke that risk. but now i feel so confident with svelte.

[eecue]

I just went with Tailwind https://tailwindcss.com/docs/guides/sveltekit ... but looking at daisyUI I think I'm going to refactor it!

[magic-thomas]

For me

1. Tailwind css
2. Flowbite ( not Flowbite-svelte, and little heavy )
3. DaisyUI ( good but too heavy. )

But I think the best way of saving my time is to combine basic tailwind css and svelte / vanilla javascript.

And re-studying modern HTML is important.

[kuchaguangjie]

Tailwind css
Flowbite ( not Flowbite-svelte, and little heavy )
DaisyUI ( good but too heavy. )

I also like tailwindcss and daisyUI.

But I think the best way of saving my time is to combine basic tailwind css and svelte / vanilla javascript.

Only if u got the time, and will end up invent another wheel, that u yourself will abandon later probably, due to lack of maintainability and other reasons.

[shinokada]

https://flowbite-svelte.com/ has many components. If your Svelte app only requires a few components, you can import components directly.

[shinokada]

Can you be a little bit more specific? Which components are buggy?

[kuchaguangjie]

I've created several github issues there before, recently I don't use it anymore.

[ollyde]

I can also say that it's fairly buggy, like sometimes for example hover over works and then next refresh it doesn't work...

[sdball]

I've had a great time with FlowBite-Svelte. I've used many of their components in a project and everything worked fantastically with the one notable exception of multiselect. I'm extremely happy with the results and the wide range of components that were available.

[Khalilsqu]

this is really buggy. use the normal one instead!

[karimfromjordan]

Melt UI hasn't been mentioned yet I think. It's relatively new, looks very promising and powers the shadcn Svelte port.

[kuchaguangjie]

Nice, but also no tree-like component.

[pavelstianko]

I love shadcn! It is headless and the design is amazing - i think it is best component library for svelte.

[pavelstianko]

Also we are working with Hunter on new Bits UI. Hope it will be finished next month.

[Khalilsqu]

Will it use svelte 4 or 5?

[benmccann]

In case you want any more ideas, these libraries are pretty much all listed on https://sveltesociety.dev/components#design-systems which is linked to from the Svelte FAQ https://svelte.dev/docs/faq#is-there-a-ui-component-library

[naranyala]

best Tailwind based I know right now

• Ripple UI
• Preline UI