Konsta UI & SvelteKit

Let's see how to use Konsta UI Svelte components with SvelteKit.

Create SvelteKit Project

First, create a SvelteKit project

Install Tailwind CSS

We can follow official Tailwind CSS for SvelteKit installation Guide

Install Konsta UI

Now in created SvelteKit project, we need to install Konsta UI:

npm i konsta

And in your tailwind.config.cjs file we should extend config with Konsta UI's config:

// import konstaConfig config
const konstaConfig = require('konsta/config');

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: ['./src/**/*.{html,js,svelte,ts}'],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  variants: {
    extend: {},
  plugins: [],

App Component

Now we need to setup main App component so we can set some global parameters (like theme).

We need to wrap whole app with App in the ./src/routes/_layout.svelte:

  import '../app.css';
  import { App } from 'konsta/svelte';

<App theme="ios">
  <slot />

Example Page

Now when everything is set up, we can use Konsta UI Svelte components in our SvelteKit pages.

For example, let's open src/routes/index.svelte and change it to the following:

  import {
  } from 'konsta/svelte';

  <Navbar title="My App" />

  <Block strong>
    <p>Here is your SvelteKit & Konsta UI app. Let's see what we have here.</p>
    <ListItem href="/about/" title="About" />
    <ListItem href="/form/" title="Form" />

  <Block strong class="flex space-x-4">
    <Button>Button 1</Button>
    <Button>Button 2</Button>

As a result we should see the following page:

Code licensed under MIT.
2022 © Konsta UI by nolimits4web.