Important
This UI kit is now deprecated. It's originally been built for Svelte 3, since then a lot has changed in the ecosystem. Namely, Svelte 5 came out with much better ergonomics for component libraries and a lot of other great projects popped up, like shadcn-svelte and Melt UI. Today you should use those projects instead.
Old README
A pretty cool UI kit for Svelte.
Refer to the main documentation: https://illright.github.io/attractions
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 attractionsStep 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 postcssStep 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.
This project is MIT licensed.
