Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain.Learn More →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

attractions

Package Overview
Dependencies
Maintainers
2
Versions
24
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

attractions

A UI kit for Svelte

latest
Source
npmnpm
Version
3.7.2
Version published
Weekly downloads
195
14.04%
Maintainers
2
Weekly downloads
 
Created
Source
Logo

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.

Keywords

svelte
ui

FAQs

Package last updated on 01 Mar 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

PEP 810 Proposes Explicit Lazy Imports for Python 3.15

Security News

PEP 810 Proposes Explicit Lazy Imports for Python 3.15

An opt-in lazy import keyword aims to speed up Python startups, especially CLIs, without the ecosystem-wide risks that sank PEP 690.

By Sarah Gooding  -  Oct 04, 2025