Introducing Skeleton: A fully featured Svelte component library.

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Sonar - Write Clean JavaScript Code. Always.
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • skeleton

    A fully featured UI toolkit for Svelte + Tailwind. [Moved to: https://github.com/skeletonlabs/skeleton] (by Brain-Bones)

    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.

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    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.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • svelte-material-ui

    Svelte Material UI Components

    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.

  • Svelte

    Cybernetically enhanced web apps

    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:

  • material-ui

    MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

    MUI

  • mantine

    React components library with native dark theme support

    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.

  • SvelteKit

    web development, streamlined (by sveltejs)

    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.

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

  • chakra-ui

    ⚡️ Simple, Modular & Accessible UI Components for your React Applications

    Chakra

  • Bulma

    Modern CSS framework based on Flexbox

    Bulma

  • astro

    Build faster websites with Astro's next-gen island architecture 🏝✨

    As well as compliments from members of the Astro core team and even a member of the Svelte Sirens.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts