headlessui VS Svelte

So far in my app i've been writing components that conditionally render a modal within it. I use headlessui so it handles placing the modal in a portal for me.

I'm currently considering React-aria, HeadlessUI, Radix-ui and Reakit for reimplementing the user-interface for a customer, but i find it hard to choose.

If you want to err on the "custom" end you should at least check out Headless UI which implements all of that logic but leaves the styles to you.

https://headlessui.dev/ is pretty good. Everything from TailwindUI is built with it.

Yes, there are tons of those now. No doubt because of the popularity of things like Tailwind. This one is particularly popular: https://headlessui.dev/

There is also https://headlessui.dev

It might be difficult or even impossible to make MUI components look like your figma designs. I recommend using unstyled component libraries like Radix UI or Headless UI. You can style them however you want. Personally I would choose either Stitches or Tailwind as both make it easy to create a design system that makes your styling consistent and maintainable.

The UI itself is pretty simple it's just a table with a form that populates some data after the user has submitted it to the database. As I was already using Tailwind I wanted to bring some life to the form and make things look decent. This is where headless.ui came in allowing me to make decent looking form components. I went ahead a built a couple of Listbox components to give the form a better feel. The headless ui library was awesome to use and makes forms and other little components a joy to build. You're even able to combine certain components within each other.

They make some components in https://headlessui.dev/ Headless mean no style, you can apply tailwindcss yourself, no more fighting / overriding component styles.

In regular Svelte you would either set up a custom router, or use a routing library like Routify. If you’ve ever used something like Next.js, SvelteKit is like that but for Svelte. You were looking at the SvelteKit documentation when you should be looking at the Svelte documentation

https://sveltestrap.js.org/ https://svelte.dev/ https://github.com/sveltejs/template https://svelte.dev/repl/7eb8c1dd6cac414792b0edb53521ab49?version=3.20.1 https://svelte.dev/repl/4162507931ea406c9f03be1b3aed9e94?version=3.48.0

Finally, there is the frontend process powering the RoboStreamer website and the control center. The whole frontend is created with Svelte using Elder.js which makes it easy to create fast and SEO friendly web projects.

Then, using the instructions provided above, develop an app of your choice and push the code to the empty GitHub repository. I'm building my website with Vue JS. Vue JS will thus be used in the examples. The difference is simply in the deployment process, and you can use any framework/library to construct your website, such as Angular, React, Svelte, etc. Follow the steps here to get a project started with Vue JS.

Hence, Svelte project bundle size will start off smaller than Vue, but each additional component is bigger than Vue, so as you have more components in a Svelte project, its final bundle size will catch up and may end up being bigger than Vue, depends on how big the project is. Although it is not a big problem given that there is code splitting. https://github.com/sveltejs/svelte/issues/2546

Additionally, thanks to the flexibility of single-spa we've been able to experiment outside of the React ecosystem with frameworks like Svelte and others which has been extremely promising and rewarding for our engineers.

https://svelte.dev/ and svelte kit is for rapid app development. Great for most small to medium stuff, heard it’s not (yet) the best for big scale projects.

I dunno if the svelte core team have done some work to this end since it was posted but there was a conversation around the Svelte-M experiment a while back demonstrating some areas where Svelte is slower than other frameworks and why -> https://github.com/sveltejs/svelte/issues/5103