` in this example. 3. Override the `hidden` attribute to `false` to prevent it from showing/hiding the element too soon. 4. Add the `transition:slide` and configure your preferred options. 5. Then implement the wrapping `#if` block that triggers transitions when `attribute.hidden` is toggled. ### Provider Pattern Most Skeleton components also support the Provider Pattern. This utilizes a provider component that replaces the root, and provides access to the inner 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. ```svelte Anchor Content ``` ### Learn More For a comprehensive guide to how Skeleton implements components, refer to our [contribution guidelines](/docs/resources/contribute/components). --- # Installation Learn how to install and setup Skeleton for your project. ## Mixing UI Libraries Skeleton's design system is perfect for complementing headless component libraries, such as [Bits UI](/docs/headless/bits-ui), [Melt UI](/docs/headless/melt-ui), [Radix](/docs/headless/radix-ui), and [Zag.js](https://zagjs.com/). As well as "Tailwind component" libraries such as the [Tailwind Plus](https://tailwindcss.com/plus). Supporting any component system that supports Tailwind, but very specifically allows you to insert or substitute Skeleton-provided utility classes. ### Unsupported Libraries Unfortunately, Skeleton cannot integrate with [Flowbite React](https://flowbite-react.com/), [Flowbite Svelte](https://flowbite-svelte.com/), or [Daisy UI](https://daisyui.com/) at this time. Similar to Skeleton, these libraries make changes to Tailwind that directly overlaps with many of our core features, including class names and color values. --- # Introduction Skeleton integrates with Tailwind to provide an opinionated solution for generating adaptive design systems. Including easy to use components for your favorite web frameworks. ## Alternatives If you need finer grain control, consider Skeleton's integration guides for [Floating UI](https://floating-ui.com/). - [React Popovers](/docs/integrations/popover/react) - powered by Floating UI React. - [Svelte Popovers](/docs/integrations/popover/svelte) - powered by Floating UI Svelte. --- # Dynamic Theme Loading Load skeleton themes on demand. ## About Themes The most common way to load skeleton themes is by importing them in your root stylesheet. ```css title="app/globals.css" @import 'tailwindcss'; @import '@skeletonlabs/skeleton'; @import '@skeletonlabs/skeleton/themes/cerberus'; @import '@skeletonlabs/skeleton/themes/catppuccin'; ``` ```css title="src/app.css" @import 'tailwindcss'; @import '@skeletonlabs/skeleton'; @import '@skeletonlabs/skeleton/themes/cerberus'; @import '@skeletonlabs/skeleton/themes/catppuccin'; ``` This will bundle your themes when you build your application, for that reason you should only import the themes you need because they will increase your CSS bundle size. While this is sufficient for most applications this might not be flexible enough for your needs, you may want themes to be user specific, editable, organization specific and so on, since skeleton themes are just CSS variables there are many ways you can load themes on demand, read further to see how. ## Creating Stylesheets on layout load This approach assumes the CSS variables of the skeleton theme you want is available during the load function (eg: on your database or in memory). In this example we will add a default theme that that can be used as a fallback. ```css title="app/globals.css" @import 'tailwindcss'; @import '@skeletonlabs/skeleton'; @import './default.css'; ``` ```css title="src/app.css" @import 'tailwindcss'; @import '@skeletonlabs/skeleton'; @import './default.css'; ``` ```css title="app/default.css" [data-theme='default'] { /* ... */ } ``` ```css title="src/default.css" [data-theme='default'] { /* ... */ } ``` To load your themes we will utilize the [NextJS `getServerSideProps` function](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props) function in combination with [Head component](https://nextjs.org/docs/pages/api-reference/components/head): ```tsx title="app/layout.tsx" import Head from 'next/head'; import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'; const getThemes = async () => { return [ { name: 'theme-1', css: `[data-theme='theme-1'] { /* ... */ }` }, { name: 'theme-2', css: `[data-theme='theme-2'] { /* ... */ }` } ]; }; export const getServerSideProps = (async () => { const themes = getThemes(); return { props: { themes: ['default', ...themes.map((t) => t.name)], css: themes.map((theme) => theme.css).join('\n\n') } }; }) satisfies GetServerSideProps<{ repo: Repo }>; export default function Page({ repo }: InferGetServerSidePropsType) { return ( <> `} ``` > ⚠️ _Important_ make sure you sanitize the CSS before inserting it or you'll be vulnerable to CSS injection. After doing so you should be able to toggle themes on demand by changing the `data-theme` attribute on the `html` tag. Note that there are multiple ways to go about this problem, another way could be to generate CSS files with the same content as the one in this example and then load only the css files you want, while this is more complex than storing and retrieving themes as JSON on a database this approach could benefit from the browser caching mechanism. --- # Floating UI Attachments A Svelte-focused guide around integrating Floating UI and Svelte attachments. Please note that this is a Svelte-only guide based around the [attachments](https://svelte.dev/docs/svelte/svelte-attachments) feature introduced in Svelte `v5.29`. ### Summary The following will guide you through integrating [Floating UI](https://floating-ui.com/) in Svelte and generating a baseline [attachment](https://svelte.dev/docs/svelte/svelte-attachments) that can be used to scaffold any number of custom popover interfaces, including but not limited to: popovers, tooltips, dialogs, drawers, combobox, context menus, and more. ### Accessibility Warning This guide is not a drop-in replacement for Skeleton's [Svelte Popovers](/docs/integrations/popover/svelte) as it does not replicate all recommended accessbility features out of the box (such as ARIA attributes, focus states, keyboard interactions, etc). These features are out of scope of this guide. It will be your responsibility to handle these features before using this in a production environment. ### Target Audience This guide is intended for advanced Svelte users that wish to integrate directly with Floating UI, build custom floating interfaces, and go beyond the scope of Skeleton's [Svelte Popovers](/docs/integrations/popover/svelte). This can be used to generate interfaces not covered by Skeleton's Popover components. ## Installing Floating UI To begin, install the standard version of Floating UI. ```console npm install @floating-ui/dom ``` If this is your first time using Floating UI, we recommend following the [guided tutorial](https://floating-ui.com/docs/tutorial) to learn the basics. ## Creating a Svelte Attachment Next, let's generate our custom attachment. If you're working with SvelteKit, we recommend adding this to `/src/lib/attachments/floating.svelte.ts`.



This attachment will handle the following critical functionality:

1. This imports the Svelte attachment and Floating UI dependencies.
2. Scaffolds a simple `PopoverOptions` interface, which defines our configuraton options.
3. Implement the `Popover` class, which handles all the business logic for creating and using the attachment.
4. And of course sets the default configuration via `options`.

We'll cover each additional method below.

### reference()

When implemented, this is spread to the **Trigger** element and handles interaction such as `click` and `hover`.

### floating()

When implemented, this is spread to the **Popover** element itself. This uses [createAttachmentKey](https://svelte.dev/docs/svelte/svelte-attachments#createAttachmentKey) to generate the attachment relationship itself.

### isOpen()

Returns the current `open` state as a boolean value. We'll use this to show and hide the popover on demand.

### #updatePosition()

This scaffolds [computePosition](https://floating-ui.com/docs/computePosition), which handles most of Floating UI's functionality.

## Making the Tooltip Float

Floating UI [requires these CSS styles](https://floating-ui.com/docs/tutorial#making-the-tooltip-float) to ensure the popover element "floats" over other UI. For this guide we'll handle this with a convention by adding the following your to global stylesheet. For SvelteKit this is located in `/src/app.css`.

```css
[data-floating] {
	width: max-content;
	position: absolute;
	top: 0;
	left: 0;
}
```

## Usage

### Popover

Add the following to any page within your application to generate a basic popover.



1. First, import the Popover attachment and generate an instance using `new Popover()`.
2. Next, create a wrapping `` to ensure your popover is not affected by the flow of the document.
3. Add your trigger button and spread the `popover.reference()`
4. Add your popover element and spread the `popover.floating()`
5. Apply `data-floating` to the popover element.
6. Wrap the popover element with `#if popover.isOpen()` to show/hide the popover.

> TIP: you can optionally import a [Svelte transition](https://svelte.dev/docs/svelte/svelte-transition), such as `slide`. Then use this to trigger animations on the open/close state for the popover.

### Tooltip

Add the following to any page within your application to generate a basic tooltip.



1. Similar to the Popover - we import, initialize, and scaffold the common attachment requirements.
2. Unlike the Popover though, we configure `new Popover({ ... })` to adjust `interaction` and `placement` settings.
3. We can also use a different transition, such as `fade`, as shown above.

## Handling Accessibility

We recommend you follow the [Aria APG patterns](https://www.w3.org/WAI/ARIA/apg/patterns/) when generating popover interfaces for production use. We've linked a few of the common patterns below to help you get started. This covers `aria` and `role` attributes, keyboard interactions, and other best practices.

- [Alert and Message Dialogs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/)
- [Alert Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/)
- [Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)
- [Dialog (Modal) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)
- [Menu and Menubar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)
- [Tooltip](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)

---

# Image Layouts
Layouts for displaying sets of images.

## Grid

```html
// Error loading file
```

## Quad

```html
// Error loading file
```

## Masonry

```html
// Error loading file
```

## Featured

```html
// Error loading file
```

## Attribution

Images courtesy of [Lorem Picsum](https://picsum.photos/). Markup and styles inspired by [Flowbite](https://flowbite.com/docs/components/gallery/#masonry-grid).

---

# Light Switch
Learn how to create a Light Switch toggle.

Use [Dark Mode](/docs/guides/mode) to make use of either a base or `dark:` variant for your utility class styles. By default, Tailwind uses the `prefers-color-scheme` media query to determine and match the user's operating system settings. However, if you wish to provide your users manual control, you'll need to adjust the Dark Mode strategy for Tailwind, as well as provide the toggle interface (aka a light switch). This guide will show you how to fulfill both requirements.



	
        ## Adjust the Dark Mode Strategy
        Open your global stylesheet and set the following variant:
        ```css
       	@custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *));
        ```
		Then set the following data attribute on your application's `` element for light mode:
		```html
		
		```
		Or for dark mode:
		```html
		
		```
    
	
        ## Create the Component
        We'll create a implementation of the Switch component that can toggle the mode on demand.
	   ```html
// Error loading file
```
    
    
    	## Import the Component
    	We'll then add the component to our app. Make sure to set the correct path and file extension.
    	```ts
    	import Lightswitch from './path/to/Lightswitch.{tsx|svelte}';
    	```
    	```svelte
    	
    	```
    


## User Interface

While we utilize a primitive Switch for the minimal example above, feel free to adjust the logic and interface to your preference. We provide a more detailed Switch example for [React](/docs/components/switch/react#light-switch) and [Svelte](/docs/components/switch/svelte#light-switch) respectively.

## Next.js Users

For Next.js users, you will need to [suppressHydrationWarning](https://nextjs.org/docs/messages/react-hydration-error#solution-3-using-suppresshydrationwarning) to `true` on the root `` element. This will suppress hydration warnings.

---

# Logo Clouds
Provides a grid for presenting a set of logos, brands, or sponsors.

```html
// Error loading file
```

## Rows

```html
// Error loading file
```

---

# Scroll Containers
Create scrolling containers using the scroll snap features from Tailwind.

## Scroll Snap

Implements Tailwind's [Scroll Snap Alignment](https://tailwindcss.com/docs/scroll-snap-align) utility classes.

```html
// Error loading file
```

## Carousels

Using Scroll Containers, we can create a fully functional carousel, complete with thumbnail selection.

```html
// Error loading file
```

## Multi-Column

Using Scroll Containers, we can scroll sets of items.

```html
// Error loading file
```

> Images courtesy of [The Movie Database](https://www.themoviedb.org/)

## API Reference

Learn more about Tailwind's utility classes for scroll behavior and scroll snap.

| Feature                                                             | Description                                                         |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- |
| [scroll-behavior](https://tailwindcss.com/docs/scroll-behavior)     | Controls the scroll behavior of an element.                         |
| [scroll-margin](https://tailwindcss.com/docs/scroll-margin)         | Controls the scroll offset around items in a snap container.        |
| [scroll-padding](https://tailwindcss.com/docs/scroll-padding)       | Controls an element's scroll offset within a snap container.        |
| [scroll-snap-align](https://tailwindcss.com/docs/scroll-snap-align) | Controls the scroll snap alignment of an element.                   |
| [scroll-snap-stop](https://tailwindcss.com/docs/scroll-snap-stop)   | Controls whether you can skip past possible snap positions.         |
| [scroll-snap-type](https://tailwindcss.com/docs/scroll-snap-type)   | Controls how strictly snap points are enforced in a snap container. |

---

# Stepper
Divide and present content in sequenced steps.


	
		
	
	
		
	
	
		
	


## Using Components

Optionally, you can substitute primitive data for components and props.


	
		
	
	
		
	
	
		
			
			
		

	


---

# SVG Filters
Apply filter effects to elements and images.

## How It Works

This feature is enabled by [SVG filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter) paired with [feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix) transformations.

## Usage

Apply a filter to any element using the Filter style property and passing the unique SVG Filter ID.

```astro








```

We've provided a curated collection of SVG Filters to choose from below.

```html
// Error loading file
```

## Create a Filter

We recommend [SVG Color Matrix Mixer](https://fecolormatrix.com/) by [Rik Schennink](https://x.com/rikschennink/) to create your own filters.

## Tips

- The SVG must be in the same scope as the elements you wish to filter. Global scope is acceptable.
- Consder storing your SVGs within your local project for quick and reusable imports.
- All Vite-based frameworks support [SVG imports](https://vite.dev/guide/assets.html#importing-asset-as-url).
- Optionally you can embed the SVG within a imported component (ex: `Apollo.svelte`, `Apollo.tsx`).
- Filter SVGs are affected by the flow DOM, including class styles such as `space-{x|y}`.

---

# Table of Contents
Navigate the hierarchy of headings for the current page.

```html
// Error loading file
```

## Deep Linking

Browsers allow you to deep link to any element via the ID. This is accomplished with an anchor tag and hashed (`#`) href value. When interacting with these anchors, the viewport will automatically attempt to scroll the `` element and bring the element into view.

```html

	Some Example Heading
	


```

```html
Some Example Heading
```

> TIP: If you abstract scrolling away from the `` element, this will not work.

## Scroll Behavior

You may optionally choose to implement a smooth [scroll behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior) using CSS.

```html

```

```css
body {
	scroll-behavior: smooth;
}
```

## Generate a Slug

The following provides a barebones implementation for generating a slug based on a heading text value.

```ts
function generateSlug(text: string, prefix?: string = '', suffix?: string = '') {
	// Format the slug from the text value.
	const slug = text
		.toLowerCase()
		.replaceAll(/[^a-zA-Z0-9 ]/g, '')
		.replaceAll(' ', '-')
		.toLowerCase();
	// Note that you can optionally apply a prefix/suffix.
	return `${prefix}${slug}${suffix}`;
}

// Usage
generateSlug('An Example Header'); // result: an-example-header
generateSlug('An Example Header', 'skeleton-'); // result: skeleton-an-example-header
generateSlug('An Example Header', '', '-skeleton'); // result: an-example-header-skeleton
```

## Guides

Specific instructions for generating headings will differ based on your meta-framework and your application architecture. Below are a few suggestions, but this is neither a definitive or exhaustive list of all available options.

- [Astro](https://kld.dev/building-table-of-contents/) - enables you to automatically generate headings using built-in MDX features.
- [Svelte](https://www.melt-ui.com/docs/builders/table-of-contents) - Melt UI provides a headless component solution for Svelte.
- [Next.js](https://nextra.site/docs/docs-theme/theme-configuration#toc-sidebar) - Nextra provides a headless component solution for Next.js + MDX.
- [Rehype Plugin](https://github.com/stefanprobst/rehype-extract-toc) - a general purpose Rehype plugin for generating a table of contents.

---

# Design

# Colors
The Skeleton color system.

## Color Palette



Supports all standard Tailwind color utility classes using the following pattern.

```
{property}-{color}-{shade}
```

| Key      | Accepted Values                                                                                                  |
| -------- | ---------------------------------------------------------------------------------------------------------------- |
| Property | `accent`, `bg`, `border`, `caret`, `decoration`, `divide`, `fill`, `outline`, `ring`, `shadow`, `stroke`, `text` |
| Color    | `primary`, `secondary`, `tertiary`, `success`, `warning`, `error`, `surface`                                     |
| Shade    | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`, `950`                                       |

```html
...
...

```

---

## Contrast Colors

Contrast color values are available for every shade. Use these to set accessible text color and icon fill values.

```
{property}-{color}-contrast-{shade}
```

```html
// Error loading file
```

See the [Preset system](/docs/design/presets) for additional utility classes that automatically mix each color and contrast tone.

---

## Color Pairings

Provides a condensed syntax of dual-tone color values balanced to swap between light and dark mode. These are supported for all the same properties standard colors support (`bg`, `border`, `fill`, etc).

```
{property}-{color}-{lightModeShade}-{darkModeShade}
```

For example:

- `bg-surface-200-800`
- `text-primary-400-600`
- `border-secondary-50-950`

### How Pairings Work

Color Pairing are enabled through the use of the CSS [light-dark](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) function. For example, the `text-primary-300-700` pairing will be implemented in your CSS bundle as follows:

```css
.text-primary-300-700 {
	color: light-dark(var(--color-primary-300), var(--color-primary-700));
}
```

This roughly equivalent to the following, just more compact, and enabling support for Tailwind's [Color Scheme](https://tailwindcss.com/docs/color-scheme) utilities.

```html
...
```

By default, Skeleton sets the overall app's color scheme to match light or dark mode.

### Pairing Previews

The following is a static representation of each pairing. Only `primary` is shown, but all Skeleton colors are supported.



The following shows actual Color Pairings. Toggle this website between light and dark mode to see how these react.



### When to use Pairings

Color Parings are useful for generating a hierarchy of visual layers, ranging from foreground to background elements. Each reuse the same color ramp but, but inverts the order when toggling from light to dark mode.


	
		
	
	
		```html
		Foreground
		...
		...
		...
		...
		Branding
		...
		...
		...
		...
		Background
		```
	


- We can use shade `950` for light mode and `50` from dark mode to represent our body text color.
- Then use shade `50` from light mode and `950` from dark mode to represent our app background.
- Use the static `500` shade for key branding elements, such as buttons or banners.
- Then reserve multiple layers between for elements such as cards, inputs, and more.

---

## Transparency

Both Skeleton Colors and Color Pairings support Tailwind's color transparency syntax.

```html
Primary Color @ 25% transparency
Surface Pairing 50/950 @ 60% transparency
```

---

# Presets
Canned styles for your interface elements.

{


	Presets are pre-defined styles that allow you to quickly and easily style buttons, badges, cards, and more. Create by mixing Skeleton and
	Tailwind primitives.


}

```html
// Error loading file
```

1. **Filled** - a filled preset of the primary brand color.
2. **Tonal** - a tonal preset of the primary brand color.
3. **Outlined** - an outlined preset of the primary brand color.
4. **Glass** - a custom preset using background transparency and backdrop blur.
5. **Elevated** - mixes a filled preset with a shadow.
6. **Ghost** - has no style by default, but shows a tonal preset on hover.
7. **Ghost Icon** - has no style by default, but shows a branded tonal preset on hover.
8. **Gradient** - a custom preset generated using Tailwind gradient primitives.

## Skeleton Presets

Skeleton's provides the following opinionated set of styles, including accessible backgrounds and text colors.

### Filled

```
preset-filled-{color}-{lightModeShade}-{darkModeShade}
```

```html
// Error loading file
```

### Tonal

```
preset-tonal-{color}
```

```html
// Error loading file
```

### Outlined

```
preset-outlined-{color}-{shade}-{shade}
```

```html
// Error loading file
```

## Custom Presets

Consider these best practices when creating presets:

- Custom presets are only limited by your imagination.
- Use any combination of Skeleton or Tailwind-provided primitive to generate a preset.
- Apply presets to any relevant element, including: buttons, cards, inputs, and more.
- Use a set naming convention, such as `preset-{foo}` to keep things standardized.
- Implement all presets in using Tailwind's [@utility directive](https://tailwindcss.com/docs/functions-and-directives#utility-directive) in your global stylesheet.
- Abstrast presets to a stylesheet or NPM package for shared used between projects.

Please be aware the following presets are not included by Skeleton. Rather, these are examples of how you might utilize the Preset pattern.

### Input Presets

```html
// Error loading file
```

### Gradient Presets

Tailwind provides a number of powerful [Gradient](https://tailwindcss.com/docs/gradient-color-stops) utility classes that can be used to generate presets.

```html
// Error loading file
```

### Glass Presets

```html
// Error loading file
```

---

# Spacing
Set a dynamic scale for application whitespace.

This is enabled by the [Tailwind spacing system](https://tailwindcss.com/blog/tailwindcss-v4#dynamic-utility-values-and-variants).


	
		
	
	
		
			Scaling can be adjusted by modifying the [type scale](/docs/get-started/core-api#typography) theme property.
			```css
			[data-theme='cerberus'] {
				--spacing: 0.25rem;
			}
			```
		
	


This affects the following utilities.

- `padding`
- `margin`
- `width`
- `minWidth`
- `maxWidth`
- `height`
- `minHeight`
- `maxHeight`
- `gap`
- `inset`
- `space`
- `translate`

---

# Themes
The Skeleton theme system.

{


	Skeleton themes utilize{' '}
	
		CSS custom properties
	{' '}
	to define core settings for your design system. Provided with a number of presets theme out of the box, as well as a powerful theme
	generator to create your own. Enable one or more and quickly switch on-demand.

}

---

## Preset Themes

Skeleton is provided with high quality set of hand curated themes, as shown below.



Tap the theme preview above to copy the theme name to your clipboard. Then implement any desired theme in your app's global stylesheet.

```css title="app.css" {3}
/* @import '@skeletonlabs/skeleton'; */
@import '@skeletonlabs/skeleton/themes/{theme-name}';
```

> Make sure to replace `{theme-name}` with your desired theme names.

## Custom Themes

Use our powerful Theme Generator app to create your own themes.


	
		Theme Generator
	


1. Open the Theme Generator and customize to your preference.
2. Make sure to set a unique name for your theme.
3. Tap the "code" view from the menu at top-right corner.
4. Tap the "copy" button at the top of copy the theme contents.
5. Paste the contents into a new file at your project root, such as `my-theme-name.css` (any name is fine).

Follow the step below to register any number of custom themes. Take care to match each theme's file name.

## Register Themes

You may register any number of themes by adding addition theme imports to your global stylesheet. Please note that each theme will slightly increase the final CSS bundle size.

```css
/* @import '@skeletonlabs/skeleton'; */

/* Register Preset Themes */
@import '@skeletonlabs/skeleton/themes/cerberus';
@import '@skeletonlabs/skeleton/themes/mona';
@import '@skeletonlabs/skeleton/themes/vox';

/* Register a Custom Themes */
/* Make sure to resolve the relative path. */
/* Note the .css extension is optional. */
@import '../{my-theme-name}';
```

## Activate a Theme

You may define the active theme using the `data-theme` attribute on your `` element.

```html

	...

```

> TIP: If you wish to create a theme switcher, this is the value you should aim to modify.

---

## Customize and Extend

### Modify Properties

You can modify any [theme property](/docs/get-started/core-api) on demand using the following technique. Simply add this to your global stylesheet, following all Tailwind and Skeleton configuration. Use this to override preset theme properties.

```css title="app.css"
[data-theme='cerberus'] {
	--spacing: 0.22rem;
	--radius-container: 0.375rem;
	--heading-font-weight: bolder;
}
```

### Target Themes

If your application supports multiple themes, you may isolate selection using the `data-theme` attribute. Just make sure to account for light and dark mode color values.

```css title="app.css"
/** Target only Cerberus .h1 elements. */
[data-theme='cerberus'] .h1 {
	color: red;
	@variant dark {
		color: green;
	}
}
/** Target only Mona .h1 elements. */
[data-theme='mona'] .h1 {
	color: blue;
	@variant dark {
		color: yellow;
	}
}
```

### Backgrounds

Your app's light and dark mode background color values can be adjusted using the following [theme properties](/docs/get-started/core-api#colors).

```css title="app.css"
[data-theme='cerberus'] body {
	--body-background-color: pink;
	--body-background-color-dark: green;
}
```

Background images are supported, including CSS mesh gradients. The following example adheres to theme colors.

```css title="app.css"
[data-theme='cerberus'] body {
	background-image:
		radial-gradient(at 24% 25%, color-mix(in oklab, var(--color-primary-500) 30%, transparent) 0px, transparent 30%),
		radial-gradient(at 35% 13%, color-mix(in oklab, var(--color-success-500) 18%, transparent) 0px, transparent 30%),
		radial-gradient(at 100% 64%, color-mix(in oklab, var(--color-error-500) 3%, transparent) 0px, transparent 40%);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
```

We recommend Mesher for generating custom mesh gradients. This will generate colors using RGB, but can be migrated to utilize `var()` for colors and `color-mix()` for transparency, per the example above.


	
		Mesher by CSS Hero
	


### Custom Fonts

Skeleton recommends the use of [Fontsource](https://fontsource.org/) for installing and managing custom fonts.


	
		Browse Fontsource
	


Install your font of choice.

```console
npm install @fontsource/open-sans
```

Then import each font at the top of your global stylesheet, but below your Tailwind configuration.

```css title="app.css"
@import '@fontsource/open-sans';
```

Finally, use the following [theme properties](/docs/get-started/core-api#base-1) to set each respective font-family property. Note that for custom themes, these settings are can be defined directly within each respective theme file.

```css title="app.css"
[data-theme='cerberus'] {
	--heading-font-family: 'Open Sans', sans-serif;
	--base-font-family: 'Open Sans', sans-serif;
	--anchor-font-family: 'inherit';
}
```

## Core API

For more information, please refer to the full [Core API](/docs/get-started/core-api) documentation.

---

# Typography
The Skeleton typography system.

{


	Skeleton provides an array of opt-in utility classes for common typographic elements, with a fully functional typography scale based on
	your theme settings. As well as a number of primitives for generating a semantic typography set for your project's individual needs.


}

## Typographic Scale

Skeleton introduces customizable [Typographic Scale](https://designcode.io/typographic-scales) to Tailwind's [font-size](https://tailwindcss.com/docs/font-size) properties.


	
		
	
	
		
			Scaling can be adjusted by modifying the [type scale](/docs/get-started/core-api#typography) theme property.
			```css
			[data-theme='cerberus'] {
				--text-scaling: 1.067;
			}
			```
			This affects the following text sizes.
			```html
			text-xs
			text-sm
			text-base
			text-lg
			text-xl
			text-2xl
			text-3xl
			text-4xl
			text-5xl
			text-6xl
			text-7xl
			text-8xl
			text-9xl
			```
		
	


## Utility Classes

Use the following utility classes to quickly style semantic HTML elements. These classes are opt-in by default, providing a simple escape hatch when you need to break from convention.

### Headings

```html
// Error loading file
```

### Paragraphs

```html
// Error loading file
```

### Blockquotes

```html
// Error loading file
```

### Anchor

```html
// Error loading file
```

### Pre-Formatted

```html
// Error loading file
```

### Code

```html
// Error loading file
```

### Keyboard

```html
// Error loading file
```

### Insert & Delete

```html
// Error loading file
```

### Mark

```html
// Error loading file
```
## Lists

Skeleton defers to Tailwind's built-in utility classes for common list styles.

### Unordered

```html
// Error loading file
```

### Ordered

```html
// Error loading file
```

### Basic

```html
// Error loading file
```

### Description

```html
// Error loading file
```

### Navigation

```html
// Error loading file
```

## Semantic Typography

When working with your designers, they may craft a semantic typography set for your project. To handle this, we recommend implementing [custom presets](/docs/design/presets#custom-presets) that mix CSS primitives with semantic HTML elements to replicate all desired styles. Feel free to use the boilerplate below, adding each style to your global stylesheet.

```html
// Error loading file
```

---

# Tailwind

# Badges
Provides a robust set of non-interactive badge styles.

```html
// Error loading file
```

## Presets

Provides full support of [Presets](/docs/design/presets).

```html
// Error loading file
```

## Overlap

Use `badge-icon` to create overlapping numeric or icon badges.

```html
// Error loading file
```

---

# Buttons
Provide a variety of button, including customizable sizes and types.

```html
// Error loading file
```

## Presets

Provides full support of [Presets](/docs/design/presets).

```html
// Error loading file
```

## Sizes

```html
// Error loading file
```

## Disabled

When applied to a `

} />

{#snippet element({ attributes })} {/snippet}

Item 1

Some Example Heading

text-xs

text-sm

text-base

text-lg

text-xl

text-2xl

text-3xl

text-4xl

text-5xl

text-6xl

text-7xl

text-8xl

text-9xl

My Own Button} />

{#snippet element({ attributes })} My Own Button {/snippet}