# Attractions [](https://gist.github.com/cheerfulstoic/d107229326a01ff0f333a1d3476e068d) [](https://github.com/illright/attractions/actions?query=workflow%3ARelease) [](https://www.npmjs.com/package/attractions) [](https://bundlephobia.com/result?p=attractions) [](https://bundlephobia.com/result?p=attractions) [](https://open.vscode.dev/illright/attractions) A pretty cool UI kit for Svelte. Refer to the main documentation: ## Installation **Step 1.** Install the library with your favorite package manager: ```bash 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: ```bash 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](https://github.com/sveltejs/svelte-preprocess/blob/main/docs/usage.md)): ```js // 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! ```svelte click me ``` For more information on how to customize/theme your installation, see [the docs](https://illright.github.io/attractions/docs/theming). --- Alternatively, the library can be used from a CDN, such as [unpkg](https://unpkg.com/attractions), 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: ```html My button ``` For more details, check out [the docs](https://illright.github.io/attractions/docs/custom-elements). ## License This project is [MIT licensed](./LICENSE).