Attractions

Frontend Engineer

UI Designer

Sass

Svelte

Attractions

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.

Partner With Abdelrahman

View Services

More Projects by Abdelrahman

Cast

Combines the backend and frontend repos, with CD to deploy them…

How it Works

Contra For Independents Contra For Hiring Success Stories Commission-Free

Company

Mission Careers Newsroom

Resources

FAQ Tips & Guides Hire Support

Dіscover Freelancers

Design Engineering Marketing Music & Audio Social Media Video & Animation Writing

Drops

Freelance Industry Report

Social

Terms & Conditions Privacy Policy Cookie Policy