Sveltekit-UI

Welcome to Sveltekit-UI

View on npm

Link Preview

View on npm

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

Install using:

npm i sveltekit-ui

Quick start with our recommended starter template:

npx create-sveltekit-ui-site my-project

Our components use Svelte 5 and are primarily built in JavaScript. This architecture gives you complete control over your component tree via a single parent object, which you can pass down through your HTML components as needed.

As of late 2025 the components are in pretty good shape and likely won't have many extreme changes, though, we are constantly improving the package as things come up.

For easier building, check out the contibase code generator

Link Preview

contibase code generator

https://www.contibase.com/code_generator

. Contibase is also highly compatible with sveltekit-ui and is a great companion project.

Sample Usage

A clean setup is to make a Components folder and when you make a component put the create_some_example_manager() in a +index.svelte.js file and put the HTML/CSS in an index.svelte file.

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 documentation to learn more about each component and for further usage examples.

Questions? Email info@sveltekit-ui.com

icon
Sponsored byContibase