Welcome to Sveltekit-UI

npm package at https://www.npmjs.com/package/sveltekit-ui

npm i sveltekit-ui

Quick start project with starter template (recommended)

npx create-sveltekit-ui-site my-project

Our components use svelte 5 Runes. We have taken an approach where components are mostly built in javascript to allow for control of your entire tree of components in one parent object that can then be passed down through all HTML and CSS components.

After a lot of work, these components are in a state that we are happy to release to the public and encourage people to use as of July 2025. You can also go to www.contibase.com/code_generator to help you build with sveltekit-ui. Contibase is also a very compatible project to use alongside sveltekit-ui.

svelte

<script>
  import {
    create_button_manager,
    Button,
    create_text_input_manager,
    TextInput,
    copy_to_clipboard,
  } from "sveltekit-ui"

  let manager = $state(null)

  function create_manager() {
    let text_input_manager = $state()
    let copy_button_manager = $state()

    function init() {
      text_input_manager = create_text_input_manager({
        placeholder: "some text here",
      })
      copy_button_manager = create_button_manager({
        text: "Copy Text",
        is_compressed: true,
        is_success_animation: true,
        on_click: () => copy_to_clipboard(text_input_manager?.val),
      })
    }

    init()

    return {
      get text_input_manager() {
        return text_input_manager
      },
      get copy_button_manager() {
        return copy_button_manager
      },
    }
  }

  manager = create_manager()
</script>

<div style="margin: 1rem; display: flex; gap: 1rem;">
  <TextInput manager={manager?.text_input_manager} />
  <Button manager={manager?.copy_button_manager} />
</div>

Explore the docs for details on each individual component

Questions? Email info@sveltekit-ui.com