Restructure shared Astro sources and import aliases (#2737)

.agents/rules/docs.mdc

@@ -57,8 +57,8 @@ Optional: `bootstrapLink: components/alerts/` when the component extends a Boots
 Import shared components after the frontmatter and wrap previews in `Example`:
 
 ```mdx
-import Example from '@shared/components/docs/Example.astro';
-import Alert from '@shared/components/Alert.astro';
+import Example from '@components/Example.astro';
+import Alert from '@ui/Alert.astro';
 
 <Example>
 <Alert type="success" title="Wow!" description="Your account has been saved!" />

.agents/rules/main.mdc

@@ -14,8 +14,8 @@ Shared instructions for all AI agents (Claude Code, Cursor, etc.). Canonical age
 - `core/` — `@tabler/core`: SCSS sources (`core/scss/`), JS, the distributable framework.
 - `preview/` — `@tabler/preview`: demo site built with Astro (pages in `preview/pages/*.astro`).
 - `docs/` — `@tabler/docs`: documentation site built with Astro (pages in `docs/pages/**/*.mdx`); docs-specific rules: `.agents/rules/docs.mdc`.
-- `shared/astro/` — Astro components, layouts, and lib shared by `preview` and `docs` (imported via the `@shared` alias).
-- `shared/data/` — JSON data used by pages (imported via the `@data` alias).
+- `shared/` — Astro components (`ui/`, `components/`, `layouts/`, `lib/`) shared by `preview` and `docs` via `@shared`; JSON data in `data/` via `@data`; plus `static/`.
+- `docs/components/` — docs-only Astro components (`Example`, menu, …) via `@components`.
 - Package manager: pnpm workspaces + turbo. Node.js >= 22.12.
 
 ## Language
@@ -27,8 +27,8 @@ Shared instructions for all AI agents (Claude Code, Cursor, etc.). Canonical age
 
 ### Astro pages and components
 
-- Pages are Astro components; reusable markup lives in `shared/astro/components/`.
-- Icons: use the shared component — `<Icon name="home" />` (import from `@shared/components/Icon.astro`).
+- Pages are Astro components; reusable markup lives in `shared/components/`.
+- Icons: use the shared component — `<Icon name="home" />` (import from `@ui/Icon.astro`).
 - Links between preview pages are relative: `./job-listing.html` (root-level pages).
 - Boolean HTML attributes in Astro: `selected={true}` renders a bare attribute, but some attributes (e.g. `multiple`) render `="true"` — use `multiple ? '' : undefined` when a bare attribute is required.
 

.agents/skills/write-docs/SKILL.md

@@ -66,7 +66,7 @@ Guidance by page type:
 For visual examples, use the shared `Example` component (import after the frontmatter):
 
 ```mdx
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';
 
 <Example>
 <button class="btn btn-primary">Primary button</button>
@@ -76,7 +76,7 @@ import Example from '@shared/components/docs/Example.astro';
 - Add 1-2 short sentences before each preview block to explain what the preview shows.
 - Use props when useful: `hideCode`, `centered`, `vertical`, `raw`, `column`, `bg`, `height`, `codeOnly`.
 - For a cleaner displayed snippet than the rendered preview, pass `code={...}`.
-- For icons and other shared components inside examples, import them from `@shared/components/` (for example `<Icon name="plus" />`).
+- For icons and other shared components inside examples, import them from `@ui/` (for example `<Icon name="plus" />`).
 - Raw HTML in the `Example` slot is reserialized by MDX — keep markup lines attached to tags to avoid stray `<p>` wrapping.
 
 ## 6. Workflow for each request

.claude/agents/astro-components.md

@@ -1,27 +1,30 @@
 ---
 name: astro-components
-description: Builds new Astro components, pages, and layouts for the Tabler monorepo (preview and docs packages, shared/astro library). Use when creating or extending demo pages, UI components, cards, layouts, or docs examples. Knows the project's component conventions, script/modal architecture, and shared building blocks.
+description: Builds new Astro components, pages, and layouts for the Tabler monorepo (preview and docs packages, shared library). Use when creating or extending demo pages, UI components, cards, layouts, or docs examples. Knows the project's component conventions, script/modal architecture, and shared building blocks.
 ---
 
 You are a specialist in building Astro components and pages for Tabler.
 
 ## Architecture
 
-- `shared/astro/` is the single component library used by both site packages:
-  `components/` (UI + cards + parts), `layouts/`, `lib/`, `data/docs.json`.
+- `shared/` is the single component library used by both site packages:
+  `ui/`, `components/` (cards + parts), `layouts/`, `lib/`, plus `data/` and `static/`.
 - `preview/` (`@tabler/preview`) — demo site; pages in `preview/pages/*.astro`
   (`srcDir: '.'`, `build.format: 'file'` → `foo.astro` → `/foo.html`).
 - `docs/` (`@tabler/docs`) — documentation; pages in `docs/pages/**/*.mdx`
   (`build.format: 'directory'`; docs writing rules: `.agents/rules/docs.mdc`).
-- Aliases (vite + tsconfig, per package): `@shared` → `../shared/astro`,
-  `@data` → `../shared/data`, `@pages` → the package's pages dir.
-  Inside `shared/astro`, use relative imports; from shared code to
+  Docs-only components live in `docs/components/` (`@components` alias).
+- Aliases (vite + tsconfig, per package): `@shared` → `../shared`, `@ui` → `../shared/ui`,
+  `@data` → `../shared/data`, `@components` → package components
+  (`preview`: `shared/components`, `docs`: `docs/components`),
+  `@pages` → the package's pages dir.
+  Inside `shared`, use relative imports; from shared code to
   package-specific files use the package aliases. Any bare npm import used in
-  `shared/astro` must be declared in `shared/astro/package.json`.
+  `shared` must be declared in `shared/package.json`.
 
 ## Component conventions
 
-- Components are `.astro` only; helper logic goes to `shared/astro/lib/*.ts`.
+- Components are `.astro` only; helper logic goes to `shared/lib/*.ts`.
 - TypeScript frontmatter: `interface Props` + destructuring with defaults.
 - Props are camelCase; the `class` prop stays `class`
   (destructure as `class: className`).
@@ -43,13 +46,13 @@ You are a specialist in building Astro components and pages for Tabler.
 Read the `Props` interface of a component before using it; extend components
 additively instead of creating parallel variants.
 
-- `@shared/components/Icon.astro` — `<Icon name="eye" size="sm" class="..." />`.
-- `@shared/components/Button.astro` — full button API (color, outline, ghost,
+- `@ui/Icon.astro` — `<Icon name="eye" size="sm" class="..." />`.
+- `@ui/Button.astro` — full button API (color, outline, ghost,
   size, icon, iconOnly, dismiss, loading, modalId, ...).
-- `@shared/components/Chart.astro` + `@shared/lib/chart-script.ts` — ApexCharts
+- `@ui/Chart.astro` + `@shared/lib/chart-script.ts` — ApexCharts
   engine driven by `@data/charts.json`. Never hand-write chart configs; add
   fields to `chart-script.ts` if a new chart needs them.
-- `@shared/components/ui/*` — Avatar, Badge, Progress, Pagination, Flag,
+- `@ui/*` — Avatar, Badge, Progress, Pagination, Flag,
   Dropdown, Table, Steps, Nav, Spinner, and ~45 more.
 - `@shared/components/cards/*` — dashboard/demo cards.
 - Layouts in `@shared/layouts/`: `BaseLayout` (head, assets, theme settings),
@@ -57,7 +60,7 @@ additively instead of creating parallel variants.
   wrapper/container classes, page header), `SingleLayout` (auth pages),
   `ErrorLayout`, `SettingsLayout`, `MarketingLayout`, `PayLayout`,
   `DocsLayout`/`DocsMdxLayout` (docs).
-- Docs examples: `@shared/components/docs/Example.astro` (slot or `html` prop;
+- Docs examples: `@components/Example.astro` (slot or `html` prop;
   props: hideCode, code, centered, vertical, column, raw, bg, height, codeOnly).
 
 ## Page scripts and modals
@@ -89,7 +92,7 @@ additively instead of creating parallel variants.
 
 1. Create `preview/pages/<name>.astro`; pick the layout (usually
    `DefaultLayout`) and pass `title`, menu/page-header props, `pageLibs`.
-2. Compose from existing components; add new ones to `shared/astro/components/`.
+2. Compose from existing components; add new ones to `shared/components/`.
 3. Build and verify: `pnpm --filter @tabler/preview build` (output in
    `preview/dist/<name>.html`), or `astro dev` for live preview.
 4. If the page should appear in navigation, update `@data` menu sources.

CONTRIBUTING.md

@@ -18,7 +18,7 @@ This starts the preview website at [http://localhost:3000](http://localhost:3000
 - `core/` - the framework: SCSS (`core/scss/`) and JavaScript (`core/js/`)
 - `preview/` - demo website (Astro, pages in `preview/pages/*.astro`)
 - `docs/` - documentation website (Astro, pages in `docs/pages/**/*.mdx`)
-- `shared/astro/` - components and layouts shared by preview and docs (`@shared` alias)
+- `shared/` - components and layouts shared by preview and docs (`@shared` alias), plus `data/` and `static/`
 - `shared/data/` - JSON data for demo pages (`@data` alias)
 
 Do not edit `dist/` folders - they are generated by the build.

docs/astro.config.mjs

@@ -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)),
       },

docs/components/DocsCard.astro

@@ -1,5 +1,5 @@
 ---
-import Icon from "../ui/Icon.astro";
+import Icon from "@ui/Icon.astro";
 
 interface Props {
 	/** When omitted, the card renders as a non-interactive "Coming soon" tile. */

docs/components/DocsMenu.astro

@@ -1,11 +1,11 @@
 ---
 // 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/astro/data/docs.json (extracted from the reference
+// the tree is frozen in shared/data/docs.json (extracted from the reference
 // development docs build).
 
-import Subheader from '@shared/components/ui/Subheader.astro';
-import docs from '@shared/data/docs.json';
+import Subheader from '@ui/Subheader.astro';
+import docs from '@data/docs.json';
 import { pathSlug as slug } from '@shared/lib/string-format';
 
 interface MenuLeaf {

docs/components/DocsNavbar.astro

@@ -1,6 +1,6 @@
 ---
 // Equivalent of docs/navbar.html.
-import Icon from '../ui/Icon.astro';
+import Icon from '@ui/Icon.astro';
 import DocsLogo from './DocsLogo.astro';
 import { site } from '@shared/lib/site';
 

docs/components/DocsPagination.astro

@@ -1,8 +1,8 @@
 ---
 // Equivalent of docs/pagination.html: child-page cards or next/prev siblings.
 import DocsCard from './DocsCard.astro';
-import docs from '@shared/data/docs.json';
-import Icon from '../ui/Icon.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';
 

docs/components/Example.astro

@@ -1,7 +1,7 @@
 ---
 // 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 Icon from '@ui/Icon.astro';
 import { beautifyHtml, highlightCode, removeHref } from '@shared/lib/code-example';
 
 interface Props {

docs/pages/emails/introduction/compiled-html.mdx

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

docs/pages/emails/introduction/contents.mdx

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

docs/pages/emails/introduction/source-html.mdx

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

docs/pages/icons/libraries/astro.mdx

@@ -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)
 

docs/pages/icons/libraries/preact.mdx

@@ -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)
 

docs/pages/icons/libraries/react.mdx

@@ -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)
 

docs/pages/icons/libraries/solidjs.mdx

@@ -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)
 

docs/pages/icons/libraries/svelte.mdx

@@ -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)
 

docs/pages/icons/libraries/vue.mdx

@@ -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)
 

docs/pages/icons/libraries/webfont.mdx

@@ -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)
 

docs/pages/icons/plugins/figma.mdx

@@ -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)
 

docs/pages/icons/static-files/eps.mdx

@@ -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)
 

docs/pages/icons/static-files/pdf.mdx

@@ -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)
 

docs/pages/icons/static-files/png.mdx

@@ -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)
 

docs/pages/icons/static-files/svg.mdx

@@ -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)
 

docs/pages/illustrations/introduction/contents.mdx

@@ -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.
 

docs/pages/illustrations/introduction/license.mdx

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

docs/pages/index.mdx

@@ -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" />

docs/pages/ui/base/colors.mdx

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

docs/pages/ui/base/prose.mdx

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

docs/pages/ui/base/typography.mdx

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

docs/pages/ui/components/accordion.mdx

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

docs/pages/ui/components/alert.mdx

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

docs/pages/ui/components/autosize.mdx

@@ -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`.
 

docs/pages/ui/components/avatar.mdx

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

docs/pages/ui/components/badge.mdx

@@ -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);

docs/pages/ui/components/breadcrumb.mdx

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

docs/pages/ui/components/button.mdx

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

docs/pages/ui/components/card-gradient.mdx

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

docs/pages/ui/components/card.mdx

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

docs/pages/ui/components/carousel.mdx

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

docs/pages/ui/components/chart.mdx

@@ -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`.
 

docs/pages/ui/components/countup.mdx

@@ -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.
 

docs/pages/ui/components/datagrid.mdx

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

docs/pages/ui/components/divider.mdx

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

docs/pages/ui/components/dropdown.mdx

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

docs/pages/ui/components/dropzone.mdx

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

docs/pages/ui/components/empty.mdx

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

docs/pages/ui/components/icon.mdx

@@ -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.
 

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

@@ -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';
 

docs/pages/ui/components/modal.mdx

@@ -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.
 

docs/pages/ui/components/offcanvas.mdx

@@ -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.
 

docs/pages/ui/components/pagination.mdx

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

docs/pages/ui/components/placeholder.mdx

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

docs/pages/ui/components/popover.mdx

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

docs/pages/ui/components/progress-step.mdx

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

docs/pages/ui/components/progress.mdx

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

docs/pages/ui/components/range-slider.mdx

@@ -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`.
 

docs/pages/ui/components/ribbon.mdx

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

docs/pages/ui/components/segmented-control.mdx

@@ -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.
 

docs/pages/ui/components/spinner.mdx

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

docs/pages/ui/components/star-rating.mdx

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

docs/pages/ui/components/status.mdx

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

docs/pages/ui/components/step.mdx

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

docs/pages/ui/components/switch-icon.mdx

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

docs/pages/ui/components/tab.mdx

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

docs/pages/ui/components/table.mdx

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

docs/pages/ui/components/tag.mdx

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

docs/pages/ui/components/timeline.mdx

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

docs/pages/ui/components/toast.mdx

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

docs/pages/ui/components/tooltip.mdx

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

docs/pages/ui/components/tracking.mdx

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

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

@@ -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'
 

docs/pages/ui/components/wysiwyg.mdx

@@ -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.
 

docs/pages/ui/forms/form-color-check.mdx

@@ -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.

docs/pages/ui/forms/form-elements.mdx

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

docs/pages/ui/forms/form-fieldset.mdx

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

docs/pages/ui/forms/form-helpers.mdx

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

docs/pages/ui/forms/form-image-check.mdx

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

docs/pages/ui/forms/form-input-mask.mdx

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

docs/pages/ui/forms/form-selectboxes.mdx

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

docs/pages/ui/forms/form-validation.mdx

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

docs/pages/ui/getting-started/browser-support.mdx

@@ -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.
 

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

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

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

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

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

@@ -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?