documentation

Let's install.

Follow this guide to install the SanS UI library and ensure your environment is ready to use the library effectively.

Before you install #

Before adding SanS UI to your project, ensure it’s based on either Svelte or SvelteKit . If you haven’t initialized a Svelte project yet, follow the steps below.

For Svelte Kit #

To initialize a SvelteKit project, use the following commands. You can also refer to the official SvelteKit documentation for more details on getting started.

npm create svelte@latest my-app
cd my-app

For Svelte (Not recommended) #

To initialize a Svelte project, use the following commands. Alternatively, you can refer to the official Svelte documentation . However, it is recommended to use SvelteKit when you start building a new Svelte application.

npm create vite@latest myapp -- --template svelte
cd myapp

Configure TailwindCSS #

SanS UI is built using Tailwind CSS , so you’ll need to install it first. Please refer to the official Tailwind CSS installation guide for instructions.

Once TailwindCSS is configured, you need to add the following code to your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
export default {
	content: [
		// ...
		// TODO: Make sure it's pointing to the ROOT node_module
		'./node_modules/sans-ui/**/*.{svelte,ts}'
	]
	// ...
};

Install SanS UI #

After setting up Tailwind CSS, let’s install SanS UI using the appropriate command for your package manager:

# For NPM
npm install @sans-ui/core

# For YARN
yarn add @sans-ui/core

# For PNPM
pnpm install @sans-ui/core

You are ready! #

You’ve successfully installed SanS UI! Now, check out the Button component as an example to get started with using SanS UI components.