Fundamentals

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

Design System

Explore each pillar of the Skeleton design system. Provided via the Skeleton core.

Tailwind Components

Tailwind components that act as primitives for creating complex interfaces. Provided via the Skeleton core.

Framework Components

Skeleton also offers optional component packages for select component frameworks. Each component automatically adapts to Skeleton’s design system. While still allowing a high level of customization.

Supported Frameworks

Powered by Zag.js

Skeleton’s components are built on Zag.js, which provides a collection of framework-agnostic UI component patterns to manage logic and state. Zag is actively maintained by industry veterans, such as Segun Adebayo - the creator and core maintainer for Chakra UI , Ark UI , and PandaCSS .

Importing Components

You may import components per each Skeleton framework as follows.

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

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

This also includes access to the component prop types.

import type { AvatarRootProps, ... } from '@skeletonlabs/skeleton-react';

import type { AvatarRootProps, ... } from '@skeletonlabs/skeleton-svelte';

Composed Pattern

export default function Avatar() {
	return (
		<Avatar>
			<Avatar.Image src="https://i.pravatar.cc/150?img=48" />
			<Avatar.Fallback>SK</Avatar.Fallback>
		</Avatar>
	);
}

<Avatar>
	<Avatar.Image src="https://i.pravatar.cc/150?img=48" />
	<Avatar.Fallback>SK</Avatar.Fallback>
</Avatar>

Styling Components

export default function Avatar() {
	return (
		<Avatar className="rounded-2xl">
			<Avatar.Image src="https://i.pravatar.cc/150?img=48" className="grayscale" />
			<Avatar.Fallback>SK</Avatar.Fallback>
		</Avatar>
	);
}

<Avatar class="rounded-2xl">
	<Avatar.Image src="https://i.pravatar.cc/150?img=48" class="greyscale" />
	<Avatar.Fallback>SK</Avatar.Fallback>
</Avatar>

Extensible Markup

Skeleton components provide a mechanism for overwriting the internal HTML with custom markup. Use the element prop to provide a custom element, this prop accepts a function which the attributes are passed into. Then spread the attributes to your custom elements. Note that this is an optional and advanced feature aimed at power users, and should not be needed for normal usage.

export default function () {
	return (
		<Accordion>
			<Accordion.Item value="item-1">
				<h3>
					<Accordion.ItemTrigger element={(attributes) => <button {...attributes}>My Own Button</button>} />
				</h3>
				<Accordion.ItemContent>Content for Item 1</Accordion.ItemContent>
			</Accordion.Item>
		</Accordion>
	);
}

<Accordion>
	<Accordion.Item value="item-1">
		<h3>
			<Accordion.ItemTrigger>
				{#snippet element(attributes)}
					<button {...attributes}>My Own Button</button>
				{/snippet}
			</Accordion.ItemTrigger>
		</h3>
		<Accordion.ItemContent>Content for Item 1</Accordion.ItemContent>
	</Accordion.Item>
</Accordion>

Custom Animations

import { Accordion } from '@skeletonlabs/skeleton-react';
import { motion, AnimatePresence } from 'motion/react';

export default function CustomAnimation() {
	return (
		<Accordion>
			{['1', '2', '3'].map((item) => (
				<Accordion.Item key={item} value={item}>
					<h3>
						<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
					</h3>
					<Accordion.ItemContent
						element={(attributes) => (
							<AnimatePresence initial={false}>
								{!attributes.hidden && (
									<motion.div
										className="overflow-hidden"
										initial={{ height: 0, opacity: 0 }}
										animate={{ height: 'auto', opacity: 1 }}
										exit={{ height: 0, opacity: 0 }}
									>
										<div {...attributes}>Content for item {item}</div>
									</motion.div>
								)}
							</AnimatePresence>
						)}
					/>
				</Accordion.Item>
			))}
		</Accordion>
	);
}

<script lang="ts">
	import { Accordion } from '@skeletonlabs/skeleton-svelte';
	import { slide } from 'svelte/transition';
</script>

<Accordion>
	{#each ['1', '2', '3'] as item (item)}
		<Accordion.Item value="item-{item}">
			<h3>
				<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
			</h3>
			<Accordion.ItemContent>
				{#snippet element(attributes)}
					{#if !attributes.hidden}
						<div {...attributes} transition:slide>Content for item {item}</div>
					{/if}
				{/snippet}
			</Accordion.ItemContent>
		</Accordion.Item>
	{/each}
</Accordion>

Data Model Pattern

Skeleton components maintain a uniform pattern for handling data flow in and out. We lean into the Zag convention for this, which handles this explictly with a prop for data in and event handler for data out. As opposed to two-way binding (such as bind: in Svelte). You can see this in practice below for the Switch component.

import { Switch } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

export default function Default() {
	const [checked, setChecked] = useState(false);

    return (
    	<Switch checked={checked} onCheckedChange={(e) => setChecked(e.checked)}>
    		<Switch.Control>
    			<Switch.Thumb />
    		</Switch.Control>
    		<Switch.Label>Label</Switch.Label>
    		<Switch.HiddenInput />
    	</Switch>
    );

}

<script lang="ts">
	import { Switch } from '@skeletonlabs/skeleton-svelte';
	let checked = $state(false);
</script>

<Switch checked={checked} onCheckedChange={(e) => (checked = e.checked)}>
	<Switch.Control>
		<Switch.Thumb />
	</Switch.Control>
	<Switch.Label>Label</Switch.Label>
	<Switch.HiddenInput />
</Switch>

In this example the Switch component uses checked to pass state in, and onCheckedChange to listen and update then the state is modified internally. Please note the prop, event prop, and key within the event payload may vary from component to component. For example:

• <Accordion> - handled via open / onOpenChange / e.change
• <Slider> - handled via value / onValueChange / e.value
• <Stepper> - handled via step / onStepChange / e.step

This pattern is utilized for all relevant components, and is documented via the API Reference table per component.

Provider Pattern

Most Skeleton components also support the Provider Pattern. This utilizes a provider component that replaces the root and provides access to the underlying component APIs. In practice, this allows direct access to Zag.js API features, such as programmatic control for overlay components, the ability to clear input components, and more.

import { Portal, Tooltip, useTooltip } from '@skeletonlabs/skeleton-react';

export default function TooltipExample() {
	const tooltip = useTooltip();

	return (
		<>
			<button type="button" onClick={() => tooltip.setOpen(!tooltip.open)}>
				Trigger
			</button>

			<Tooltip.Provider value={tooltip}>
				<Tooltip.Trigger>Anchor</Tooltip.Trigger>
				<Portal>
					<Tooltip.Positioner>
						<Tooltip.Content>Content</Tooltip.Content>
					</Tooltip.Positioner>
				</Portal>
			</Tooltip.Provider>
		</>
	);
}

<script lang="ts">
	import { Portal, Tooltip, useTooltip } from '@skeletonlabs/skeleton-svelte';

	const id = $props.id();
	const tooltip = useTooltip({ id });
</script>

<button type="button" onclick={() => tooltip().setOpen(!tooltip().open)}>Trigger</button>

<Tooltip.Provider value={tooltip}>
	<Tooltip.Trigger>Anchor</Tooltip.Trigger>
	<Portal>
		<Tooltip.Positioner>
			<Tooltip.Content>Content</Tooltip.Content>
		</Tooltip.Positioner>
	</Portal>
</Tooltip.Provider>

Learn More

For a comprehensive guide to how Skeleton implements components, refer to our contribution guidelines .