Attractions

Attractions is a Svelte component library that prioritized simplicity above all else. Built with zero external dependencies, it offered a clean set of around 30 UI components styled with plain CSS and SCSS variables for theming.

The design aesthetic is intentionally restrained — components look clean and professional without any strong visual personality. This made Attractions a reasonable choice for projects that wanted basic UI elements without the weight of a full design system. Buttons, inputs, form controls, cards, modals, snackbars, chips, and navigation components covered the essentials.

Theming was handled through SCSS variables, allowing you to customize colors, spacing, typography, and border radius values at build time. While this approach is less dynamic than CSS custom property-based theming, it kept the runtime CSS footprint minimal.

The API design followed Svelte conventions closely — straightforward props, slot-based composition, and dispatched events. Components were intentionally kept simple, favoring clarity over feature density. This made the library easy to learn but also meant you’d occasionally need to build custom solutions for more complex interactions.

Unfortunately, Attractions has not seen active development in some time. There is no Svelte 5 support, no TypeScript definitions, and no plans for future releases that are publicly visible. The lack of dark mode support is another gap that most modern libraries have addressed.

For historical context, Attractions represented a philosophy of minimal, dependency-free Svelte components at a time when the ecosystem had fewer options. Its clean approach influenced other library authors who saw value in not coupling to Tailwind or other CSS frameworks.

If you discover Attractions in an existing project, it works fine with Svelte 4. For new development, libraries like Skeleton, shadcn-svelte, or even Bits UI with your own minimal styles provide better long-term foundations with active maintenance and modern Svelte support.