Usage

Components and Utilities

All of the components and utility functions can be imported directly from bubbles-ui. The only caveat is a global css module that you'll want to import either in a global __layout.svelte file or reference in the root app.html which is imported from bubbles-ui/css/app.css.

There is a current limitation with svelte kit that the goto function from app/navigation cannot be bundled into the UI Kit. You will need to pass a reference to this function to the configStore.

Default Config

You can import a store called configStore into your initial __layout.svelte file to set some default behaviors for Bubbles. You can view the table below for all of the default options:

Performance

Bubbles is build specifically for Svelte Kit. This means that it installs as a dev dependency and will not include any components you don't use after your build step.

<script>
  // __layout.svelte

  // First import the global css styles
  import "bubbles-ui/css/app.css";

  // Import config store to update defaults
  import { configStore } from "bubbles-ui";

  // When you include validation for inputs bubbles can
  // validate each input when the input focus is lost. The
  // default for this is false
  $configStore.validate_on_blur = true;

  // If something is marked as required as one of the
  // validation requirements you can have bubbles add a "*"
  // to the end of the input label. This is better UX for
  // required fields. The default for this is true

  // How long to delay a toast notification before it
  // automatically hides in milliseconds
  $configStore.toast_delay = 5500;

  // How long to show input error states until it goes
  // back to it's normal form
  $configStore.error_delay = 4500;

  // We'll let you know if there are any issues with the
  // Bubbles library
  $configStore.debug = true;

  // Compact will reduce padding everywhere for more information density
  $configStore.padding = "roomy"; //or compact

  // Blocky will reduce the radius on elements. Plays nicely with "compact" padding
  $configStore.radius = "rounded"; //or blocky

  // The max width for the content in pixels.
  $configStore.max_content_width = 1200;
</script>