Welcome to Sveltekit-UI

View on npm
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 stable and unlikely to have many breaking changes, though we continue improving the package as needs arise.

For easier building, check out the Contibase quick-start guide or the Contibase code generator . Contibase is also highly compatible with sveltekit-ui and is a great companion project.

Sample Usage

A clean setup is to create a Components folder. For each component, put create_some_example_manager() in a index.svelte.js file and the markup and styles 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 see further usage examples.

Visit Docs

All Docs

54 component definitions are ready to copy.

Contibase logo
Sponsored byContibase