Add framework integration guides to the docs (#2707)

Co-authored-by: codecalm <codecalm@gmail.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Cursor <cursoragent@cursor.com>

.changeset/framework-integration-guides.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": minor
+---
+
+Added framework integration guides for Laravel, React, Next.js, Vue, Angular, Nuxt, Symfony, Django, Rails, SvelteKit, and Astro.

docs/pages/ui/components/inline-player.mdx

@@ -6,6 +6,8 @@ description: Lightweight media player for websites.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
 import Example from '@shared/components/docs/Example.astro';
+import { Code } from 'astro:components';
+import { site } from '@shared/lib/site.ts';
 
 ## Overview
 
@@ -15,16 +17,17 @@ The Inline Player is a versatile, modern media player designed for seamless inte
 
 To use the Inline Player, you need to include the Plyr library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the Plyr library from a CDN:
 
-```html
+<Code
-<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/libs/plyr/dist/plyr.min.js"></script>
+	lang="html"
-```
+	code={`<script src="${site.cdnUrl}/dist/libs/plyr/dist/plyr.min.js"></script>`}
+/>
 
 ## YouTube video
 
 Integrating the Inline Player into your website is straightforward. Below is a sample implementation for a YouTube video:
 
 <Example>
-<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div> <script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/libs/plyr/dist/plyr.min.js"></script> <script>{`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-youtube"); });`}</script>
+<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div> <script is:inline src={`${site.cdnUrl}/dist/libs/plyr/dist/plyr.min.js`}></script> <script>{`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-youtube"); });`}</script>
 </Example>
 
 ## Vimeo file
@@ -32,7 +35,7 @@ Integrating the Inline Player into your website is straightforward. Below is a s
 For the Vimeo video you just need to change the `data-plyr-provider`.
 
 <Example>
-<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="707012696"></div> <script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/libs/plyr/dist/plyr.min.js"></script> <script>{`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-vimeo"); });`}</script>
+<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="707012696"></div> <script is:inline src={`${site.cdnUrl}/dist/libs/plyr/dist/plyr.min.js`}></script> <script>{`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-vimeo"); });`}</script>
 </Example>
 
 ## HTML5 video and audio

docs/pages/ui/components/vector-map.mdx

@@ -8,15 +8,18 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
 
 import Example from '@shared/components/docs/Example.astro'
 import MapVector from '@shared/components/ui/MapVector.astro'
+import { Code } from 'astro:components'
+import { site } from '@shared/lib/site.ts'
 
 ## Installation
 
 To use vector maps in your project, you need to include the jsVectorMap library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the jsVectorMap library from a CDN:
 
-```html
+<Code
-<script src="{{ cdnUrl }}/dist/libs/jsvectormap/dist/js/jsvectormap.min.js"></script>
+	lang="html"
-<script src="{{ cdnUrl }}/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js"></script>
+	code={`<script src="${site.cdnUrl}/dist/libs/jsvectormap/dist/js/jsvectormap.min.js"></script>
-```
+<script src="${site.cdnUrl}/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js"></script>`}
+/>
 
 ## Default map
 

docs/pages/ui/getting-started/download.mdx

@@ -6,24 +6,18 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
 
 import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
+import CdnImportPlugin from '@shared/components/docs/CdnImportPlugin.astro'
 
 ## CDN via jsDelivr
 
 All files included in the `@tabler/core` npm package are available over a jsDelivr CDN. Use it to deliver cached versions of Tabler’s compiled CSS and JS to your project.
 
-```html
+<CdnImportPackage />
-<script src="{{ cdnUrl }}/dist/js/tabler.min.js"></script>
-<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler.min.css" />
-```
 
 You can also include additional Tabler plugins:
 
-```html
+<CdnImportPlugin plugins={['flags', 'payments', 'socials', 'vendors']} />
-<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler-flags.min.css" />
-<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler-payments.min.css" />
-<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler-social.min.css" />
-<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler-vendors.min.css" />
-```
 
 ## Package managers
 

docs/pages/ui/getting-started/frameworks/angular.mdx

@@ -0,0 +1,119 @@
+---
+title: Angular
+order: 5
+summary: Set up Tabler in Angular and build a first working page.
+description: Integrate Tabler with Angular.
+icon: brand-angular
+seoDescription: Install `@tabler/core`, register CSS and JS in `angular.json`, and render a minimal Angular page with a Tabler card.
+layout: '@shared/layouts/DocsMdxLayout.astro'
+---
+
+import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
+import Steps from '@shared/components/docs/Steps.astro'
+
+Angular manages global assets through its build configuration, and Tabler fits that model well: register the compiled CSS and JS once in `angular.json`, and every component template can use Tabler classes right away.
+
+This guide uses the Angular CLI. You will install `@tabler/core`, register its assets in the build config, and render a first component template with a Tabler card.
+
+## Setup
+
+<Steps>
+
+### Install Tabler package
+
+Install `@tabler/core` with your preferred package manager:
+
+<TabsPackage name="@tabler/core" />
+
+You can also use CDN files when you need a quick setup:
+
+<CdnImportPackage />
+
+### Import styles
+
+Register Tabler CSS in the Angular build config (`angular.json`) under `projects.<app>.architect.build.options.styles`:
+
+```json
+{
+  "styles": ["src/styles.scss", "node_modules/@tabler/core/dist/css/tabler.min.css"]
+}
+```
+
+Alternatively, import the compiled CSS directly in `src/styles.scss`:
+
+```scss
+@import '@tabler/core/dist/css/tabler.min.css';
+```
+
+For full theme customization, import SCSS sources in `src/styles.scss` instead:
+
+```scss
+@import '@tabler/core/scss/tabler';
+```
+
+### Import and initialize JavaScript
+
+Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips. Register it in `angular.json` under `projects.<app>.architect.build.options.scripts`:
+
+```json
+{
+  "scripts": ["node_modules/@tabler/core/dist/js/tabler.min.js"]
+}
+```
+
+Angular-specific note: use `angular.json` for global CSS and JS registration so assets are included in both development and production builds.
+
+### Minimal working example
+
+Use a simple root component template in `src/app/app.component.html`:
+
+```html
+<div class="page">
+  <div class="page-wrapper">
+    <div class="container-xl py-4">
+      <div class="card">
+        <div class="card-body">
+          <h3 class="card-title">Angular + Tabler</h3>
+          <p class="text-secondary mb-0">Your Tabler setup is working.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+A minimal `angular.json` example (relevant part):
+
+```json
+{
+  "projects": {
+    "my-app": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": ["src/styles.scss", "node_modules/@tabler/core/dist/css/tabler.min.css"],
+            "scripts": ["node_modules/@tabler/core/dist/js/tabler.min.js"]
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+Run the app:
+
+```shell
+ng serve
+```
+
+Open the local Angular URL and confirm the card is styled with Tabler.
+
+### Next steps
+
+- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
+- Explore [Layout](/ui/layout) to choose page structures.
+- Browse [Components](/ui/components) to add UI building blocks.
+
+</Steps>

docs/pages/ui/getting-started/frameworks/astro.mdx

@@ -0,0 +1,121 @@
+---
+title: Astro
+order: 11
+summary: Set up Tabler in Astro and build a first working page.
+description: Integrate Tabler with Astro.
+icon: brand-astro
+seoDescription: Install `@tabler/core`, import CSS and client-side JS in Astro, and render a minimal page layout with a Tabler card.
+layout: '@shared/layouts/DocsMdxLayout.astro'
+---
+
+import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
+import Steps from '@shared/components/docs/Steps.astro'
+
+Astro ships zero JavaScript by default, which suits Tabler well: most components are pure CSS, and the interactive ones need just one script that Astro bundles and runs only in the browser.
+
+You will install `@tabler/core`, import its CSS in a base layout, add the client script, and render a first page with a Tabler card.
+
+## Setup
+
+<Steps>
+
+### Install Tabler package
+
+Install `@tabler/core` with your preferred package manager:
+
+<TabsPackage name="@tabler/core" />
+
+You can also use CDN files when you need a quick setup:
+
+<CdnImportPackage />
+
+### Import styles
+
+Import Tabler CSS once in the frontmatter of your base layout (`src/layouts/Layout.astro`):
+
+```js
+import '@tabler/core/dist/css/tabler.min.css'
+```
+
+For full theme customization, import SCSS sources instead:
+
+```scss
+@import '@tabler/core/scss/tabler';
+```
+
+### Import and initialize JavaScript
+
+Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.
+
+Astro-specific note: a plain `<script>` tag in an Astro component is bundled and runs only in the browser, so importing `tabler.min.js` there is safe — it never executes during server-side rendering:
+
+```astro
+<script>
+  import '@tabler/core/dist/js/tabler.min.js'
+</script>
+```
+
+### Minimal working example
+
+Create a base layout in `src/layouts/Layout.astro` that loads Tabler CSS and JavaScript:
+
+```astro
+---
+import '@tabler/core/dist/css/tabler.min.css'
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Astro + Tabler</title>
+  </head>
+  <body>
+    <slot />
+    <script>
+      import '@tabler/core/dist/js/tabler.min.js'
+    </script>
+  </body>
+</html>
+```
+
+Then add a minimal page in `src/pages/index.astro`:
+
+```astro
+---
+import Layout from '../layouts/Layout.astro'
+---
+
+<Layout>
+  <div class="page">
+    <div class="page-wrapper">
+      <div class="container-xl py-4">
+        <div class="card">
+          <div class="card-body">
+            <h3 class="card-title">Astro + Tabler</h3>
+            <p class="text-secondary mb-0">Your Tabler setup is working.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</Layout>
+```
+
+Run the app:
+
+```shell
+npm run dev
+```
+
+Open the local Astro URL and confirm the card is styled with Tabler.
+
+### Next steps
+
+- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
+- Explore [Layout](/ui/layout) to choose page structures.
+- Browse [Components](/ui/components) to add UI building blocks.
+
+</Steps>

docs/pages/ui/getting-started/frameworks/django.mdx

@@ -0,0 +1,129 @@
+---
+title: Django
+order: 8
+summary: Set up Tabler in Django and build a first working page.
+description: Integrate Tabler with Django.
+icon: brand-django
+seoDescription: Install `@tabler/core`, load CSS and optional JS in Django templates, and render a minimal page layout with a Tabler card.
+layout: '@shared/layouts/DocsMdxLayout.astro'
+---
+
+import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
+import Steps from '@shared/components/docs/Steps.astro'
+
+Django templates render server-side HTML, which makes Tabler a drop-in: add Tabler classes to your markup and serve the compiled CSS and JS through Django's static files system — no Node build step required at runtime.
+
+You will install `@tabler/core`, copy its compiled assets into your static directory, and render a first template with a Tabler card.
+
+## Setup
+
+<Steps>
+
+### Install Tabler package
+
+Install `@tabler/core` with your preferred package manager:
+
+<TabsPackage name="@tabler/core" />
+
+You can also use CDN files when you need a quick setup:
+
+<CdnImportPackage />
+
+### Import styles
+
+Django can use Tabler in two common ways:
+
+- Build frontend assets with npm and serve compiled files.
+- Copy static CSS/JS files into your Django static directory.
+
+If you use static files directly, copy the compiled files from the installed npm package into your static directory:
+
+```shell
+mkdir -p static/css static/js
+cp node_modules/@tabler/core/dist/css/tabler.min.css static/css/
+cp node_modules/@tabler/core/dist/js/tabler.min.js static/js/
+```
+
+Then add Tabler CSS to your base template:
+
+```jinja
+{% load static %}
+<link rel="stylesheet" href="{% static 'css/tabler.min.css' %}" />
+```
+
+For full theme customization, build from SCSS sources:
+
+```scss
+@import '@tabler/core/scss/tabler';
+```
+
+### Import and initialize JavaScript
+
+Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.
+
+If you use static files, include Tabler JS in your base template:
+
+```jinja
+{% load static %}
+<script src="{% static 'js/tabler.min.js' %}"></script>
+```
+
+Django-specific note: when serving local static assets in production, run `collectstatic` so Tabler files are included in your final static output.
+
+### Minimal working example
+
+Create a minimal base template in `templates/base.html`:
+
+```jinja
+{% load static %}
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="{% static 'css/tabler.min.css' %}" />
+  </head>
+  <body>
+    {% block content %}{% endblock %}
+    <script src="{% static 'js/tabler.min.js' %}"></script>
+  </body>
+</html>
+```
+
+Then add a simple page in `templates/home.html`:
+
+```jinja
+{% extends "base.html" %}
+
+{% block content %}
+<div class="page">
+  <div class="page-wrapper">
+    <div class="container-xl py-4">
+      <div class="card">
+        <div class="card-body">
+          <h3 class="card-title">Django + Tabler</h3>
+          <p class="text-secondary mb-0">Your Tabler setup is working.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+```
+
+Run the app:
+
+```shell
+python manage.py runserver
+```
+
+Open the local Django URL and confirm the card is styled with Tabler.
+
+### Next steps
+
+- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
+- Explore [Layout](/ui/layout) to choose page structures.
+- Browse [Components](/ui/components) to add UI building blocks.
+
+</Steps>

docs/pages/ui/getting-started/frameworks/index.mdx

@@ -0,0 +1,24 @@
+---
+title: Frameworks
+description: Step-by-step guides for integrating Tabler with popular frameworks.
+summary: Pick your framework and get a working Tabler page in minutes.
+hide-pagination: true
+layout: '@shared/layouts/DocsMdxLayout.astro'
+---
+
+import DocsCard from '@shared/components/docs/DocsCard.astro'
+import { getDocsChildren } from '@shared/lib/docs-children'
+
+Tabler is framework-agnostic: it styles standard HTML, so it works with any stack that renders markup. Each guide below shows the fastest path to a working Tabler page — installing `@tabler/core`, wiring the styles and scripts where your framework expects them, and rendering a first component.
+
+<div class="row g-3">
+{getDocsChildren('/ui/getting-started/frameworks/').map((child) => (
+	<DocsCard href={child.url} icon={child.icon} title={child.title} description={child.description} />
+))}
+
+<DocsCard title="ASP.NET Core" icon="brand-c-sharp" description="Integrate Tabler with ASP.NET Core." />
+
+<DocsCard title="Flask" icon="flask" description="Integrate Tabler with Flask." />
+
+<DocsCard title="HTMX" icon="html" description="Integrate Tabler with HTMX." />
+</div>

docs/pages/ui/getting-started/frameworks/laravel.mdx

@@ -0,0 +1,123 @@
+---
+title: Laravel
+order: 1
+summary: Set up Tabler in Laravel with Vite and build a first working page.
+description: Integrate Tabler with Laravel.
+icon: brand-laravel
+seoDescription: Install `@tabler/core`, import CSS and JS with Vite, and render a minimal Laravel view with Tabler styles.
+layout: '@shared/layouts/DocsMdxLayout.astro'
+---
+
+import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
+import Steps from '@shared/components/docs/Steps.astro'
+
+Laravel pairs naturally with Tabler: Blade templates render plain server-side HTML, so every Tabler component works out of the box — no wrappers or adapters needed. Styling comes from Tabler CSS, and a small JavaScript bundle powers interactive components such as dropdowns and modals.
+
+This guide uses Laravel's default Vite setup. You will install `@tabler/core`, wire the CSS and JS into your Vite entry files, and render a first Blade view with a Tabler card.
+
+## Setup
+
+<Steps>
+
+### Install Tabler package
+
+Install `@tabler/core` with your preferred package manager:
+
+<TabsPackage name="@tabler/core" />
+
+You can also use CDN files when you do not want a Node-based build step:
+
+<CdnImportPackage />
+
+### Import styles
+
+In a standard Laravel setup, import Tabler CSS in `resources/css/app.css`:
+
+```scss
+@import '@tabler/core/dist/css/tabler.min.css';
+```
+
+For full theme customization, you can import SCSS sources from the package:
+
+```scss
+@import '@tabler/core/scss/tabler';
+```
+
+### Import and initialize JavaScript
+
+Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips. Import it in `resources/js/app.js`:
+
+```js
+import '@tabler/core/dist/js/tabler.min.js'
+```
+
+Laravel-specific note: keep Tabler imports in Vite entry files (`resources/css/app.css` and `resources/js/app.js`) so they are compiled into your application bundles.
+
+### Minimal working example
+
+First, load compiled assets in your base Blade layout (for example `resources/views/layouts/app.blade.php`):
+
+```blade
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    @vite(["resources/css/app.css", "resources/js/app.js"])
+  </head>
+  <body>
+    @yield("content")
+  </body>
+</html>
+```
+
+Then create a simple page route in `routes/web.php`:
+
+```php
+<?php
+
+use Illuminate\Support\Facades\Route;
+
+Route::get("/", function () {
+    return view("welcome");
+});
+```
+
+Then add a small Tabler layout with one card in `resources/views/welcome.blade.php`:
+
+```blade
+@extends("layouts.app")
+
+@section("content")
+<div class="page">
+  <div class="page-wrapper">
+    <div class="container-xl py-4">
+      <div class="card">
+        <div class="card-body">
+          <h3 class="card-title">Laravel + Tabler</h3>
+          <p class="text-secondary mb-0">Your Tabler setup is working.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+@endsection
+```
+
+Run the dev server and Vite:
+
+```shell
+php artisan serve
+npm run dev
+```
+
+Open the local URL from `php artisan serve` and confirm the card is styled with Tabler.
+
+### Next steps
+
+- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
+- Explore [Layout](/ui/layout) to choose page structures.
+- Browse [Components](/ui/components) to add UI building blocks.
+
+</Steps>

docs/pages/ui/getting-started/frameworks/nextjs.mdx

@@ -0,0 +1,126 @@
+---
+title: Next.js
+order: 3
+summary: Set up Tabler in Next.js and build a first working page.
+description: Integrate Tabler with Next.js.
+icon: brand-nextjs
+seoDescription: Install `@tabler/core`, import CSS and JS in Next.js, and render a minimal page layout with a Tabler card.
+layout: '@shared/layouts/DocsMdxLayout.astro'
+---
+
+import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
+import Steps from '@shared/components/docs/Steps.astro'
+
+Next.js renders on the server first, which is great for performance but means browser-only code needs care: Tabler CSS can be imported globally, while `tabler.min.js` must load on the client. This guide shows an App Router pattern that handles both cleanly.
+
+You will install `@tabler/core`, add its CSS to your global stylesheet, mount a small client component for Tabler JavaScript, and render a first page with a Tabler card.
+
+## Setup
+
+<Steps>
+
+### Install Tabler package
+
+Install `@tabler/core` with your preferred package manager:
+
+<TabsPackage name="@tabler/core" />
+
+You can also use CDN files when you need a quick setup:
+
+<CdnImportPackage />
+
+### Import styles
+
+Import Tabler CSS once in your global stylesheet (`app/globals.css`):
+
+```scss
+@import '@tabler/core/dist/css/tabler.min.css';
+```
+
+For full theme customization, import SCSS sources:
+
+```scss
+@import '@tabler/core/scss/tabler';
+```
+
+### Import and initialize JavaScript
+
+Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.
+
+Next.js-specific note: `tabler.min.js` accesses `document`, so load it only on the client. If you import it during SSR, Next.js throws `document is not defined`.
+
+Use a client component and dynamic import (`app/tabler-scripts.jsx`):
+
+```jsx
+'use client'
+
+import { useEffect } from 'react'
+
+export function TablerScripts() {
+  useEffect(() => {
+    import('@tabler/core/dist/js/tabler.min.js')
+  }, [])
+
+  return null
+}
+```
+
+### Minimal working example
+
+Load styles globally and mount client-only scripts in the app layout.
+
+`app/layout.jsx`:
+
+```jsx
+import './globals.css'
+import { TablerScripts } from './tabler-scripts'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <TablerScripts />
+        {children}
+      </body>
+    </html>
+  )
+}
+```
+
+`app/page.jsx`:
+
+```jsx
+export default function Page() {
+  return (
+    <div className="page">
+      <div className="page-wrapper">
+        <div className="container-xl py-4">
+          <div className="card">
+            <div className="card-body">
+              <h3 className="card-title">Next.js + Tabler</h3>
+              <p className="text-secondary mb-0">Your Tabler setup is working.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+```
+
+Run the app:
+
+```shell
+npm run dev
+```
+
+Open the local Next.js URL and confirm the card is styled with Tabler.
+
+### Next steps
+
+- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
+- Explore [Layout](/ui/layout) to choose page structures.
+- Browse [Components](/ui/components) to add UI building blocks.
+
+</Steps>

docs/pages/ui/getting-started/frameworks/nuxt.mdx

@@ -0,0 +1,98 @@
+---
+title: Nuxt
+order: 6
+summary: Set up Tabler in Nuxt and build a first working page.
+description: Integrate Tabler with Nuxt.
+icon: brand-nuxt
+seoDescription: Install `@tabler/core`, import CSS and client-only JS in Nuxt, and render a minimal page layout with a Tabler card.
+layout: '@shared/layouts/DocsMdxLayout.astro'
+---
+
+import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
+import Steps from '@shared/components/docs/Steps.astro'
+
+Nuxt renders on the server by default, so Tabler integrates in two parts: CSS registered globally in `nuxt.config.ts`, and `tabler.min.js` loaded through a client-only plugin so it never runs during server-side rendering.
+
+You will install `@tabler/core`, register the styles, add the client plugin, and render a first page with a Tabler card.
+
+## Setup
+
+<Steps>
+
+### Install Tabler package
+
+Install `@tabler/core` with your preferred package manager:
+
+<TabsPackage name="@tabler/core" />
+
+You can also use CDN files when you need a quick setup:
+
+<CdnImportPackage />
+
+### Import styles
+
+Register Tabler CSS in `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  css: ['@tabler/core/dist/css/tabler.min.css'],
+})
+```
+
+For full theme customization, import SCSS sources in your app stylesheet:
+
+```scss
+@import '@tabler/core/scss/tabler';
+```
+
+### Import and initialize JavaScript
+
+Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.
+
+Nuxt-specific note: `tabler.min.js` accesses `document`, so load it only on the client. If you import it during SSR, Nuxt throws `document is not defined`.
+
+Create a client-only plugin in `plugins/tabler.client.ts`:
+
+```ts
+export default defineNuxtPlugin(async () => {
+  await import('@tabler/core/dist/js/tabler.min.js')
+})
+```
+
+### Minimal working example
+
+Create a minimal `pages/index.vue` page:
+
+```vue
+<template>
+  <div class="page">
+    <div class="page-wrapper">
+      <div class="container-xl py-4">
+        <div class="card">
+          <div class="card-body">
+            <h3 class="card-title">Nuxt + Tabler</h3>
+            <p class="text-secondary mb-0">Your Tabler setup is working.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+Run the app:
+
+```shell
+npm run dev
+```
+
+Open the local Nuxt URL and confirm the card is styled with Tabler.
+
+### Next steps
+
+- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
+- Explore [Layout](/ui/layout) to choose page structures.
+- Browse [Components](/ui/components) to add UI building blocks.
+
+</Steps>

docs/pages/ui/getting-started/frameworks/rails.mdx

@@ -0,0 +1,111 @@
+---
+title: Rails
+order: 9
+summary: Set up Tabler in Rails and build a first working page.
+description: Integrate Tabler with Rails.
+icon: diamond
+seoDescription: Install `@tabler/core`, load CSS and optional JS in Rails, and render a minimal page layout with a Tabler card.
+layout: '@shared/layouts/DocsMdxLayout.astro'
+---
+
+import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
+import Steps from '@shared/components/docs/Steps.astro'
+
+Rails renders server-side HTML through ERB templates, so Tabler classes work directly in your views, and the compiled CSS and JS integrate with the standard Rails bundling gems (`cssbundling-rails` and `jsbundling-rails`).
+
+You will install `@tabler/core`, import its assets in your application bundles, and render a first view with a Tabler card.
+
+## Setup
+
+<Steps>
+
+### Install Tabler package
+
+Install `@tabler/core` with your preferred package manager:
+
+<TabsPackage name="@tabler/core" />
+
+You can also use CDN files when you need a quick setup:
+
+<CdnImportPackage />
+
+### Import styles
+
+For Rails with `cssbundling-rails`, import Tabler CSS in `app/assets/stylesheets/application.scss`:
+
+```scss
+@import '@tabler/core/dist/css/tabler.min.css';
+```
+
+For full theme customization, import SCSS sources instead:
+
+```scss
+@import '@tabler/core/scss/tabler';
+```
+
+### Import and initialize JavaScript
+
+Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.
+
+If you use `jsbundling-rails`, import Tabler JS in `app/javascript/application.js`:
+
+```js
+import '@tabler/core/dist/js/tabler.min.js'
+```
+
+Rails-specific note: if you use `importmap-rails` without npm bundling, prefer CDN for Tabler JS or add compiled files to your asset pipeline and include them from your layout.
+
+### Minimal working example
+
+Create a simple layout in `app/views/layouts/application.html.erb`:
+
+```erb
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
+  </head>
+  <body>
+    <%= yield %>
+  </body>
+</html>
+```
+
+Then add a simple page in `app/views/home/index.html.erb`:
+
+```html
+<div class="page">
+  <div class="page-wrapper">
+    <div class="container-xl py-4">
+      <div class="card">
+        <div class="card-body">
+          <h3 class="card-title">Rails + Tabler</h3>
+          <p class="text-secondary mb-0">Your Tabler setup is working.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+Run the app:
+
+```shell
+bin/rails server
+```
+
+Open the local Rails URL and confirm the card is styled with Tabler.
+
+### Next steps
+
+- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
+- Explore [Layout](/ui/layout) to choose page structures.
+- Browse [Components](/ui/components) to add UI building blocks.
+
+</Steps>

docs/pages/ui/getting-started/frameworks/react.mdx

@@ -0,0 +1,129 @@
+---
+title: React
+order: 2
+summary: Set up Tabler in React and build a first working page.
+description: Integrate Tabler with React.
+icon: brand-react
+seoDescription: Install `@tabler/core`, import CSS and JS in React, and render a minimal page layout with a Tabler card.
+layout: '@shared/layouts/DocsMdxLayout.astro'
+---
+
+import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
+import Steps from '@shared/components/docs/Steps.astro'
+
+React components render standard HTML, so Tabler slots in as the styling layer: you write JSX with Tabler classes and `@tabler/core` provides the CSS. JavaScript is only needed for interactive components such as dropdowns, modals, and tooltips.
+
+This guide uses a standard Vite-based React setup. You will install `@tabler/core`, import its CSS and JS in your entry file, and render a first page with a Tabler card.
+
+## Setup
+
+<Steps>
+
+### Install Tabler package
+
+Install `@tabler/core` with your preferred package manager:
+
+<TabsPackage name="@tabler/core" />
+
+You can also use CDN files when you want a quick no-build setup:
+
+<CdnImportPackage />
+
+### Import styles
+
+Import Tabler CSS once in your React entry file (`src/main.jsx`):
+
+```jsx
+import '@tabler/core/dist/css/tabler.min.css'
+```
+
+For full theme customization, import SCSS sources instead:
+
+```scss
+@import '@tabler/core/scss/tabler';
+```
+
+### Import and initialize JavaScript
+
+Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips. Import it once in `src/main.jsx`:
+
+```jsx
+import '@tabler/core/dist/js/tabler.min.js'
+```
+
+React-specific note: do not initialize DOM-based behavior during render. Use `useEffect`:
+
+```jsx
+import { useEffect } from 'react'
+import { Tooltip } from '@tabler/core'
+
+export function TooltipExample() {
+  useEffect(() => {
+    // Run DOM initialization only after the component is mounted.
+    const elements = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    elements.forEach((element) => new Tooltip(element))
+  }, [])
+
+  return (
+    <button data-bs-toggle="tooltip" title="Example">
+      Hover me
+    </button>
+  )
+}
+```
+
+### Minimal working example
+
+Create a simple `src/main.jsx` that loads Tabler assets and renders the app:
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import '@tabler/core/dist/css/tabler.min.css'
+import '@tabler/core/dist/js/tabler.min.js'
+import App from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
+```
+
+Then create `src/App.jsx` with a minimal Tabler layout and one card:
+
+```jsx
+export default function App() {
+  return (
+    <div className="page">
+      <div className="page-wrapper">
+        <div className="container-xl py-4">
+          <div className="card">
+            <div className="card-body">
+              <h3 className="card-title">React + Tabler</h3>
+              <p className="text-secondary mb-0">Your Tabler setup is working.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+```
+
+Run the app:
+
+```shell
+npm run dev
+```
+
+Open the local Vite URL and confirm the card is styled with Tabler.
+
+### Next steps
+
+- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
+- Explore [Layout](/ui/layout) to choose page structures.
+- Browse [Components](/ui/components) to add UI building blocks.
+
+</Steps>

docs/pages/ui/getting-started/frameworks/sveltekit.mdx

@@ -0,0 +1,113 @@
+---
+title: SvelteKit
+order: 10
+summary: Set up Tabler in SvelteKit and build a first working page.
+description: Integrate Tabler with SvelteKit.
+icon: brand-svelte
+seoDescription: Install `@tabler/core`, import CSS and optional JS in SvelteKit, and render a minimal page layout with a Tabler card.
+layout: '@shared/layouts/DocsMdxLayout.astro'
+---
+
+import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
+import Steps from '@shared/components/docs/Steps.astro'
+
+Svelte components compile to plain HTML and Tabler provides the styling on top. The only SvelteKit-specific step is loading `tabler.min.js` on the client, since pages render on the server first.
+
+You will install `@tabler/core`, import its CSS globally, load the JavaScript from `onMount`, and render a first page with a Tabler card.
+
+## Setup
+
+<Steps>
+
+### Install Tabler package
+
+Install `@tabler/core` with your preferred package manager:
+
+<TabsPackage name="@tabler/core" />
+
+You can also use CDN files when you need a quick setup:
+
+<CdnImportPackage />
+
+### Import styles
+
+Import Tabler CSS once in your global stylesheet (`src/app.css`):
+
+```scss
+@import '@tabler/core/dist/css/tabler.min.css';
+```
+
+For full theme customization, import SCSS sources instead:
+
+```scss
+@import '@tabler/core/scss/tabler';
+```
+
+### Import and initialize JavaScript
+
+Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.
+
+In SvelteKit, load `tabler.min.js` only on the client. `onMount` runs only in the browser, so a dynamic import inside it never executes during SSR:
+
+```html
+<script>
+  import { onMount } from 'svelte'
+
+  onMount(() => {
+    import('@tabler/core/dist/js/tabler.min.js')
+  })
+</script>
+```
+
+SvelteKit-specific note: `tabler.min.js` accesses `document`, so importing it during SSR can cause `document is not defined`.
+
+### Minimal working example
+
+Create a simple `src/routes/+layout.svelte` that loads global styles and Tabler JavaScript:
+
+```html
+<script>
+  import { onMount } from 'svelte'
+  import '../app.css'
+
+  onMount(() => {
+    import('@tabler/core/dist/js/tabler.min.js')
+  })
+</script>
+
+<slot />
+```
+
+Then add a minimal page in `src/routes/+page.svelte`:
+
+```html
+<div class="page">
+  <div class="page-wrapper">
+    <div class="container-xl py-4">
+      <div class="card">
+        <div class="card-body">
+          <h3 class="card-title">SvelteKit + Tabler</h3>
+          <p class="text-secondary mb-0">Your Tabler setup is working.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+Run the app:
+
+```shell
+npm run dev
+```
+
+Open the local SvelteKit URL and confirm the card is styled with Tabler.
+
+### Next steps
+
+- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
+- Explore [Layout](/ui/layout) to choose page structures.
+- Browse [Components](/ui/components) to add UI building blocks.
+
+</Steps>

docs/pages/ui/getting-started/frameworks/symfony.mdx

@@ -0,0 +1,116 @@
+---
+title: Symfony
+order: 7
+summary: Set up Tabler in Symfony and build a first working page.
+description: Integrate Tabler with Symfony.
+icon: brand-symfony
+seoDescription: Install `@tabler/core`, import CSS and JS with Symfony asset tooling, and render a minimal page layout with a Tabler card.
+layout: '@shared/layouts/DocsMdxLayout.astro'
+---
+
+import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
+import Steps from '@shared/components/docs/Steps.astro'
+
+Symfony's Twig templates render server-side HTML, so Tabler components work without any adapters — you add Tabler classes to your markup and let the asset pipeline deliver the CSS and JS.
+
+This guide uses Webpack Encore. You will install `@tabler/core`, import its assets in your Encore entries, and render a first Twig template with a Tabler card.
+
+## Setup
+
+<Steps>
+
+### Install Tabler package
+
+Install `@tabler/core` with your preferred package manager:
+
+<TabsPackage name="@tabler/core" />
+
+You can also use CDN files when you need a quick setup:
+
+<CdnImportPackage />
+
+### Import styles
+
+If you use Webpack Encore, import Tabler CSS in `assets/styles/app.scss`:
+
+```scss
+@import '@tabler/core/dist/css/tabler.min.css';
+```
+
+For full theme customization, import SCSS sources instead:
+
+```scss
+@import '@tabler/core/scss/tabler';
+```
+
+### Import and initialize JavaScript
+
+Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.
+
+If you use Webpack Encore, import Tabler JS in `assets/app.js`:
+
+```js
+import '@tabler/core/dist/js/tabler.min.js'
+```
+
+Symfony-specific note: include generated Encore assets in your base Twig template: `{{ encore_entry_link_tags("app") }}` and `{{ encore_entry_script_tags("app") }}`.
+
+If you use AssetMapper instead of Encore, use CDN links or copy built Tabler files to your public assets.
+
+### Minimal working example
+
+Create a minimal Twig layout in `templates/base.html.twig`:
+
+```twig
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    {{ encore_entry_link_tags("app") }}
+  </head>
+  <body>
+    {% block body %}{% endblock %}
+    {{ encore_entry_script_tags("app") }}
+  </body>
+</html>
+```
+
+Then add a simple page in `templates/home/index.html.twig`:
+
+```twig
+{% extends "base.html.twig" %}
+
+{% block body %}
+<div class="page">
+  <div class="page-wrapper">
+    <div class="container-xl py-4">
+      <div class="card">
+        <div class="card-body">
+          <h3 class="card-title">Symfony + Tabler</h3>
+          <p class="text-secondary mb-0">Your Tabler setup is working.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+```
+
+Run the app and asset build:
+
+```shell
+symfony server:start
+npm run dev
+```
+
+Open the local Symfony URL and confirm the card is styled with Tabler.
+
+### Next steps
+
+- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
+- Explore [Layout](/ui/layout) to choose page structures.
+- Browse [Components](/ui/components) to add UI building blocks.
+
+</Steps>

docs/pages/ui/getting-started/frameworks/vue.mdx

@@ -0,0 +1,113 @@
+---
+title: Vue
+order: 4
+summary: Set up Tabler in Vue and build a first working page.
+description: Integrate Tabler with Vue.
+icon: brand-vue
+seoDescription: Install `@tabler/core`, import CSS and JS in Vue, and render a minimal page layout with a Tabler card.
+layout: '@shared/layouts/DocsMdxLayout.astro'
+---
+
+import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
+import Steps from '@shared/components/docs/Steps.astro'
+
+Vue single-file components render standard HTML templates, so Tabler classes work directly in your markup while `@tabler/core` supplies the styling. JavaScript is only needed for interactive components such as dropdowns, modals, and tooltips.
+
+This guide uses a standard Vite-based Vue setup. You will install `@tabler/core`, import its CSS and JS in `src/main.js`, and render a first page with a Tabler card.
+
+## Setup
+
+<Steps>
+
+### Install Tabler package
+
+Install `@tabler/core` with your preferred package manager:
+
+<TabsPackage name="@tabler/core" />
+
+You can also use CDN files when you need a quick setup:
+
+<CdnImportPackage />
+
+### Import styles
+
+Import Tabler CSS once in your Vue entry file (`src/main.js`):
+
+```js
+import '@tabler/core/dist/css/tabler.min.css'
+```
+
+For full theme customization, import SCSS sources instead:
+
+```scss
+@import '@tabler/core/scss/tabler';
+```
+
+### Import and initialize JavaScript
+
+Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips. Import it once in `src/main.js`:
+
+```js
+import '@tabler/core/dist/js/tabler.min.js'
+```
+
+Vue-specific note: initialize DOM-based behavior after mount, not during render. Use `onMounted` in components that need manual initialization:
+
+```js
+import { onMounted } from 'vue'
+import { Tooltip } from '@tabler/core'
+
+onMounted(() => {
+  const elements = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+  elements.forEach((element) => new Tooltip(element))
+})
+```
+
+### Minimal working example
+
+Create a simple `src/main.js` that loads Tabler assets and mounts the app:
+
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import '@tabler/core/dist/css/tabler.min.css'
+import '@tabler/core/dist/js/tabler.min.js'
+
+createApp(App).mount('#app')
+```
+
+Then create `src/App.vue` with a minimal Tabler layout and one card:
+
+```vue
+<template>
+  <div class="page">
+    <div class="page-wrapper">
+      <div class="container-xl py-4">
+        <div class="card">
+          <div class="card-body">
+            <h3 class="card-title">Vue + Tabler</h3>
+            <p class="text-secondary mb-0">Your Tabler setup is working.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+Run the app:
+
+```shell
+npm run dev
+```
+
+Open the local Vite URL and confirm the card is styled with Tabler.
+
+### Next steps
+
+- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
+- Explore [Layout](/ui/layout) to choose page structures.
+- Browse [Components](/ui/components) to add UI building blocks.
+
+</Steps>

docs/pages/ui/getting-started/how-to-contribute.mdx

@@ -5,6 +5,7 @@ description: Guide to contributing to Tabler and setting up for development.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
 import Example from '@shared/components/docs/Example.astro';
+import Steps from '@shared/components/docs/Steps.astro'
 
 Contributions are always welcome and highly encouraged! Whether you're new to open source or a seasoned contributor, your input helps make Tabler better for everyone. If you're new to open source, we recommend reading a [how to contribute](https://opensource.guide/how-to-contribute/) guide to learn more about contributing.
 
@@ -40,7 +41,7 @@ Follow these steps to set up Tabler for development:
 
 To set up Tabler for development, follow these steps:
 
-<div class="steps steps-vertical">
+<Steps>
 
 ### Ensure Node.js and pnpm are installed
 
@@ -68,7 +69,7 @@ pnpm run dev
 ### Make changes
 
 Make your changes in the appropriate folders, such as `./core/`, `./preview/` or `./docs/`. Avoid modifying files in any `dist` folders, as they are auto-generated during the build process and will be overwritten.
-</div>
+</Steps>
 
 ## Project structure
 

docs/pages/ui/getting-started/installation.mdx

@@ -2,16 +2,23 @@
 title: Installation
 order: 1
 summary: Learn how to set up Tabler in your project by creating a basic HTML file, adding Tabler’s CSS and JavaScript, and exploring its powerful components to build responsive and visually stunning web applications.
-description: "Set up Tabler: HTML, CSS, JS, and build stunning UIs."
+description: 'Set up Tabler: HTML, CSS, JS, and build stunning UIs.'
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+
+import Example from '@shared/components/docs/Example.astro'
+import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
+import { Code } from 'astro:components'
+import { site } from '@shared/lib/site.ts'
+import Steps from '@shared/components/docs/Steps.astro'
+
+Using a framework? See [Tabler framework integration guides](/ui/getting-started/frameworks).
 
 This guide will take you through the essential steps to set up Tabler in your project, from creating a basic HTML file to incorporating Tabler’s styles and scripts. Let’s dive in!
 
 ## Setup
 
-<div class="steps steps-vertical">
+<Steps>
 
 ### Create a Basic HTML File
 
@@ -35,28 +42,26 @@ Begin by creating a new `index.html` file in the root of your project. This file
 
 Enhance your page by including Tabler's CSS and JavaScript files. Use the following links to load the core Tabler styles and scripts from the CDN:
 
-```html
+<CdnImportPackage />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/css/tabler.min.css" />
-<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/js/tabler.min.js"></script>
-```
 
 Update your HTML file to include these resources:
 
-```html
+<Code
-<!doctype html>
+  lang="html"
+  code={`<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Tabler Demo</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/css/tabler.min.css" />
+    <link rel="stylesheet" href="${site.cdnUrl}/dist/css/tabler.min.css" />
   </head>
   <body>
     <h1>Hello, Tabler!</h1>
-    <script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/js/tabler.min.js"></script>
+    <script src="${site.cdnUrl}/dist/js/tabler.min.js"></script>
   </body>
-</html>
+</html>`}
-```
+/>
 
 This setup includes the Tabler CSS and JavaScript via a CDN, providing a responsive and functional base for your project.
 
@@ -66,6 +71,6 @@ You can also download the files and include them locally in your project. For mo
 
 Save the file and open it in your browser. You should see your first Tabler-powered page! From here, you can start adding layouts and components to create a fully functional and visually appealing web application.
 
-</div>
+</Steps>
 
 With these simple steps, you're ready to explore Tabler's features and build stunning web interfaces. For inspiration and guidance, you can view live demos at [preview.tabler.io](https://preview.tabler.io) and consult our [official documentation](https://docs.tabler.io) for detailed instructions and examples.

docs/pages/ui/plugins/flags.mdx

@@ -9,6 +9,7 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
 
 import Example from '@shared/components/docs/Example.astro'
 import Flags from '@shared/components/docs/Flags.astro'
+import CdnImportPlugin from '@shared/components/docs/CdnImportPlugin.astro'
 
 ## Installation
 
@@ -16,9 +17,7 @@ This part of Tabler is distributed as a plugin. To enable it you should include
 
 You can also include the plugin via CDN:
 
-```html
+<CdnImportPlugin plugins={['flags']} />
-<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler-flags.min.css" />
-```
 
 ## Flag
 

docs/pages/ui/plugins/payments.mdx

@@ -8,6 +8,7 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
 
 import Example from '@shared/components/docs/Example.astro'
 import Payments from '@shared/components/docs/Payments.astro'
+import CdnImportPlugin from '@shared/components/docs/CdnImportPlugin.astro'
 
 ## Installation
 
@@ -15,9 +16,7 @@ This part of Tabler is distributed as a plugin. To enable it you should include
 
 You can also include the plugin via CDN:
 
-```html
+<CdnImportPlugin plugins={['payments']} />
-<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler-payments.min.css" />
-```
 
 ## Payment
 

docs/pages/ui/plugins/social-icons.mdx

@@ -9,6 +9,7 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
 
 import Example from '@shared/components/docs/Example.astro'
 import Socials from '@shared/components/docs/Socials.astro'
+import CdnImportPlugin from '@shared/components/docs/CdnImportPlugin.astro'
 
 ## Installation
 
@@ -16,9 +17,7 @@ This part of Tabler is distributed as a plugin. To enable it you should include
 
 You can also include the plugin via CDN:
 
-```html
+<CdnImportPlugin plugins={['socials']} />
-<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler-socials.min.css" />
-```
 
 ## Social icons
 

pnpm-lock.yaml

@@ -26,7 +26,7 @@ importers:
         version: 0.5.18
       autoprefixer:
         specifier: ^10.5.2
-        version: 10.5.2(postcss@8.5.18)
+        version: 10.5.2(postcss@8.5.23)
       bundlewatch:
         specifier: ^0.4.2
         version: 0.4.2
@@ -59,10 +59,10 @@ importers:
         version: 10.34.4
       postcss:
         specifier: ^8.5.18
-        version: 8.5.18
+        version: 8.5.23
       postcss-cli:
         specifier: ^11.0.1
-        version: 11.0.1(postcss@8.5.18)(tsx@4.23.0)
+        version: 11.0.1(postcss@8.5.23)(tsx@4.23.0)
       prettier:
         specifier: ^3.9.4
         version: 3.9.4
@@ -2850,6 +2850,11 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  nanoid@3.3.15:
+    resolution: {integrity: sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   nanoid@3.3.16:
     resolution: {integrity: sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -3135,8 +3140,12 @@ packages:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postcss@8.5.18:
+  postcss@8.5.16:
-    resolution: {integrity: sha512-xdB1oSLHbz1vRWgCDalrCqEFTWzFlhqFC5tIHLMOSUIjhm3XXQ1qrFy8S/ESr1JYRRXqM3c1QFiMZUJdUTqyMQ==}
+    resolution: {integrity: sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.5.23:
+    resolution: {integrity: sha512-g50586zr4bZmwFiTlflMu8E0bDTb5I5gertgwAKmsdUlTQIhZtunzUlD1WSzwcVWPoAVpsrA6vlfCD7oXvRwgg==}
     engines: {node: ^10 || ^12 || >=14}
 
   preact@10.12.1:
@@ -5315,13 +5324,13 @@ snapshots:
 
   asynckit@0.4.0: {}
 
-  autoprefixer@10.5.2(postcss@8.5.18):
+  autoprefixer@10.5.2(postcss@8.5.23):
     dependencies:
       browserslist: 4.28.5
       caniuse-lite: 1.0.30001800
       fraction.js: 5.3.4
       picocolors: 1.1.1
-      postcss: 8.5.18
+      postcss: 8.5.23
       postcss-value-parser: 4.2.0
 
   autosize@6.0.1: {}
@@ -5863,8 +5872,8 @@ snapshots:
       commander: 12.1.0
       escape-string-regexp: 5.0.0
       picocolors: 1.1.1
-      postcss: 8.5.18
+      postcss: 8.5.16
-      postcss-scss: 4.0.9(postcss@8.5.18)
+      postcss-scss: 4.0.9(postcss@8.5.16)
       tinyglobby: 0.2.17
 
   find-up@4.1.0:
@@ -6988,6 +6997,8 @@ snapshots:
 
   ms@2.1.3: {}
 
+  nanoid@3.3.15: {}
+
   nanoid@3.3.16: {}
 
   neotraverse@0.6.18: {}
@@ -7220,15 +7231,15 @@ snapshots:
 
   pnpm@10.34.4: {}
 
-  postcss-cli@11.0.1(postcss@8.5.18)(tsx@4.23.0):
+  postcss-cli@11.0.1(postcss@8.5.23)(tsx@4.23.0):
     dependencies:
       chokidar: 3.6.0
       dependency-graph: 1.0.0
       fs-extra: 11.3.6
       picocolors: 1.1.1
-      postcss: 8.5.18
+      postcss: 8.5.23
-      postcss-load-config: 5.1.0(postcss@8.5.18)(tsx@4.23.0)
+      postcss-load-config: 5.1.0(postcss@8.5.23)(tsx@4.23.0)
-      postcss-reporter: 7.1.0(postcss@8.5.18)
+      postcss-reporter: 7.1.0(postcss@8.5.23)
       pretty-hrtime: 1.0.3
       read-cache: 1.0.0
       slash: 5.1.0
@@ -7238,33 +7249,39 @@ snapshots:
       - jiti
       - tsx
 
-  postcss-load-config@5.1.0(postcss@8.5.18)(tsx@4.23.0):
+  postcss-load-config@5.1.0(postcss@8.5.23)(tsx@4.23.0):
     dependencies:
       lilconfig: 3.1.3
       yaml: 2.9.0
     optionalDependencies:
-      postcss: 8.5.18
+      postcss: 8.5.23
       tsx: 4.23.0
 
-  postcss-reporter@7.1.0(postcss@8.5.18):
+  postcss-reporter@7.1.0(postcss@8.5.23):
     dependencies:
       picocolors: 1.1.1
-      postcss: 8.5.18
+      postcss: 8.5.23
       thenby: 1.4.1
 
-  postcss-scss@4.0.9(postcss@8.5.18):
+  postcss-scss@4.0.9(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.18
+      postcss: 8.5.16
 
   postcss-value-parser@4.2.0: {}
 
   postcss@8.4.31:
     dependencies:
-      nanoid: 3.3.16
+      nanoid: 3.3.15
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  postcss@8.5.18:
+  postcss@8.5.16:
+    dependencies:
+      nanoid: 3.3.15
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postcss@8.5.23:
     dependencies:
       nanoid: 3.3.16
       picocolors: 1.1.1
@@ -7531,7 +7548,7 @@ snapshots:
     dependencies:
       escalade: 3.2.0
       picocolors: 1.1.1
-      postcss: 8.5.18
+      postcss: 8.5.23
       strip-json-comments: 3.1.1
 
   run-con@1.3.2:
@@ -8012,7 +8029,7 @@ snapshots:
     dependencies:
       lightningcss: 1.32.0
       picomatch: 4.0.5
-      postcss: 8.5.18
+      postcss: 8.5.23
       rolldown: 1.1.4
       tinyglobby: 0.2.17
     optionalDependencies:
@@ -8028,7 +8045,7 @@ snapshots:
     dependencies:
       lightningcss: 1.32.0
       picomatch: 4.0.5
-      postcss: 8.5.18
+      postcss: 8.5.23
       rolldown: 1.1.4
       tinyglobby: 0.2.17
     optionalDependencies:

shared/astro/components/docs/CdnImportPackage.astro

@@ -0,0 +1,10 @@
+---
+import { Code } from 'astro:components'
+import { site } from '@shared/lib/site.ts'
+---
+
+<Code
+	lang="html"
+	code={`<link rel="stylesheet" href="${site.cdnUrl}/dist/css/tabler.min.css" />
+<script src="${site.cdnUrl}/dist/js/tabler.min.js"></script>`}
+/>

shared/astro/components/docs/CdnImportPlugin.astro

@@ -0,0 +1,17 @@
+---
+import { Code } from 'astro:components'
+import { site } from '@shared/lib/site.ts'
+
+interface Props {
+	plugins: string[],
+}
+
+const { plugins }: Props = Astro.props
+---
+
+<Code
+	lang="html"
+	code={plugins.map(plugin => {
+		return `<link rel="stylesheet" href="${site.cdnUrl}/dist/css/tabler-${plugin}.min.css" />`
+	}).join('\n')}
+/>

shared/astro/components/docs/DocsCard.astro

@@ -2,30 +2,35 @@
 import Icon from "../Icon.astro";
 
 interface Props {
-	href: string;
+	/** When omitted, the card renders as a non-interactive "Coming soon" tile. */
+	href?: string;
 	icon?: string;
 	title: string;
 	description: string;
 }
 
 const { href, icon, title, description }: Props = Astro.props;
+
+const Tag = href ? 'a' : 'div';
 ---
 
-
 <div class="col-md-6">
-	<a href={ href } class="card">
+	<Tag href={href} class:list={['card', !href && 'bg-surface-tertiary']}>
 		<div class="card-body">
-			<div class="row">
+			<div class="position-relative">
-				{ icon && (
+				{ !href && <span class="badge position-absolute top-0 end-0">Coming soon</span> }
-					<div class="col-auto">
+				<div class="row">
-						<Icon name={icon} class="text-secondary" />
+					{ icon && (
+						<div class="col-auto">
+							<Icon name={icon} class="text-secondary" />
+						</div>
+					)}
+					<div class="col">
+						<div class="h3">{ title }</div>
+						<p class="text-secondary m-0 fs-4 lh-base">{ description }</p>
 					</div>
-				)}
-				<div class="col">
-					<div class="h3">{ title }</div>
-					<p class="text-secondary m-0 fs-4 lh-base">{ description }</p>
 				</div>
 			</div>
 		</div>
-	</a>
+	</Tag>
 </div>

shared/astro/components/docs/DocsMenu.astro

@@ -40,7 +40,9 @@ const slug = (u: string) => u.split('/').filter(Boolean).join('');
 					<nav class="nav nav-vertical">
 						{level1.children.map((level2) => {
 							const hasChildren = Boolean(level2.children && level2.children.length > 0);
-							const expanded = url.includes(level2.url);
+							// Expanded only for the group's own page or one of its direct children —
+							// a prefix check would also expand "Introduction" on /ui/getting-started/frameworks/* pages.
+							const expanded = url === level2.url || Boolean(level2.children?.some((child) => child.url === url));
 							return (
 								<div>
 									{/* as in Liquid: href/data-bs-* only when the element has children */}

shared/astro/components/docs/DocsPagination.astro

@@ -4,12 +4,19 @@ import DocsCard from './DocsCard.astro';
 import docs from '@shared/data/docs.json';
 import Icon from '../Icon.astro';
 import { getDocsChildren } from '@shared/lib/docs-children';
+import type { DocsChildPage } from '@shared/lib/docs-children';
 
 interface MenuLeaf {
 	title: string;
 	url: string;
 }
 
+interface MenuNode {
+	title: string;
+	url?: string;
+	children?: MenuNode[];
+}
+
 interface Props {
 	/** Page URL in the docs namespace (equivalent of page.url), e.g. "/ui/components/alert/". */
 	url: string;
@@ -19,30 +26,46 @@ const { url } = Astro.props;
 
 const children = getDocsChildren(url);
 
-type Section = { title: string; children?: (MenuLeaf & { children?: MenuLeaf[] })[] };
+type Pagination = {
+	prev: MenuLeaf | null;
+	next: MenuLeaf | null;
+	found: boolean;
+};
 
-let prev: MenuLeaf | null = null;
+function findPage(nodes: MenuNode[]): Pagination | null {
-let next: MenuLeaf | null = null;
+	const index = nodes.findIndex((item) => item.url === url);
-let found = false;
 
-for (const level1 of docs.menu as Section[]) {
+	if (index !== -1) {
-	for (const level2 of level1.children ?? []) {
+		const previousNode = index > 0 ? nodes[index - 1] : null;
-		const siblings = level2.children ?? [];
+		const nextNode = index < nodes.length - 1 ? nodes[index + 1] : null;
-		const index = siblings.findIndex((item) => item.url === url);
+
-		if (index !== -1) {
+		return {
-			found = true;
+			prev: previousNode?.url ? { title: previousNode.title, url: previousNode.url } : null,
-			prev = index > 0 ? siblings[index - 1] : null;
+			next: nextNode?.url ? { title: nextNode.title, url: nextNode.url } : null,
-			next = index < siblings.length - 1 ? siblings[index + 1] : null;
+			found: true,
-		}
+		};
 	}
+
+	for (const node of nodes) {
+		const result = node.children ? findPage(node.children) : null;
+		if (result) return result;
+	}
+
+	return null;
 }
+
+const { prev, next, found } = findPage(docs.menu as MenuNode[]) ?? {
+	prev: null,
+	next: null,
+	found: false,
+};
 ---
 
 {
 	children.length > 0 && (
 		<div class="mt-6 pt-6">
 			<div class="row row-deck row-cards">
-				{children.map((child) => (
+				{children.map((child: DocsChildPage) => (
 					<DocsCard
 						href={child.url}
 						title={child.title}

shared/astro/components/docs/Steps.astro

@@ -0,0 +1,8 @@
+---
+// Vertical numbered steps for docs guides. Each `###` heading inside the slot
+// starts a new numbered step (numbering comes from the .steps styles in core).
+---
+
+<div class="steps steps-vertical">
+	<slot />
+</div>

shared/astro/data/docs.json

@@ -58,6 +58,56 @@
 						}
 					]
 				},
+				{
+					"title": "Frameworks",
+					"url": "/ui/getting-started/frameworks/",
+					"children": [
+						{
+							"title": "Laravel",
+							"url": "/ui/getting-started/frameworks/laravel/"
+						},
+						{
+							"title": "React",
+							"url": "/ui/getting-started/frameworks/react/"
+						},
+						{
+							"title": "Next.js",
+							"url": "/ui/getting-started/frameworks/nextjs/"
+						},
+						{
+							"title": "Vue",
+							"url": "/ui/getting-started/frameworks/vue/"
+						},
+						{
+							"title": "Angular",
+							"url": "/ui/getting-started/frameworks/angular/"
+						},
+						{
+							"title": "Nuxt",
+							"url": "/ui/getting-started/frameworks/nuxt/"
+						},
+						{
+							"title": "Symfony",
+							"url": "/ui/getting-started/frameworks/symfony/"
+						},
+						{
+							"title": "Django",
+							"url": "/ui/getting-started/frameworks/django/"
+						},
+						{
+							"title": "Rails",
+							"url": "/ui/getting-started/frameworks/rails/"
+						},
+						{
+							"title": "SvelteKit",
+							"url": "/ui/getting-started/frameworks/sveltekit/"
+						},
+						{
+							"title": "Astro",
+							"url": "/ui/getting-started/frameworks/astro/"
+						}
+					]
+				},
 				{
 					"title": "Base",
 					"url": "/ui/base/",

shared/astro/layouts/DocsLayout.astro

@@ -42,6 +42,10 @@ interface Props {
 	url?: string;
 	/** front matter `docs-libs`: extra libraries from src/data/libs.json (css+js) */
 	docsLibs?: string[];
+	/** hides child and previous/next page navigation */
+	hidePagination?: boolean;
+	/** repo-relative source path for the "Edit this page" link, e.g. "docs/pages/ui/components/alert.mdx" */
+	editPath?: string;
 }
 
 const {
@@ -53,6 +57,8 @@ const {
 	addedIn,
 	toc = [],
 	docsLibs = [],
+	hidePagination = false,
+	editPath,
 } = Astro.props;
 const environment = process.env.NODE_ENV || 'production';
 
@@ -83,8 +89,9 @@ const canonicalUrl = new URL(docsUrl, Astro.site ?? site.docsUrl).href;
 const depth = docsUrl.split('/').filter(Boolean).length;
 const relative = depth === 0 ? '.' : '../'.repeat(depth).slice(0, -1);
 
-// Equivalent of page.inputPath: ./content/ui/components/alert.md
+// Source path for the "Edit this page" link. Prefer the real path passed by the
-const inputPath = `./content${docsUrl.replace(/\/$/, '')}.md`;
+// MDX layout; fall back to the flat-page convention (docs/pages/<url>.mdx).
+const editFilePath = editPath ?? `docs/pages${docsUrl.replace(/\/$/, '')}.mdx`;
 
 // JS/CSS libraries as in Eleventy: docs-libs + clipboard (always included).
 // In dev file names stay unchanged (e.g. dist/clipboard.min.js keeps .min — the reference has it so).
@@ -222,12 +229,12 @@ const docsLinks = docs.links as DocsLink[];
 									    page must supply headings with ids (MDX does this by default) */}
 									<slot />
 
-									<DocsPagination url={docsUrl} />
+									{!hidePagination && <DocsPagination url={docsUrl} />}
 
 									<div class="mt-7">
 										<div>
 											<a
-												href={`${site.githubUrl}/tree/dev/docs/${inputPath}`}
+												href={`${site.githubUrl}/edit/dev/${editFilePath}`}
 												class="link-primary"
 												target="_blank"><Icon name="edit" class="icon-inline" /> Edit this page on GitHub</a
 											>

shared/astro/layouts/DocsMdxLayout.astro

@@ -1,6 +1,6 @@
 ---
 // Adapter: MDX (layout in frontmatter) → DocsLayout.
-// Astro passes { frontmatter, headings, url } to the MDX layout — we map it
+// Astro passes { frontmatter, headings, url, file } to the MDX layout — we map it
 // onto DocsLayout props, computing the TOC from the headings (equivalent of the `toc` filter).
 import DocsLayout from './DocsLayout.astro';
 
@@ -19,14 +19,22 @@ interface MdxFrontmatter {
 	bootstrapLink?: string;
 	'added-in'?: string;
 	'docs-libs'?: string[];
+	'hide-pagination'?: boolean;
 }
 
-const { frontmatter, headings = [], url } = Astro.props as {
+const { frontmatter, headings = [], url, file } = Astro.props as {
 	frontmatter: MdxFrontmatter;
 	headings: MdxHeading[];
 	url?: string;
+	file?: string;
 };
 
+// Repo-relative source path for the "Edit this page" link, e.g.
+// "docs/pages/ui/components/alert.mdx" (`file` is the absolute path of the MDX page).
+const editPath = file?.includes('/docs/pages/')
+	? file.replace(/^.*\/docs\/pages\//, 'docs/pages/')
+	: undefined;
+
 const docsLibs = frontmatter['docs-libs'] ?? [];
 
 const toc = headings
@@ -47,8 +55,10 @@ const toc = headings
 	bootstrapLink={frontmatter.bootstrapLink}
 	addedIn={frontmatter['added-in']}
 	docsLibs={docsLibs}
+	hidePagination={frontmatter['hide-pagination']}
+	editPath={editPath}
 	toc={toc}
-	url={url ? `${url.replace(/\.html$/, '')}/` : undefined}
+	url={url ? `${url.replace(/\.html$/, '').replace(/\/$/, '')}/` : undefined}
 >
 	<slot />
 </DocsLayout>

shared/astro/lib/site.ts

@@ -1,8 +1,12 @@
+import corePackage from '@tabler/core/package.json';
+
+const version = corePackage.version;
+
 export const site = {
 	title: 'Tabler',
-	// Version from /Users/chomik/htdocs/tabler/core/package.json (hardcoded for the PoC).
+	version,
-	version: '1.4.0',
 	docsUrl: 'https://docs.tabler.io',
+	cdnUrl: `https://cdn.jsdelivr.net/npm/@tabler/core@${version}`,
 	// site.email — used by parts/modals/success.html ({{ site.email }}). Verified
 	// against the reference build (support@tabler.io).
 	email: 'support@tabler.io',