Fundamentals

Skeleton is comprised of three modular pillars - the design system, Tailwind utilies, and components. These form a complete solution for designing and implementing interfaces within your application.

Design System

Figma UI Kit

Skeleton provides a powerful Figma UI Kit to assist your designers in drafting a visual concept of your project.

Core Concepts

Learn more about Skeleton’s functional design systems, provided by the Skeleton Tailwind plugin and theme system.

Tailwind

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

Components

Skeleton provides optional component packages for several popular UI frameworks. These provide support for complex and functional features, while supporting Skeleton’s design system out of the box.

Supported Frameworks

Adding a Component

Import the component you wish to use fom your framework package of choice.

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

Then insert the component reference in your project pages.

<Avatar />

Component Props

Skeleton component properties fall into several categories.

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

For our Avatar component we can set both src and alt components.

<Avatar src={someUrl} alt="janedoe" />

Style Props

By default most Skeleton components come with a set of default styles out of the box. However, if you wish to customize the look and feel, then you may do so using Style Props. These fall into a few categories.

• base - provides the general structure and styling for the element within the component’s template.
• {property} - take individual utility classes to customize styling, such as background, padding, or margin.
• classes - allows you to pass any arbitrary utility classes to extend the class list.

Property styles are the most common. We use can a background style prop to affect the Avatar’s background color:

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

We can use classes to extend and add new additional styles not available by default.

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

Finally, we can use base to reset and add our own styles from the ground up. This provides a faux-headless approach.

<Avatar base="overflow-visible">Sk</Avatar>

If you need to reach deeper into the component template, consult each component’s API. Most components offer prefixed style classes to affect nested elements, such as imageBase and imageClasses.

<Avatar src={someUrl} imageClasses="grayscale" />

Going Further

For more complex customization, please refer to our Component contribution guidelines.