Home

Awesome

<img src="https://raw.githubusercontent.com/illright/attractions/master/docs/static/android-chrome-192x192.png" alt="Logo" align="right" width="80" />

Attractions

Inactively Maintained

GitHub Workflow Status npm npm bundle size npm bundle zipped size

Open in Visual Studio Code

A pretty cool UI kit for Svelte.

Refer to the main documentation: https://illright.github.io/attractions

Installation

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: [
    svelte({
      preprocess: sveltePreprocess(),
    }),
  ],
};

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

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

<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:

<head>
  <script src="https://unpkg.com/attractions"></script>
</head>
<body>
  <a-button filled="filled">My button</a-button>
</body>

For more details, check out the docs.

License

This project is MIT licensed.