Features

Skeleton is a fully featured UI toolkit that includes many awesome features, so let's compare the differences between each.

Tailwind Elements

Mix native HTML elements with Skeleton-provided utility classes. Automatically adapt to your Skeleton theme and extend with Tailwind utility classes.

  • Svelte is NOT required to use Tailwind Elements.
  • Do not require imports per each route page like components.
  • A Skeleton provided stylesheet must be imported in your project (ex: all.css, elements.css, buttons.css)
  • Can be paired with standard Tailwind utility classes.

Svelte Components

These are Svelte Components purpose built for the Skeleton library. They can include their own UI templates and scripted logic, and they can maintain their own state. These automatically update and adjust to your custom theme and provide unique props to update and adjust settings per component.

  • Svelte is required to use Svelte Components.
  • Each component must be imported into the route page where they are being used.
  • Include a series of props (properties) to customize settings and styles.
  • May include slot elements to insert content.
  • Typically include their own UI template.
  • Typically have their own built-in styling, which adapts to your theme.

Svelte Actions

Skeleton provides a set of unique Svelte Actions, also known as directives in other libraries. These provide "headless" script logic without inherent UI. Think of these as add-ons features, including copy to clipboard and applying image filters.

  • Svelte is required to use Svelte Actions.
  • Each action must be imported into the route page where they are being used.
  • Each action must be applied to elements, via the use:actionName="actionParams" method.
  • Do not contain UI template or styling.

Skeleton Utilities

Skeleton utilities are powerful features that mix and match Skeleton elements, components, actions, and more. These include complex features like dialogs and toast notifications. These may also require extra dependencies to fully operate.

  • Svelte is required to use most utilities.
  • Combination Skeleton elements, components, and actions.
  • May require external dependencies to operate.