Getting started

Begin your journey with Kampsy-ui by following the quickstart guide to unlock the power of interactive Svelte 5 components, seamlessly integrated with Tailwind CSS.

Using SvelteKit

We recommend using SvelteKit , the official application framework from the Svelte team powered by Vite .

        
            
npx sv create my-app
        
    

After running the above command, you’ll be asked: Which template would you like? Select SvelteKit minimal and press Enter.

Next, you’ll see the prompt: Add type checking with Typescript? We recommend keeping the default option: Yes, using TypeScript syntax. Press Enter to confirm.

You will then see the question: What would you like to add to your project? Use the arrow keys to navigate, and the spacebar to select or deselect options. Choose the following: prettier , eslint , vitest , playwright , tailwindcss . Once you have made your selections, press Enter.

Tailwindcss plugins (optional): For the question: Tailwindcss: Which plugins would you like to add? Press Enter, as no plugins are needed.

Finally, you’ll be asked: Which package manager do you want to install dependencies with? The default option is pnpm, which we prefer. Press Enter to confirm.

Once the dependencies are installed, your SvelteKit project with Tailwindcss is ready! Navigate to your project directory cd my-app . From here, you can proceed to the next step.

install kampsy-ui

Run the following command to install kmapsy-ui:

        
            
pnpm i -D kampsy-ui@latest
        
    

Configuration

Update the tailwind.config.cjs file in your project’s root folder to inform the Tailwind CSS compiler where to locate the utility classes and configure Kampsy-ui's custom color palette, by using the config preset.

        
            
import kampsyUI from 'kampsy-ui/preset';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [kampsyUI]
}
        
    

If you prefer the classic Tailwind config options, you can use the extended defaults.

        
            
import kampsyUI from 'kampsy-ui/preset';

/** @type {import('tailwindcss').Config} */
export default {
  content: kampsyUI.content,
  presets: [kampsyUI],
  theme: {
    extend: {}
  },
  plugins: [],
}