Restructure shared Astro sources and import aliases (#2737)

2026-08-05 01:44:41 +04:00 · 2026-07-30 23:58:48 +02:00
parent 0f8dcb0a3c
commit ad2ed849dd
492 changed files with 1469 additions and 1714 deletions
@@ -25,8 +25,11 @@ export default defineConfig({
    resolve: {
      alias: {
        '@data': fileURLToPath(new URL('../shared/data', import.meta.url)),
-        // Astro components/lib shared with preview-astro (single source of truth)
-        '@shared': fileURLToPath(new URL('../shared/astro', import.meta.url)),
+        // Astro components/lib shared with preview (single source of truth)
+        '@shared': fileURLToPath(new URL('../shared', import.meta.url)),
+        '@ui': fileURLToPath(new URL('../shared/ui', import.meta.url)),
+        // docs-only components (Example, DocsMenu, …)
+        '@components': fileURLToPath(new URL('./components', import.meta.url)),
        // this package's pages dir — used by @shared/lib/docs-children's glob
        '@pages': fileURLToPath(new URL('./pages', import.meta.url)),
      },
@@ -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>`}
+/>
@@ -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')}
+/>
@@ -0,0 +1,18 @@
+---
+interface Props {
+	colors: Record<string, { prop: string; title: string }>;
+}
+
+const { colors }: Props = Astro.props;
+---
+
+<div class="row row-cols-4 row-cols-md-6 g-3 g-md-4">
+	{Object.values(colors).map((color, i) => {
+		return (
+			<div class="col-2 text-center">
+				<div class="p-6 rounded border" style={{ backgroundColor: `var(${color.prop})` }}></div>
+				<div class="small">{color.title}</div>
+			</div>
+		)
+	})}
+</div>
@@ -0,0 +1,36 @@
+---
+import Icon from "@ui/Icon.astro";
+
+interface Props {
+	/** 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">
+	<Tag href={href} class:list={['card', !href && 'bg-surface-tertiary']}>
+		<div class="card-body">
+			<div class="position-relative">
+				{ !href && <span class="badge position-absolute top-0 end-0">Coming soon</span> }
+				<div class="row">
+					{ 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>
+			</div>
+		</div>
+	</Tag>
+</div>
@@ -0,0 +1,18 @@
+---
+// Equivalent of docs/logo.html — the Tabler logo with wordmark (120x32), pasted 1:1.
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="32" fill="none">
+	<path
+		fill="currentColor"
+		d="M78.263 10.957a5.96 5.96 0 0 1 3.158.895c.947.632 1.737 1.474 2.21 2.474.58 1.105.843 2.368.843 3.631 0 1.369-.264 2.527-.79 3.632-.474 1-1.263 1.895-2.21 2.526-.948.58-2 .895-3.106.895a5.45 5.45 0 0 1-2.263-.474c-.684-.316-1.263-.684-1.79-1.21v.158c0 .42-.157.79-.42 1.105-.263.316-.632.421-1.105.421-.79 0-1.474-.632-1.527-1.421V7.536c0-.42.158-.79.421-1.105a1.24 1.24 0 0 1 1.106-.421c.42 0 .789.158 1.105.421.263.316.42.684.42 1.105V12.8c.475-.579 1.053-1 1.685-1.315.684-.369 1.474-.527 2.263-.527ZM51.737 21.852a.82.82 0 0 1 .631.316c.21.21.316.526.316.895 0 .473-.263.842-.737 1.158-.473.315-1.052.473-1.684.473-.947.053-1.842-.21-2.631-.684-.737-.421-1.053-1.421-1.053-2.842V14.22H45.42c-.737.052-1.368-.58-1.421-1.316v-.106c0-.368.158-.736.421-1 .263-.263.632-.368 1-.368h1.158V9.799c0-.42.158-.789.421-1.105a1.24 1.24 0 0 1 1.105-.42c.421 0 .79.157 1.053.42.263.316.42.684.42 1.105v1.632h1.79c.737-.053 1.369.579 1.421 1.316v.105c0 .737-.631 1.368-1.368 1.368h-1.84v6.843c0 .368.105.631.263.79.21.157.421.262.737.262.108 0 .217-.024.359-.057.065-.015.137-.032.22-.048.21-.105.368-.158.579-.158Zm14.737-10.895c.79 0 1.473.632 1.526 1.421v10.79c0 .42-.158.79-.421 1.105-.263.316-.632.421-1.105.421a1.47 1.47 0 0 1-1.053-.42c-.263-.317-.421-.685-.421-1.106a5.664 5.664 0 0 1-1.684 1.263c-.684.316-1.474.526-2.263.526a5.959 5.959 0 0 1-3.158-.894c-.948-.632-1.737-1.474-2.21-2.474a7.842 7.842 0 0 1-.843-3.632c0-1.368.263-2.526.79-3.631.473-1 1.263-1.895 2.21-2.527.947-.579 2-.894 3.105-.894 1.527 0 2.948.526 4.053 1.579 0-.421.158-.79.421-1.106a1.144 1.144 0 0 1 1.053-.42Zm-2.421 10a4.737 4.737 0 0 0 1.052-3c0-1.21-.368-2.21-1.052-3.052a3.316 3.316 0 0 0-2.685-1.21c-1.105 0-1.947.42-2.631 1.21-.684.842-1.053 1.947-1.053 3.052 0 1.21.369 2.21 1 3 .684.79 1.684 1.264 2.684 1.21 1.106 0 2-.42 2.685-1.21Zm16.473 0c.684-.842 1.053-1.947 1.053-3.052 0-1.21-.316-2.21-1-3a3.405 3.405 0 0 0-2.684-1.21c-1.105 0-2 .42-2.684 1.21a4.842 4.842 0 0 0-1.053 3c0 1.21.316 2.21 1.052 3.052.685.79 1.685 1.264 2.685 1.21 1.105 0 1.947-.42 2.631-1.21Zm9.79 2.21c0 .422-.158.79-.421 1.106-.263.316-.684.421-1.105.421a1.47 1.47 0 0 1-1.053-.42c-.263-.317-.421-.685-.421-1.106V7.536c0-.42.158-.79.42-1.105.317-.316.685-.474 1.106-.421.421 0 .79.158 1.053.421.316.316.42.684.42 1.105v15.632Zm14.947-4.525c.316-.264.474-.58.474-1 0-2.369-1.263-4.58-3.105-5.843-1-.579-2.053-.894-3.158-.894-1.158 0-2.21.316-3.21.894a6.563 6.563 0 0 0-2.422 2.527c-.579 1.052-.895 2.316-.895 3.79a6.729 6.729 0 0 0 .843 3.526c.578 1 1.368 1.842 2.42 2.42 1.053.58 2.264.895 3.685.895.842 0 1.631-.158 2.421-.42a6.38 6.38 0 0 0 1.895-1c.473-.316.684-.738.684-1.211 0-.369-.106-.632-.369-.895a1.153 1.153 0 0 0-.894-.368 1.67 1.67 0 0 0-.843.21l-.473.263c-.316.21-.632.316-.948.421-.421.158-.947.21-1.631.21a3.805 3.805 0 0 1-3.842-3.157h8.316c.421 0 .736-.105 1.052-.368Zm-5.947-4.948c.789 0 1.526.263 2.105.737s1 1.105 1.053 1.842v.158h-6.632c.368-1.842 1.526-2.737 3.474-2.737Zm17.21-2.316c-.315-.263-.737-.42-1.263-.42-.789 0-1.579.157-2.263.526-.737.368-1.316.894-1.684 1.579v-.316c0-.421-.105-.79-.421-1.105a1.695 1.695 0 0 0-1.106-.421 1.239 1.239 0 0 0-1.105.42c-.263.316-.421.685-.421 1.106v10.368c0 .421.158.79.421 1.106.316.263.632.42 1.105.42.474 0 .843-.105 1.106-.42.263-.316.421-.685.421-1.106v-6c-.053-.684.105-1.316.368-1.947.211-.474.579-.895 1-1.21.527-.37 1.211-.474 1.842-.316l.316.105c.316.105.579.158.842.158.369.052.684-.106.948-.369.315-.263.421-.631.421-1.158 0-.368-.211-.736-.527-1Z"
+	/>
+	<path
+		fill="#066FD1"
+		d="M31.288 7.107A8.833 8.833 0 0 0 24.893.712a55.899 55.899 0 0 0-17.786 0A8.833 8.833 0 0 0 .712 7.107a55.899 55.899 0 0 0 0 17.786 8.833 8.833 0 0 0 6.395 6.395c5.895.95 11.89.95 17.786 0a8.833 8.833 0 0 0 6.395-6.395c.95-5.895.95-11.89 0-17.786Z"
+	/>
+	<path
+		fill="#fff"
+		d="M10.019 22.452a17.5 17.5 0 0 0 5.498-5.449 2.193 2.193 0 0 0 0-2.328c-1.436-2.18-3.27-4.013-5.498-5.4-1.09-.693-2.527-.297-3.22.793-.05 0-.05.05-.05.05a2.278 2.278 0 0 0 .842 3.12c1.14.743 2.13 1.585 3.022 2.626a11.782 11.782 0 0 1-3.022 2.625c-.743.396-1.189 1.189-1.189 2.031a2.397 2.397 0 0 0 3.617 1.932Zm7.727-.644h5.647c1.04 0 1.883-.495 1.883-1.486 0-.99-.843-1.486-1.883-1.486h-5.647c-1.04 0-1.882.495-1.882 1.486 0 .99.842 1.486 1.882 1.486Z"
+	/>
+</svg>
@@ -0,0 +1,88 @@
+---
+// Equivalent of docs/menu.html. In Eleventy the menu is built from `collections.docs |
+// collection-tree` (the tree of content/**/*.md files of the @tabler/docs app); in the PoC
+// the tree is frozen in shared/data/docs.json (extracted from the reference
+// development docs build).
+
+import Subheader from '@ui/Subheader.astro';
+import docs from '@data/docs.json';
+import { pathSlug as slug } from '@shared/lib/string-format';
+
+interface MenuLeaf {
+	title: string;
+	url: string;
+}
+
+interface MenuGroup extends MenuLeaf {
+	children?: MenuLeaf[];
+}
+
+interface MenuSection {
+	title: string;
+	children?: MenuGroup[];
+}
+
+interface Props {
+	/** Page URL in the docs namespace (equivalent of page.url), e.g. "/ui/components/alert/". */
+	url: string;
+}
+
+const { url } = Astro.props;
+const menu = docs.menu as MenuSection[];
+---
+
+<nav class="space-y space-y-5" id="menu">
+	{
+		menu.map((level1) => (
+			<div>
+				<Subheader class="mb-2">{level1.title}</Subheader>
+				{level1.children && level1.children.length > 0 && (
+					<nav class="nav nav-vertical">
+						{level1.children.map((level2) => {
+							const hasChildren = Boolean(level2.children && level2.children.length > 0);
+							// 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 */}
+									{hasChildren ? (
+										<a
+											class={`nav-link${expanded ? ' active' : ''}`}
+											href={level2.url}
+											data-bs-toggle="collapse"
+											data-bs-target={`#collapse-${slug(level2.url)}`}
+											aria-expanded={expanded ? 'true' : 'false'}
+										>
+											{level2.title} <span class="nav-link-toggle" />
+										</a>
+									) : (
+										<a class={`nav-link${expanded ? ' active' : ''}`}>{level2.title}</a>
+									)}
+
+									{hasChildren && (
+										<nav
+											class={`nav nav-vertical collapse${expanded ? ' show' : ''}`}
+											id={`collapse-${slug(level2.url)}`}
+										>
+											{level2.children!.map((level3) => (
+												<div>
+													<a
+														class={`nav-link${url === level3.url ? ' active' : ''}`}
+														href={level3.url}
+													>
+														{level3.title}
+													</a>
+												</div>
+											))}
+										</nav>
+									)}
+								</div>
+							);
+						})}
+					</nav>
+				)}
+			</div>
+		))
+	}
+</nav>
@@ -0,0 +1,61 @@
+---
+// Equivalent of docs/navbar.html.
+import Icon from '@ui/Icon.astro';
+import DocsLogo from './DocsLogo.astro';
+import { site } from '@shared/lib/site';
+
+// Eventually belongs in src/lib/site.ts (out of scope for this task).
+const previewUrl = 'https://preview.tabler.io';
+const changelogUrl = 'https://tabler.io/changelog';
+---
+
+<div class="navbar navbar-expand sticky-top">
+	<div class="container">
+		<div class="row flex-fill align-items-md-center">
+			<div class="col">
+				<div class="d-flex align-items-center gap-4">
+					{/* href=".": Liquid `page.url | relative` receives a string, so the filter always returns "." */}
+					<a href="." class="navbar-brand navbar-brand-autodark gap-4">
+						<DocsLogo />
+					</a>
+					<div>
+						<span class="badge">v{site.version}</span>
+					</div>
+				</div>
+			</div>
+			<div class="d-none d-md-block col">
+				<div id="docsearch"></div>
+			</div>
+			<div class="col d-flex">
+				<ul class="navbar-nav ms-auto gap-2 align-items-center">
+					<div class="nav-item d-none d-md-block">
+						<a href={previewUrl} class="nav-link">Preview</a>
+					</div>
+					<div class="nav-item d-none d-md-block">
+						<a href={changelogUrl} class="nav-link">Changelog</a>
+					</div>
+					<li class="nav-item hide-theme-dark">
+						<a href="?theme=dark" class="btn btn-icon">
+							<Icon name="moon" />
+						</a>
+					</li>
+					<li class="nav-item hide-theme-light">
+						<a href="?theme=light" class="btn btn-icon">
+							<Icon name="sun" />
+						</a>
+					</li>
+					<li class="nav-item">
+						<a href={site.githubUrl} class="btn btn-icon" target="_blank">
+							<Icon name="brand-github" />
+						</a>
+					</li>
+					<li class="nav-item">
+						<a href={previewUrl} class="btn btn-primary" target="_blank">
+							<Icon name="eye" /> Preview
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</div>
@@ -0,0 +1,118 @@
+---
+// Equivalent of docs/pagination.html: child-page cards or next/prev siblings.
+import DocsCard from './DocsCard.astro';
+import docs from '@data/docs.json';
+import Icon from '@ui/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;
+}
+
+const { url } = Astro.props;
+
+const children = getDocsChildren(url);
+
+type Pagination = {
+	prev: MenuLeaf | null;
+	next: MenuLeaf | null;
+	found: boolean;
+};
+
+function findPage(nodes: MenuNode[]): Pagination | null {
+	const index = nodes.findIndex((item) => item.url === url);
+
+	if (index !== -1) {
+		const previousNode = index > 0 ? nodes[index - 1] : null;
+		const nextNode = index < nodes.length - 1 ? nodes[index + 1] : null;
+
+		return {
+			prev: previousNode?.url ? { title: previousNode.title, url: previousNode.url } : null,
+			next: nextNode?.url ? { title: nextNode.title, url: nextNode.url } : 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: DocsChildPage) => (
+					<DocsCard
+						href={child.url}
+						title={child.title}
+						description={child.description}
+						icon={child.icon}
+					/>
+				))}
+			</div>
+		</div>
+	)
+}
+
+{
+	children.length === 0 && found && (
+		<div class="mt-6 pt-6">
+			<ul class="pagination">
+				{prev && (
+					<li class="page-item page-prev">
+						<a class="page-link" href={prev.url}>
+							<div class="row align-items-center">
+								<div class="col-auto">
+									<Icon name="chevron-left" />
+								</div>
+								<div class="col">
+									<div class="page-item-subtitle">previous</div>
+									<div class="page-item-title">{prev.title}</div>
+								</div>
+							</div>
+						</a>
+					</li>
+				)}
+				{next && (
+					<li class="page-item page-next">
+						<a class="page-link" href={next.url}>
+							<div class="row align-items-center">
+								<div class="col">
+									<div class="page-item-subtitle">next</div>
+									<div class="page-item-title">{next.title}</div>
+								</div>
+								<div class="col-auto">
+									<Icon name="chevron-right" />
+								</div>
+							</div>
+						</a>
+					</li>
+				)}
+			</ul>
+		</div>
+	)
+}
@@ -0,0 +1,45 @@
+---
+// Equivalent of docs/toc.html. In Eleventy the TOC is computed by the `content | toc`
+// filter (h2/h3 headings from the markdown content, excluding <!--EXAMPLE-->...<!--/EXAMPLE--> blocks);
+// here it comes in as a prop from the consuming page.
+
+export interface TocItem {
+	/** 2 or 3 (h2/h3); h3 gets the ms-3 indent */
+	level: number;
+	text: string;
+	/** anchor without '#', e.g. "default-markup" */
+	id: string;
+}
+
+interface Props {
+	toc?: TocItem[];
+}
+
+const { toc = [] } = Astro.props;
+
+// Equivalent of `illustrations | size` (shared/data/illustrations.json has 100 entries).
+const illustrationsCount = 100;
+---
+
+{
+	toc.length > 0 && (
+		<Fragment>
+			<h3>Table of Contents</h3>
+			<div class="nav nav-vertical" id="toc">
+				{toc.map((item) => (
+					<a href={`#${item.id}`} class={`nav-link${item.level === 3 ? ' ms-3' : ''}`}>
+						{item.text}
+					</a>
+				))}
+			</div>
+		</Fragment>
+	)
+}
+
+<a href="https://r.tabler.io/illustrations" class="card card-sm mt-6 shadow-none" target="_blank">
+	<div class="card-body">
+		<img src="/img/banner-carbon.png" class="mb-3" alt="" />
+
+		<h4>{illustrationsCount} sleek illustrations for your startup's visual identity.</h4>
+	</div>
+</a>
@@ -0,0 +1,12 @@
+---
+interface Props {
+	href: string
+	title: string
+}
+
+const { href, title }: Props = Astro.props;
+---
+
+<div class="my-6 text-center">
+	<a href={href} class="btn btn btn-primary" target="_blank">{title}</a>
+</div>
@@ -0,0 +1,99 @@
+---
+// copy button with data-clipboard-text (equivalent of escape_attribute).
+// The example code comes from the `html` prop or from the rendered slot.
+import Icon from '@ui/Icon.astro';
+import { beautifyHtml, highlightCode, removeHref } from '@shared/lib/code-example';
+
+interface Props {
+	/** raw HTML of the example; when absent — the slot is rendered */
+	html?: string;
+	/** code shown in the panel instead of html (the code param in Liquid) */
+	code?: string;
+	raw?: boolean;
+	overflow?: string;
+	bg?: string;
+	class?: string;
+	height?: string;
+	column?: boolean;
+	centered?: boolean;
+	vertical?: boolean;
+	columnFullWidth?: boolean;
+	hideCode?: boolean;
+	codeOnly?: boolean;
+}
+
+const {
+	html: htmlProp,
+	code,
+	raw,
+	overflow = 'auto',
+	bg,
+	class: className,
+	height,
+	column,
+	centered,
+	vertical,
+	columnFullWidth,
+	hideCode,
+	codeOnly,
+} = Astro.props;
+
+// equivalent of {% removeemptylines %} around include output (e.g. ui/alert.html)
+let html = (htmlProp ?? (await Astro.slots.render('default'))).replace(/^\s*[\r\n]/gm, '');
+
+// JSX reserializes the slot markup: empty SVG elements get explicit closing
+// tags, and apostrophes in text are escaped. We restore the source form so the
+// code in the panel looks like hand-written HTML.
+html = html
+	.replace(/<(path|circle|line|polyline|polygon|rect|ellipse)([^>]*?)\s*><\/\1>/g, '<$1$2 />')
+	.replace(/&#39;/g, "'");
+
+const exampleClasses = [
+	'example fs-base border rounded my-5',
+	!raw && 'd-flex flex-wrap justify-content-center',
+	`overflow-${overflow}`,
+	'position-relative',
+	bg ? `bg-${bg}` : 'bg-pattern-rectangles',
+	className,
+]
+
+const innerClasses = [
+	'p-6 w-full',
+	column && 'd-flex gap-3 flex-column',
+	!column && centered && `d-flex flex-fill flex-wrap gap-2 justify-content-center${vertical ? ' align-items-center flex-column' : ' justify-content-center'}`,
+	columnFullWidth && 'd-flex flex-fill flex-column gap-2',
+]
+
+const highlighted = hideCode ? '' : await highlightCode(beautifyHtml(code ?? html), 'html');
+---
+
+<!--EXAMPLE-->
+{
+	!codeOnly && (
+		<div class:list={exampleClasses} style={height ? `height: ${height}` : undefined}>
+			{
+				raw ? (
+					<Fragment set:html={removeHref(html)} />
+				) : (
+					<div class:list={innerClasses} style={column ? 'max-width: 25rem;' : undefined}>
+						<Fragment set:html={removeHref(html)} />
+					</div>
+				)
+			}
+		</div>
+	)
+}
+
+{
+	!hideCode && (
+		<div class="position-relative">
+			{/* Astro escapes the attribute value itself (equivalent of escape_attribute) */}
+			<a class="btn btn-icon btn-dark position-absolute m-2 top-0 end-0 z-3" data-clipboard-text={html}>
+				<Icon name="clipboard" />
+				<Icon name="check" class="d-none" />
+			</a>
+			<Fragment set:html={highlighted} />
+		</div>
+	)
+}
+<!--/EXAMPLE-->
@@ -0,0 +1,26 @@
+---
+import flags from '@data/flags.json'
+---
+
+<table class="table table-vcenter">
+	<thead>
+	 <tr>
+		<th class="w-1">Flag</th>
+		<th>Name</th>
+		<th class="w-1">Country code</th>
+		<th>CSS class</th>
+	 </tr>
+  </thead>
+  <tbody>
+	{flags.map((flag) => (
+	 <tr>
+		<td>
+			<div class={`flag flag-sm flag-country-${ flag.flag }`}></div>
+		</td>
+		<td>{ flag.name }</td>
+		<td><code>{ flag.flag }</code></td>
+		<td><code>.flag-country-{ flag.flag }</code></td>
+	 </tr>
+	 ))}
+  </tbody>
+</table>
@@ -0,0 +1,30 @@
+---
+import openSources from '@data/open-source.json';
+---
+
+<table class="table">
+	<tr>
+		<th>
+			Name
+		</th>
+		<th>
+			Description
+		</th>
+		<th>
+			License
+		</th>
+	</tr>
+	{ openSources.map((el, i) => {
+		return (
+			<tr>
+				<td>
+					<a href={el.url} target="_blank">
+						{el.name}
+					</a>
+				</td>
+				<td>{el.description}</td>
+				<td>{el.license}</td>
+			</tr>
+		)
+	}) }
+</table>
@@ -0,0 +1,33 @@
+---
+import payments from '@data/payments.json';
+---
+
+<table class="table table-vcenter">
+	<thead>
+	 <tr>
+		<th class="w-1">Icon light</th>
+		<th class="w-1">Icon dark</th>
+		<th>Provider name</th>
+		<th>CSS class</th>
+	 </tr>
+  </thead>
+  <tbody>
+	{payments.map((payment) => {
+		return (
+		<tr>
+			<td>
+				<div class={`payment payment-sm payment-provider-${ payment.logo }`}></div>
+			</td>
+			<td>
+				<div class={`payment payment-sm payment-provider-${ payment.logo }-dark`}></div>
+			</td>
+			<td>{ payment.name }</td>
+			<td>
+				<code>.payment-provider-{ payment.logo }</code><br>
+				<code>.payment-provider-{ payment.logo }-dark</code>
+			</td>
+		</tr>
+		);
+	})}
+  </tbody>
+</table>
@@ -0,0 +1,26 @@
+---
+import socials from '@data/socials.json';
+---
+
+<table class="table table-vcenter">
+	<thead>
+	 <tr>
+		<th class="w-1">App</th>
+		<th>Name</th>
+		<th>CSS class</th>
+	 </tr>
+  </thead>
+  <tbody>
+	{socials.map((social) => (
+	 <tr>
+		<td>
+			<div class={`social social-sm social-app-${ social.file }`}></div>
+		</td>
+		<td>{ social.name }</td>
+		<td>
+			<code>.social-app-{ social.file }</code><br>
+		</td>
+	 </tr>
+	 ))}
+  </tbody>
+</table>
@@ -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>
@@ -0,0 +1,45 @@
+---
+import { Code } from 'astro:components';
+import packageManagers from '@data/package-managers.json';
+
+interface Props {
+	name: string;
+}
+
+const { name }: Props = Astro.props;
+---
+
+<ul class="nav nav-bordered mb-2" role="tablist">
+	{packageManagers.map((manager, i) => {
+		return (
+			<li class="nav-item" role="presentation">
+				<button
+					class={`nav-link${i === 0 ? ' active' : ''}`}
+					id={`${manager.name}-tab`}
+					data-bs-toggle="tab"
+					data-bs-target={`#${manager.name}`}
+					type="button"
+					role="tab"
+					aria-controls="home"
+					aria-selected={i === 0 ? 'true' : 'false'}>
+						<span set:html={manager.icon.replace('<svg ', '<svg class="me-2" ')} />
+						{manager.name}
+				</button>
+			</li>
+		);
+	})}
+</ul>
+<div class="tab-content">
+	{packageManagers.map((manager, i) => {
+		return (
+			<div
+				class={`tab-pane${i === 0 ? ' show active' : ''}`}
+				id={`${manager.name}`}
+				role="tabpanel"
+				aria-labelledby={`${manager.name}-tab`}
+			>
+				<Code code={`${manager.command} ${manager.install} ${name}`} lang="bash" />
+			</div>
+		);
+	})}
+</div>
@@ -7,7 +7,7 @@ summary: The compiled HTML files from the Tabler Emails package are ready to use
 seoDescription: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Compiled version of the template

@@ -7,7 +7,7 @@ summary: The Tabler Emails package contains files which can be used by everyone,
 seoDescription: todo
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Folder structure

@@ -7,7 +7,7 @@ summary: The source HTML files from the Tabler Emails package need a bit more wo
 seoDescription: The source HTML files from the Tabler Emails package need a bit more work than the compiled ones. Learn how to use them.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Source version of the template

@@ -5,7 +5,7 @@ summary: Tabler Icons for Astro provides an optimized collection of icons specif
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import TabsPackage from '@components/TabsPackage.astro'

 ![Tabler Icons for Astro](/img/icons/package-astro.png)

@@ -5,7 +5,7 @@ summary: Tabler Icons for Preact provides an optimized collection of icons speci
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import TabsPackage from '@components/TabsPackage.astro'

 ![Tabler Icons for Preact](/img/icons/package-preact.png)

@@ -5,7 +5,7 @@ summary: Tabler Icons for React offers a robust set of icons tailored for React
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import TabsPackage from '@components/TabsPackage.astro'

 ![Tabler Icons for React](/img/icons/package-react.png)

@@ -5,7 +5,7 @@ summary: Tabler Icons for SolidJS is a lightweight library offering a vast selec
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import TabsPackage from '@components/TabsPackage.astro'

 ![Tabler Icons for SolidJS](/img/icons/package-solidjs.png)

@@ -5,7 +5,7 @@ summary: Tabler Icons for Svelte provides a clean and efficient way to use Table
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import TabsPackage from '@components/TabsPackage.astro'

 ![Tabler Icons for Svelte](/img/icons/package-svelte.png)

@@ -5,7 +5,7 @@ summary: Tabler Icons for Vue offers a collection of customizable and scalable i
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import TabsPackage from '@components/TabsPackage.astro'

 ![Tabler Icons for Vue](/img/icons/package-vue.png)

@@ -5,7 +5,7 @@ summary: Tabler Icons as a webfont allows you to easily include icons in your pr
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import TabsPackage from '@components/TabsPackage.astro'

 ![Tabler Icons webfont](/img/icons/package-webfont.png)

@@ -5,7 +5,7 @@ summary: The Tabler Figma plugin allows designers to seamlessly integrate Tabler
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import DownloadButton from '@shared/components/docs/DownloadButton.astro'
+import DownloadButton from '@components/DownloadButton.astro'

 ![Tabler Figma Plugin](/img/icons/figma-plugin.png)

@@ -4,7 +4,7 @@ description: Download Tabler Icons in EPS format.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import TabsPackage from '@components/TabsPackage.astro'

 ![Tabler Icons in EPS format](/img/icons/package-eps.png)

@@ -4,7 +4,7 @@ description: Download Tabler Icons in PDF format.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import TabsPackage from '@components/TabsPackage.astro'

 ![Tabler Icons in PDF format](/img/icons/package-pdf.png)

@@ -4,7 +4,7 @@ description: Download Tabler Icons in PNG format.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import TabsPackage from '@components/TabsPackage.astro'

 ![Tabler Icons in PNG format](/img/icons/package-png.png)

@@ -4,9 +4,9 @@ description: Download Tabler Icons in SVG format.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import TabsPackage from '@shared/components/docs/TabsPackage.astro'
-import Icon from '@shared/components/ui/Icon.astro'
-import Example from '@shared/components/docs/Example.astro'
+import TabsPackage from '@components/TabsPackage.astro'
+import Icon from '@ui/Icon.astro'
+import Example from '@components/Example.astro'

 ![Tabler Icons in SVG format](/img/icons/package-svg.png)

@@ -4,7 +4,7 @@ description: Explore Tabler Illustrations folder structure
 summary: The Tabler Illustrations package is thoughtfully structured to provide designers and developers with an array of high-quality assets. This guide explores the various folders and their contents, helping users make the most of these resources.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 The Tabler Illustrations package offers a wide range of visual assets designed to meet the needs of modern web and graphic design. These illustrations are not only aesthetically pleasing but also highly versatile, supporting various formats and themes for seamless integration into different projects.

@@ -2,7 +2,7 @@
 title: Tabler Illustrations License
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Personal License

@@ -5,7 +5,7 @@ description: Find comprehensive guides, examples, and resources to help you use
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import Card from '@shared/components/docs/DocsCard.astro'
+import Card from '@components/DocsCard.astro'

 <img src="/img/tabler.png" alt="Tabler" class="mb-4 hide-theme-dark border-0" width="816" height="620" />
 <img src="/img/tabler-dark.png" alt="Tabler" class="mb-4 hide-theme-light border-0" width="816" height="620" />
@@ -8,7 +8,7 @@ description: Impact of colors on user interface design.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import Colors from '@shared/components/docs/Colors.astro'
+import Colors from '@components/Colors.astro'
 import site from '@data/site.json'

 ## Base colors
@@ -5,8 +5,8 @@ bootstrapLink: content/prose/
 description: Long-form content styles for markdown-like HTML.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Prose from '@shared/components/ui/Prose.astro';
+import Example from '@components/Example.astro';
+import Prose from '@ui/Prose.astro';

 ## How it works

@@ -5,8 +5,8 @@ bootstrapLink: content/typography/
 description: Role of typography in interface design.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Prose from '@shared/components/ui/Prose.astro';
+import Example from '@components/Example.astro';
+import Prose from '@ui/Prose.astro';

 ## Headings

@@ -4,8 +4,8 @@ summary: Use accordion panels to group related content and show one section at a
 description: Build collapsible content sections with accordion classes and modifiers.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Icon from '@shared/components/ui/Icon.astro';
+import Example from '@components/Example.astro';
+import Icon from '@ui/Icon.astro';

 ## Overview

@@ -5,8 +5,8 @@ bootstrapLink: components/alerts/
 description: An alert message for user notification.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Alert from '@shared/components/ui/Alert.astro';
+import Example from '@components/Example.astro';
+import Alert from '@ui/Alert.astro';

 ## Default markup

@@ -5,7 +5,7 @@ docs-libs: autosize
 description: Auto-adjusting textarea for better usability.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 To be able to use the autosize in your application you will need to install the autosize dependency with `npm install autosize`.

@@ -4,9 +4,9 @@ summary: An avatar helps customize interface elements and make the product exper
 description: Personalize UI with a user avatar.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Icon from '@shared/components/ui/Icon.astro';
-import AvatarList from '@shared/components/ui/AvatarList.astro';
+import Example from '@components/Example.astro';
+import Icon from '@ui/Icon.astro';
+import AvatarList from '@ui/AvatarList.astro';

 ## Default markup

@@ -5,9 +5,9 @@ description: Add extra information with a badge.
 bootstrapLink: components/badge/
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import BadgesList from '@shared/components/ui/BadgesList.astro';
-import Example from '@shared/components/docs/Example.astro';
-import Badge from '@shared/components/ui/Badge.astro';
+import BadgesList from '@ui/BadgesList.astro';
+import Example from '@components/Example.astro';
+import Badge from '@ui/Badge.astro';
 import site from '@data/site.json';

 export const colors = Object.entries(site.colors);
@@ -5,9 +5,9 @@ bootstrapLink: components/breadcrumb/
 description: A navigation aid for better structure.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Breadcrumb from '@shared/components/ui/Breadcrumb.astro';
-import Icon from '@shared/components/ui/Icon.astro';
+import Example from '@components/Example.astro';
+import Breadcrumb from '@ui/Breadcrumb.astro';
+import Icon from '@ui/Icon.astro';

 ## Default markup

@@ -5,9 +5,9 @@ bootstrapLink: components/buttons/
 description: A customizable button for user actions.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import ButtonGroup from '@shared/components/ui/ButtonGroup.astro';
-import Example from '@shared/components/docs/Example.astro';
-import Icon from '@shared/components/ui/Icon.astro';
+import ButtonGroup from '@ui/ButtonGroup.astro';
+import Example from '@components/Example.astro';
+import Icon from '@ui/Icon.astro';

 ## Button tag

@@ -5,7 +5,7 @@ description: Build eye-catching cards with gradient variants, directions, and an
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import Example from '@shared/components/docs/Example.astro'
+import Example from '@components/Example.astro'
 export const gradients = ['rainbow', 'sun', 'snow', 'ocean', 'mellow', 'disco', 'psychedelic', 'love', 'gold']

 ## Default markup
@@ -5,8 +5,8 @@ bootstrapLink: components/card/
 description: Organize content with a flexible card.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Icon from '@shared/components/ui/Icon.astro';
+import Example from '@components/Example.astro';
+import Icon from '@ui/Icon.astro';

 ## Default card

@@ -5,7 +5,7 @@ bootstrapLink: components/carousel/
 description: Display visual content with a carousel.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Default markup

@@ -6,8 +6,8 @@ description: Interactive data visualizations with ApexCharts.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import Example from '@shared/components/docs/Example.astro'
-import Chart from '@shared/components/ui/Chart.astro'
+import Example from '@components/Example.astro'
+import Chart from '@ui/Chart.astro'

 To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.

@@ -5,7 +5,7 @@ docs-libs: countup
 description: Display numbers dynamically with a countup.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 The countup component is used to display numbers dynamically. It is a great way to make the interface more interactive and engaging. The countup component is a simple and easy way to animate numbers in your application.

@@ -4,7 +4,7 @@ summary: Use the data grid component to display detailed information about your
 description: Detailed product information in grids.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 <Example>
 <div class="datagrid"> <div class="datagrid-item"> <div class="datagrid-title">Registrar</div> <div class="datagrid-content">Third Party</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Nameservers</div> <div class="datagrid-content">Third Party</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Port number</div> <div class="datagrid-content">3306</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Expiration date</div> <div class="datagrid-content">–</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Creator</div> <div class="datagrid-content"> <div class="d-flex align-items-center"> <span class="avatar avatar-xs me-2 rounded" style="background-image: url(/static/avatars/027m.jpg)" ></span> Paweł Kuna </div> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Age</div> <div class="datagrid-content">15 days</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Edge network</div> <div class="datagrid-content"> <span class="status status-green"> Active </span> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Avatars list</div> <div class="datagrid-content"> <div class="avatar-list avatar-list-stacked"> <span class="avatar avatar-xs rounded" style="background-image: url(/static/avatars/029f.jpg)" ></span> <span class="avatar avatar-xs rounded">JL</span> <span class="avatar avatar-xs rounded" style="background-image: url(/static/avatars/015f.jpg)" ></span> <span class="avatar avatar-xs rounded" style="background-image: url(/static/avatars/004m.jpg)" ></span> <span class="avatar avatar-xs rounded" style="background-image: url(/static/avatars/037m.jpg)" ></span> <span class="avatar avatar-xs rounded">+3</span> </div> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Checkbox</div> <div class="datagrid-content"> <label class="form-check"> <input class="form-check-input" type="checkbox" checked /> <span class="form-check-label">Click me</span> </label> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Icon</div> <div class="datagrid-content"> <svg xmlns="http://www.w3.org/2000/svg" class="icon text-green" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M5 12l5 5l10 -10" /> </svg> Checked </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Form control</div> <div class="datagrid-content"> <input type="text" class="form-control form-control-flush" placeholder="Input placeholder" /> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Longer description</div> <div class="datagrid-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> </div> </div>
@@ -4,7 +4,7 @@ summary: Dividers help organize content and make the interface layout clear and
 description: Separate content with clear dividers.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Default markup

@@ -5,7 +5,7 @@ bootstrapLink: components/dropdowns
 description: Organize options with a dropdown menu.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Default dropdown

@@ -5,7 +5,7 @@ description: Drag-and-drop file upload tool.
 docs-libs: dropzone
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Basic usage

@@ -4,8 +4,8 @@ summary: An empty state or blank page is commonly used as a placeholder for firs
 description: Engage users in an empty or error screen.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Illustration from '@shared/components/ui/Illustration.astro';
+import Example from '@components/Example.astro';
+import Illustration from '@ui/Illustration.astro';

 ## Default markup

@@ -5,8 +5,8 @@ banner: icons
 description: Enhance a dashboard with a custom icon.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Icon from '@shared/components/ui/Icon.astro';
+import Example from '@components/Example.astro';
+import Icon from '@ui/Icon.astro';

 If you need to add icons to your website, you can use the [Tabler Icons library](https://tabler.io/icons). It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects.

@@ -5,7 +5,7 @@ summary: A simple, lightweight, accessible and customizable HTML5, YouTube and V
 description: Lightweight media player for websites.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';
 import { Code } from 'astro:components';
 import { site } from '@shared/lib/site.ts';

@@ -4,8 +4,8 @@ summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site f
 description: Dialogs for notifications and content.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Icon from '@shared/components/ui/Icon.astro';
+import Example from '@components/Example.astro';
+import Icon from '@ui/Icon.astro';

 Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.

@@ -2,7 +2,7 @@
 title: Offcanvas
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.

@@ -3,8 +3,8 @@ title: Pagination
 summary: Pagination is a user interface element that allows users to navigate through a set of data or content that is divided into multiple pages. It is commonly used in web applications, blogs, and e-commerce sites to display large amounts of information in a manageable way.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Pagination from '@shared/components/ui/Pagination.astro';
+import Example from '@components/Example.astro';
+import Pagination from '@ui/Pagination.astro';

 ## Basic Example

@@ -4,7 +4,7 @@ summary: Placeholder is used to reserve space for content that will soon appear
 description: Reserve space for upcoming content.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Placeholder line

@@ -5,7 +5,7 @@ bootstrapLink: components/popovers
 description: Provide extra information with a popover.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Default markup

@@ -5,8 +5,8 @@ new: true
 description: Use progress steps to display compact onboarding, checkout, and setup progress.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import ProgressSteps from '@shared/components/ui/ProgressSteps.astro';
+import Example from '@components/Example.astro';
+import ProgressSteps from '@ui/ProgressSteps.astro';

 ## Default markup

@@ -5,8 +5,8 @@ bootstrapLink: components/progress
 description: Track and display progress with a progress bar.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import ProgressBg from '@shared/components/ui/ProgressBg.astro';
+import Example from '@components/Example.astro';
+import ProgressBg from '@ui/ProgressBg.astro';

 ## Default markup

@@ -5,7 +5,7 @@ description: Adjust values with a range slider.
 summary: A range slider allows users to select a range of values by adjusting two handles along a track, providing an intuitive and space-efficient input method.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 To be able to use the range slider in your application you will need to install the noUiSlider dependency with `npm install nouislider`.

@@ -4,8 +4,8 @@ summary: A ribbon is a graphical element that attracts user attention to a given
 description: Highlight an element with a graphical ribbon.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Icon from '@shared/components/ui/Icon.astro';
+import Example from '@components/Example.astro';
+import Icon from '@ui/Icon.astro';

 ## Default markup

@@ -3,8 +3,8 @@ title: Segmented Control
 summary: A segmented control is a set of two or more segments, each of which functions as a mutually exclusive button. A segmented control is used to display a set of mutually exclusive options.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Icon from '@shared/components/ui/Icon.astro';
+import Example from '@components/Example.astro';
+import Icon from '@ui/Icon.astro';

 To create a segmented control, use the `nav` element with the `nav-segmented` class. Inside the `nav` element, add `button` or `a` elements with the `nav-link` class. The `nav-link` class is used to style the buttons as links.

@@ -5,7 +5,7 @@ bootstrapLink: components/spinners/
 description: Indicate loading state with a spinner.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Default markup

@@ -4,8 +4,8 @@ summary: Use star rating to show score values with static stars or interactive s
 description: Build star rating UI with stars classes and data-star-rating state selectors.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Icon from '@shared/components/ui/Icon.astro';
+import Example from '@components/Example.astro';
+import Icon from '@ui/Icon.astro';

 ## Overview

@@ -4,7 +4,7 @@ summary: A status dot is particularly useful when you want to make an interface
 description: Highlight an interface element with a status dot.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Default markup

@@ -5,7 +5,7 @@ new: true
 description: Simplify a complex process with a step.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Default markup

@@ -5,8 +5,8 @@ banner: icons
 description: Transition between two icons smoothly.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Icon from '@shared/components/ui/Icon.astro';
+import Example from '@components/Example.astro';
+import Icon from '@ui/Icon.astro';

 ## Default markup

@@ -5,8 +5,8 @@ bootstrapLink: components/navs/
 description: Organize content with an interactive tab.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Icon from '@shared/components/ui/Icon.astro';
+import Example from '@components/Example.astro';
+import Icon from '@ui/Icon.astro';

 ## Default markup

@@ -5,7 +5,7 @@ bootstrapLink: content/tables/
 description: Visualize data clearly with a table.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Basic Table

@@ -4,11 +4,11 @@ summary: Use tags to show compact metadata values with optional media, badges, a
 description: Build inline tag elements with the tag class API and related tag part classes.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Flag from '@shared/components/ui/Flag.astro';
-import Icon from '@shared/components/ui/Icon.astro';
-import Payment from '@shared/components/ui/Payment.astro';
-import TagsList from '@shared/components/ui/TagsList.astro';
+import Example from '@components/Example.astro';
+import Flag from '@ui/Flag.astro';
+import Icon from '@ui/Icon.astro';
+import Payment from '@ui/Payment.astro';
+import TagsList from '@ui/TagsList.astro';

 ## Overview

@@ -4,8 +4,8 @@ summary: A timeline is a perfect way to visualize processes and projects, as it'
 description: Visualize events and processes clearly.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Timeline from '@shared/components/ui/Timeline.astro';
+import Example from '@components/Example.astro';
+import Timeline from '@ui/Timeline.astro';

 ## Timeline

@@ -5,7 +5,7 @@ bootstrapLink: components/toasts/
 description: Display a lightweight alert notification with a toast.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Default markup

@@ -5,7 +5,7 @@ bootstrapLink: components/tooltips/
 description: Guide users with an informative tooltip.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Default markup

@@ -4,8 +4,8 @@ summary: Component for visualizing activity logs or other monitoring-related dat
 description: Monitor data activity visually.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Subheader from '@shared/components/ui/Subheader.astro';
-import Example from '@shared/components/docs/Example.astro';
+import Subheader from '@ui/Subheader.astro';
+import Example from '@components/Example.astro';

 ## Basic example

@@ -6,8 +6,8 @@ summary: A vector map is a great way to display geographical data in an interact
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import Example from '@shared/components/docs/Example.astro'
-import MapVector from '@shared/components/ui/MapVector.astro'
+import Example from '@components/Example.astro'
+import MapVector from '@ui/MapVector.astro'
 import { Code } from 'astro:components'
 import { site } from '@shared/lib/site.ts'

@@ -6,8 +6,8 @@ description: Flexible WYSIWYG editor for content.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import Example from '@shared/components/docs/Example.astro'
-import Wysiwyg from '@shared/components/ui/Wysiwyg.astro'
+import Example from '@components/Example.astro'
+import Wysiwyg from '@ui/Wysiwyg.astro'

 [HugeRTE](https://hugerte.org/) documentation.

@@ -5,7 +5,7 @@ description: Enhance forms with color checks.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import Example from '@shared/components/docs/Example.astro'
+import Example from '@components/Example.astro'
 import InputColor from '@shared/components/parts/form/InputColor.astro'

 Your input controls can come in a variety of colors, depending on your preferences. See the [full list of available colors](/ui/base/colors) for more details.
@@ -7,7 +7,7 @@ description: Design user-friendly and effective forms.
 order: 1
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Classic inputs

@@ -4,7 +4,7 @@ summary: By grouping form elements together with the fieldset element, you can i
 description: Group form elements for clarity.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Default markup

@@ -4,8 +4,8 @@ summary: Use form helpers to provide additional information about a form element
 description: Provide additional guidance in forms.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import FormHint from '@shared/components/ui/FormHint.astro';
-import Example from '@shared/components/docs/Example.astro';
+import FormHint from '@ui/FormHint.astro';
+import Example from '@components/Example.astro';

 ## Input help

@@ -4,7 +4,7 @@ summary: The image check is a great way to make your form more user-friendly and
 description: Add visual appeal to forms with images.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Default markup

@@ -6,8 +6,8 @@ docs-libs: imask
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import Example from '@shared/components/docs/Example.astro'
-import TabsPackage from '@shared/components/docs/TabsPackage.astro'
+import Example from '@components/Example.astro'
+import TabsPackage from '@components/TabsPackage.astro'

 ## Installation

@@ -4,7 +4,7 @@ summary: Use selectgroup to make your form more intuitive by providing users wit
 description: Improve form UX with select groups.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Simple selectgroup

@@ -4,7 +4,7 @@ summary: To inform users whether the entered value is correct or not, use either
 description: Indicate valid or invalid inputs.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Validation states

@@ -4,7 +4,7 @@ description: Check browser compatibility for Tabler.
 summary: Learn about the supported browsers and compatibility guidelines for using Tabler UI components to ensure a consistent experience across different devices and platforms.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 Tabler is fully optimized for all modern browsers, including the latest versions of Chrome, Firefox, Edge, Safari, and Opera. These browsers ensure a seamless and responsive experience, allowing users to enjoy Tabler's advanced UI components without compatibility issues.

@@ -4,7 +4,7 @@ summary: Tabler has been designed so that it can be adjusted to your needs and r
 description: Adjust fonts, colors, and styles.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Custom Google Font

@@ -5,9 +5,9 @@ description: Get Tabler CSS, JS, and source code.
 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'
+import TabsPackage from '@components/TabsPackage.astro'
+import CdnImportPackage from '@components/CdnImportPackage.astro'
+import CdnImportPlugin from '@components/CdnImportPlugin.astro'

 ## CDN via jsDelivr

@@ -5,7 +5,7 @@ description: Common questions and answers.
 order: 12
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## I found an issue, what can I do?

@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, register CSS and JS in `angular.json`, a
 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'
+import TabsPackage from '@components/TabsPackage.astro'
+import CdnImportPackage from '@components/CdnImportPackage.astro'
+import Steps from '@components/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.

@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, import CSS and client-side JS in Astro,
 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'
+import TabsPackage from '@components/TabsPackage.astro'
+import CdnImportPackage from '@components/CdnImportPackage.astro'
+import Steps from '@components/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.

@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, load CSS and optional JS in Django templ
 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'
+import TabsPackage from '@components/TabsPackage.astro'
+import CdnImportPackage from '@components/CdnImportPackage.astro'
+import Steps from '@components/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.

@@ -6,7 +6,7 @@ hide-pagination: true
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import DocsCard from '@shared/components/docs/DocsCard.astro'
+import DocsCard from '@components/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.
@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, import CSS and JS with Vite, and render
 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'
+import TabsPackage from '@components/TabsPackage.astro'
+import CdnImportPackage from '@components/CdnImportPackage.astro'
+import Steps from '@components/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.

--- a/Show More
+++ b/Show More