Sveltekit-UI

Not currently available for public Use

As of January, 2025, I have been working on these components for a few years one by one. As a perfectionist I am frequently making breaking changes.

I have made some basic docs so far but currently still have the package set to private on npm but may release a public version in the coming months or make it available to www.contibase.com users only. tbd.

Each component can be combined into a more complex component. This is intended for sveltekit projects. The whole "tree" of docs should be initialized at the parent-most level which is likely in the <script> tags of a +page.svelte file. For a .svelte page or custom component you might combine components in a way such as the following:


svelte

<script>
  import {
    create_button_manager,
    Button,
    create_text_input_manager,
    TextInput,
    copy_to_clipboard,
  } from "@upppllc/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