### 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

Hello Skeleton

Lorem ipsum dolor sit amet consectetur adipisicing elit.

SvelteKit Tailwind GitHub
``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 `` tag in the `/src/app.html` file. ```html ``` -------------------------------- ### 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 ` ``` -------------------------------- ### 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
This is meta
``` -------------------------------- ### 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

(the visible example)

(codeblocks and implementation details)

 ``` -------------------------------- ### 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 ``` -------------------------------- ### Table Component Usage with Paginated Data Source: https://v2.skeleton.dev/components/paginators Example of passing paginated data to the Svelte Table component. ```html ``` -------------------------------- ### 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(); ```