Getting started

Get started with Kampsy-ui by following the quickstart guide and unlock the power of interactive Svelte 5 components integrated with Tailwind CSS.

Using SvelteKit

You can install SvelteKit or Svelte to start your app. For SvelteKit

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

Using Svelte

If you want to get started with Svelte:

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

Install Tailwind CSS

The easiest and fastest way to start using Tailwind CSS from scratch is to visit their website and follow the framework-specific installation guide.

install kampsy-ui

Run the following command to install kmapsy-ui:

        
            
pnpm i -D kampsy-ui
        
    

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.

        
            
/** @type {import('tailwindcss').Config} */
import { CustomColors } from 'kampsy-ui'

export default {
  darkMode: 'selector',
  content: ['./src/**/*.{html,js,svelte,ts}',
    './node_modules/kampsy-ui/dist/**/*.{html,js,svelte,ts}'
  ],
  theme: {
    extend: {
      colors: {
        ...CustomColors
      }
    },
  },
  plugins: [],
}