Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/illright/attractions
A pretty cool UI kit for Svelte
https://github.com/illright/attractions
svelte ui-kit
Last synced: 3 months ago
JSON representation
A pretty cool UI kit for Svelte
- Host: GitHub
- URL: https://github.com/illright/attractions
- Owner: illright
- License: mit
- Created: 2020-04-17T20:48:30.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-09-27T13:38:59.000Z (5 months ago)
- Last Synced: 2024-11-20T01:45:26.551Z (3 months ago)
- Topics: svelte, ui-kit
- Language: Svelte
- Homepage: https://illright.github.io/attractions
- Size: 3.68 MB
- Stars: 1,048
- Watchers: 12
- Forks: 35
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-svelte - attractions - A pretty cool and modern UI kit. _(pre-v5)_ (UI Libraries / Mobile)
- awesome-starred - illright/attractions - A pretty cool UI kit for Svelte (svelte)
README
# Attractions
> [!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](https://www.shadcn-svelte.com/) and [Melt UI](https://www.melt-ui.com/). Today you should use those projects instead.Old README
[](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
import { Button } from 'attractions';
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).