An alternative Svelte 5 component library

Documentation

Svxui is a component library for Svelte 5 inspired by @radix-ui/themes. Proposed as an alternative to Tailwincss-based solutions, the library offers developers a different approach to creating modern interfaces.

The library includes a collection of +20 UI components and an assortment of handy utility functions/classes.

The library implements a color system based on @radix-ui/colors. Comes with default color palettes, the system offers developers the ability to incorporate additional color aliases from the full range of Radix palettes to meet specific design requirements.

The library include theming system with support for light, dark, and system preference modes. This implementation draws inspiration from Svelte 5 mode-watcher library.

Key features of the theming system include:

• Full compatibility with server-side rendering (SSR) and static site generation (SSG)
• Prevention of Flash Of Unstyled Content (FOUC) during theme transitions
• Active monitoring of system preference changes to maintain synchronization
• Smooth visual transitions when switching between themes

Built specifically for Svelte 5, the library offers a straightforward development experience with TypeScript support. Developers will find helpful autocompletion, type checking, and inline documentation to make implementation easier.

While providing a comprehensive set of pre-designed components, the library remains highly extensible. Developers can customize existing components or build upon them to create specialized variants that match specific design requirements.

npm install svxui
pnpm install svxui
yarn add svxui

pnpm install

pnpm run dev

pnpm run dev:lib

Some parts of this library are inspired or derived from:

• @radix-ui/themes
• @radix-ui/colors
• bits-ui
• melt
• mode-watcher
• runed
• svelte-portal
• trap-focus-svelte