A pretty cool UI kit for Svelte



A pretty cool UI kit for Svelte.

Refer to the main documentation:


Step 1. Install the library with your favorite package manager:

npm install --save-dev attractions
# -- or --
yarn add --dev attractions
# -- or --
pnpm add --save-dev attractions

Step 2. Install svelte-preprocess, Dart Sass and PostCSS:

npm install --save-dev svelte-preprocess sass postcss
# -- or --
yarn add --dev svelte-preprocess sass postcss
# -- or --
pnpm add --save-dev svelte-preprocess sass postcss

Step 3. Add svelte-preprocess to your preprocessor chain (as shown here):

// rollup.config.js
import sveltePreprocess from 'svelte-preprocess';

export default {
  // ...,
  plugins: [
      preprocess: sveltePreprocess(),

Step 4. Import the desired components as named imports and use wherever you like!

  import { Button } from 'attractions';

<Button>click me</Button>

For more information on how to customize/theme your installation, see the docs.

Alternatively, the library can be used from a CDN, such as unpkg, and then the components will be registered as custom elements. This is especially useful for quick prototypes that do not need all the features provided.

Example usage:

  <script src=""></script>
  <a-button filled="filled">My button</a-button>

For more details, check out the docs.


This project is MIT licensed.

Top categories

Loading Svelte Themes