an opinionated and clean UI framework for SvelteKit with theme support built-in

Usage no npm install needed!

<script type="module">
  import sorensArtistSvelte from 'https://cdn.skypack.dev/@sorens/artist-svelte';


Artist for Svelte

An opinionated and clean UI framework for SvelteKit

⚠️🚧👷‍♂️⛑️ please note that this package is still in early development stages and APIs might change in the future

license npm latest package npm downloads npm bundle size Code Inspector Code Quality Code Inspector Code Grade Maintainability codecov Testing code structures publishing to NPM FOSSA Status


The easiest way to start with Artist UI is cloning our getting-started template via degit utility

# create a new project in the current directory
npx degit sorenabedi/artist-svelte/examples/getting-started

# create a new project in my-app
npx degit sorenabedi/artist-svelte/examples/getting-started my-app

Once you've created a project and installed dependencies with pnpm install ( or yarn install or npm ), start a development server:

pnpm run dev

# or start the server and open the app in a new browser tab
pnpm run dev -- --open

and rou are all set!

Bootstrapping From Scratch

Bootstrapping a project with Artist UI and svelteKit can be done in Four simple steps:

  • Step 1 - Installing SvelteKit

    If you already have a SvelteKit project, then skip to Step 2. For more information about this step, please refer to the official SvelteKit Documentation

    Initializing a fresh SvelteKit project :

    npm init svelte@next aui-svelte
    cd aui-svelte
    pnpm install
    pnpm run dev -- --open
  • Step 2 - Installing Artist UI

    Installing the Artist UI package with the required dependencies:

    # PNPM (recommended)
    pnpm add -D @sorens/artist-svelte dotenv
    # YARN
    yarn add -D @sorens/artist-svelte dotenv
    # NPM
    npm install @sorens/artist-svelte dotenv --save-dev
  • Step 3 - SvelteKit Configuration

    Since Artist UI intends to be compatible with Webpack, dotenv package is required for svelteKit's default bundler (ViteJs), as well as configuring the svelte-preprocess to replace process.env.* and process.env[*] to prevent ViteJs from throwing errors.

    Create svelte.config.js file in root directory of your project (if not already exists) with the following structures.

    / project_root/svelte.config.js
    import preprocess from 'svelte-preprocess';
    import dotEnv from 'dotenv';
    /** @type {import('@sveltejs/kit').Config} */
    const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess({
      replace: [
           [/process.env['NODE_ENV']/g, () => `import.meta.env.MODE`],
           [/"process.env.NODE_ENV"/g, () => `import.meta.env.MODE`],
           [/process.env['(w+)']/g, (_, match) => JSON.stringify(process.env[match])],
           [/process.env.(w+)/g, (_, match) => JSON.stringify(process.env[match])]
    kit: {
      // hydrate the <div id="svelte"> element in src/app.html
      target: '#svelte'
    export default config;
  • Step 4 - Importing Styles

    Create a __layout.svelte in src/routes folder (if not already exists) with a global style tag with lang attribute set to scss.

    <!-- project_root/src/routes/__layout.svelte -->
    <slot />
    <style global>
      /* Artist UI global styles (required) */
      /* Normalize css (optional) */
      @import '../../node_modules/@sorens/artist-svelte/css/GlobalStyles.css';
      @import '../../node_modules/@sorens/artist-svelte/css/Normalize.css';
      /* Any other global styles that you might need, goes here. e.g: */
      body {
          margin: 0;
          padding: 0;
          font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
              Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
              'Noto Color Emoji', Vazir;
      html {
          background-color: hsl(var(--bg-color));
          color: hsl(var(--fg-color));
          transition: color 0.3s, background-color 0.3s;
      ::-webkit-scrollbar {
          width: 5px;
          height: 5px;
          display: block;
          background: hsl(var(--bg-color));
      ::-webkit-scrollbar-thumb {
          background: hsl(var(--fg-color));
          border-radius: 5px;

Component Usage

All components are exported directly from package root scope, e.g:

<script lang="ts">
    import { Checkbox, Button } from '@sorens/artist-svelte';

<button variant="fill" color="primary">Accept</button>
<Checkbox color="danger" on:change="()=>console.log('changed')">some text</Checkbox>


FOSSA Status