Our great sponsors
-
skeleton
Discontinued A fully featured UI toolkit for Svelte + Tailwind. [Moved to: https://github.com/skeletonlabs/skeleton] (by Brain-Bones)
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
Material UI
Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
-
We hand craft our default theme using Tailwind's default color palette (emerald, indigo, rose, and gray), but converted each color shade from hex to RGBA. These were defined using CSS custom properties (read: CSS variables), and injected into the Tailwind config file via a custom Tailwind plugin. We have since made this process much easier by offering a set of preset themes and theme generator.
We knew right from the start that we wanted take advantage of Tailwind CSS. It's powerful utility-based class system aligned with conventions used in our own project for years, but could help standardize the process. This would allow us to develop a turnkey design system and managed styling both inside our components and throughout each app. The first challenge was how to properly utilize Tailwind within Svelte components. There wasn't a lot of precedence available to draw from other libraries. Many libraries we reviewed opted for either vanilla CSS or preprocessors like SASS.
Fast forward to February of this year and we began the planning phases for our next generation and evolution of our platform. We immediately began brainstorming a means to transition from Angular to Svelte/Kit. However, as we searched for UI libraries to replace Angular Material we came up short. Sure options like Svelte Material UI were available. However, we had growing concerns about the trajectory of Material Design. Material Design v3 hasn't really been a resounding success, having only a small handful of components (even today), and is currently limited exclusively to Android. Even Angular Material, a Google-owned project, has been slow to adopt v3. Progress has been moving at a snail's pace. This left us with a dilemma.
I recently had the privilege of writing an article for Smashing Magazine introducing Skeleton, a new open-source UI component library for Svelte and Tailwind. If you're looking for a quick introduction, I'd recommend starting here:
MUI
After some time and effort, this process led us to a library called Mantine, a React-focused component library offering a huge set of components, deep customization, all housed within top-notch interactive documentation. This quickly became our go-to source for inspiration and has influenced many of the design decisions for our library, most notably in presentation.
We explored the basics of HTML/CSS/JS, various frontend frameworks like React/Vue/Svelte, with our final goal being an introduction to Angular. However, an interesting thing happened along the way. We had a bit of a revelation after covering Svelte. Like many in the frontend space, we were captivated by Svelte's superb DX (developer experience). We knew our platform relied on Angular, but craved the chance to introduce and use Svelte and SvelteKit (Svelte's app framework) in our production environment. Unfortunately we were unsure how to introduce it at the time.
Chakra
Bulma
As well as compliments from members of the Astro core team and even a member of the Svelte Sirens.