Skeleton

https://v2.skeleton.dev/
Admin
Skeleton is a UI toolkit for Svelte and Tailwind CSS, enabling the creation of adaptive and...
Tokens:114,446
Snippets:461
Trust Score:9.1
Update:1 year ago
Show doc for...
Tokens:
Raw
### Skeleton Installation and Getting Started

Source: https://v2.skeleton.dev/index

Guides users on how to begin with Skeleton, including installation instructions and how to create a new project. Mentions StackBlitz for live previews.

```html
## Ready to Begin?
Create your first Skeleton project in seconds.
Via StackBlitz Install Skeleton
```

--------------------------------

### Skeleton UI Toolkit: Introduction and Getting Started

Source: https://v2.skeleton.dev/docs/contributing

Provides an overview of the Skeleton UI Toolkit, its core features like Tailwind and Svelte integration, and guides for new users to get started quickly. Includes sections on essential concepts such as themes, colors, and styling.

```English
Documentation:
  * Introduction
  * Get Started
  * Quickstart

Essentials:
  * Themes
  * Colors
  * Styling
  * Design Tokens
  * Variants
  * Transitions
  * Dark Mode
```

--------------------------------

### Create and Run Skeleton Project

Source: https://v2.skeleton.dev/blog/skeleton-plus-flowbite

Steps to create a new Skeleton project using the Skeleton CLI, configure it with specific settings, install dependencies, and start the development server.

```bash
npm create skeleton-app@latest skeleton-plus-flowbite
    - Choose "Yes, using Typescript syntax"
    - Select "No" for ESLint, Prettier, Playwright, Vitest, Inspector
    - Hit "Enter" to skip Tailwind plugins
    - Select the default "Skeleton" theme
    - Select the "Bare Bones" template
cd skeleton-plus-flowbite
npm install
npm run dev -- --open
```

--------------------------------

### Skeleton Monorepo Structure and Setup

Source: https://v2.skeleton.dev/docs/contributing/requirements

Explains Skeleton's monorepo structure and provides a step-by-step guide for setting up the development environment, including installing pnpm, forking the repo, and running the local dev server.

```markdown
## Monorepo
Skeleton uses a monorepo to group related projects into a single repository. This allows us to easily maintain multiple projects and packages in parallel. This includes the Skeleton core library, this documentation site, and more.
In order to contribute to Skeleton, you will be required to install and use pnpm, as it fully supports monorepo project structures. Don't worry, it's very similar to `npm` and will handle most of the heavy lifting.
We've provide a quick reference below for where each project is located.
Path | Description  
---|---
`/packages/skeleton` | The core library project, containing all components, elements, utilities, and more.  
`/sites/skeleton.dev` | The SvelteKit project containing this documentation website.

### Getting Started
If you're not familiar with using a monorepo, please follow the steps below:
  1. Install pnpm globally using `npm install -g pnpm`. Confirm via `pnpm --version` in your terminal.
  2. Go to our repo and press the Fork button in the top right.
  3. Click the Code button in Github to clone down a copy of your fork to your local machine
  4. Run `cd skeleton` to move into the cloned monorepo project. 
  5. Delete your `node_modules` directory, then run `pnpm i` to install dependencies for all projects.
  6. Run `cd sites/skeleton.dev` to move into the Skeleton documentation project.
  7. Run `code .` to open the current project directory in VS Code.
  8. Run `pnpm dev` to start a local dev server. You may see a warning the first time.
  9. Open the dev server address provided by the terminal in your browser.
  10. Modify the documentation or library components as desired. This fully supports HMR.

### Adding New Projects
If you wish to add a new project, first run `pnpm getall` from the root of the monorepo. This will clone create-skeleton-app into your project under `packages/create-skeleton-app`. Next run `pnpm csa yoursitename`. This will generate a brand new Skeleton project in the `/sites` directory.
### Importing Skeleton
To import Skeleton features (ex: components) within each monorepo project, use the following structure:
typescript Copy ```
import { Avatar } from '@skeletonlabs/skeleton';
```
```

--------------------------------

### Create Skeleton App

Source: https://v2.skeleton.dev/docs/quickstart

Scaffolds a new Skeleton project using the Skeleton CLI with TypeScript and the 'Welcome' template, then runs the development server.

```bash
npm create skeleton-app@latest my-skeleton-app
	- Enable SvelteKit's Typescript syntax
	- Select the "Welcome" template
cd my-skeleton-app
npm run dev
```

--------------------------------

### Create New Skeleton Project

Source: https://v2.skeleton.dev/blog/skeleton-plus-tailwind-ui

Steps to create a new Skeleton project using the Skeleton CLI, including configuration choices for TypeScript, testing frameworks, and initial theme selection. It also covers installing dependencies and starting the development server.

```bash
npm create skeleton-app@latest skeleton-plus-tailwindui
    - Choose "Yes, using Typescript syntax"
    - Select "No" for ESLint, Prettier, Playwright, Vitest, Inspector
    - Hit "Enter" to skip Tailwind plugins
    - Select the default "Skeleton" theme
    - Select the "Bare Bones" template
cd skeleton-plus-tailwindui
npm install
npm run dev -- --open
```

--------------------------------

### Homepage Content with Skeleton UI

Source: https://v2.skeleton.dev/docs/quickstart

Sets up basic content for the homepage, including headings, paragraphs, and styled buttons using Skeleton UI and Tailwind CSS.

```html
<div class="container mx-auto p-8 space-y-8">
	<h1 class="h1">Hello Skeleton</h1>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
	<section>
		<a class="btn variant-filled-primary" href="https://kit.svelte.dev/">SvelteKit</a>
		<a class="btn variant-filled-secondary" href="https://tailwindcss.com/">Tailwind</a>
		<a class="btn variant-filled-tertiary" href="https://github.com/">GitHub</a>
	</section>
</div>
```

--------------------------------

### Run Tauri Application

Source: https://v2.skeleton.dev/docs/tauri

Starts the Tauri development server to run the application.

```bash
npm run tauri dev
```

--------------------------------

### Skeleton UI Documentation Structure

Source: https://v2.skeleton.dev/docs/figma

Details the structure of the Skeleton UI documentation, including sections for Introduction, Get Started, Quickstart, Essentials like Themes and Colors, and Resources such as the Theme Generator.

```Documentation
Documentation Sections:
  - Introduction
  - Get Started
  - Quickstart

Essentials:
  - Themes
  - Colors
  - Styling
  - Design Tokens
  - Variants
  - Transitions
  - Dark Mode

Resources:
  - Theme Generator
  - Figma
  - Contributing
  - Sponsorship

Integrations:
  - PurgeCSS
  - Tauri
  - Datatables
```

--------------------------------

### Install and Configure Tauri CLI

Source: https://v2.skeleton.dev/docs/tauri

Installs the Tauri CLI and adds a script to package.json for running Tauri commands.

```bash
npm install --save-dev @tauri-apps/cli
```

```json
"scripts": {
	"tauri": "tauri"
}
```

```bash
npm run tauri init
```

--------------------------------

### Skeleton UI Toolkit Documentation Navigation

Source: https://v2.skeleton.dev/docs/sponsorship

Provides an overview of the documentation structure, including introduction, getting started, and blog sections.

```Markdown
Docs
  * Introduction
  * Get Started
  * Quickstart


* * *


Essentials
  * Themes
  * Colors
  * Styling
  * Design Tokens
  * Variants
  * Transitions
  * Dark Mode


* * *


Resources
  * Theme Generator
  * Figma
  * Contributing
  * Sponsorship


* * * 


Integrations
  * PurgeCSS
  * Tauri
  * Datatables
```

--------------------------------

### Skeleton v3 Installation Guide

Source: https://v2.skeleton.dev/blog/skeleton-v3-pre-release-now-available

Provides instructions for installing Skeleton v3 for React + NextJS and Svelte 5 RC + SvelteKit projects. Note that v3 is in early pre-release and not recommended for production.

```markdown
Install for React + NextJS
* Install for Svelte 5 RC + SvelteKit

> NOTE: keep and eye out for additional installation guides over the next few weeks!
```

--------------------------------

### Implement Skeleton Avatar Component

Source: https://v2.skeleton.dev/docs/quickstart

Imports and implements the Skeleton Avatar component within a Svelte page, displaying a user avatar from a URL.

```html
<script>
	import { Avatar } from '@skeletonlabs/skeleton';
</script>

<Avatar src="https://i.pravatar.cc/" />
```

--------------------------------

### Skeleton UI Toolkit Documentation Navigation

Source: https://v2.skeleton.dev/blog

Provides an overview of the documentation structure, including sections for introduction, getting started, blog, features like Tailwind and Svelte, and project resources.

```Markdown
## Skeleton Blog
Keep up with the latest news, tutorials, and releases for Skeleton.
* * *
Tuesday, May 21, 2024
## Skeleton v3 Pre-Release now available!
Today we're thrilled to share that we've now reached a major milestone - Skeleton v3 is now available in early access via a new public pre-release!
news
Read Article →
Wednesday, March 27, 2024
## Skeleton Next
Learn more about what's coming in the next major version of Skeleton!
news
Read Article →
Tuesday, September 26, 2023
## Premium templates now available via GitHub Sponsors!
Hey everyone, Chris here from Skeleton Labs. I wanted to make you aware of two important updates starting today involving Skeleton Store and GitHub Sponsorships.
news
Read Article →
Monday, August 28, 2023
## Skeleton v2.0
Today we're happy to introduce Skeleton v2! This represents a huge step forward for Skeleton, introducing a number of critical updates, new features, and of course a handful of breaking changes.
news
Read Article →
Tuesday, August 15, 2023
## Skeleton v2.0 Release Candidate
Today we're happy to introduce the new v2 release candidate of Skeleton! This represents a huge step forward for Skeleton, introducing a number of important updates, new features, and of course some necessary breaking changes.
news
Read Article →
Tuesday, August 1, 2023
## Skeleton v1.11.0
Today's release includes a handful of minor bugfixes and and improvements to the Skeleton documentation. No notable new features are included in this release, but it is still advised to update when you can.
news
Read Article →
Tuesday, July 18, 2023
## Announcing the Skeleton Store!
Hey everyone, Chris here from Skeleton Labs. Today I'm thrilled to reveal our newest service, the Skeleton Store. A digital storefront featuring premium assets purpose-built by and for Skeleton.
news
Read Article →
Tuesday, July 18, 2023
## Skeleton v1.10.0
Alongside the launch of the store, we're introducing a minor release of Skeleton that includes several notable improvements and features. While today's release is on the smaller side, we anticipate the next few releases will be a return to form - including several large and meaty updates.
news
Read Article →
Tuesday, July 4, 2023
## Skeleton v1.9.0
We're happy to announce that Skeleton now fully supports Svelte 4. This was a monumental effort by contributor @AdrianGonz97 (aka Coka), so please send him some <3.
Read Article →
Tuesday, June 20, 2023
## Skeleton v1.8.0
After several maintenance focused updates, we return with a new set of feature updates. This includes a brand new and interactive ratings component, new layouts for handling images and more...
news
Read Article →
Tuesday, July 4, 2023
## Skeleton v1.7.1
Today's update represents another substantial update on the operational side of things. Skeleton now automatically generates our changelog using Changesets.
Read Article →
Wednesday, May 24, 2023
## Skeleton v1.6.2
Today's update is a bit different than normal, as outwardly it will appear as a minor triage update. However, internally we've now migrated the Skeleton project to a new monorepo structure.
news
Read Article →
Tuesday, May 9, 2023
## Skeleton v1.5.1
Today's update includes the most features introduced to Skeleton since the v1 release! This include a new opt-in typography system, major overhauls to the popup feature, introduction of the new Tailwind blocks, gradient variants, and more. See the full list of updates detailed below.
news
Read Article →
Tuesday, April 25, 2023
## Skeleton v1.2.5
A new version of Skeleton is now available, featuring various improvements and bugfixes.
news
Read Article →
Wednesday, April 12, 2023
## Announcing new services and support from Skeleton Labs
We're thrilled to announce that Skeleton Labs is now provided premium services and support for your Skeleton projects.
resources
Read Article →
* * *
Page 1 of 3
← Next →
UI Toolkit for Svelte + Tailwind.
2.11.0
###### Explore
  * Introduction
  * Get Started
  * Blog


###### Features
  * Tailwind
  * Svelte
  * Utilities


###### Project
  * Github Organization
  * NPM Organization
  * NPM Package


* * * 
MIT License | Skeleton Labs
```

--------------------------------

### Skeleton Documentation Navigation

Source: https://v2.skeleton.dev/blog/premium-templates-github-sponsors

Provides an overview of the documentation structure for the Skeleton UI Toolkit, including key sections like Introduction, Get Started, and Essentials.

```Markdown
Docs
  * Introduction
  * Get Started
  * Quickstart


* * *
  * Essentials
  * Themes
  * Colors
  * Styling
  * Design Tokens
  * Variants
  * Transitions
  * Dark Mode


* * *
  * Resources
  * Theme Generator
  * Figma
  * Contributing
  * Sponsorship


* * *
  * Integrations
  * PurgeCSS
  * Tauri
  * Datatables
```

--------------------------------

### Skeleton UI Toolkit Documentation Navigation

Source: https://v2.skeleton.dev/blog/skeleton-v1-10-0

Provides the navigation structure for the Skeleton UI Toolkit documentation, covering introduction, getting started, and blog sections.

```Markdown
Docs
  * Introduction
  * Get Started
  * Quickstart

* * *

Essentials
  * Themes
  * Colors
  * Styling
  * Design Tokens
  * Variants
  * Transitions
  * Dark Mode

* * *

Resources
  * Theme Generator
  * Figma
  * Contributing
  * Sponsorship

* * *

Integrations
  * PurgeCSS
  * Tauri
  * Datatables
```

--------------------------------

### CSS Cascade Example

Source: https://v2.skeleton.dev/blog/deep-dive-skeleton-styling

Illustrates the concept of CSS cascading, where later styles override earlier ones. This example shows how background and font-weight properties are applied.

```CSS
/* The background will initially be red */
.example { background: red; }

/* The background cascades to green and font is set bold */
.example { background: green; font-weight: bold; }
```

--------------------------------

### Add Sidebar Navigation to App Shell

Source: https://v2.skeleton.dev/docs/quickstart

Customizes the App Shell's left sidebar slot with Tailwind CSS classes and implements a basic navigation list within the sidebar.

```html
<AppShell slotSidebarLeft="bg-surface-500/5 w-56 p-4">
	<svelte:fragment slot="sidebarLeft">
		<nav class="list-nav">
			<ul>
				<li><a href="/">Home</a></li>
				<li><a href="/about">About</a></li>
			</ul>
		</nav>
	</svelte:fragment>
</AppShell>
```

--------------------------------

### Configure SvelteKit for Static Site Generation

Source: https://v2.skeleton.dev/docs/tauri

Installs the adapter-static and configures svelte.config.js to use it, disabling SSR and enabling prerendering for Tauri compatibility.

```bash
npm install --save-dev @sveltejs/adapter-static
```

```javascript
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [vitePreprocess({})],

	kit: {
		adapter: adapter()
	}
};

export default config;
```

```javascript
export const ssr = false;
export const prerender = true;
```

--------------------------------

### Create Skeleton Tauri App

Source: https://v2.skeleton.dev/docs/tauri

Scaffolds a new project with SvelteKit, Tailwind, and Skeleton, and prepares it for Tauri integration.

```bash
npm create skeleton-app@latest skeleton-tauri-app
	- Enable Typescript when prompted (recommended)
cd skeleton-tauri-app
npm install
```

--------------------------------

### Skeleton Documentation Navigation

Source: https://v2.skeleton.dev/docs/introduction

Provides an overview of the Skeleton documentation structure, including sections like Introduction, Get Started, Blog, Features (Tailwind, Svelte, Utilities), Essentials (Themes, Colors, Styling), Resources, and Integrations.

```markdown
Docs
  * Introduction
  * Get Started
  * Quickstart


* * *
Essentials
  * Themes
  * Colors
  * Styling
  * Design Tokens
  * Variants
  * Transitions
  * Dark Mode


* * *
Resources
  * Theme Generator
  * Figma
  * Contributing
  * Sponsorship


* * *
Integrations
  * PurgeCSS
  * Tauri
  * Datatables
```

--------------------------------

### Install vite-plugin-tailwind-purgecss

Source: https://v2.skeleton.dev/docs/purgecss

Installs the vite-plugin-tailwind-purgecss as a development dependency using npm.

```bash
npm i -D vite-plugin-tailwind-purgecss
```

--------------------------------

### Skeleton App Shell Setup

Source: https://v2.skeleton.dev/components/app-shell

Basic import and setup for the Skeleton App Shell component in a Svelte application.

```typescript
import { AppShell } from '@skeletonlabs/skeleton';
```

--------------------------------

### Install Highlight.js

Source: https://v2.skeleton.dev/utilities/codeblocks

Instructions for installing Highlight.js, a required dependency for syntax highlighting in Code Blocks.

```terminal
npm install highlight.js
```

--------------------------------

### Skeleton UI Toolkit: Contributing Guide

Source: https://v2.skeleton.dev/docs/contributing

Details the process for contributing to the Skeleton UI Toolkit. It outlines requirements, recommended workflows, style guides for code and properties, and specific instructions for documenting components using Sveld.

```English
# Contributing
Thank you for your interest in contributing to Skeleton. We ask that you please review the sections below in full before submitting your first pull request.

## Getting Started
### Concepts and Best Practices
New to open source? Read this detailed guide covering the basics.
Read Guide
### Step-by-Step Guide
Follow a guided tour showing you how to make your first contribution.
Read Guide

## Contributing to Skeleton
### Requirements
Read Skeleton's requirements and review our recommended workflow process.
Read Guide
### Style Guide
View our recommended conventions for writing code, naming properties, and more.
Read Guide
### Sveld for Components
Learn how we use Sveld to automatically document components.
Read Guide
### Documentation Pages
Learn how to properly document features within Skeleton.
Read Guide
```

--------------------------------

### Install Floating UI

Source: https://v2.skeleton.dev/utilities/popups

Instructions for installing the Floating UI library, which is a prerequisite for using Skeleton UI's popup functionality.

```terminal
npm install @floating-ui/dom
```

--------------------------------

### Install Svelte Simple Datatables

Source: https://v2.skeleton.dev/docs/ssd

Installs the Svelte Simple Datatables library using npm, a headless library for creating datatable components in Svelte.

```bash
npm i @vincjo/datatables
```

--------------------------------

### Import Timeline Component

Source: https://v2.skeleton.dev/blog/skeleton-plus-flowbite

Demonstrates how to import the Timeline Svelte component into your application.

```svelte
import Timeline from '$lib/Timeline/Timeline.svelte';
```

--------------------------------

### Set Active Theme in app.html

Source: https://v2.skeleton.dev/blog/deep-dive-skeleton-styling

Shows how to apply a custom theme to the application by setting the `data-theme` attribute on the `<body>` tag in the `/src/app.html` file.

```html
<body data-theme="my-custom-theme">

```

--------------------------------

### Skeleton Project Resources and Support

Source: https://v2.skeleton.dev/blog

Information on how to support the Skeleton project, including links to GitHub, Ko-Fi, and Patreon, as well as details on project versions and contributions.

```Markdown
Create a Theme
Sponsor
  * GitHub
  * Ko-Fi
  * Patreon


* * *
Incentives New
Version
  * Skeleton v1 Docs
```

--------------------------------

### Create Skeleton Project with CLI

Source: https://v2.skeleton.dev/docs/get-started

Scaffold a new Skeleton project using the Skeleton CLI. This command automates the installation of Skeleton packages, Tailwind CSS, and basic configuration.

```bash
npm create skeleton-app@latest my-skeleton-app
cd my-skeleton-app
```

--------------------------------

### Spell Checking

Source: https://v2.skeleton.dev/docs/contributing/requirements

Command to check for spelling errors across the project using Cspell. It's recommended to install the VS Code extension for easier dictionary management.

```bash
pnpm cspell "**" --no-progress
```

--------------------------------

### Create Skeleton SvelteKit App

Source: https://v2.skeleton.dev/blog/how-to-implement-a-responsive-sidebar-drawer

Command to generate a new SvelteKit project with Skeleton UI preconfigured. Supports npm, pnpm, and yarn.

```bash
npm create skeleton-app@latest tutorial-skeleton-sidebar
```

--------------------------------

### Skeleton Color Pairing Tokens

Source: https://v2.skeleton.dev/blog/deep-dive-skeleton-styling

Shows examples of Skeleton's design tokens used for color pairings, which automatically toggle between light and dark mode color shades.

```CSS
.bg-surface-50-900-token {
	/* Applies light theme surface color */
}
.bg-surface-900-50-token {
	/* Applies dark theme surface color */
}
```

--------------------------------

### Overriding Light and Dark Mode Styles

Source: https://v2.skeleton.dev/blog/deep-dive-skeleton-styling

Provides examples of how to override element styles for both light and dark modes using Tailwind's `dark:` prefix, or how to use `!important` to enforce a style.

```CSS
/* Override the light and dark mode values */
.example-element { @apply bg-blue-500 dark:bg-purple-500; }

/* Set !important to override both modes */
.example-element { @apply !bg-green-500; }
```

--------------------------------

### Skeleton Typography Migration Guide

Source: https://v2.skeleton.dev/blog/skeleton-v1-5-1

Provides instructions for migrating existing projects to the new opt-in typography system in Skeleton. It details renaming `all.css` to `skeleton.css` and applying utility classes.

```Markdown
### ⚠️ Migration Guide ⚠️

When creating new projects using the Skeleton CLI this will use the new opt-in typography system by default. If you're migrating an existing project though, we have provided a detailed migration guide near the top of the page. To begin using the new system simply rename `all.css` in your root layout to `skeleton.css`, then begin implementing each respective utility class.

Please be warned that the on-by-default typography system provided by `all.css` will continue to work for now, but will be permanently removed in the next major release (Skeleton v2+). It's advised that you migrate to `skeleton.css` and the opt-in system as soon as possible!
```

--------------------------------

### Skeleton Utility Color Classes

Source: https://v2.skeleton.dev/blog/deep-dive-skeleton-styling

Provides examples of how to use Skeleton's generated Tailwind utility classes to apply custom theme colors to HTML elements. This includes background, text, and border color utilities, as well as usage within `<style>` blocks using the `@apply` directive.

```html
<!-- background utility class -->
<div class="bg-primary-500">Skeleton</div>

<!-- background with 50% transparency utility class -->
<div class="bg-primary-500/50">Skeleton</div>

<!-- text color utilty class -->
<div class="text-primary-500">Skeleton</div>

<!-- border utility class -->
<div class="border border-primary-500">Skeleton</div>

<!-- @apply syntax in <style> blocks -->
<style lang="postcss">
    .example { @apply text-primary-500; }
</style>
```

--------------------------------

### Skeleton UI Project Information

Source: https://v2.skeleton.dev/blog/skeleton-v1-11-0

Details the project structure and resources for Skeleton UI, including links to GitHub and NPM organizations.

```Markdown
###### Project
  * Github Organization
  * NPM Organization
  * NPM Package
```

--------------------------------

### Code Block CSS Example

Source: https://v2.skeleton.dev/utilities/codeblocks

An example of CSS styling for a Code Block.

```css
.skeleton { color: #bada55; }
```

--------------------------------

### Code Block TypeScript Example

Source: https://v2.skeleton.dev/utilities/codeblocks

An example of TypeScript code within a Code Block.

```typescript
const skeleton: string = 'awesome';
```

--------------------------------

### Skeleton UI Toolkit Sponsorship Options

Source: https://v2.skeleton.dev/blog/skeleton-v1-10-0

Lists the available sponsorship channels for the Skeleton UI Toolkit project, including GitHub, Ko-Fi, and Patreon.

```Markdown
Sponsor
  * GitHub
  * Ko-Fi
  * Patreon
```

--------------------------------

### Code Block HTML Example

Source: https://v2.skeleton.dev/utilities/codeblocks

An example of how to render a simple HTML structure within a Code Block.

```html
<div>This is meta</div>
```

--------------------------------

### Skeleton UI Toolkit Project Links

Source: https://v2.skeleton.dev/blog/skeleton-v1-10-0

Provides links to the Skeleton UI Toolkit's project resources, including GitHub and NPM organizations and packages.

```Markdown
###### Project
  * Github Organization
  * NPM Organization
  * NPM Package
```

--------------------------------

### Install Custom Font

Source: https://v2.skeleton.dev/docs/themes

Instructions for installing a custom font using npm and Fontsource, a recommended tool for managing custom fonts.

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

--------------------------------

### Skeleton UI Toolkit: Integrations and Resources

Source: https://v2.skeleton.dev/docs/contributing

Lists available integrations for the Skeleton UI Toolkit, such as PurgeCSS and Tauri, and highlights community resources like the Theme Generator and Figma support. Also includes information on contributing and sponsorship.

```English
Resources:
  * Theme Generator
  * Figma
  * Contributing
  * Sponsorship

Integrations:
  * PurgeCSS
  * Tauri
  * Datatables
```

--------------------------------

### Autocomplete Component Setup

Source: https://v2.skeleton.dev/components/autocomplete

Imports the Autocomplete component and its associated type from the Skeleton UI library. This is the initial setup required to use the component.

```typescript
import { Autocomplete } from '@skeletonlabs/skeleton';
import type { AutocompleteOption } from '@skeletonlabs/skeleton';
```

--------------------------------

### Import SvelteKit Page Store

Source: https://v2.skeleton.dev/blog/how-to-implement-a-responsive-sidebar-drawer

Imports the $page store from SvelteKit's app module to access routing information.

```javascript
import { page } from '$app/stores';
```

--------------------------------

### Skeleton UI Documentation Navigation

Source: https://v2.skeleton.dev/blog/skeleton-v1-11-0

Provides a navigation structure for the Skeleton UI documentation, covering essential topics from introduction to advanced resources.

```Markdown
Docs
  * Introduction
  * Get Started
  * Quickstart

* * *

Essentials
  * Themes
  * Colors
  * Styling
  * Design Tokens
  * Variants
  * Transitions
  * Dark Mode

* * *

Resources
  * Theme Generator
  * Figma
  * Contributing
  * Sponsorship

* * *

Integrations
  * PurgeCSS
  * Tauri
  * Datatables
```

--------------------------------

### Skeleton UI Toolkit: Themes and Customization

Source: https://v2.skeleton.dev/docs/contributing

Explains the theming capabilities of the Skeleton UI Toolkit, allowing users to customize the appearance with various modes and styles. It lists available themes and provides resources for creating custom themes.

```English
Theme:
###### Mode
* * *
  * 💀 Skeleton
  * 🌨️ Wintry
  * 🤖 Modern
  * 🚀 Rocket
  * 🧜‍♀️ Seafoam
  * 📺 Vintage
  * 🏜️ Sahara
  * 👔 Hamlindigo
  * 💫 Gold Nouveau
  * ⭕ Crimson

* * *
Create a Theme
```

--------------------------------

### Install Tailwind Forms Plugin

Source: https://v2.skeleton.dev/elements/forms

Installs the Tailwind Forms plugin using npm. This plugin normalizes form field styles for easier customization.

```terminal
npm install -D @tailwindcss/forms
```

--------------------------------

### Dynamic Drawer Styling with Settings Object

Source: https://v2.skeleton.dev/blog/deep-dive-skeleton-styling

Shows how to dynamically style individual Drawer instances by providing style props as key/value pairs within the DrawerSettings object when opening the drawer.

```JavaScript
function drawerOpenStyled(void {
	const settings: DrawerSettings = {
		// ...
		bgDrawer: 'bg-primary-500 text-on-primary-token',
		bgBackdrop: 'bg-primary-500/50',
	};
	drawerStore.open(settings);
}
```

--------------------------------

### Provide Component Examples with DocsPreview

Source: https://v2.skeleton.dev/docs/contributing/documentation

Illustrates how to use the DocsPreview component to showcase examples within documentation pages. It utilizes slots for both the visible preview and the source code implementation details.

```html
<DocsPreview>
	<svelte:fragment slot="preview">
		<p>(the visible example)</p>
	</svelte:fragment>
	<svelte:fragment slot="source">
		<p>(codeblocks and implementation details)</p>
	</svelte:fragment>
</DocsPreview>
```

--------------------------------

### Initialize Skeleton Stores

Source: https://v2.skeleton.dev/utilities/modals

Initializes Skeleton's Drawer, Modal, and Toast stores. This is a one-time setup required in the root layout for proper SvelteKit SSR compatibility.

```typescript
import { initializeStores, Modal } from '@skeletonlabs/skeleton';

initializeStores();
```

--------------------------------

### Svelte Ratings Component - Emoji Example

Source: https://v2.skeleton.dev/components/ratings

Shows an example of using emojis with the Svelte Ratings component to represent different states of a rating, such as empty, half, or full. This demonstrates the component's versatility in accepting various content types for its slots.

```html
💀 💀 💀 ☠️ ⚪
```

--------------------------------

### Skeleton UI Toolkit: Project and Version Information

Source: https://v2.skeleton.dev/docs/contributing

Provides details about the Skeleton UI Toolkit project, including links to its GitHub and NPM organizations and packages. It also specifies the current version of the toolkit.

```English
UI Toolkit for Svelte + Tailwind.
2.11.0
###### Explore
  * Introduction
  * Get Started
  * Blog

###### Features
  * Tailwind
  * Svelte
  * Utilities

###### Project
  * Github Organization
  * NPM Organization
  * NPM Package
```

--------------------------------

### Skeleton UI Themes

Source: https://v2.skeleton.dev/blog/skeleton-v1-11-0

Lists the available themes for the Skeleton UI toolkit, allowing users to customize the visual appearance of their projects.

```Markdown
Theme
###### Mode
* * *
  * 💀 Skeleton
  * 🌨️ Wintry
  * 🤖 Modern
  * 🚀 Rocket
  * 🧜‍♀️ Seafoam
  * 📺 Vintage
  * 🏜️ Sahara
  * 👔 Hamlindigo
  * 💫 Gold Nouveau
  * ⭕ Crimson
```

--------------------------------

### Import Custom Font

Source: https://v2.skeleton.dev/docs/themes

Demonstrates how to import a custom font into the global stylesheet (`app.css`) after installation.

```css
import "@fontsource/open-sans";
```

--------------------------------

### Modal Settings Example

Source: https://v2.skeleton.dev/utilities/modals

Defines instance-specific settings for a modal, such as custom backdrop and modal classes, or arbitrary metadata.

```typescript
const modal: ModalSettings = {

	// Provide arbitrary classes to the backdrop and modal elements:
	backdropClasses: '!bg-green-500',
	modalClasses: '!bg-red-500',

	// Provide arbitrary metadata to your modal instance:
	meta: { foo: 'bar', fizz: 'buzz', fn: myCustomFunction }

};
```

--------------------------------

### Responsive Sidebar Implementation

Source: https://v2.skeleton.dev/components/app-shell

Shows how to implement responsive sidebars within the App Shell, collapsing them on smaller screens using Tailwind CSS.

```html
<AppShell>
	<svelte:fragment slot="sidebarLeft">
		<!-- Hidden below Tailwind's large breakpoint -->
		<div id="sidebar-left" class="hidden lg:block">Sidebar</div>
	</svelte:fragment>
</AppShell>
```

--------------------------------

### Table Component Usage with Paginated Data

Source: https://v2.skeleton.dev/components/paginators

Example of passing paginated data to the Svelte Table component.

```html
<Table source={{ head: tableHeaders, body: paginatedSource }} />
```

--------------------------------

### Initialize Drawer Stores and Get Store Instance

Source: https://v2.skeleton.dev/blog/how-to-implement-a-responsive-sidebar-drawer

Initializes the necessary overlay stores for the Drawer component and retrieves an instance of the drawer store. This is crucial for preventing SSR issues and managing the drawer's state.

```javascript
import { initializeStores, Drawer, getDrawerStore } from '@skeletonlabs/skeleton';

initializeStores();

const drawerStore = getDrawerStore();
```
Tokens:
Raw