open-index/open-npm huggingface dataset:
npm package: @sveltastic/components
Description: Fantastic svelte utilities, components
Author: Uday Vunnam
Latest version: 0.0.1

# @sveltastic/components

Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).

Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

## Developing

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

```bash
npm run dev

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

Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.

## Building

To build your library:

```bash
npm run package
```

To create a production version of your showcase app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

## Publishing

Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).

To publish your library to [npm](https://www.npmjs.com):

```bash
npm publish
```
npm package: @svelte-add/app-initializer-tools
Description: Tools for svelte-add's app initializers
Author: J / Jacob Babich
Latest version: 2024.4.9-0.0
Deprecated: Package no longer supported. Please use svelte-add instead.

<h1 align="center">➕ Svelte Add's app initializer tools</h1>

This package is internal to Svelte Add; you shouldn't ever install or interact with it directly. Return to [Svelte Add's documentation](https://github.com/svelte-add/svelte-add#readme) to see how to use Svelte Add.
npm package: @svelte-add/ast-manipulation
Description: This package provides tools and methods for manipulating CSS, HTML and JS AST's. This tool is mainly used by the main [svelte-add](https://svelte-add.com) project and therefore currently lacks proper documentation.
Latest version: 2.2.4
Deprecated: svelte-add has be merged together with create-svelte to become the Svelte CLI sv. The work continues in the sv repo over at https://github.com/sveltejs/cli

# @svelte-add/ast-manipulation

This package provides tools and methods for manipulating CSS, HTML and JS AST's. This tool is mainly used by the main [svelte-add](https://svelte-add.com) project and therefore currently lacks proper documentation.
npm package: @svelte-add/ast-tooling
Description: This package provides tools and methods for parsing and serializing CSS, HTML and JS AST's. As the main [svelte-add](https://svelte-add.com) project requires all of these tools they have been extracted into this separate project.
Latest version: 2.1.7
Deprecated: svelte-add has be merged together with create-svelte to become the Svelte CLI sv. The work continues in the sv repo over at https://github.com/sveltejs/cli

# @svelte-add/ast-tooling

This package provides tools and methods for parsing and serializing CSS, HTML and JS AST's. As the main [svelte-add](https://svelte-add.com) project requires all of these tools they have been extracted into this separate project.

Additionally this separate package allows us to bundle all (currently 8) required dependencies into on single package.
npm package: @svelte-add/bootstrap
Description: <p align="center">     <img src="https://svelte-add.com/adder/bootstrap/logo.svg" height="50" /> </p>
Latest version: 1.0.17
Deprecated: Package no longer supported. Please use npx svelte-add bootstrap


<p align="center">
    <img src="https://svelte-add.com/adder/bootstrap/logo.svg" height="50" />
</p>

# Bootstrap

> This is a adder for [svelte-add](https://svelte-add.com) and is used to add Bootstrap to your svelte/kit project.

You can find all options for this adder on [this site](https://svelte-add.com/adder/bootstrap). We will only provide a short breakdown of the adder features here.

Basic usage
```sh
npx @svelte-add/bootstrap@latest
```

In case you already have a directory in mind, you can use this:
```sh
npx @svelte-add/bootstrap@latest --path ./your-project
```


## Available options (adder-specific)

    
- `useSass` (default: false) - Do you want to use sass? (css = faster, sass = better customization)
- `addJavaScript` (default: false) - Do you want to add JavaScript (required for some components like dropdowns)?


Option syntax
```sh
npx @svelte-add/bootstrap@latest --key value
```

Specific example
```sh
npx @svelte-add/bootstrap@latest --useSass false
```

You can combine as many options as you want. The usage of options is optional. If you don't specify an option value via the command line, the CLI will ask you the questions interactively.



## Available options (common)

    
- `default` (default: false) - Installs default adder options for unspecified options
- `path` (default: ./) - Path to working directory
- `skip-preconditions` (default: false) - Skips validating preconditions before running the adder
- `skip-install` (default: false) - Skips installing dependencies after applying the adder


Option syntax
```sh
npx @svelte-add/bootstrap@latest --key value
```

Specific example
```sh
npx @svelte-add/bootstrap@latest --path ./
```

You can combine as many options as you want. The usage of options is optional. If you don't specify an option value via the command line, the CLI will ask you the questions interactively.
npm package: @svelte-add/bulma
Description: <p align="center">     <img src="https://svelte-add.com/adder/bulma/logo.svg" height="50" /> </p>
Latest version: 1.0.17
Deprecated: Package no longer supported. Please use npx svelte-add bulma


<p align="center">
    <img src="https://svelte-add.com/adder/bulma/logo.svg" height="50" />
</p>

# Bulma

> This is a adder for [svelte-add](https://svelte-add.com) and is used to add Bulma to your svelte/kit project.

You can find all options for this adder on [this site](https://svelte-add.com/adder/bulma). We will only provide a short breakdown of the adder features here.

Basic usage
```sh
npx @svelte-add/bulma@latest
```

In case you already have a directory in mind, you can use this:
```sh
npx @svelte-add/bulma@latest --path ./your-project
```


## Available options (adder-specific)

    
- `useSass` (default: false) - Do you want to use sass? (css = faster, sass = better customization)


Option syntax
```sh
npx @svelte-add/bulma@latest --key value
```

Specific example
```sh
npx @svelte-add/bulma@latest --useSass false
```

You can combine as many options as you want. The usage of options is optional. If you don't specify an option value via the command line, the CLI will ask you the questions interactively.



## Available options (common)

    
- `default` (default: false) - Installs default adder options for unspecified options
- `path` (default: ./) - Path to working directory
- `skip-preconditions` (default: false) - Skips validating preconditions before running the adder
- `skip-install` (default: false) - Skips installing dependencies after applying the adder


Option syntax
```sh
npx @svelte-add/bulma@latest --key value
```

Specific example
```sh
npx @svelte-add/bulma@latest --path ./
```

You can combine as many options as you want. The usage of options is optional. If you don't specify an option value via the command line, the CLI will ask you the questions interactively.
npm package: @svelte-add/core
Description: This is the core of [svelte-add](https://svelte-add.com). This package handles the following things (and a lot more)
Latest version: 2.10.4
Deprecated: svelte-add has be merged together with create-svelte to become the Svelte CLI sv. The work continues in the sv repo over at https://github.com/sveltejs/cli

# @svelte-add/core

This is the core of [svelte-add](https://svelte-add.com). This package handles the following things (and a lot more)

- ability to define new adders
- detecting and / or creating svelte / kit project in the current working directory
- installing new dependencies
- parsing and serialization of files modified by the adders
npm package: @svelte-add/create-kit
Description: Create a SvelteKit app with extra integrations
Author: J / Jacob Babich
Latest version: 2024.4.9-0.0
Deprecated: Package no longer supported. Please use svelte-add instead.

<h1 align="center">➕ Svelte Add's SvelteKit app initializer</h1>

This package provides Svelte Add's SvelteKit app initializer as a command line tool. See [Svelte Add's documentation for usage information](https://github.com/svelte-add/svelte-add#-creating-a-sveltekit-app-with-integrations).
npm package: @svelte-add/create-vite
Description: Create a Vite-powered Svelte app with extra integrations
Author: J / Jacob Babich
Latest version: 2024.4.9-0.0
Deprecated: Package no longer supported. Please use svelte-add instead.

<h1 align="center">➕ Svelte Add's Vite app initializer</h1>

This package provides Svelte Add's Vite app initializer as a command line tool. See [Svelte Add's documentation for usage information](https://github.com/svelte-add/svelte-add#%EF%B8%8F-creating-a-vite-powered-svelte-app-with-integrations).
npm package: @svelte-add/drizzle
Description: <p align="center">     <img src="https://svelte-add.com/adder/drizzle/logo.svg" height="50" /> </p>
Latest version: 1.0.8
Deprecated: Package no longer supported. Please use npx svelte-add drizzle


<p align="center">
    <img src="https://svelte-add.com/adder/drizzle/logo.svg" height="50" />
</p>

# Drizzle

> This is a adder for [svelte-add](https://svelte-add.com) and is used to add Drizzle to your svelte/kit project.

You can find all options for this adder on [this site](https://svelte-add.com/adder/drizzle). We will only provide a short breakdown of the adder features here.

Basic usage
```sh
npx @svelte-add/drizzle@latest
```

In case you already have a directory in mind, you can use this:
```sh
npx @svelte-add/drizzle@latest --path ./your-project
```


## Available options (adder-specific)

    
- `database` (default: sqlite) - Which database would you like to use?
- `postgresql` (default: undefined) - Which PostgreSQL client would you like to use?
- `mysql` (default: undefined) - Which MySQL client would you like to use?
- `sqlite` (default: undefined) - Which SQLite client would you like to use?
- `docker` (default: false) - Do you want to run the database locally with docker-compose?


Option syntax
```sh
npx @svelte-add/drizzle@latest --key value
```

Specific example
```sh
npx @svelte-add/drizzle@latest --database sqlite
```

You can combine as many options as you want. The usage of options is optional. If you don't specify an option value via the command line, the CLI will ask you the questions interactively.



## Available options (common)

    
- `default` (default: false) - Installs default adder options for unspecified options
- `path` (default: ./) - Path to working directory
- `skip-preconditions` (default: false) - Skips validating preconditions before running the adder
- `skip-install` (default: false) - Skips installing dependencies after applying the adder


Option syntax
```sh
npx @svelte-add/drizzle@latest --key value
```

Specific example
```sh
npx @svelte-add/drizzle@latest --path ./
```

You can combine as many options as you want. The usage of options is optional. If you don't specify an option value via the command line, the CLI will ask you the questions interactively.
npm package: @svelte-add/mdsvex
Description: <p align="center">     <img src="https://svelte-add.com/adder/mdsvex/logo.svg" height="50" /> </p>
Latest version: 1.0.17
Deprecated: Package no longer supported. Please use npx svelte-add mdsvex


<p align="center">
    <img src="https://svelte-add.com/adder/mdsvex/logo.svg" height="50" />
</p>

# mdsvex

> This is a adder for [svelte-add](https://svelte-add.com) and is used to add mdsvex to your svelte/kit project.

You can find all options for this adder on [this site](https://svelte-add.com/adder/mdsvex). We will only provide a short breakdown of the adder features here.

Basic usage
```sh
npx @svelte-add/mdsvex@latest
```

In case you already have a directory in mind, you can use this:
```sh
npx @svelte-add/mdsvex@latest --path ./your-project
```




## Available options (common)

    
- `default` (default: false) - Installs default adder options for unspecified options
- `path` (default: ./) - Path to working directory
- `skip-preconditions` (default: false) - Skips validating preconditions before running the adder
- `skip-install` (default: false) - Skips installing dependencies after applying the adder


Option syntax
```sh
npx @svelte-add/mdsvex@latest --key value
```

Specific example
```sh
npx @svelte-add/mdsvex@latest --path ./
```

You can combine as many options as you want. The usage of options is optional. If you don't specify an option value via the command line, the CLI will ask you the questions interactively.
npm package: @svelte-add/routify
Description: <p align="center">     <img src="https://svelte-add.com/adder/routify/logo.svg" height="50" /> </p>
Latest version: 1.0.17
Deprecated: Package no longer supported. Please use npx svelte-add routify


<p align="center">
    <img src="https://svelte-add.com/adder/routify/logo.svg" height="50" />
</p>

# routify

> This is a adder for [svelte-add](https://svelte-add.com) and is used to add routify to your svelte/kit project.

You can find all options for this adder on [this site](https://svelte-add.com/adder/routify). We will only provide a short breakdown of the adder features here.

Basic usage
```sh
npx @svelte-add/routify@latest
```

In case you already have a directory in mind, you can use this:
```sh
npx @svelte-add/routify@latest --path ./your-project
```




## Available options (common)

    
- `default` (default: false) - Installs default adder options for unspecified options
- `path` (default: ./) - Path to working directory
- `skip-preconditions` (default: false) - Skips validating preconditions before running the adder
- `skip-install` (default: false) - Skips installing dependencies after applying the adder


Option syntax
```sh
npx @svelte-add/routify@latest --key value
```

Specific example
```sh
npx @svelte-add/routify@latest --path ./
```

You can combine as many options as you want. The usage of options is optional. If you don't specify an option value via the command line, the CLI will ask you the questions interactively.
npm package: @svelte-add/storybook
Description: <p align="center">     <img src="https://svelte-add.com/adder/storybook/logo.svg" height="50" /> </p>
Latest version: 1.0.17
Deprecated: Package no longer supported. Please use npx svelte-add storybook


<p align="center">
    <img src="https://svelte-add.com/adder/storybook/logo.svg" height="50" />
</p>

# Storybook

> This is a adder for [svelte-add](https://svelte-add.com) and is used to add Storybook to your svelte/kit project.

You can find all options for this adder on [this site](https://svelte-add.com/adder/storybook). We will only provide a short breakdown of the adder features here.

Basic usage
```sh
npx @svelte-add/storybook@latest
```

In case you already have a directory in mind, you can use this:
```sh
npx @svelte-add/storybook@latest --path ./your-project
```




## Available options (common)

    
- `default` (default: false) - Installs default adder options for unspecified options
- `path` (default: ./) - Path to working directory
- `skip-preconditions` (default: false) - Skips validating preconditions before running the adder
- `skip-install` (default: false) - Skips installing dependencies after applying the adder


Option syntax
```sh
npx @svelte-add/storybook@latest --key value
```

Specific example
```sh
npx @svelte-add/storybook@latest --path ./
```

You can combine as many options as you want. The usage of options is optional. If you don't specify an option value via the command line, the CLI will ask you the questions interactively.
npm package: @svelte-add/tailwindcss
Description: <p align="center">     <img src="https://svelte-add.com/adder/tailwindcss/logo.svg" height="50" /> </p>
Latest version: 1.0.17
Deprecated: Package no longer supported. Please use npx svelte-add tailwindcss


<p align="center">
    <img src="https://svelte-add.com/adder/tailwindcss/logo.svg" height="50" />
</p>

# TailwindCSS

> This is a adder for [svelte-add](https://svelte-add.com) and is used to add TailwindCSS to your svelte/kit project.

You can find all options for this adder on [this site](https://svelte-add.com/adder/tailwindcss). We will only provide a short breakdown of the adder features here.

Basic usage
```sh
npx @svelte-add/tailwindcss@latest
```

In case you already have a directory in mind, you can use this:
```sh
npx @svelte-add/tailwindcss@latest --path ./your-project
```


## Available options (adder-specific)

    
- `typography` (default: false) - Do you want to use typography plugin?


Option syntax
```sh
npx @svelte-add/tailwindcss@latest --key value
```

Specific example
```sh
npx @svelte-add/tailwindcss@latest --typography false
```

You can combine as many options as you want. The usage of options is optional. If you don't specify an option value via the command line, the CLI will ask you the questions interactively.



## Available options (common)

    
- `default` (default: false) - Installs default adder options for unspecified options
- `path` (default: ./) - Path to working directory
- `skip-preconditions` (default: false) - Skips validating preconditions before running the adder
- `skip-install` (default: false) - Skips installing dependencies after applying the adder


Option syntax
```sh
npx @svelte-add/tailwindcss@latest --key value
```

Specific example
```sh
npx @svelte-add/tailwindcss@latest --path ./
```

You can combine as many options as you want. The usage of options is optional. If you don't specify an option value via the command line, the CLI will ask you the questions interactively.
npm package: @svelte-add/testing-library
Description: This package provides core tools for testing your adder for different environments and options. Currently we execute tests against 5 project templates:
Latest version: 2.1.17

# @svelte-add/testing-library

This package provides core tools for testing your adder for different environments and options. Currently we execute tests against 5 project templates:

- svelte-js
- svelte-ts
- kit-js
- kit-js-comments
- kit-ts

Additionally we will test your adder for each option combination that you specify.

Here is a sample usage example:

```js
// test.js

import { remoteControl } from '@svelte-add/core/internal';
import { testAdder } from '@svelte-add/testing-library';

remoteControl.enable();
/** @type {import('@svelte-add/core/adder/config').AdderWithoutExplicitArgs} */
const adder = /** @type {any} */ (await import('./index.js')).default;
remoteControl.disable();

testAdder(adder, {
	outputDirectory: './.outputs',
	headless: true,
	pauseExecutionAfterBrowser: false,
});
```
npm package: @svelte-add/threlte
Description: <p align="center">     <img src="https://svelte-add.com/adder/threlte/logo.svg" height="50" /> </p>
Latest version: 1.0.12
Deprecated: Package no longer supported. Please use npx svelte-add threlte


<p align="center">
    <img src="https://svelte-add.com/adder/threlte/logo.svg" height="50" />
</p>

# Threlte

> This is a adder for [svelte-add](https://svelte-add.com) and is used to add Threlte to your svelte/kit project.

You can find all options for this adder on [this site](https://svelte-add.com/adder/threlte). We will only provide a short breakdown of the adder features here.

Basic usage
```sh
npx @svelte-add/threlte@latest
```

In case you already have a directory in mind, you can use this:
```sh
npx @svelte-add/threlte@latest --path ./your-project
```


## Available options (adder-specific)

    
- `addDemo` (default: false) - Should we add a minimalistic demo?


Option syntax
```sh
npx @svelte-add/threlte@latest --key value
```

Specific example
```sh
npx @svelte-add/threlte@latest --addDemo false
```

You can combine as many options as you want. The usage of options is optional. If you don't specify an option value via the command line, the CLI will ask you the questions interactively.



## Available options (common)

    
- `default` (default: false) - Installs default adder options for unspecified options
- `path` (default: ./) - Path to working directory
- `skip-preconditions` (default: false) - Skips validating preconditions before running the adder
- `skip-install` (default: false) - Skips installing dependencies after applying the adder


Option syntax
```sh
npx @svelte-add/threlte@latest --key value
```

Specific example
```sh
npx @svelte-add/threlte@latest --path ./
```

You can combine as many options as you want. The usage of options is optional. If you don't specify an option value via the command line, the CLI will ask you the questions interactively.