sterling-svelte  2.0.3
A modern, accessible, lightweight UI component library for Svelte.

Overview

Welcome to sterling-svelte, a UI component library built on Svelte!

Each component is modern, accessible, and fast. The code works across evergreen browsers and meets ARIA accessibility standards. The library was built for real-world, production sites and applications.

What's New

This version, v2, is built on Svelte 5. You can keep using sterling-svelte v1, but it won't get improvements or bug fixes. Svelte 5 introduces a whole new way of building components and managing state. That means breaking changes, but they aren't too bad. Check out the Migration from v1 guide.

Styling

The library is headless. This package does not contain CSS and components do not have a default style. Instead, components apply semantic class names that can be used to apply any style.

Of course there is a ready-made style you can use: Sterling. @geoffcox/sterling-svelte-themes provides a clean, modern, and accessible theme. It supports both light and dark modes.

This documentation site uses the Sterling theme. Here's some examples:

Dependencies

Dependencies are kept to a minimum to keep bundle size as small as possible.

  • @floating-ui/dom: provides positioning of floating elements like menus and popovers.
  • keyborg: tracks if the user is using the keyboard to distinguish between focus and keyboard focus styles.
  • lodash-es: provides robust helper function for math, collections, and debounce.

Documentation

The documentation for each component includes:
  • An interactive playground
  • A live code example
  • Details about each type, property, event, and method
  • Usage, behavior, and other considerations
  • Component anatomy

Contributing

Contributors are welcome! Create a work item on GitHub if you find a bug or have a feature request. Create a PR to contribute a component, feature, or fix.