vueless 1.2.12 → 1.2.13-beta.5

package/README.md

@@ -1,43 +1,35 @@
-![vueless-examples.png](public/images/vueless-examples.png)
+![vueless-cover.png](public/images/vueless-cover.png)
 
 # Vueless UI
 
-Vueless is an open-source UI library and design system framework for Vue.js 3 and Nuxt.js 3 / 4, built on top of Tailwind CSS v4.
+A UI library with Open Architecture for Vue.js 3 and Nuxt.js 3 / 4, powered by [Storybook v9](https://storybook.js.org) and [Tailwind CSS v4](https://tailwindcss.com).
 
-It’s completely styleless, allowing you to extend or override default styles without modifying the components themselves — only your custom styles are included in the final build.
-
-Vueless is simple enough for everyday use and powerful enough for advanced scenarios, making it ideal for quickly building beautiful UIs in minutes or developing a fully customized corporate UI library that strictly follows your design guidelines.
+**With Vueless UI, you’re free to:**
+- 🪄️ Customize any component
+- 📋 Copy and extend existing ones
+- 🧱 Build your own from scratch
+- 📕 Document it all seamlessly in Storybook
 
 [Documentation](https://docs.vueless.com/) | [UI Components](https://ui.vueless.com/) | [Website](http://vueless.com/)
 
 ### Key features
 
-- 🧩 65+ UI components (including range date picker, multi-selects, and nested table)
-- 🪄 Automatic on-demand component import (as you use them)
-- 📘 Built-in Storybook support
-- 🌈 Beautiful, modern default UI theme
-- 🌗 Light and dark mode support
+- 🧩 65+ crafted UI components (including range date picker, multi-select, and nested table)
+- ✨ Open Architecture lets you customize, copy, extend, and create your own components
+- 📕 Built-in Storybook support
+- 🌈 Beautiful default UI theme
 - 🌀 Unstyled mode
-- 🎨️ Flexible color palettes
-- 🎛️ Runtime theme and color switching
+- 🌗 Light and dark mode
 - 🧬 Design tokens powered by CSS variables
-- ✨ Powerful yet simple styling customization system
+- ⚙️ Server-side rendering (SSR)
 - 🌍 Internationalization (i18n)
 - ♿️ Accessibility (a11y)
-- ⚙️ Server-side rendering (SSR) friendly
-- 🖼️ 1000+ built-in SVG icons
+- 🖼️ Inline SVG icons
+- 🪄 Auto component imports (as you use them)
+- 🧿 Uncompiled source in npm for better DX
 - 🧪️ 1300+ unit tests ensuring consistent logic
 - 🛡️ Full TypeScript support with type safety
 
-### Advanced Features
-
-- 🧰 Copy and extend existing components
-- 🧱 Create your own components
-- 🔧️ Define default values for props
-- 🔩️ Add or hide props to components
-- 🧿 `npm` package ships full source without TypeScript transpilation for better DX.
-
-
 ## Quick Start (Vue)
 
 ### New project
@@ -50,6 +42,8 @@ npm create vueless@latest
 
 This command guides you through a few setup options, then generates a new scaffolded Vue + Vueless UI project with the complete application structure.
 
+---
+
 ### Existing project
 
 1. Install `vueless` UI library packages.

package/bin/constants.d.ts

@@ -1 +1 @@
-export const DEFAULT_VUELESS_CONFIG_CONTENT: "import { componentConfigs } from \"./.vueless\";\n\nexport default {\n  /**\n   * Global settings.\n   */\n  primary: \"grayscale\",\n  neutral: \"gray\",\n  text: 14,\n  outline: 2,\n  rounding: 8,\n  letterSpacing: 0,\n  disabledOpacity: 50,\n  colorMode: \"auto\",\n\n  /**\n   * Component settings.\n   */\n  components: /*tw*/ {\n    ...componentConfigs,\n  },\n\n  /**\n   * Directive settings.\n   */\n  directives: {},\n\n  /**\n   * Light theme CSS variable settings.\n   */\n  lightTheme: {\n    /* Primary colors */\n    \"--vl-primary\": \"--vl-primary-600\",\n    \"--vl-primary-lifted\": \"--vl-primary-700\",\n    \"--vl-primary-accented\": \"--vl-primary-800\",\n\n    /* Secondary colors */\n    \"--vl-secondary\": \"--vl-neutral-500\",\n    \"--vl-secondary-lifted\": \"--vl-neutral-600\",\n    \"--vl-secondary-accented\": \"--vl-neutral-700\",\n\n    /* Success colors */\n    \"--vl-success\": \"--color-green-600\",\n    \"--vl-success-lifted\": \"--color-green-700\",\n    \"--vl-success-accented\": \"--color-green-800\",\n\n    /* Info colors */\n    \"--vl-info\": \"--color-blue-600\",\n    \"--vl-info-lifted\": \"--color-blue-700\",\n    \"--vl-info-accented\": \"--color-blue-800\",\n\n    /* Notice colors */\n    \"--vl-notice\": \"--color-violet-600\",\n    \"--vl-notice-lifted\": \"--color-violet-700\",\n    \"--vl-notice-accented\": \"--color-violet-800\",\n\n    /* Warning colors */\n    \"--vl-warning\": \"--color-orange-600\",\n    \"--vl-warning-lifted\": \"--color-orange-700\",\n    \"--vl-warning-accented\": \"--color-orange-800\",\n\n    /* Error colors */\n    \"--vl-error\": \"--color-red-600\",\n    \"--vl-error-lifted\": \"--color-red-700\",\n    \"--vl-error-accented\": \"--color-red-800\",\n\n    /* Grayscale colors */\n    \"--vl-grayscale\": \"--vl-neutral-900\",\n    \"--vl-grayscale-lifted\": \"--vl-neutral-800\",\n    \"--vl-grayscale-accented\": \"--vl-neutral-700\",\n\n    /* Neutral colors */\n    \"--vl-neutral\": \"--vl-neutral-500\",\n    \"--vl-neutral-lifted\": \"--vl-neutral-600\",\n    \"--vl-neutral-accented\": \"--vl-neutral-700\",\n\n    /* Text neutral colors */\n    \"--vl-text-inverted\": \"--color-white\",\n    \"--vl-text-muted\": \"--vl-neutral-400\",\n    \"--vl-text-lifted\": \"--vl-neutral-500\",\n    \"--vl-text-accented\": \"--vl-neutral-600\",\n    \"--vl-text\": \"--vl-neutral-900\",\n\n    /* Border neutral colors */\n    \"--vl-border-muted\": \"--vl-neutral-200\",\n    \"--vl-border\": \"--vl-neutral-300\",\n    \"--vl-border-lifted\": \"--vl-neutral-400\",\n    \"--vl-border-accented\": \"--vl-neutral-600\",\n\n    /* Background neutral colors */\n    \"--vl-bg\": \"--color-white\",\n    \"--vl-bg-muted\": \"--vl-neutral-50\",\n    \"--vl-bg-lifted\": \"--vl-neutral-100\",\n    \"--vl-bg-accented\": \"--vl-neutral-200\",\n    \"--vl-bg-inverted\": \"--vl-neutral-900\",\n  },\n\n  /**\n   * Dark theme CSS variable settings.\n   */\n  darkTheme: {\n    /* Primary colors */\n    \"--vl-primary\": \"--vl-primary-400\",\n    \"--vl-primary-lifted\": \"--vl-primary-500\",\n    \"--vl-primary-accented\": \"--vl-primary-600\",\n\n    /* Secondary colors */\n    \"--vl-secondary\": \"--vl-neutral-300\",\n    \"--vl-secondary-lifted\": \"--vl-neutral-400\",\n    \"--vl-secondary-accented\": \"--vl-neutral-500\",\n\n    /* Success colors */\n    \"--vl-success\": \"--color-green-400\",\n    \"--vl-success-lifted\": \"--color-green-500\",\n    \"--vl-success-accented\": \"--color-green-600\",\n\n    /* Info colors */\n    \"--vl-info\": \"--color-blue-400\",\n    \"--vl-info-lifted\": \"--color-blue-500\",\n    \"--vl-info-accented\": \"--color-blue-600\",\n\n    /* Notice colors */\n    \"--vl-notice\": \"--color-violet-400\",\n    \"--vl-notice-lifted\": \"--color-violet-500\",\n    \"--vl-notice-accented\": \"--color-violet-600\",\n\n    /* Warning colors */\n    \"--vl-warning\": \"--color-orange-400\",\n    \"--vl-warning-lifted\": \"--color-orange-500\",\n    \"--vl-warning-accented\": \"--color-orange-600\",\n\n    /* Error colors */\n    \"--vl-error\": \"--color-red-400\",\n    \"--vl-error-lifted\": \"--color-red-500\",\n    \"--vl-error-accented\": \"--color-red-600\",\n\n    /* Grayscale colors */\n    \"--vl-grayscale\": \"--vl-neutral-100\",\n    \"--vl-grayscale-lifted\": \"--vl-neutral-200\",\n    \"--vl-grayscale-accented\": \"--vl-neutral-300\",\n\n    /* Neutral colors */\n    \"--vl-neutral\": \"--vl-neutral-300\",\n    \"--vl-neutral-lifted\": \"--vl-neutral-400\",\n    \"--vl-neutral-accented\": \"--vl-neutral-500\",\n\n    /* Text neutral colors */\n    \"--vl-text-inverted\": \"--vl-neutral-900\",\n    \"--vl-text-muted\": \"--vl-neutral-600\",\n    \"--vl-text-lifted\": \"--vl-neutral-400\",\n    \"--vl-text-accented\": \"--vl-neutral-300\",\n    \"--vl-text\": \"--vl-neutral-100\",\n\n    /* Border neutral colors */\n    \"--vl-border-muted\": \"--vl-neutral-800\",\n    \"--vl-border\": \"--vl-neutral-700\",\n    \"--vl-border-lifted\": \"--vl-neutral-600\",\n    \"--vl-border-accented\": \"--vl-neutral-400\",\n\n    /* Background neutral colors */\n    \"--vl-bg\": \"--vl-neutral-900\",\n    \"--vl-bg-muted\": \"--vl-neutral-800\",\n    \"--vl-bg-lifted\": \"--vl-neutral-800\",\n    \"--vl-bg-accented\": \"--vl-neutral-700\",\n    \"--vl-bg-inverted\": \"--vl-neutral-100\",\n  },\n};\n";
+export const DEFAULT_VUELESS_CONFIG_CONTENT: "import { componentConfigs } from \"./.vueless\";\n\nexport default {\n  /**\n   * Global settings.\n   */\n  primary: \"grayscale\",\n  neutral: \"gray\",\n  text: 14,\n  outline: 2,\n  rounding: 8,\n  spacing: 8,\n  letterSpacing: 0,\n  disabledOpacity: 50,\n  colorMode: \"auto\",\n\n  /**\n   * Component settings.\n   */\n  components: /*tw*/ {\n    ...componentConfigs,\n  },\n\n  /**\n   * Directive settings.\n   */\n  directives: {},\n\n  /**\n   * Light theme CSS variable settings.\n   */\n  lightTheme: {\n    /* Primary colors */\n    \"--vl-primary\": \"--vl-primary-600\",\n    \"--vl-primary-lifted\": \"--vl-primary-700\",\n    \"--vl-primary-accented\": \"--vl-primary-800\",\n\n    /* Secondary colors */\n    \"--vl-secondary\": \"--vl-neutral-500\",\n    \"--vl-secondary-lifted\": \"--vl-neutral-600\",\n    \"--vl-secondary-accented\": \"--vl-neutral-700\",\n\n    /* Success colors */\n    \"--vl-success\": \"--color-green-600\",\n    \"--vl-success-lifted\": \"--color-green-700\",\n    \"--vl-success-accented\": \"--color-green-800\",\n\n    /* Info colors */\n    \"--vl-info\": \"--color-blue-600\",\n    \"--vl-info-lifted\": \"--color-blue-700\",\n    \"--vl-info-accented\": \"--color-blue-800\",\n\n    /* Notice colors */\n    \"--vl-notice\": \"--color-violet-600\",\n    \"--vl-notice-lifted\": \"--color-violet-700\",\n    \"--vl-notice-accented\": \"--color-violet-800\",\n\n    /* Warning colors */\n    \"--vl-warning\": \"--color-orange-600\",\n    \"--vl-warning-lifted\": \"--color-orange-700\",\n    \"--vl-warning-accented\": \"--color-orange-800\",\n\n    /* Error colors */\n    \"--vl-error\": \"--color-red-600\",\n    \"--vl-error-lifted\": \"--color-red-700\",\n    \"--vl-error-accented\": \"--color-red-800\",\n\n    /* Grayscale colors */\n    \"--vl-grayscale\": \"--vl-neutral-900\",\n    \"--vl-grayscale-lifted\": \"--vl-neutral-800\",\n    \"--vl-grayscale-accented\": \"--vl-neutral-700\",\n\n    /* Neutral colors */\n    \"--vl-neutral\": \"--vl-neutral-500\",\n    \"--vl-neutral-lifted\": \"--vl-neutral-600\",\n    \"--vl-neutral-accented\": \"--vl-neutral-700\",\n\n    /* Text neutral colors */\n    \"--vl-text-inverted\": \"--color-white\",\n    \"--vl-text-muted\": \"--vl-neutral-400\",\n    \"--vl-text-lifted\": \"--vl-neutral-500\",\n    \"--vl-text-accented\": \"--vl-neutral-600\",\n    \"--vl-text\": \"--vl-neutral-900\",\n\n    /* Border neutral colors */\n    \"--vl-border-muted\": \"--vl-neutral-200\",\n    \"--vl-border\": \"--vl-neutral-300\",\n    \"--vl-border-lifted\": \"--vl-neutral-400\",\n    \"--vl-border-accented\": \"--vl-neutral-600\",\n\n    /* Background neutral colors */\n    \"--vl-bg\": \"--color-white\",\n    \"--vl-bg-muted\": \"--vl-neutral-50\",\n    \"--vl-bg-lifted\": \"--vl-neutral-100\",\n    \"--vl-bg-accented\": \"--vl-neutral-200\",\n    \"--vl-bg-inverted\": \"--vl-neutral-900\",\n  },\n\n  /**\n   * Dark theme CSS variable settings.\n   */\n  darkTheme: {\n    /* Primary colors */\n    \"--vl-primary\": \"--vl-primary-400\",\n    \"--vl-primary-lifted\": \"--vl-primary-500\",\n    \"--vl-primary-accented\": \"--vl-primary-600\",\n\n    /* Secondary colors */\n    \"--vl-secondary\": \"--vl-neutral-300\",\n    \"--vl-secondary-lifted\": \"--vl-neutral-400\",\n    \"--vl-secondary-accented\": \"--vl-neutral-500\",\n\n    /* Success colors */\n    \"--vl-success\": \"--color-green-400\",\n    \"--vl-success-lifted\": \"--color-green-500\",\n    \"--vl-success-accented\": \"--color-green-600\",\n\n    /* Info colors */\n    \"--vl-info\": \"--color-blue-400\",\n    \"--vl-info-lifted\": \"--color-blue-500\",\n    \"--vl-info-accented\": \"--color-blue-600\",\n\n    /* Notice colors */\n    \"--vl-notice\": \"--color-violet-400\",\n    \"--vl-notice-lifted\": \"--color-violet-500\",\n    \"--vl-notice-accented\": \"--color-violet-600\",\n\n    /* Warning colors */\n    \"--vl-warning\": \"--color-orange-400\",\n    \"--vl-warning-lifted\": \"--color-orange-500\",\n    \"--vl-warning-accented\": \"--color-orange-600\",\n\n    /* Error colors */\n    \"--vl-error\": \"--color-red-400\",\n    \"--vl-error-lifted\": \"--color-red-500\",\n    \"--vl-error-accented\": \"--color-red-600\",\n\n    /* Grayscale colors */\n    \"--vl-grayscale\": \"--vl-neutral-100\",\n    \"--vl-grayscale-lifted\": \"--vl-neutral-200\",\n    \"--vl-grayscale-accented\": \"--vl-neutral-300\",\n\n    /* Neutral colors */\n    \"--vl-neutral\": \"--vl-neutral-300\",\n    \"--vl-neutral-lifted\": \"--vl-neutral-400\",\n    \"--vl-neutral-accented\": \"--vl-neutral-500\",\n\n    /* Text neutral colors */\n    \"--vl-text-inverted\": \"--vl-neutral-900\",\n    \"--vl-text-muted\": \"--vl-neutral-600\",\n    \"--vl-text-lifted\": \"--vl-neutral-400\",\n    \"--vl-text-accented\": \"--vl-neutral-300\",\n    \"--vl-text\": \"--vl-neutral-100\",\n\n    /* Border neutral colors */\n    \"--vl-border-muted\": \"--vl-neutral-800\",\n    \"--vl-border\": \"--vl-neutral-700\",\n    \"--vl-border-lifted\": \"--vl-neutral-600\",\n    \"--vl-border-accented\": \"--vl-neutral-400\",\n\n    /* Background neutral colors */\n    \"--vl-bg\": \"--vl-neutral-900\",\n    \"--vl-bg-muted\": \"--vl-neutral-800\",\n    \"--vl-bg-lifted\": \"--vl-neutral-800\",\n    \"--vl-bg-accented\": \"--vl-neutral-700\",\n    \"--vl-bg-inverted\": \"--vl-neutral-100\",\n  },\n};\n";

package/bin/constants.js

@@ -9,6 +9,7 @@ export default {
   text: 14,
   outline: 2,
   rounding: 8,
+  spacing: 8,
   letterSpacing: 0,
   disabledOpacity: 50,
   colorMode: "auto",

package/constants.d.ts

@@ -8,6 +8,7 @@ export const TEXT: "text";
 export const OUTLINE: "outline";
 export const ROUNDING: "rounding";
 export const DISABLED_OPACITY: "disabled-opacity";
+export const SPACING: "spacing";
 export const LETTER_SPACING: "letter-spacing";
 export const LIGHT_THEME: "light-theme";
 export const DARK_THEME: "dark-theme";
@@ -26,6 +27,7 @@ export const OUTLINE_INCREMENT: 1;
 export const DEFAULT_ROUNDING: 8;
 export const ROUNDING_DECREMENT: 4;
 export const ROUNDING_INCREMENT: 6;
+export const DEFAULT_SPACING: 4;
 export const DEFAULT_DISABLED_OPACITY: 50;
 export const DEFAULT_LETTER_SPACING: 0;
 export const PRIMARY_COLORS: string[];

package/constants.js

@@ -16,6 +16,7 @@ export const TEXT = "text";
 export const OUTLINE = "outline";
 export const ROUNDING = "rounding";
 export const DISABLED_OPACITY = "disabled-opacity";
+export const SPACING = "spacing";
 export const LETTER_SPACING = "letter-spacing";
 export const LIGHT_THEME = "light-theme";
 export const DARK_THEME = "dark-theme";
@@ -38,6 +39,7 @@ export const OUTLINE_INCREMENT = 1; /* pixels */
 export const DEFAULT_ROUNDING = 8; /* pixels */
 export const ROUNDING_DECREMENT = 4; /* pixels */
 export const ROUNDING_INCREMENT = 6; /* pixels */
+export const DEFAULT_SPACING = 4; /* pixels */
 export const DEFAULT_DISABLED_OPACITY = 50; /* presents */
 export const DEFAULT_LETTER_SPACING = 0; /* em */
 

package/index.d.ts

@@ -29,6 +29,7 @@ export { useLocale } from "./composables/useLocale";
 export { default as useUI } from "./composables/useUI";
 export { useDarkMode } from "./composables/useDarkMode";
 export { useRequestQueue } from "./composables/useRequestQueue";
+export { default as useBreakpoint } from "./composables/useBreakpoint";
 export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
 export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
 export { useMutationObserver } from "./composables/useMutationObserver";

package/index.ts

@@ -35,6 +35,7 @@ export { useLocale } from "./composables/useLocale";
 export { default as useUI } from "./composables/useUI";
 export { useDarkMode } from "./composables/useDarkMode";
 export { useRequestQueue } from "./composables/useRequestQueue";
+export { default as useBreakpoint } from "./composables/useBreakpoint";
 export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
 export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
 export { useMutationObserver } from "./composables/useMutationObserver";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.12",
+  "version": "1.2.13-beta.5",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/tailwind.css

@@ -113,6 +113,9 @@
   --radius-medium: var(--vl-rounding-md);
   --radius-large: var(--vl-rounding-lg);
 
+  /* Spacing value */
+  --spacing: var(--vl-spacing);
+
   /* Mobile safe area spaceing. */
   --spacing-safe-top: "env(safe-area-inset-top)";
   --spacing-safe-bottom: "env(safe-area-inset-bottom)";

package/types.ts

@@ -115,6 +115,11 @@ export interface ThemeConfig {
    */
   outline?: number | Partial<ThemeConfigOutline>;
 
+  /**
+   * Default components spacing.
+   */
+  spacing?: number;
+
   /**
    * Default components letter spacing.
    */
@@ -497,7 +502,7 @@ export interface VuelessCssVariables {
   "--vl-bg-accented": string;
   "--vl-bg-muted": string;
   "--vl-bg-inverted": string;
-  /* Amy other design system CSS variables */
+  /* Any other design system CSS variables */
   [key: string]: string;
 }
 

package/utils/theme.ts

@@ -37,6 +37,8 @@ import {
   DEFAULT_LETTER_SPACING,
   LIGHT_THEME,
   DARK_THEME,
+  SPACING,
+  DEFAULT_SPACING,
 } from "../constants";
 
 import type {
@@ -62,13 +64,17 @@ const prefersColorSchemeDark = isCSR && window.matchMedia("(prefers-color-scheme
 function toggleColorModeClass() {
   if (!prefersColorSchemeDark) return;
 
-  const colorMode = prefersColorSchemeDark.matches ? ColorMode.Dark : ColorMode.Light;
+  const isDarkMode = prefersColorSchemeDark.matches;
+  const colorMode = isDarkMode ? ColorMode.Dark : ColorMode.Light;
 
   setCookie(COLOR_MODE_KEY, colorMode);
   setCookie(AUTO_MODE_KEY, String(Number(true)));
 
-  document.documentElement.classList.toggle(DARK_MODE_CLASS, prefersColorSchemeDark.matches);
-  document.documentElement.classList.toggle(LIGHT_MODE_CLASS, !prefersColorSchemeDark.matches);
+  document.documentElement.classList.toggle(DARK_MODE_CLASS, isDarkMode);
+  document.documentElement.classList.toggle(LIGHT_MODE_CLASS, !isDarkMode);
+
+  /* Dispatching custom event for the useDarkMode composable. */
+  window.dispatchEvent(new CustomEvent("darkModeChange", { detail: isDarkMode }));
 }
 
 /**
@@ -179,6 +185,7 @@ export function resetTheme() {
     `vl-${ROUNDING}-sm`,
     `vl-${ROUNDING}-md`,
     `vl-${ROUNDING}-lg`,
+    `vl-${SPACING}`,
     `vl-${LETTER_SPACING}`,
     `vl-${DISABLED_OPACITY}`,
     `vl-${LIGHT_THEME}`,
@@ -206,6 +213,7 @@ export function getTheme(config?: ThemeConfig): MergedThemeConfig {
   const text = getText(config?.text);
   const outline = getOutlines(config?.outline);
   const rounding = getRoundings(config?.rounding);
+  const spacing = getSpacing(config?.spacing);
   const letterSpacing = getLetterSpacing(config?.letterSpacing);
   const disabledOpacity = getDisabledOpacity(config?.disabledOpacity);
 
@@ -220,6 +228,7 @@ export function getTheme(config?: ThemeConfig): MergedThemeConfig {
     text,
     outline,
     rounding,
+    spacing,
     letterSpacing,
     disabledOpacity,
     lightTheme,
@@ -240,6 +249,7 @@ export function setTheme(config: ThemeConfig = {}) {
   const text = getText(config.text);
   const outline = getOutlines(config.outline);
   const rounding = getRoundings(config.rounding);
+  const spacing = getSpacing(config.spacing);
   const letterSpacing = getLetterSpacing(config.letterSpacing);
   const disabledOpacity = getDisabledOpacity(config.disabledOpacity);
 
@@ -306,6 +316,7 @@ export function setTheme(config: ThemeConfig = {}) {
     text,
     outline,
     rounding,
+    spacing,
     letterSpacing,
     disabledOpacity,
     lightTheme,
@@ -342,6 +353,7 @@ export function normalizeThemeConfig(theme: any): MergedThemeConfig {
       md: toNumber(theme.rounding?.md),
       lg: toNumber(theme.rounding?.lg),
     },
+    spacing: toNumber(theme.spacing),
     letterSpacing: toNumber(theme.letterSpacing),
     disabledOpacity: toNumber(theme.disabledOpacity),
   };
@@ -592,6 +604,24 @@ function getRoundings(rounding?: ThemeConfig["rounding"]) {
   return mergedRounding;
 }
 
+/**
+ * Retrieve spacing value and save them to cookie and localStorage.
+ * @return number - spacing value.
+ */
+function getSpacing(spacing?: ThemeConfig["spacing"]) {
+  const storageKey = `vl-${SPACING}`;
+
+  const storedSpacing = spacing ?? getStored(storageKey) ?? vuelessConfig.spacing;
+  const mergedSpacing = Number(storedSpacing ?? DEFAULT_SPACING);
+
+  if (isCSR && spacing !== undefined) {
+    setCookie(storageKey, String(mergedSpacing));
+    localStorage.setItem(storageKey, String(mergedSpacing));
+  }
+
+  return mergedSpacing;
+}
+
 /**
  * Retrieve letter spacing value and save them to cookie and localStorage.
  * @return number - letter spacing value.
@@ -698,6 +728,7 @@ export function setRootCSSVariables(vars: MergedThemeConfig) {
     "--vl-rounding-sm": `${Number(vars.rounding.sm ?? 0) / PX_IN_REM}rem`,
     "--vl-rounding-md": `${Number(vars.rounding.md ?? 0) / PX_IN_REM}rem`,
     "--vl-rounding-lg": `${Number(vars.rounding.lg ?? 0) / PX_IN_REM}rem`,
+    "--vl-spacing": `${Number(vars.spacing ?? 0) / PX_IN_REM}rem`,
     "--vl-letter-spacing": `${vars.letterSpacing}em`,
     "--vl-disabled-opacity": `${vars.disabledOpacity}%`,
   };