Features

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

Tailwind

These features require Tailwind to operate.

Design Tokens

Provides a set of utility classes based on your theme CSS custom property settings.

  • A stylesheet must be imported (ex: all.css, tokens.css)
  • Can be paired with Tailwind utility classes.

Base Classes

Apply default global styles, such as body, scrolling, and typography settings.

  • A stylesheet must be imported (ex: all.css, core.css)

Elements

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

  • Use Design Tokens for default style settings.
  • A stylesheet must be imported (ex: all.css, elements.css, buttons.css, etc.)
  • Can be paired with Tailwind utility classes.

Svelte

These features require Svelte to operate.

Actions

Skeleton provides a set of unique Svelte Actions, also known as directives in other libraries. These provide "headless" script logic without inherent UI. These include features such as copy to clipboard, image filters, and focus capture.

  • Each must be imported to use.
  • Applied via use:action="params" method.
  • May not contain a visual UI, just pure logic.

Components

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

  • Each must be imported to use.
  • Include props (properties) to customize settings and styles.
  • May include slot elements to insert content.
  • Include UI and styling, which adapts to your theme.

Skeleton Utilities

Skeleton utilities are complex features that combine various Skeleton features. These are powerful features such as modals, code blocks, and more.

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