Fundamentals

Skeleton is comprised of three pillars - the design system, Tailwind utilities, and framework-specific components. Together these form a comprehensive solution for designing and implementing implementing complex web interfaces at scale.

Design System

Figma UI Kit

A fully featured Figma UI Kit is available to designers, allowing them to quickly draft visual concept of your project.

Systems

A number of helpful design systems provided courtesy of the Skeleton Tailwind plugin.

Tailwind

Tailwind components that act as primitives for constructing complex interfaces. Provided courtesy of the Skeleton Tailwind plugin.

Components

Skeleton also offers optional component packages for the follow frameworks, automatically integrating Skeleton’s design system.

Powered by Zag.js

Skeleton’s components utilize Zag.js as their foundation, which provides a collection of framework-agnostic UI component patterns to manage logic and state.

Importing Component

Import the component you wish to use fom your framework package of choice, then insert it into your page template.

import { Avatar } from '@skeletonlabs/skeleton-{framework}';

<Avatar />

Component Props

Skeleton components properties (aka “props”) are loosely defined into the following categories:

• Functional Props - directly affect the functionality of the component, such as an open or src.
• Style Props - accept Tailwind utility classes to affect styling, such as background for background color.
• Event Props - callback functions that trigger upon interaction, such as onclick, onkeypress, and more.

In the example below, we set functional props for src and alt, while also including a style prop for background.

<Avatar src={someUrl} alt="Jane" background="bg-red-500" />

Style Props

Skeleton components are styled by default out of the box. However, if you wish to customize the look and feel, then you may do so utilizing Style Props. These fall into a few sub-categories.

• base - the default styles for each component template element, implemented by default.
• {property} - take individual utility classes to customize styling, such as background, padding, or margin.
• classes - allows you to pass any arbitrary utility classes and extend the class list. Note this is plural.

Imagine the Avatar component was created like so:

{
  src = './some-placeholder.jpg',
  alt = '',
  // ...
  base = 'flex justify-center items-center overflow-hidden',
  background = 'bg-slate-500'
  rounded = 'rounded-full',
  // ...
  classes = ''
}

<figure class="{base} {background} {size} {font} {border} {rounded} {shadow} {classes}">
  <img {src} alt={name} class="{imageBase} {imageClasses}" />
</figure>

We can use the background style prop to replace the default background color.

<Avatar background="bg-blue-500">Sk</Avatar>

Since the component doesn’t have a dedicated border prop, we can extend our class list using classses.

<Avatar classes="border-4 border-green-500">Sk</Avatar>

And we can optionally replace the default base styles like so. Just remember our other {property} styles will remain.

<Avatar base="flex justify-center items-center overflow-visible">Sk</Avatar>

Additionally, child elements within the template use these same conventions, but prefixed like imageBase and imageClasses.

<Avatar ... imageClasses="grayscale" />

Consult each component’s API reference for a complete list of available properties.

Learn More

For a comprehensive understanding of how Skeleton implements our components, please refer to our contribution guidelines.