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.

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 spacebar to select or deselect options. Choose the following: prettier , eslint , vitest , playwright, tailwindcss .

SvelteKit now includes Tailwind CSS 4 by default, which uses a simpler configuration approach. Press enter to confirm

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

Finally, you’ll be asked: Which package manager do you want to install dependencies with? Choose pnpm, as it is preferred. 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.

Run the following command to install kmapsy-ui:

        
            
            
pnpm i -D kampsy-ui@latest

        
    

Add the following to your layout.css file.

        
            
            
@import "kampsy-ui/theme.css";

@source "../../node_modules/kampsy-ui/dist";