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

@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, import CSS and JS in Next.js, 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'

 Next.js renders on the server first, which is great for performance but means browser-only code needs care: Tabler CSS can be imported globally, while `tabler.min.js` must load on the client. This guide shows an App Router pattern that handles both cleanly.

@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, import CSS and client-only JS in Nuxt, 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'

 Nuxt renders on the server by default, so Tabler integrates in two parts: CSS registered globally in `nuxt.config.ts`, and `tabler.min.js` loaded through a client-only plugin so it never runs during server-side rendering.

@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, load CSS and optional JS in Rails, and r
 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'

 Rails renders server-side HTML through ERB templates, so Tabler classes work directly in your views, and the compiled CSS and JS integrate with the standard Rails bundling gems (`cssbundling-rails` and `jsbundling-rails`).

@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, import CSS and JS in React, and render 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'

 React components render standard HTML, so Tabler slots in as the styling layer: you write JSX with Tabler classes and `@tabler/core` provides the CSS. JavaScript is only needed for interactive components such as dropdowns, modals, and tooltips.

@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, import CSS and optional JS in SvelteKit,
 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'

 Svelte components compile to plain HTML and Tabler provides the styling on top. The only SvelteKit-specific step is loading `tabler.min.js` on the client, since pages render on the server first.

@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, import CSS and JS with Symfony asset too
 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'

 Symfony's Twig templates render server-side HTML, so Tabler components work without any adapters — you add Tabler classes to your markup and let the asset pipeline deliver the CSS and JS.

@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, import CSS and JS in Vue, and render a m
 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'

 Vue single-file components render standard HTML templates, so Tabler classes work directly in your markup while `@tabler/core` supplies the styling. JavaScript is only needed for interactive components such as dropdowns, modals, and tooltips.

@@ -4,8 +4,8 @@ summary: This guide explains how to contribute to Tabler, from setting up a deve
 description: Guide to contributing to Tabler and setting up for development.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
-import Steps from '@shared/components/docs/Steps.astro'
+import Example from '@components/Example.astro';
+import Steps from '@components/Steps.astro'

 Contributions are always welcome and highly encouraged! Whether you're new to open source or a seasoned contributor, your input helps make Tabler better for everyone. If you're new to open source, we recommend reading a [how to contribute](https://opensource.guide/how-to-contribute/) guide to learn more about contributing.

@@ -78,13 +78,13 @@ Tabler is a pnpm monorepo. The packages you will work with most often are:
 - `core/` - the framework itself: SCSS sources in `core/scss/` and JavaScript in `core/js/`. This is where CSS classes and components are defined.
 - `preview/` - the demo website built with [Astro](https://astro.build). Pages live in `preview/pages/*.astro`.
 - `docs/` - the documentation website, also built with Astro. Pages live in `docs/pages/**/*.mdx`.
- `shared/astro/` - Astro components, layouts and helpers shared by the preview and docs websites. Import them with the `@shared` alias, for example `import Button from '@shared/components/ui/Button.astro'`.
+- `shared/` - Astro components, layouts and helpers shared by the preview and docs websites. Import UI with `@ui` (for example `import Button from '@ui/Button.astro'`), other shared pieces with `@shared`. Also holds `data/` (`@data`) and `static/`.
 - `shared/data/` - JSON data used by demo pages. Import it with the `@data` alias.

 A few practical rules:

 - If you add a new CSS class or component style, change it in `core/scss/` and show it on a preview page.
- If you add or change a reusable piece of markup, put it in `shared/astro/components/`, not in a single page.
+- If you add or change a reusable piece of markup, put it in `shared/components/`, not in a single page.
 - If you add a new feature, document it in `docs/pages/`.

 ## Add a changeset
@@ -6,11 +6,11 @@ description: 'Set up Tabler: HTML, CSS, JS, and build stunning UIs.'
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

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

 Using a framework? See [Tabler framework integration guides](/ui/getting-started/frameworks).

@@ -4,7 +4,7 @@ summary: The MIT license grants you the flexibility to use Tabler in commercial
 description: "Tabler's MIT license: freedom to use, modify, and share."
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 Tabler is an open-source project licensed under the **MIT license**, giving you extensive freedom to use, modify, and distribute the software. This license ensures that you can adapt Tabler to your needs while maintaining the required attributions. While attribution is not required, it is greatly appreciated to acknowledge the hard work of the developers.

@@ -3,7 +3,7 @@ title: 3rd-party Libraries & Resources
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

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

 Tabler uses the following open source resources:

@@ -5,9 +5,9 @@ description: Create and customize responsive navigation bars with ease.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

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

 The navbar is a core component of any website or application, serving as the primary navigation tool. It provides users with quick access to key sections, enhancing usability and improving the overall user experience. Positioned typically at the top of the page, the navbar can contain links, buttons, branding elements,
 and even interactive components like dropdown menus or search bars.
@@ -4,7 +4,7 @@ summary: This guide covers the basics of creating different types of navigation
 description: "Essential guide to nav styles: tabs, pills, dropdowns, and more."
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 Navigation bars are essential components of modern web applications, providing users with intuitive ways to navigate between different sections and content. This guide explores various types of navigation bars and tabs that can be easily implemented using predefined classes in HTML and CSS. Each type serves specific use cases, from horizontal and vertical layouts to tabbed interfaces and dropdown menus. By utilizing these examples, developers can enhance the usability and aesthetics of their web projects.

@@ -4,8 +4,8 @@ summary: Page heading examples for Tabler
 description: Examples of Tabler page headers.
 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';

 ## Simple header

@@ -5,7 +5,7 @@ description: Learn to design dashboard layouts.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

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

 Before you start with this section, make sure you have followed the [installation guideline](/ui/getting-started/installation).

@@ -7,9 +7,9 @@ description: Visual representation of countries/languages.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

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

 ## Installation

@@ -6,9 +6,9 @@ description: User-friendly payment provider icons.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

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

 ## Installation

@@ -7,9 +7,9 @@ description: Connect users to your social profiles.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

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

 ## Installation

@@ -7,8 +7,8 @@ source-css: 'ui/_patterns.scss'
 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'
 import site from '@data/site.json'
 export const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'lines-vertical', 'grid', 'grid-diagonal', 'blueprint', 'cross-dots', 'circles', 'diagonal-stripes', 'diagonal-stripes-2', 'zigzag', 'vertical-stripes', 'horizontal-stripes']
 export const colors = Object.entries(site.colors)
@@ -4,7 +4,7 @@ summary: Use border utilities to quickly style the border and border-radius of a
 description: Style elements with border utilities.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Border direction

@@ -4,7 +4,7 @@ summary: You can use different cursors to reflect the intended user interaction
 description: Custom cursors for enhanced interaction.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Cursor utilities

@@ -5,7 +5,7 @@ description: Create directional gradients with utility classes.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---

-import Example from '@shared/components/docs/Example.astro'
+import Example from '@components/Example.astro'
 import site from '@data/site.json'
 export const colors = [...Object.keys(site.colors), 'white', 'transparent']

@@ -4,7 +4,7 @@ summary: Utility classes that change how users interact with contents of a websi
 description: Modify user interactions efficiently.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 ## Text selection

@@ -4,7 +4,7 @@ summary: Use margin utilities to control the space between elements.
 description: Control the space between elements with margin utilities.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 Margin utilities allow you to control the space between elements, providing flexibility to suit different design needs. These utilities are especially useful for creating spacing between components or aligning them consistently. Below are examples of how to use margin utilities for various directions and sizes.

@@ -4,7 +4,7 @@ description: Quickly and easily align elements vertically with utility classes.
 summary: Easily modify the vertical alignment of elements such as inline, inline-block, inline-table, and table-cell to ensure proper positioning and alignment within their parent containers, allowing for more precise control over your layout and design.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed.

@@ -3,7 +3,7 @@ title: Visually hidden
 summary: Use these helpers to visually hide elements but keep them accessible to assistive technologies.
 layout: '@shared/layouts/DocsMdxLayout.astro'
 ---
-import Example from '@shared/components/docs/Example.astro';
+import Example from '@components/Example.astro';

 Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container – thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus.