Installation

Install the theui-svelte component library in your project or start a new project with the boilerplate template. Install it to build fast and deliver faster.

Installation

Follow one of the two methods to install the component library:

  1. Github boilerplate.
  2. Manually installation.

Use Github Boilerplate

To install the boilerplate template, open your terminal and use the following command, replacing my-app with your desired project name.

Clone from Github 
# Clone the project
git clone https://github.com/mbparvezme/theui-svelte-boilerplate.git my-app
# Navigate to the project directory
cd my-app
# Install node modules
npm install
# Run the application
npm run dev

Manual Installation

Easily add theui-svelte to your project via a GitHub boilerplate or manual installation. For manual setup:

  • Install Sveltekit with TailwindCSS and theui-svelte
  • Configure Tailwind by updating tailwind.config.cjs and importing theui-svelte/style in +layout.svelte.

2.1 Install

Install SvelteKit 
# Install Sveltekit
# Skip this step if you have already installed
npx sv create my-app
cd my-app
# Install node modules
npm install

# Install theui-svelte
npm install theui-svelte

2.2 Configuration

To integrate theui-svelte with your project, update your TailwindCSS configuration file by adding the following:

  • Include the path to theui-svelte components ./node_modules/theui-svelte/**/*.{html,js,svelte,ts} in the content array.
  • Add the preset presets: [require("theui-svelte/preset")] from theui-svelte.
tailwind.config.cjs 
const config = {
    content: [
        "./src/**/*.{html,js,svelte,ts}",
+       "./node_modules/theui-svelte/**/*.{html,js,svelte,ts}"
    ],
+   presets: [require("theui-svelte/preset")],
    darkMode: "class",
    theme: {
        extend: {}
    },
    plugins: []
};

And thats all. You are all set and ready to start your awesome project now. Now run your application with the following command:

Install SvelteKit 
# Run SvelteKit project
npm run dev