Installation

Step 1. Add Attractions and its peer dependencies to your devDependencies:

Terminal

npm install --save-dev attractions svelte-preprocess sass postcss

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

svelte.config.js

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: [sveltePreprocess()],
};

rollup.config.js

import svelte from 'rollup-plugin-svelte';
const svelteConfig = require('./svelte.config.js');  // it has to be a CommonJS import

export default {
  // ...,
  plugins: [
    svelte({
      ...svelteConfig,
      // ...,
    }),
  ],
};

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

<script>
  import { Button } from 'attractions';
</script>

<Button>click me</Button>

If you'd like to use/edit the Sass variables that Attractions uses for theming or if your node_modules folder is not in the root of your project, take a look at the Theming with Sass section.