diff --git a/apps/showcase/layouts/AppConfigurator.vue b/apps/showcase/layouts/AppConfigurator.vue
index c7125d5e5..15376fc6d 100755
--- a/apps/showcase/layouts/AppConfigurator.vue
+++ b/apps/showcase/layouts/AppConfigurator.vue
@@ -33,6 +33,10 @@
                 <span class="config-panel-label">Presets</span>
                 <SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presets" :unselectable="false" />
             </div>
+            <div class="config-panel-settings">
+                <span class="config-panel-label">Tailwind - Aura</span>
+                <ToggleSwitch :modelValue="tailwindActive" @update:modelValue="onTailwindChange" />
+            </div>
             <div class="config-panel-settings">
                 <span class="config-panel-label">Ripple</span>
                 <ToggleSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
@@ -43,6 +47,7 @@
 
 <script>
 import EventBus from '@/layouts/AppEventBus';
+import TailwindAura from '@primevue/tailwindcss-presets/aura';
 import { $t, updatePreset, updateSurfacePalette } from '@primevue/themes';
 import Aura from '@primevue/themes/aura';
 import Lara from '@primevue/themes/lara';
@@ -266,6 +271,10 @@ export default {
         onRippleChange(value) {
             this.$primevue.config.ripple = value;
         },
+        onTailwindChange(value) {
+            this.$primevue.config.unstyled = value;
+            this.$primevue.config.pt = value ? TailwindAura : undefined;
+        },
         onPresetChange(value) {
             this.$appState.preset = value;
             const preset = presets[value];
@@ -278,6 +287,9 @@ export default {
         rippleActive() {
             return this.$primevue.config.ripple;
         },
+        tailwindActive() {
+            return this.$primevue.config.unstyled;
+        },
         selectedPrimaryColor() {
             return this.$appState.primary;
         },
diff --git a/apps/showcase/package.json b/apps/showcase/package.json
index 00bad2791..0333b41ac 100644
--- a/apps/showcase/package.json
+++ b/apps/showcase/package.json
@@ -62,7 +62,8 @@
         "primevue": "workspace:*",
         "@primevue/core": "workspace:*",
         "@primevue/nuxt-module": "workspace:*",
-        "@primevue/themes": "workspace:*"
+        "@primevue/themes": "workspace:*",
+        "@primevue/tailwindcss-presets": "workspace:*"
     },
     "dependencies": {
         "@docsearch/js": "^3.3.3",
diff --git a/apps/showcase/tailwind.config.js b/apps/showcase/tailwind.config.js
index 605b7f2e6..b02c306e6 100644
--- a/apps/showcase/tailwind.config.js
+++ b/apps/showcase/tailwind.config.js
@@ -6,7 +6,16 @@ module.exports = {
         preflight: false
     },
     darkMode: ['selector', '[class="p-dark"]'],
-    content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/doc/**/*.{js,vue,ts}', './components/landing/**/*.{js,vue,ts}', './components/template/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
+    content: [
+        './pages/**/*.vue',
+        './layouts/**/*.vue',
+        './components/doc/**/*.{js,vue,ts}',
+        './components/landing/**/*.{js,vue,ts}',
+        './components/template/**/*.{js,vue,ts}',
+        './doc/**/*.{js,vue,ts}',
+        './error.vue',
+        '../../packages/tailwindcss-presets/src/**/*.js'
+    ],
     plugins: [primeui],
     theme: {
         screens: {
diff --git a/packages/tailwindcss-presets/package.json b/packages/tailwindcss-presets/package.json
new file mode 100644
index 000000000..20f7c9537
--- /dev/null
+++ b/packages/tailwindcss-presets/package.json
@@ -0,0 +1,61 @@
+{
+    "name": "@primevue/tailwindcss-presets",
+    "version": "4.0.0-rc.3",
+    "author": "PrimeTek Informatics",
+    "description": "",
+    "homepage": "https://primevue.org/",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/primefaces/primevue.git",
+        "directory": "packages/themes"
+    },
+    "bugs": {
+        "url": "https://github.com/primefaces/primevue/issues"
+    },
+    "exports": {
+        "./aura": "./src/aura/index.js",
+        "./lara": "./src/lara/index.js"
+    },
+    "publishConfig": {
+        "main": "./index.mjs",
+        "module": "./index.mjs",
+        "types": "./index.d.ts",
+        "exports": {
+            ".": {
+                "types": "./index.d.ts",
+                "import": "./index.mjs"
+            },
+            "./aura/*": {
+                "types": "./types/*/index.d.ts",
+                "import": "./aura/*/index.mjs"
+            },
+            "./lara/*": {
+                "types": "./types/*/index.d.ts",
+                "import": "./lara/*/index.mjs"
+            },
+            "./nora/*": {
+                "types": "./types/*/index.d.ts",
+                "import": "./nora/*/index.mjs"
+            },
+            "./*": {
+                "types": "./*/index.d.ts",
+                "import": "./*/index.mjs"
+            }
+        },
+        "directory": "dist",
+        "linkDirectory": false,
+        "access": "public"
+    },
+    "scripts": {
+        "build": "NODE_ENV=production INPUT_DIR=src/ OUTPUT_DIR=dist/ pnpm run build:package",
+        "build:package": "pnpm run build:prebuild && pnpm run build:tokens && rollup -c && pnpm run build:postbuild",
+        "build:tokens": "node ./scripts/build-tokens.js",
+        "build:prebuild": "node ./scripts/prebuild.mjs",
+        "build:postbuild": "node ./scripts/postbuild.mjs",
+        "dev:link": "pnpm link --global && npm link"
+    },
+    "engines": {
+        "node": ">=12.11.0"
+    }
+}
diff --git a/packages/tailwindcss-presets/src/aura/accordion/index.js b/packages/tailwindcss-presets/src/aura/accordion/index.js
new file mode 100644
index 000000000..3fe092594
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/accordion/index.js
@@ -0,0 +1,73 @@
+export default {
+    accordiontab: {
+        root: {
+            class: ['mb-0', 'border-b border-surface-200 dark:border-surface-700']
+        },
+        header: ({ props }) => ({
+            class: [
+                // State
+                { 'select-none pointer-events-none cursor-default opacity-60': props?.disabled }
+            ]
+        }),
+        headerAction: {
+            class: [
+                //Font
+                'font-semibold',
+                'leading-none',
+
+                // Alignments
+                'flex justify-between items-center',
+                'flex-row-reverse',
+                'relative',
+
+                // Sizing
+                'p-[1.125rem]',
+
+                // Shape
+                'rounded-md',
+                'border-0',
+
+                // Color
+                'bg-surface-0 dark:bg-surface-900',
+                'text-surface-600 dark:text-surface-0/80',
+
+                // Transition
+                'transition duration-200 ease-in-out',
+                'transition-shadow duration-200',
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300', // Focus
+
+                // Misc
+                'cursor-pointer no-underline select-none'
+            ]
+        },
+        headerIcon: ({ context }) => ({
+            class: ['inline-block ml-2', { 'text-surface-900 dark:text-surface-0': context.active }]
+        }),
+        headerTitle: {
+            class: 'leading-none'
+        },
+        content: {
+            class: [
+                // Spacing
+                'p-[1.125rem] pt-0',
+
+                //Shape
+                'border-0 rounded-none',
+
+                // Color
+                'bg-surface-0 dark:bg-surface-900',
+                'text-surface-600 dark:text-surface-0/70'
+            ]
+        },
+        transition: {
+            enterFromClass: 'max-h-0',
+            enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+            enterToClass: 'max-h-[1000px]',
+            leaveFromClass: 'max-h-[1000px]',
+            leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+            leaveToClass: 'max-h-0'
+        }
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/autocomplete/index.js b/packages/tailwindcss-presets/src/aura/autocomplete/index.js
new file mode 100644
index 000000000..91ac380b8
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/autocomplete/index.js
@@ -0,0 +1,253 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Flex
+            'inline-flex',
+
+            // Size
+            { 'w-full': props.multiple },
+
+            // Color
+            'text-surface-900 dark:text-surface-0',
+
+            //States
+            {
+                'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+            }
+        ]
+    }),
+    container: ({ props, state }) => ({
+        class: [
+            // Font
+            'leading-none',
+
+            // Flex
+            'flex items-center flex-wrap',
+            'gap-2',
+
+            // Spacing
+            'm-0 list-none',
+            'p-1',
+
+            // Size
+            'w-full',
+
+            // Shape
+            'appearance-none rounded-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+            { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+            'border',
+            { 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+            // Invalid State
+            'invalid:focus:ring-red-200',
+            'invalid:hover:border-red-500',
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            { 'hover:border-surface-400 dark:hover:border-surface-700': !props.invalid },
+            { 'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
+
+            // Transition
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-text overflow-hidden'
+        ]
+    }),
+    inputtoken: {
+        class: ['py-1 px-0 ml-2', 'inline-flex flex-auto']
+    },
+    input: ({ props, parent }) => ({
+        class: [
+            // Font
+            'text-base leading-none',
+
+            // Shape
+            'appearance-none rounded-md',
+            { 'rounded-tr-none rounded-br-none': props.dropdown },
+            { 'outline-none shadow-none rounded-none': props.multiple },
+
+            // Size
+            { 'w-full': props.multiple },
+
+            // Spacing
+            'm-0',
+            { 'py-2 px-3': !props.multiple, 'p-0': props.multiple },
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+            'border',
+            {
+                'bg-surface-0 dark:bg-surface-950': !props.multiple,
+                ' border-surface-300 dark:border-surface-700': !props.multiple && !props.invalid,
+                'border-0 bg-transparent': props.multiple
+            },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            { 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !props.multiple },
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== '' },
+
+            // Transition
+            'transition-colors duration-200'
+        ]
+    }),
+    token: {
+        class: [
+            // Flex
+            'inline-flex items-center',
+
+            // Spacings
+            'py-1 px-3 m-0',
+
+            // Shape
+            'rounded',
+
+            // Colors
+            'bg-surface-100 dark:bg-surface-700',
+            'text-surface-700 dark:text-white',
+
+            // Misc
+            'cursor-default'
+        ]
+    },
+    removeTokenIcon: {
+        class: [
+            // Spacing
+            'ml-[0.375rem]',
+
+            // Size
+            'w-4 h-4',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    },
+    dropdownbutton: {
+        root: {
+            class: [
+                'relative',
+
+                // Alignments
+                'items-center inline-flex justify-center text-center align-bottom',
+
+                // Shape
+                'rounded-r-md',
+
+                // Size
+                'py-2 leading-none',
+                'w-10',
+
+                // Colors
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 ',
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:ring-primary-500 dark:focus:ring-primary-400'
+            ]
+        }
+    },
+    loadingicon: {
+        class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[0.5rem] -mt-2 animate-spin']
+    },
+    panel: {
+        class: [
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-white/80',
+
+            // Shape
+            'border border-surface-300 dark:border-surface-700',
+            'rounded-md',
+            'shadow-md',
+
+            // Size
+            'overflow-auto'
+        ]
+    },
+    list: {
+        class: 'p-1 list-none m-0'
+    },
+    item: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Font
+            'leading-none',
+
+            // Spacing
+            'm-0 px-3 py-2',
+            'first:mt-0 mt-[2px]',
+
+            // Shape
+            'border-0 rounded',
+
+            // Colors
+            {
+                'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
+                'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
+                'text-surface-700 dark:text-white/80': context.focused && !context.selected,
+
+                'text-primary-highlight-inverse': context.selected,
+                'bg-primary-highlight': context.selected
+            },
+
+            //States
+            { 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
+            { 'hover:bg-primary-highlight-hover': context.selected },
+            { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
+
+            // Transition
+            'transition-shadow duration-200',
+
+            // Misc
+            'cursor-pointer overflow-hidden whitespace-nowrap'
+        ]
+    }),
+    itemgroup: {
+        class: [
+            'font-semibold',
+
+            // Spacing
+            'm-0 py-2 px-3',
+
+            // Colors
+            'text-surface-400 dark:text-surface-500',
+
+            // Misc
+            'cursor-auto'
+        ]
+    },
+    emptymessage: {
+        class: [
+            // Font
+            'leading-none',
+
+            // Spacing
+            'py-2 px-3',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-transparent'
+        ]
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/avatar/index.js b/packages/tailwindcss-presets/src/aura/avatar/index.js
new file mode 100644
index 000000000..9c77beb98
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/avatar/index.js
@@ -0,0 +1,43 @@
+export default {
+    root: ({ props, parent }) => ({
+        class: [
+            // Font
+            {
+                'text-xl': props.size == 'large',
+                'text-2xl': props.size == 'xlarge'
+            },
+
+            // Alignments
+            'inline-flex items-center justify-center',
+            'relative',
+
+            // Sizes
+            {
+                'h-8 w-8': props.size == null || props.size == 'normal',
+                'w-12 h-12': props.size == 'large',
+                'w-16 h-16': props.size == 'xlarge'
+            },
+            { '-ml-4': parent.instance.$style?.name == 'avatargroup' },
+
+            // Shapes
+            {
+                'rounded-lg': props.shape == 'square',
+                'rounded-full': props.shape == 'circle'
+            },
+            { 'border-2': parent.instance.$style?.name == 'avatargroup' },
+
+            // Colors
+            'bg-surface-300 dark:bg-surface-700',
+            { 'border-white dark:border-surface-800': parent.instance.$style?.name == 'avatargroup' }
+        ]
+    }),
+    image: ({ props }) => ({
+        class: [
+            'h-full w-full',
+            {
+                'rounded-lg': props.shape == 'square',
+                'rounded-full': props.shape == 'circle'
+            }
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/avatargroup/index.js b/packages/tailwindcss-presets/src/aura/avatargroup/index.js
new file mode 100644
index 000000000..d267e0698
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/avatargroup/index.js
@@ -0,0 +1,5 @@
+export default {
+    root: {
+        class: 'flex items-center'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/badge/index.js b/packages/tailwindcss-presets/src/aura/badge/index.js
new file mode 100644
index 000000000..c9e35052c
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/badge/index.js
@@ -0,0 +1,43 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Font
+            'font-bold',
+
+            {
+                'text-xs leading-[1.5rem]': props.size == null,
+                'text-lg leading-[2.25rem]': props.size == 'large',
+                'text-2xl leading-[3rem]': props.size == 'xlarge'
+            },
+
+            // Alignment
+            'text-center inline-block',
+
+            // Size
+            'p-0 px-1',
+            {
+                'min-w-[1.5rem] h-[1.5rem]': props.size == null,
+                'min-w-[2.25rem] h-[2.25rem]': props.size == 'large',
+                'min-w-[3rem] h-[3rem]': props.size == 'xlarge'
+            },
+
+            // Shape
+            {
+                'rounded-full': props.value.length == 1,
+                'rounded-[0.71rem]': props.value.length !== 1
+            },
+
+            // Color
+            'text-primary-inverse',
+            {
+                'bg-primary': props.severity == null || props.severity == 'primary',
+                'bg-surface-500 dark:bg-surface-400': props.severity == 'secondary',
+                'bg-green-500 dark:bg-green-400': props.severity == 'success',
+                'bg-blue-500 dark:bg-blue-400': props.severity == 'info',
+                'bg-orange-500 dark:bg-orange-400': props.severity == 'warning',
+                'bg-purple-500 dark:bg-purple-400': props.severity == 'help',
+                'bg-red-500 dark:bg-red-400': props.severity == 'danger'
+            }
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/badgedirective/index.js b/packages/tailwindcss-presets/src/aura/badgedirective/index.js
new file mode 100644
index 000000000..6bf293f90
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/badgedirective/index.js
@@ -0,0 +1,43 @@
+export default {
+    root: ({ context }) => ({
+        class: [
+            // Font
+            'font-bold',
+            'text-xs leading-5',
+
+            // Alignment
+            'flex items-center justify-center',
+            'text-center',
+
+            // Position
+            'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right',
+
+            // Size
+            'm-0',
+            {
+                'p-0': context.nogutter || context.dot,
+                'px-2': !context.nogutter && !context.dot,
+                'min-w-[0.5rem] w-2 h-2': context.dot,
+                'min-w-[1.5rem] h-6': !context.dot
+            },
+
+            // Shape
+            {
+                'rounded-full': context.nogutter || context.dot,
+                'rounded-[10px]': !context.nogutter && !context.dot
+            },
+
+            // Color
+            'text-primary-inverse',
+            {
+                'bg-primary': !context.info && !context.success && !context.warning && !context.danger && !context.help && !context.secondary,
+                'bg-surface-500 dark:bg-surface-400': context.secondary,
+                'bg-green-500 dark:bg-green-400': context.success,
+                'bg-blue-500 dark:bg-blue-400': context.info,
+                'bg-orange-500 dark:bg-orange-400': context.warning,
+                'bg-purple-500 dark:bg-purple-400': context.help,
+                'bg-red-500 dark:bg-red-400': context.danger
+            }
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/blockui/index.js b/packages/tailwindcss-presets/src/aura/blockui/index.js
new file mode 100644
index 000000000..0c81a0c93
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/blockui/index.js
@@ -0,0 +1,8 @@
+export default {
+    root: {
+        class: 'relative'
+    },
+    mask: {
+        class: 'bg-black/40'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/breadcrumb/index.js b/packages/tailwindcss-presets/src/aura/breadcrumb/index.js
new file mode 100644
index 000000000..d8553c515
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/breadcrumb/index.js
@@ -0,0 +1,63 @@
+export default {
+    root: {
+        class: [
+            // Shape
+            'rounded-md',
+
+            // Spacing
+            'p-4',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+
+            // Misc
+            'overflow-x-auto'
+        ]
+    },
+    menu: {
+        class: [
+            // Flex & Alignment
+            'flex items-center flex-nowrap',
+
+            // Spacing
+            'm-0 p-0 list-none leading-none'
+        ]
+    },
+    action: {
+        class: [
+            // Flex & Alignment
+            'flex items-center',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'text-surface-600 dark:text-white/70',
+
+            // States
+            'focus-visible:outline-none focus-visible:outline-offset-0',
+            'focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+            // Transitions
+            'transition-shadow duration-200',
+
+            // Misc
+            'text-decoration-none'
+        ]
+    },
+    icon: {
+        class: 'text-surface-600 dark:text-white/70'
+    },
+    separator: {
+        class: [
+            // Flex & Alignment
+            'flex items-center',
+
+            // Spacing
+            'mx-2',
+
+            // Color
+            'text-surface-600 dark:text-white/70'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/button/index.js b/packages/tailwindcss-presets/src/aura/button/index.js
new file mode 100644
index 000000000..84eb0240b
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/button/index.js
@@ -0,0 +1,237 @@
+export default {
+    root: ({ props, context, parent }) => ({
+        class: [
+            'relative',
+
+            // Alignments
+            'items-center inline-flex text-center align-bottom justify-center',
+
+            // Sizes & Spacing
+            'leading-[normal]',
+            {
+                'px-4 py-2': props.size === null,
+                'text-sm py-1.5 px-3': props.size === 'small',
+                'text-xl py-3 px-4': props.size === 'large'
+            },
+            {
+                'w-10 px-0 py-2': props.label == null && props.icon !== null
+            },
+
+            // Shapes
+            { 'shadow-lg': props.raised },
+            { 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
+            { 'rounded-none first:rounded-l-md last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+
+            // Link Button
+            { 'text-primary-600 bg-transparent border-transparent': props.link },
+
+            // Plain Button
+            { 'text-white bg-gray-500 border border-gray-500': props.plain && !props.outlined && !props.text },
+            // Plain Text Button
+            { 'text-surface-500': props.plain && props.text },
+            // Plain Outlined Button
+            { 'text-surface-500 border border-gray-500': props.plain && props.outlined },
+
+            // Text Button
+            { 'bg-transparent border-transparent': props.text && !props.plain },
+
+            // Outlined Button
+            { 'bg-transparent border': props.outlined && !props.plain },
+
+            // --- Severity Buttons ---
+
+            // Primary Button
+            {
+                'text-primary-inverse': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
+                'bg-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
+                'border border-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain
+            },
+            // Primary Text Button
+            { 'text-primary': props.text && props.severity === null && !props.plain },
+            // Primary Outlined Button
+            { 'text-primary border border-primary': props.outlined && props.severity === null && !props.plain },
+
+            // Secondary Button
+            {
+                'text-surface-900 dark:text-white': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
+                'bg-surface-100 dark:bg-surface-700': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
+                'border border-surface-100 dark:border-surface-700': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain
+            },
+            // Secondary Text Button
+            { 'text-surface-500 dark:text-surface-300': props.text && props.severity === 'secondary' && !props.plain },
+            // Secondary Outlined Button
+            { 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/10': props.outlined && props.severity === 'secondary' && !props.plain },
+
+            // Success Button
+            {
+                'text-white dark:text-green-900': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
+                'bg-green-500 dark:bg-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
+                'border border-green-500 dark:border-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain
+            },
+            // Success Text Button
+            { 'text-green-500 dark:text-green-400': props.text && props.severity === 'success' && !props.plain },
+            // Success Outlined Button
+            { 'text-green-500 border border-green-500 hover:bg-green-300/10': props.outlined && props.severity === 'success' && !props.plain },
+
+            // Info Button
+            {
+                'text-white dark:text-surface-900': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
+                'bg-blue-500 dark:bg-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
+                'border border-blue-500 dark:border-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain
+            },
+            // Info Text Button
+            { 'text-blue-500 dark:text-blue-400': props.text && props.severity === 'info' && !props.plain },
+            // Info Outlined Button
+            { 'text-blue-500 border border-blue-500 hover:bg-blue-300/10 ': props.outlined && props.severity === 'info' && !props.plain },
+
+            // Warning Button
+            {
+                'text-white dark:text-surface-900': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
+                'bg-orange-500 dark:bg-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
+                'border border-orange-500 dark:border-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain
+            },
+            // Warning Text Button
+            { 'text-orange-500 dark:text-orange-400': props.text && props.severity === 'warning' && !props.plain },
+            // Warning Outlined Button
+            { 'text-orange-500 border border-orange-500 hover:bg-orange-300/10': props.outlined && props.severity === 'warning' && !props.plain },
+
+            // Help Button
+            {
+                'text-white dark:text-surface-900': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
+                'bg-purple-500 dark:bg-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
+                'border border-purple-500 dark:border-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain
+            },
+            // Help Text Button
+            { 'text-purple-500 dark:text-purple-400': props.text && props.severity === 'help' && !props.plain },
+            // Help Outlined Button
+            { 'text-purple-500 border border-purple-500 hover:bg-purple-300/10': props.outlined && props.severity === 'help' && !props.plain },
+
+            // Danger Button
+            {
+                'text-white dark:text-surface-900': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
+                'bg-red-500 dark:bg-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
+                'border border-red-500 dark:border-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain
+            },
+            // Danger Text Button
+            { 'text-red-500 dark:text-red-400': props.text && props.severity === 'danger' && !props.plain },
+            // Danger Outlined Button
+            { 'text-red-500 border border-red-500 hover:bg-red-300/10': props.outlined && props.severity === 'danger' && !props.plain },
+
+            // Contrast Button
+            {
+                'text-white dark:text-surface-900': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
+                'bg-surface-900 dark:bg-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
+                'border border-surface-900 dark:border-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain
+            },
+            // Contrast Text Button
+            { 'text-surface-900 dark:text-surface-0': props.text && props.severity === 'contrast' && !props.plain },
+            // Contrast Outlined Button
+            { 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': props.outlined && props.severity === 'contrast' && !props.plain },
+
+            // --- Severity Button States ---
+            'focus:outline-none focus:outline-offset-0 focus:ring-1',
+
+            // Link
+            { 'focus:ring-primary': props.link },
+
+            // Plain
+            { 'hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text },
+            // Text & Outlined Button
+            { 'hover:bg-surface-300/10': props.plain && (props.text || props.outlined) },
+
+            // Primary
+            { 'hover:bg-primary-hover hover:border-primary-hover': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-primary': props.severity === null },
+            // Text & Outlined Button
+            { 'hover:bg-primary-300/10': (props.text || props.outlined) && props.severity === null && !props.plain },
+
+            // Secondary
+            { 'hover:bg-surface-200 dark:hover:bg-surface-600 hover:border-surface-200 dark:hover:border-surface-600': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'secondary' },
+            // Text & Outlined Button
+            { 'hover:bg-surface-300/10': (props.text || props.outlined) && props.severity === 'secondary' && !props.plain },
+
+            // Success
+            { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': props.severity === 'success' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-green-500 dark:focus:ring-green-400': props.severity === 'success' },
+            // Text & Outlined Button
+            { 'hover:bg-green-300/10': (props.text || props.outlined) && props.severity === 'success' && !props.plain },
+
+            // Info
+            { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': props.severity === 'info' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-blue-500 dark:focus:ring-blue-400': props.severity === 'info' },
+            // Text & Outlined Button
+            { 'hover:bg-blue-300/10': (props.text || props.outlined) && props.severity === 'info' && !props.plain },
+
+            // Warning
+            { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': props.severity === 'warning' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-orange-500 dark:focus:ring-orange-400': props.severity === 'warning' },
+            // Text & Outlined Button
+            { 'hover:bg-orange-300/10': (props.text || props.outlined) && props.severity === 'warning' && !props.plain },
+
+            // Help
+            { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': props.severity === 'help' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-purple-500 dark:focus:ring-purple-400': props.severity === 'help' },
+            // Text & Outlined Button
+            { 'hover:bg-purple-300/10': (props.text || props.outlined) && props.severity === 'help' && !props.plain },
+
+            // Danger
+            { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': props.severity === 'danger' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-red-500 dark:focus:ring-red-400': props.severity === 'danger' },
+            // Text & Outlined Button
+            { 'hover:bg-red-300/10': (props.text || props.outlined) && props.severity === 'danger' && !props.plain },
+
+            // Contrast
+            { 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'contrast' },
+            // Text & Outlined Button
+            { 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (props.text || props.outlined) && props.severity === 'contrast' && !props.plain },
+
+            // Disabled
+            { 'opacity-60 pointer-events-none cursor-default': context.disabled },
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-pointer overflow-hidden select-none'
+        ]
+    }),
+    label: ({ props }) => ({
+        class: [
+            'duration-200',
+            'font-medium',
+            {
+                'hover:underline': props.link
+            },
+            { 'flex-1': props.label !== null, 'invisible w-0': props.label == null }
+        ]
+    }),
+    icon: ({ props }) => ({
+        class: [
+            'mx-0',
+            {
+                'mr-2': props.iconPos == 'left' && props.label != null,
+                'ml-2 order-1': props.iconPos == 'right' && props.label != null,
+                'mb-2': props.iconPos == 'top' && props.label != null,
+                'mt-2': props.iconPos == 'bottom' && props.label != null
+            }
+        ]
+    }),
+    loadingicon: ({ props }) => ({
+        class: [
+            'h-4 w-4',
+            'mx-0',
+            {
+                'mr-2': props.iconPos == 'left' && props.label != null,
+                'ml-2 order-1': props.iconPos == 'right' && props.label != null,
+                'mb-2': props.iconPos == 'top' && props.label != null,
+                'mt-2': props.iconPos == 'bottom' && props.label != null
+            },
+            'animate-spin'
+        ]
+    }),
+    badge: ({ props }) => ({
+        class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/calendar/index.js b/packages/tailwindcss-presets/src/aura/calendar/index.js
new file mode 100644
index 000000000..b8750b3e1
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/calendar/index.js
@@ -0,0 +1,663 @@
+export default {
+    root: {
+        class: [
+            // Display and Position
+            'inline-flex',
+            'max-w-full',
+            'relative'
+        ]
+    },
+    input: ({ props, parent, context }) => ({
+        class: [
+            // Display
+            'flex flex-auto',
+
+            // Font
+            'leading-none',
+
+            // Colors
+            'text-surface-600 dark:text-surface-200',
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+            { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            'invalid:focus:ring-red-200',
+            'invalid:hover:border-red-500',
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // Spacing
+            'm-0 py-2 px-3',
+
+            // Shape
+            'appearance-none',
+            { 'rounded-md': !props.showIcon || props.iconDisplay == 'input' },
+            { 'rounded-l-md  flex-1 pr-9': props.showIcon && props.iconDisplay !== 'input' },
+            { 'rounded-md flex-1 pr-9': props.showIcon && props.iconDisplay === 'input' },
+
+            // Transitions
+            'transition-colors',
+            'duration-200',
+
+            // States
+            {
+                'hover:border-surface-400 dark:hover:border-surface-600': !props.disabled && !props.invalid,
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !props.disabled,
+                'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+            },
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null }
+        ]
+    }),
+    inputicon: {
+        class: ['absolute top-[50%] -mt-2', 'text-surface-600 dark:text-surface-200', 'right-[.75rem]']
+    },
+    dropdownbutton: {
+        root: {
+            class: [
+                'relative',
+
+                // Alignments
+                'items-center inline-flex text-center align-bottom justify-center',
+
+                // Shape
+                'rounded-r-md',
+
+                // Size
+                'py-2 px-0',
+                'w-10',
+                'leading-[normal]',
+
+                // Colors
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:ring-primary-500 dark:focus:ring-primary-400'
+            ]
+        }
+    },
+    panel: ({ props }) => ({
+        class: [
+            // Display & Position
+            {
+                absolute: !props.inline,
+                'inline-block': props.inline
+            },
+
+            // Size
+            { 'w-auto p-3 ': !props.inline },
+            { 'min-w-[80vw] w-auto p-3 ': props.touchUI },
+            { 'p-3 min-w-full': props.inline },
+
+            // Shape
+            'border rounded-lg',
+            {
+                'shadow-md': !props.inline
+            },
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'border-surface-200 dark:border-surface-700',
+
+            //misc
+            { 'overflow-x-auto': props.inline }
+        ]
+    }),
+    datepickerMask: {
+        class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90']
+    },
+    header: {
+        class: [
+            //Font
+            'font-medium',
+
+            // Flexbox and Alignment
+            'flex items-center justify-between',
+
+            // Spacing
+            'p-0 pb-2',
+            'm-0',
+
+            // Shape
+            'border-b',
+            'rounded-t-md',
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-900',
+            'border-surface-200 dark:border-surface-700'
+        ]
+    },
+    previousbutton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'inline-flex items-center justify-center',
+
+            // Size
+            'w-7 h-7',
+            'p-0 m-0',
+
+            // Shape
+            'rounded-full',
+
+            // Colors
+            'text-surface-600 dark:text-white/70',
+            'border-0',
+            'bg-transparent',
+
+            // Transitions
+            'transition-colors duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-surface-500/10  ',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+
+            // Misc
+            'cursor-pointer overflow-hidden'
+        ]
+    },
+    title: {
+        class: [
+            // Text
+            'leading-7',
+            'mx-auto my-0'
+        ]
+    },
+    monthTitle: {
+        class: [
+            // Font
+            'text-base leading-[normal]',
+            'font-medium',
+
+            //shape
+            'rounded-md',
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+
+            // Transitions
+            'transition duration-200',
+
+            // Spacing
+            'p-1',
+            'm-0 mr-2',
+
+            // States
+            'hover:text-primary-500 dark:hover:text-primary-400',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    },
+    yearTitle: {
+        class: [
+            // Font
+            'text-base leading-[normal]',
+            'font-medium',
+
+            //shape
+            'rounded-md',
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+
+            // Transitions
+            'transition duration-200',
+
+            // Spacing
+            'p-1',
+            'm-0 mr-2',
+
+            // States
+            'hover:text-primary-500 dark:hover:text-primary-400',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    },
+    nextbutton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'inline-flex items-center justify-center',
+
+            // Size
+            'w-7 h-7',
+            'p-0 m-0',
+
+            // Shape
+            'rounded-full',
+
+            // Colors
+            'text-surface-600 dark:text-white/70',
+            'border-0',
+            'bg-transparent',
+
+            // Transitions
+            'transition-colors duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-surface-500/10  ',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+
+            // Misc
+            'cursor-pointer overflow-hidden'
+        ]
+    },
+    table: {
+        class: [
+            // Font
+            'text-base leading-[normal]',
+            // Size & Shape
+            'border-collapse',
+            'w-full',
+
+            // Spacing
+            'm-0 mt-2'
+        ]
+    },
+    tableheadercell: {
+        class: [
+            // Spacing
+            'p-1',
+            'font-medium'
+        ]
+    },
+    weekheader: {
+        class: ['leading-5', 'text-surface-600 dark:text-white/70', 'opacity-60 cursor-default']
+    },
+    weeknumber: {
+        class: ['text-surface-600 dark:text-white/70', 'opacity-60 cursor-default']
+    },
+    weekday: {
+        class: [
+            // Colors
+            'text-surface-500 dark:text-white/60',
+            'p-1'
+        ]
+    },
+    day: {
+        class: [
+            // Spacing
+            'p-1'
+        ]
+    },
+    weeklabelcontainer: ({ context }) => ({
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+            'mx-auto',
+
+            // Shape & Size
+            'w-8 h-8',
+            'rounded-full',
+            'border-transparent border',
+            'leading-[normal]',
+
+            // Colors
+            {
+                'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
+                'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled
+            },
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+            {
+                'hover:bg-surface-50 dark:hover:bg-surface-500/10': !context.selected && !context.disabled,
+                'hover:bg-primary-highlight-hover': context.selected && !context.disabled
+            },
+            {
+                'opacity-60 cursor-default': context.disabled,
+                'cursor-pointer': !context.disabled
+            }
+        ]
+    }),
+    daylabel: ({ context }) => ({
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+            'mx-auto',
+
+            // Shape & Size
+            'w-8 h-8',
+            'rounded-full',
+            'border-transparent border',
+            'leading-[normal]',
+
+            // Colors
+            {
+                'bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-white/70': context.date.today && !context.selected && !context.disabled,
+                'bg-transparent text-surface-600 dark:text-white/70': !context.selected && !context.disabled && !context.date.today,
+                'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled
+            },
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+            {
+                'hover:bg-surface-50 dark:hover:bg-surface-500/10': !context.selected && !context.disabled
+            },
+            {
+                'opacity-60 cursor-default': context.disabled,
+                'cursor-pointer': !context.disabled
+            }
+        ]
+    }),
+    monthpicker: {
+        class: [
+            // Spacing
+            'mt-2'
+        ]
+    },
+    month: ({ context }) => ({
+        class: [
+            // Flexbox and Alignment
+            'inline-flex items-center justify-center',
+
+            // Size
+            'w-1/3',
+            'p-1',
+
+            // Shape
+            'rounded-md',
+
+            // Colors
+            {
+                'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
+                'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled
+            },
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+            {
+                'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.selected && !context.disabled
+            },
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }),
+    yearpicker: {
+        class: [
+            // Spacing
+            'mt-2'
+        ]
+    },
+    year: ({ context }) => ({
+        class: [
+            // Flexbox and Alignment
+            'inline-flex items-center justify-center',
+
+            // Size
+            'w-1/2',
+            'p-1',
+
+            // Shape
+            'rounded-md',
+
+            // Colors
+            {
+                'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
+                'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled
+            },
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+            {
+                'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.selected && !context.disabled
+            },
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }),
+    timepicker: {
+        class: [
+            // Flexbox
+            'flex',
+            'justify-center items-center',
+
+            // Borders
+            'border-t-1',
+            'border-solid border-surface-200',
+
+            // Spacing
+            'pt-2 mt-2'
+        ]
+    },
+    separatorcontainer: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+
+            // Spacing
+            'px-2'
+        ]
+    },
+    separator: {
+        class: [
+            // Text
+            'text-xl'
+        ]
+    },
+    hourpicker: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+
+            // Spacing
+            'px-2'
+        ]
+    },
+    minutepicker: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+
+            // Spacing
+            'px-2'
+        ]
+    },
+    secondPicker: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+
+            // Spacing
+            'px-2'
+        ]
+    },
+    ampmpicker: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+
+            // Spacing
+            'px-2'
+        ]
+    },
+    incrementbutton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'inline-flex items-center justify-center',
+
+            // Size
+            'w-7 h-7',
+            'p-0 m-0',
+
+            // Shape
+            'rounded-full',
+
+            // Colors
+            'text-surface-600 dark:text-white/70',
+            'border-0',
+            'bg-transparent',
+
+            // Transitions
+            'transition-colors duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-surface-500/10  ',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+
+            // Misc
+            'cursor-pointer overflow-hidden'
+        ]
+    },
+    decrementbutton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'inline-flex items-center justify-center',
+
+            // Size
+            'w-7 h-7',
+            'p-0 m-0',
+
+            // Shape
+            'rounded-full',
+
+            // Colors
+            'text-surface-600 dark:text-white/70',
+            'border-0',
+            'bg-transparent',
+
+            // Transitions
+            'transition-colors duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-surface-500/10  ',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+
+            // Misc
+            'cursor-pointer overflow-hidden'
+        ]
+    },
+    groupcontainer: {
+        class: [
+            // Flexbox
+            'flex'
+        ]
+    },
+    group: {
+        class: [
+            // Flexbox and Sizing
+            'flex-1',
+
+            // Borders
+            'border-l',
+            'border-surface-200',
+
+            // Spacing
+            'pr-0.5',
+            'pl-0.5',
+            'pt-0',
+            'pb-0',
+
+            // Pseudo-Classes
+            'first:pl-0',
+            'first:border-l-0'
+        ]
+    },
+    buttonbar: {
+        class: [
+            // Flexbox
+            'flex justify-between items-center',
+
+            // Spacing
+            'pt-2',
+
+            // Shape
+            'border-t border-surface-200 dark:border-surface-700'
+        ]
+    },
+    todaybutton: {
+        root: {
+            class: [
+                // Flexbox and Alignment
+                'inline-flex items-center justify-center',
+
+                // Spacing
+                'px-3 py-1 text-sm leading-[normal]',
+
+                // Shape
+                'rounded-md',
+
+                // Colors
+                'bg-transparent border-transparent',
+                'text-primary',
+
+                // Transitions
+                'transition-colors duration-200 ease-in-out',
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+                'hover:bg-primary-300/20',
+
+                // Misc
+                'cursor-pointer'
+            ]
+        }
+    },
+    clearbutton: {
+        root: {
+            class: [
+                // Flexbox and Alignment
+                'inline-flex items-center justify-center',
+
+                // Spacing
+                'px-3 py-1 text-sm leading-[normal]',
+
+                // Shape
+                'rounded-md',
+
+                // Colors
+                'bg-transparent border-transparent',
+                'text-primary',
+
+                // Transitions
+                'transition-colors duration-200 ease-in-out',
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+                'hover:bg-primary-300/20',
+
+                // Misc
+                'cursor-pointer'
+            ]
+        }
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/card/index.js b/packages/tailwindcss-presets/src/aura/card/index.js
new file mode 100644
index 000000000..eef7c5756
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/card/index.js
@@ -0,0 +1,53 @@
+export default {
+    root: {
+        class: [
+            //Flex
+            'flex flex-col',
+
+            //Shape
+            'rounded-[12px]',
+            'shadow-md',
+
+            //Color
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-surface-0'
+        ]
+    },
+    body: {
+        class: [
+            //Flex
+            'flex flex-col',
+            'gap-4',
+
+            'p-6'
+        ]
+    },
+    caption: {
+        class: [
+            //Flex
+            'flex flex-col',
+            'gap-2'
+        ]
+    },
+    title: {
+        class: 'text-xl font-semibold mb-0'
+    },
+    subtitle: {
+        class: [
+            //Font
+            'font-normal',
+
+            //Spacing
+            'mb-0',
+
+            //Color
+            'text-surface-600 dark:text-surface-0/60'
+        ]
+    },
+    content: {
+        class: 'p-0'
+    },
+    footer: {
+        class: 'p-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/carousel/index.js b/packages/tailwindcss-presets/src/aura/carousel/index.js
new file mode 100644
index 000000000..9bd0c16fa
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/carousel/index.js
@@ -0,0 +1,157 @@
+export default {
+    root: {
+        class: [
+            // Flexbox
+            'flex flex-col'
+        ]
+    },
+    content: {
+        class: [
+            // Flexbox & Overflow
+            'flex flex-col overflow-auto'
+        ]
+    },
+    container: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex',
+
+            // Orientation
+            {
+                'flex-row': props.orientation !== 'vertical',
+                'flex-col': props.orientation == 'vertical'
+            }
+        ]
+    }),
+    previousbutton: {
+        class: [
+            // Flexbox & Alignment
+            'flex justify-center items-center self-center',
+
+            // Sizing & Overflow
+            'overflow-hidden w-8 h-8',
+
+            // Spacing
+            'mx-2',
+
+            // Shape
+            'rounded-full',
+
+            // Border & Background
+            'border-0 bg-transparent',
+
+            // Color
+            'text-surface-600',
+
+            // States
+            'hover:bg-surface-50 dark:hover:bg-surface-800',
+            'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+            // Transitions
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    nextbutton: {
+        class: [
+            // Flexbox & Alignment
+            'flex justify-center items-center self-center',
+
+            // Sizing & Overflow
+            'overflow-hidden w-8 h-8',
+
+            // Spacing
+            'mx-2',
+
+            // Shape
+            'rounded-full',
+
+            // Border & Background
+            'border-0 bg-transparent',
+
+            // Color
+            'text-surface-600',
+
+            // States
+            'hover:bg-surface-50 dark:hover:bg-surface-800',
+            'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+            // Transitions
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    itemscontent: {
+        class: [
+            // Overflow & Width
+            'overflow-hidden w-full'
+        ]
+    },
+    itemscontainer: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex',
+
+            // Orientation & Sizing
+            {
+                'flex-row': props.orientation !== 'vertical',
+                'flex-col h-full': props.orientation == 'vertical'
+            }
+        ]
+    }),
+    item: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex shrink-0 grow ',
+
+            // Size
+            {
+                'w-full sm:w-[50%] md:w-[33.333333333333336%]': props.orientation !== 'vertical',
+
+                'w-full h-full': props.orientation == 'vertical'
+            }
+        ]
+    }),
+    itemcloned: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex shrink-0 grow',
+            'unvisible',
+
+            // Size
+            {
+                'w-full sm:w-[50%] md:w-[33.333333333333336%]': props.orientation !== 'vertical',
+
+                'w-full h-full': props.orientation == 'vertical'
+            }
+        ]
+    }),
+    indicators: {
+        class: [
+            // Flexbox & Alignment
+            'flex flex-row justify-center flex-wrap'
+        ]
+    },
+    indicator: {
+        class: [
+            // Spacing
+            'mr-2 mb-2'
+        ]
+    },
+    indicatorbutton: ({ context }) => ({
+        class: [
+            // Sizing & Shape
+            'w-8 h-2 rounded-md',
+
+            // Transitions
+            'transition duration-200',
+
+            // Focus Styles
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+            // Color & Background
+            {
+                'bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600': !context.highlighted,
+                'bg-primary hover:bg-primary-hover': context.highlighted
+            }
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/cascadeselect/index.js b/packages/tailwindcss-presets/src/aura/cascadeselect/index.js
new file mode 100644
index 000000000..cc1f99e23
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/cascadeselect/index.js
@@ -0,0 +1,200 @@
+export default {
+    root: ({ props, state }) => ({
+        class: [
+            // Display and Position
+            'inline-flex',
+            'relative',
+
+            // Shape
+            'rounded-md',
+
+            // Color and Background
+            { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            'invalid:focus:ring-red-200',
+            'invalid:hover:border-red-500',
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // Transitions
+            'transition-all',
+            'duration-200',
+
+            // States
+            { 'hover:border-surface-400 dark:hover:border-surface-600': !props.invalid },
+            { 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
+
+            // Misc
+            'cursor-pointer',
+            'select-none',
+            { 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    label: ({ props }) => ({
+        class: [
+            // Font
+            'leading-none',
+
+            // Flex & Alignment
+            'flex flex-auto',
+
+            // Sizing and Spacing
+            'w-[1%]',
+            'py-2 px-3',
+
+            //Shape
+            'rounded-none',
+
+            // Color and Background
+            'bg-transparent',
+            'border-0',
+            { 'text-surface-800 dark:text-white/80': props.modelValue, 'text-surface-400 dark:text-surface-500': !props.modelValue },
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+            // Transitions
+            'transition',
+            'duration-200',
+
+            // States
+            'focus:outline-none focus:shadow-none',
+
+            // Misc
+            'relative',
+            'cursor-pointer',
+            'overflow-hidden overflow-ellipsis',
+            'whitespace-nowrap',
+            'appearance-none'
+        ]
+    }),
+    dropdownbutton: {
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+            'shrink-0',
+
+            // Color and Background
+            'bg-transparent',
+            'text-surface-500',
+
+            // Size
+            'w-12',
+
+            // Shape
+            'rounded-r-md'
+        ]
+    },
+    panel: {
+        class: [
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-white/80',
+
+            // Shape
+            'border border-surface-300 dark:border-surface-700',
+            'rounded-md',
+            'shadow-md'
+        ]
+    },
+    wrapper: {
+        class: [
+            // Sizing
+            'max-h-[200px]',
+
+            // Misc
+            'overflow-auto'
+        ]
+    },
+    list: {
+        class: 'p-1 list-none m-0'
+    },
+    item: ({ context }) => ({
+        class: [
+            //Shape
+            'rounded-[4px]',
+
+            // Spacing
+            'first:mt-0 mt-[2px]',
+
+            // Colors
+            {
+                'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+                'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
+                'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+            },
+
+            // Transitions
+            'transition-shadow',
+            'duration-200',
+
+            // States
+            {
+                'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
+                'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
+            },
+
+            // Disabled
+            { 'opacity-60 pointer-events-none cursor-default': context.disabled }
+        ]
+    }),
+    content: {
+        class: [
+            'relative',
+            'leading-[normal]',
+
+            // Flexbox
+            'flex',
+            'items-center',
+
+            // Spacing
+            'py-2',
+            'px-3',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+
+            // Misc
+            'no-underline',
+            'overflow-hidden',
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    groupicon: {
+        class: [
+            // Alignment
+            'ml-auto'
+        ]
+    },
+    sublist: {
+        class: [
+            // Spacing
+            'p-1',
+            'm-0',
+            'list-none',
+            'min-w-[12.5rem]',
+
+            // Shape
+            'shadow-none sm:shadow-md',
+            'rounded-md',
+            'border border-surface-200 dark:border-surface-700',
+
+            // Position
+            'static sm:absolute',
+            'z-10',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900'
+        ]
+    },
+    separator: {
+        class: 'border-t border-surface-200 dark:border-surface-600 my-1'
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/checkbox/index.js b/packages/tailwindcss-presets/src/aura/checkbox/index.js
new file mode 100644
index 000000000..e02d8c0bb
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/checkbox/index.js
@@ -0,0 +1,101 @@
+export default {
+    root: {
+        class: [
+            'relative',
+
+            // Alignment
+            'inline-flex',
+            'align-bottom',
+
+            // Size
+            'w-5',
+            'h-5',
+
+            // Misc
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    box: ({ props, context }) => ({
+        class: [
+            // Alignment
+            'flex',
+            'items-center',
+            'justify-center',
+
+            // Size
+            'w-5',
+            'h-5',
+
+            // Shape
+            'rounded',
+            'border',
+
+            // Colors
+            {
+                'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
+                'bg-surface-0  dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
+                'border-primary bg-primary': context.checked
+            },
+
+            // Invalid State
+            'invalid:focus:ring-red-200',
+            'invalid:hover:border-red-500',
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
+                'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
+                'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+            },
+
+            // Transitions
+            'transition-colors',
+            'duration-200'
+        ]
+    }),
+    input: {
+        class: [
+            'peer',
+
+            // Size
+            'w-full ',
+            'h-full',
+
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-10',
+
+            // Spacing
+            'p-0',
+            'm-0',
+
+            // Shape
+            'opacity-0',
+            'rounded',
+            'outline-none',
+            'border border-surface-300 dark:border-surface-700',
+
+            // Misc
+            'appearance-none',
+            'cursor-pointer'
+        ]
+    },
+    icon: {
+        class: [
+            // Size
+            'w-[0.875rem]',
+            'h-[0.875rem]',
+
+            // Colors
+            'text-white dark:text-surface-950',
+
+            // Transitions
+            'transition-all',
+            'duration-200'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/chip/index.js b/packages/tailwindcss-presets/src/aura/chip/index.js
new file mode 100644
index 000000000..09f175b8f
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/chip/index.js
@@ -0,0 +1,45 @@
+export default {
+    root: {
+        class: [
+            // Flexbox
+            'inline-flex items-center',
+
+            // Spacing
+            'px-3 py-1',
+
+            // Shape
+            'rounded-[1.14rem]',
+
+            // Colors
+            'text-surface-700 dark:text-white',
+            'bg-surface-100 dark:bg-surface-700'
+        ]
+    },
+    label: {
+        class: 'leading-6 m-0'
+    },
+    icon: {
+        class: 'leading-6 mr-2'
+    },
+    image: {
+        class: ['w-8 h-8 -ml-2 mr-2', 'rounded-full']
+    },
+    removeIcon: {
+        class: [
+            // Shape
+            'rounded-md leading-6',
+
+            // Spacing
+            'ml-[0.375rem]',
+
+            // Size
+            'w-4 h-4',
+
+            // Transition
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/chips/index.js b/packages/tailwindcss-presets/src/aura/chips/index.js
new file mode 100644
index 000000000..56343073e
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/chips/index.js
@@ -0,0 +1,111 @@
+export default {
+    root: ({ props, parent }) => ({
+        class: [
+            'flex',
+            { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+            {
+                'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+            }
+        ]
+    }),
+    container: ({ state, props, parent }) => ({
+        class: [
+            // Font
+            'leading-none',
+
+            // Flex
+            'flex items-center flex-wrap',
+            'gap-2',
+
+            // Spacing
+            'm-0 list-none',
+            'p-1',
+
+            // Size
+            'w-full',
+
+            // Shape
+            'appearance-none rounded-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+            { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+            'border',
+            { 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+            // Invalid State
+            'invalid:focus:ring-red-200',
+            'invalid:hover:border-red-500',
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            { 'hover:border-surface-400 dark:hover:border-surface-700': !props.invalid },
+            { 'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },
+
+            // Transition
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-text overflow-hidden'
+        ]
+    }),
+    inputtoken: {
+        class: ['py-1 px-0 ml-2', 'inline-flex flex-auto']
+    },
+    input: {
+        class: [
+            // Font
+            'text-base leading-[normal]',
+
+            // Size
+            'w-full',
+
+            // Spacing
+            'p-0 m-0',
+
+            // Shape
+            'appearance-none rounded-none',
+            'border-0 outline-none',
+            'shadow-none',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-transparent'
+        ]
+    },
+    token: {
+        class: [
+            // Flex
+            'inline-flex items-center',
+
+            // Spacings
+            'py-1 px-3 m-0',
+
+            // Shape
+            'rounded',
+
+            // Colors
+            'bg-surface-100 dark:bg-surface-700',
+            'text-surface-700 dark:text-white',
+
+            // Misc
+            'cursor-default'
+        ]
+    },
+    removeTokenIcon: {
+        class: [
+            // Spacing
+            'ml-[0.375rem]',
+
+            // Size
+            'w-4 h-4',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/colorpicker/index.js b/packages/tailwindcss-presets/src/aura/colorpicker/index.js
new file mode 100644
index 000000000..1ca55c5dd
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/colorpicker/index.js
@@ -0,0 +1,126 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Display
+            'inline-block',
+
+            // Misc
+            { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    input: {
+        class: [
+            // Font
+            'text-base leading-none',
+
+            // Spacing
+            'm-0',
+            'p-0',
+
+            //Size
+            'w-6 h-6',
+
+            // Shape
+            'rounded-md',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'border border-surface-300 dark:border-surface-700',
+
+            // States
+            'hover:border-surface-400 dark:hover:border-surface-600',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+
+            // Transition
+            'transition-colors duration-200',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    },
+    panel: ({ props }) => ({
+        class: [
+            // Position & Size
+            {
+                'relative h-[166px] w-[193px]': props.inline,
+                'absolute h-[166px] w-[193px]': !props.inline
+            },
+
+            // Shape
+            'shadow-md border',
+
+            // Colors
+            'bg-surface-800 dark:bg-surface-900 border-surface-600 dark:border-surface-700'
+        ]
+    }),
+    selector: {
+        class: [
+            // Position
+            'absolute top-[8px] left-[8px]',
+
+            // Size
+            'h-[150px] w-[150px]'
+        ]
+    },
+    color: {
+        class: [
+            // Size
+            'h-[150px] w-[150px]'
+        ],
+        style: 'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)'
+    },
+    colorhandle: {
+        class: [
+            'absolute',
+
+            // Shape
+            'rounded-full border border-solid',
+
+            // Size
+            'h-[10px] w-[10px]',
+
+            // Spacing
+            '-ml-[5px] -mt-[5px]',
+
+            // Colors
+            'border-white',
+
+            // Misc
+            'cursor-pointer opacity-85'
+        ]
+    },
+    hue: {
+        class: [
+            // Position
+            'absolute top-[8px] left-[167px]',
+
+            // Size
+            'h-[150px] w-[17px]',
+
+            // Opacity
+            'opacity-85'
+        ],
+        style: 'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)'
+    },
+    huehandle: {
+        class: [
+            // Position
+            'absolute left-0 -ml-[2px] -mt-[5px]',
+
+            // Size
+            'h-[10px] w-[21px]',
+
+            // Shape
+            'border-solid border-2',
+
+            // Misc
+            'cursor-pointer opacity-85'
+        ]
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/confirmpopup/index.js b/packages/tailwindcss-presets/src/aura/confirmpopup/index.js
new file mode 100644
index 000000000..4b9897ab0
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/confirmpopup/index.js
@@ -0,0 +1,106 @@
+export default {
+    root: {
+        class: [
+            // Shape
+            'rounded-lg',
+            'shadow-lg',
+            'border-0',
+
+            // Positioning
+            'z-40 transform origin-center',
+            'mt-3 absolute left-0 top-0',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-surface-0/80',
+
+            // Before: Arrow
+            'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-[calc(var(--overlayArrowLeft,0)+1.25rem)] before:border-x-[10px] before:border-b-[10px] before:border-t-0 before:border-b-surface-200 dark:before:border-b-surface-700',
+            'after:absolute after:w-0 after:-top-[0.54rem] after:h-0 after:border-transparent after:border-solid after:ml-[calc(var(--overlayArrowLeft,0)+1.3rem)] after:border-x-[9px] after:border-b-[8px] after:border-t-0 after:border-b-surface-0 dark:after:border-b-surface-900'
+        ]
+    },
+    content: {
+        class: ['p-4 items-center flex', 'rounded-t-lg', 'border-x border-t last:border-b border-surface-200 dark:border-surface-700']
+    },
+    icon: {
+        class: 'text-2xl mr-4'
+    },
+    footer: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-end',
+            'shrink-0',
+            'text-right',
+            'gap-2',
+
+            // Spacing
+            'px-4',
+            'pb-4',
+
+            // Shape
+            'border-t-0',
+            'rounded-b-lg',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-surface-0/80',
+            'border-x border-b border-surface-200 dark:border-surface-700'
+        ]
+    },
+    rejectbutton: {
+        root: {
+            class: [
+                'relative',
+
+                // Alignments
+                'items-center inline-flex text-center align-bottom justify-center',
+
+                // Sizes & Spacing
+                'px-4 py-2 leading-none',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary',
+
+                // States
+                'hover:bg-primary-300/20',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary-500 dark:focus:ring-primary-400'
+            ]
+        }
+    },
+    acceptbutton: {
+        root: {
+            class: [
+                'relative',
+
+                // Alignments
+                'items-center inline-flex text-center align-bottom justify-center',
+
+                // Sizes & Spacing
+                'px-4 py-2 leading-none',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // States
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary-500 dark:focus:ring-primary-400'
+            ]
+        }
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/contextmenu/index.js b/packages/tailwindcss-presets/src/aura/contextmenu/index.js
new file mode 100644
index 000000000..3dba7aa33
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/contextmenu/index.js
@@ -0,0 +1,125 @@
+export default {
+    root: {
+        class: [
+            // Sizing and Shape
+            'min-w-[12.5rem]',
+            'rounded-md',
+            'shadow-md',
+
+            // Spacing
+            'p-1',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-white/80',
+            'border border-surface-200 dark:border-surface-700'
+        ]
+    },
+    menu: {
+        class: [
+            // Spacings and Shape
+            'list-none',
+            'm-0',
+            'p-0',
+            'outline-none'
+        ]
+    },
+    menuitem: {
+        class: 'relative my-[2px] [&:first-child]:mt-0'
+    },
+    content: ({ context }) => ({
+        class: [
+            //Shape
+            'rounded-[4px]',
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+            {
+                'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+                'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
+                'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+            },
+
+            // Transitions
+            'transition-shadow',
+            'duration-200',
+
+            // States
+            {
+                'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
+                'hover:bg-bg-primary-highlight-hover text-primary-highlight-inverse': context.active
+            },
+
+            // Disabled
+            { 'opacity-60 pointer-events-none cursor-default': context.disabled }
+        ]
+    }),
+    action: {
+        class: [
+            'relative',
+            // Flexbox
+
+            'flex',
+            'items-center',
+
+            // Spacing
+            'py-2',
+            'px-3',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+
+            // Misc
+            'no-underline',
+            'overflow-hidden',
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    icon: {
+        class: [
+            // Spacing
+            'mr-2',
+
+            // Color
+            'text-surface-600 dark:text-white/70'
+        ]
+    },
+    label: {
+        class: ['leading-none']
+    },
+    submenu: ({ props }) => ({
+        class: [
+            // Size
+            'w-full sm:w-48',
+
+            // Spacing
+            'p-1',
+            'm-0',
+            'list-none',
+
+            // Shape
+            'shadow-md',
+            'rounded-md',
+            'dark:border dark:border-surface-700',
+
+            // Position
+            'static sm:absolute',
+            'z-10',
+            { 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900'
+        ]
+    }),
+    submenuicon: {
+        class: ['ml-auto']
+    },
+    separator: {
+        class: 'border-t border-surface-200 dark:border-surface-600 my-1'
+    },
+    transition: {
+        enterFromClass: 'opacity-0',
+        enterActiveClass: 'transition-opacity duration-250'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/datatable/index.js b/packages/tailwindcss-presets/src/aura/datatable/index.js
new file mode 100644
index 000000000..3c115af62
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/datatable/index.js
@@ -0,0 +1,1155 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            { 'flex flex-col': props.scrollable && props.scrollHeight === 'flex' },
+
+            // Size
+            { 'h-full': props.scrollable && props.scrollHeight === 'flex' }
+        ]
+    }),
+    loadingoverlay: {
+        class: [
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-20',
+
+            // Flex & Alignment
+            'flex items-center justify-center',
+
+            // Size
+            'w-full h-full',
+
+            // Color
+            'bg-surface-100/40 dark:bg-surface-900/40',
+
+            // Transition
+            'transition duration-200'
+        ]
+    },
+    loadingicon: {
+        class: 'w-8 h-8 animate-spin'
+    },
+    wrapper: ({ props }) => ({
+        class: [
+            { relative: props.scrollable, 'flex flex-col grow': props.scrollable && props.scrollHeight === 'flex' },
+
+            // Size
+            { 'h-full': props.scrollable && props.scrollHeight === 'flex' }
+        ]
+    }),
+    header: ({ props }) => ({
+        class: [
+            'font-bold',
+
+            // Shape
+            props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0',
+
+            // Spacing
+            'p-4',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            'border-surface-200 dark:border-surface-700',
+            'text-surface-700 dark:text-white/80'
+        ]
+    }),
+    table: {
+        class: 'w-full border-spacing-0 border-separate'
+    },
+    thead: ({ context }) => ({
+        class: [
+            {
+                'bg-surface-0 dark:bg-surface-900 top-0 z-40 sticky': context.scrollable
+            }
+        ]
+    }),
+    tbody: ({ instance, context }) => ({
+        class: [
+            {
+                'sticky z-20': instance.frozenRow && context.scrollable
+            },
+            'bg-surface-0 dark:bg-surface-900'
+        ]
+    }),
+    tfoot: ({ context }) => ({
+        class: [
+            {
+                'bg-surface-0 bottom-0 z-0': context.scrollable
+            }
+        ]
+    }),
+    footer: {
+        class: [
+            'font-bold',
+
+            // Shape
+            'border-t-0 border-b border-x-0',
+
+            // Spacing
+            'p-4',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            'border-surface-200 dark:border-surface-700',
+            'text-surface-700 dark:text-white/80'
+        ]
+    },
+    column: {
+        headercell: ({ context, props }) => ({
+            class: [
+                'font-semibold',
+                'leading-[normal]',
+
+                // Position
+                { 'sticky z-20 border-b': props.frozen || props.frozen === '' },
+
+                { relative: context.resizable },
+
+                // Alignment
+                'text-left',
+
+                // Shape
+                { 'first:border-l border-y border-r': context?.showGridlines },
+                'border-0 border-b border-solid',
+
+                // Spacing
+                context?.size === 'small' ? 'py-[0.375rem] px-2' : context?.size === 'large' ? 'py-[0.9375rem] px-5' : 'py-3 px-4',
+
+                // Color
+                (props.sortable === '' || props.sortable) && context.sorted ? 'bg-primary-highlight text-primary-highlight-inverse' : 'bg-surface-0 text-surface-700 dark:text-white/80 dark:bg-surface-900',
+                'border-surface-200 dark:border-surface-700 ',
+
+                // States
+                { 'hover:bg-surface-100 dark:hover:bg-surface-800/50': (props.sortable === '' || props.sortable) && !context?.sorted },
+                'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+                // Transition
+                { 'transition duration-200': props.sortable === '' || props.sortable },
+
+                // Misc
+                { 'cursor-pointer': props.sortable === '' || props.sortable },
+                {
+                    'overflow-hidden space-nowrap border-y bg-clip-padding': context.resizable // Resizable
+                }
+            ]
+        }),
+        headercontent: {
+            class: 'flex items-center'
+        },
+        sort: ({ context }) => ({
+            class: [context.sorted ? 'text-primary-500' : 'text-surface-700', context.sorted ? 'dark:text-primary-400' : 'dark:text-white/80']
+        }),
+        bodycell: ({ props, context, state, parent }) => ({
+            class: [
+                // Font
+                'leading-[normal]',
+
+                //Position
+                { 'sticky box-border border-b': parent.instance.frozenRow },
+                { 'sticky box-border border-b z-20': props.frozen || props.frozen === '' },
+
+                // Alignment
+                'text-left',
+
+                // Shape
+                'border-0 border-b border-solid',
+                { 'first:border-l border-r border-b': context?.showGridlines },
+                { 'bg-surface-0 dark:bg-surface-900': parent.instance.frozenRow || props.frozen || props.frozen === '' },
+
+                // Spacing
+                { 'py-[0.375rem] px-2': context?.size === 'small' && !state['d_editing'] },
+                { 'py-[0.9375rem] px-5': context?.size === 'large' && !state['d_editing'] },
+                { 'py-3 px-4': context?.size !== 'large' && context?.size !== 'small' && !state['d_editing'] },
+                { 'py-[0.6rem] px-2': state['d_editing'] },
+
+                // Color
+                'border-surface-200 dark:border-surface-700'
+            ]
+        }),
+        footercell: ({ context }) => ({
+            class: [
+                // Font
+                'font-bold',
+
+                // Alignment
+                'text-left',
+
+                // Shape
+                'border-0 border-b border-solid',
+                { 'border-x border-y': context?.showGridlines },
+
+                // Spacing
+                context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4',
+
+                // Color
+                'border-surface-200 dark:border-surface-700',
+                'text-surface-700 dark:text-white/80',
+                'bg-surface-0 dark:bg-surface-900'
+            ]
+        }),
+        sorticon: ({ context }) => ({
+            class: ['ml-2', context.sorted ? 'text-primary-highlight-inverse' : 'text-surface-700 dark:text-white/70']
+        }),
+        sortbadge: {
+            class: [
+                // Flex & Alignment
+                'flex items-center justify-center align-middle',
+
+                // Shape
+                'rounded-full',
+
+                // Size
+                'w-[1.143rem] leading-[1.143rem]',
+
+                // Spacing
+                'ml-2',
+
+                // Color
+                'text-primary-highlight-inverse bg-primary-highlight'
+            ]
+        },
+        columnfilter: {
+            class: 'inline-flex items-center ml-auto font-normal'
+        },
+        filteroverlay: {
+            class: [
+                // Position
+                'absolute top-0 left-0',
+
+                // Shape
+                'border-0 dark:border',
+                'rounded-md',
+                'shadow-md',
+
+                // Size
+                'min-w-[12.5rem]',
+
+                // Color
+                'bg-surface-0 dark:bg-surface-900',
+                'text-surface-800 dark:text-white/80',
+                'dark:border-surface-700'
+            ]
+        },
+        filtermatchmodedropdown: {
+            root: ({ state }) => ({
+                class: [
+                    // Display and Position
+                    'flex',
+                    'relative',
+
+                    // Spacing
+                    'mb-2 last:mb-0',
+
+                    // Shape
+                    'w-full',
+                    'rounded-md',
+
+                    // Color and Background
+                    'bg-surface-0 dark:bg-surface-900',
+                    'border border-surface-300 dark:border-surface-700',
+                    'text-surface-800 dark:text-white/80',
+                    'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+                    // Transitions
+                    'transition-all',
+                    'duration-200',
+
+                    // States
+                    'hover:border-primary',
+                    { 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
+
+                    // Misc
+                    'cursor-pointer',
+                    'select-none'
+                ]
+            })
+        },
+        filterrowitems: {
+            class: 'm-0 p-0 py-3 list-none'
+        },
+        filterrowitem: ({ context }) => ({
+            class: [
+                // Font
+                'font-normal',
+                'leading-none',
+
+                // Position
+                'relative',
+
+                // Shape
+                'border-0',
+                'rounded-none',
+
+                // Spacing
+                'm-0',
+                'py-3 px-5',
+
+                // Color
+                { 'text-surface-700 dark:text-white/80': !context?.highlighted },
+                { 'bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-white/80': !context?.highlighted },
+                { 'bg-primary-highlight text-primary-highlight-inverse': context?.highlighted },
+
+                //States
+                { 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context?.highlighted },
+                { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': !context?.highlighted },
+                'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+                // Transitions
+                'transition-shadow',
+                'duration-200',
+
+                // Misc
+                'cursor-pointer',
+                'overflow-hidden',
+                'whitespace-nowrap'
+            ]
+        }),
+        filteroperator: {
+            class: [
+                // Shape
+                'rounded-t-md',
+
+                // Color
+                'text-surface-700 dark:text-white/80',
+                'bg-surface-0 dark:bg-surface-700'
+            ]
+        },
+        filteroperatordropdown: {
+            root: ({ state }) => ({
+                class: [
+                    // Display and Position
+                    'inline-flex',
+                    'relative',
+
+                    // Shape
+                    'w-full',
+                    'rounded-md',
+
+                    // Color and Background
+                    'bg-surface-0 dark:bg-surface-950',
+                    'border border-surface-300 dark:border-surface-700',
+
+                    // Transitions
+                    'transition-all',
+                    'duration-200',
+
+                    // States
+                    'hover:border-surface-400 dark:hover:border-surface-600',
+                    { 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400 z-10': state.focused },
+
+                    // Misc
+                    'cursor-pointer',
+                    'select-none'
+                ]
+            }),
+            input: ({ props }) => ({
+                class: [
+                    //Font
+                    'leading-[normal]',
+
+                    // Display
+                    'block',
+                    'flex-auto',
+
+                    // Color and Background
+                    'bg-transparent',
+                    'border-0',
+                    { 'text-surface-800 dark:text-white/80': props.modelValue, 'text-surface-400 dark:text-surface-500': !props.modelValue },
+                    'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+                    // Sizing and Spacing
+                    'w-[1%]',
+                    'py-2 px-3',
+
+                    //Shape
+                    'rounded-none',
+
+                    // Transitions
+                    'transition',
+                    'duration-200',
+
+                    // States
+                    'focus:outline-none focus:shadow-none',
+
+                    // Misc
+                    'relative',
+                    'cursor-pointer',
+                    'overflow-hidden overflow-ellipsis',
+                    'whitespace-nowrap',
+                    'appearance-none'
+                ]
+            }),
+            trigger: {
+                class: [
+                    // Flexbox
+                    'flex items-center justify-center',
+                    'shrink-0',
+
+                    // Color and Background
+                    'bg-transparent',
+                    'text-surface-500',
+
+                    // Size
+                    'w-12',
+
+                    // Shape
+                    'rounded-tr-md',
+                    'rounded-br-md'
+                ]
+            },
+            panel: {
+                class: [
+                    // Colors
+                    'bg-surface-0 dark:bg-surface-900',
+                    'text-surface-700 dark:text-white/80',
+
+                    // Shape
+                    'border border-surface-300 dark:border-surface-700',
+                    'rounded-md',
+                    'shadow-md'
+                ]
+            },
+            item: ({ context }) => ({
+                class: [
+                    // Font
+                    'font-normal',
+                    'leading-none',
+
+                    // Position
+                    'relative',
+
+                    // Shape
+                    'border-0',
+                    'rounded-none',
+
+                    // Spacing
+                    'm-0 px-3 py-2',
+                    'first:mt-0 mt-[2px]',
+
+                    // Color
+                    {
+                        'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
+                        'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
+                        'text-surface-700 dark:text-white/80': context.focused && !context.selected,
+
+                        'text-primary-highlight-inverse': context.selected,
+                        'bg-primary-highlight': context.selected
+                    },
+
+                    //States
+                    { 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
+                    { 'hover:bg-primary-highlight-hover': context.selected },
+                    { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
+
+                    // Transitions
+                    'transition-shadow',
+                    'duration-200',
+
+                    // Misc
+                    'cursor-pointer',
+                    'overflow-hidden',
+                    'whitespace-nowrap'
+                ]
+            })
+        },
+        filteraddrulebutton: {
+            root: {
+                class: [
+                    'relative',
+
+                    // Alignments
+                    'items-center inline-flex text-center align-bottom justify-center',
+
+                    // Sizes & Spacing
+                    'text-sm py-[0.4375rem] px-[0.875rem] w-full',
+
+                    // Shape
+                    'rounded-md',
+
+                    'bg-transparent border-transparent',
+                    'text-primary',
+                    'hover:bg-primary-300/20',
+
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+
+                    // Misc
+                    'cursor-pointer overflow-hidden select-none'
+                ]
+            },
+            label: {
+                class: 'flex-auto grow-0'
+            },
+            icon: {
+                class: 'mr-2'
+            }
+        },
+        filterremovebutton: {
+            root: {
+                class: [
+                    'relative',
+
+                    // Alignments
+                    'items-center inline-flex text-center align-bottom justify-center',
+
+                    // Sizes & Spacing
+                    'text-sm py-[0.4375rem] px-[0.875rem] w-full mt-2',
+
+                    // Shape
+                    'rounded-md',
+
+                    'bg-transparent border-transparent',
+                    'text-red-500 dark:text-red-400',
+                    'hover:bg-red-300/20',
+
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+
+                    // Misc
+                    'cursor-pointer overflow-hidden select-none'
+                ]
+            },
+            label: {
+                class: 'flex-auto grow-0'
+            },
+            icon: {
+                class: 'mr-2'
+            }
+        },
+        filterbuttonbar: {
+            class: [
+                // Flex & Alignment
+                'flex items-center justify-between',
+
+                // Space
+                'p-0'
+            ]
+        },
+        filterclearbutton: {
+            root: {
+                class: [
+                    'relative',
+
+                    // Alignments
+                    'items-center inline-flex text-center align-bottom justify-center',
+
+                    // Sizes & Spacing
+                    'text-sm py-[0.4375rem] px-[0.875rem]',
+
+                    // Shape
+                    'rounded-md',
+
+                    'text-primary-500 border border-primary',
+                    'hover:bg-primary-300/20',
+
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+
+                    // Misc
+                    'cursor-pointer overflow-hidden select-none'
+                ]
+            }
+        },
+        filterapplybutton: {
+            root: {
+                class: [
+                    'relative',
+
+                    // Alignments
+                    'items-center inline-flex text-center align-bottom justify-center',
+
+                    // Sizes & Spacing
+                    'text-sm py-[0.4375rem] px-[0.875rem]',
+
+                    // Shape
+                    'rounded-md',
+
+                    'text-primary-inverse',
+                    'bg-primary',
+                    'hover:bg-primary-hover hover:border-primary-hover',
+
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+
+                    // Misc
+                    'cursor-pointer overflow-hidden select-none'
+                ]
+            }
+        },
+        filtermenubutton: ({ context }) => ({
+            class: [
+                'relative',
+                // Flex & Alignment
+                'inline-flex items-center justify-center',
+
+                // Size
+                'w-8 h-8',
+
+                // Spacing
+                'ml-2',
+
+                // Shape
+                'rounded-full',
+
+                // Color
+                { 'bg-primary-highlight text-primary-highliht-inverse': context.active },
+                'dark:text-white/70 dark:hover:text-white/80 dark:bg-surface-900',
+
+                // States
+                'hover:text-surface-700 hover:bg-surface-300/20',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+                // Transition
+                'transition duration-200',
+
+                // Misc
+                'cursor-pointer no-underline overflow-hidden'
+            ]
+        }),
+        headerfilterclearbutton: ({ context }) => ({
+            class: [
+                'relative',
+
+                // Flex & Alignment
+                'inline-flex items-center justify-center',
+                'text-left',
+
+                // Shape
+                'border-none',
+
+                // Spacing
+                'm-0 p-0 ml-2',
+
+                // Color
+                'bg-transparent',
+
+                // Misc
+                'cursor-pointer no-underline overflow-hidden select-none',
+                {
+                    invisible: !context.hidden
+                }
+            ]
+        }),
+        rowtoggler: {
+            class: [
+                'relative',
+
+                // Flex & Alignment
+                'inline-flex items-center justify-center',
+                'text-left',
+
+                // Spacing
+                'm-0 p-0',
+
+                // Size
+                'w-8 h-8',
+
+                // Shape
+                'border-0 rounded-full',
+
+                // Color
+                'text-surface-500 dark:text-white/70',
+                'bg-transparent',
+                'focus-visible:outline-none focus-visible:outline-offset-0',
+                'focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+                // Transition
+                'transition duration-200',
+
+                // Misc
+                'overflow-hidden',
+                'cursor-pointer select-none'
+            ]
+        },
+        columnresizer: {
+            class: [
+                'block',
+
+                // Position
+                'absolute top-0 right-0',
+
+                // Sizing
+                'w-2 h-full',
+
+                // Spacing
+                'm-0 p-0',
+
+                // Color
+                'border border-transparent',
+
+                // Misc
+                'cursor-col-resize'
+            ]
+        },
+        rowreordericon: {
+            class: 'cursor-move'
+        },
+        roweditorinitbutton: {
+            class: [
+                'relative',
+
+                // Flex & Alignment
+                'inline-flex items-center justify-center',
+                'text-left',
+
+                // Size
+                'w-7 h-7',
+
+                // Shape
+                'border-0 rounded-full',
+
+                // Color
+                'text-surface-700 dark:text-white/70',
+                'border-transparent',
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+                'hover:text-surface-700 hover:bg-surface-50 dark:hover:bg-surface-800/50',
+
+                // Transition
+                'transition duration-200',
+
+                // Misc
+                'overflow-hidden',
+                'cursor-pointer select-none'
+            ]
+        },
+        roweditorsavebutton: {
+            class: [
+                'relative',
+
+                // Flex & Alignment
+                'inline-flex items-center justify-center',
+                'text-left',
+
+                // Size
+                'w-8 h-8',
+
+                // Shape
+                'border-0 rounded-full',
+
+                // Color
+                'text-surface-700 dark:text-white/70',
+                'border-transparent',
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+                'hover:text-surface-700 hover:bg-surface-300/20',
+
+                // Transition
+                'transition duration-200',
+
+                // Misc
+                'overflow-hidden',
+                'cursor-pointer select-none'
+            ]
+        },
+        roweditorcancelbutton: {
+            class: [
+                'relative',
+
+                // Flex & Alignment
+                'inline-flex items-center justify-center',
+                'text-left',
+
+                // Size
+                'w-8 h-8',
+
+                // Shape
+                'border-0 rounded-full',
+
+                // Color
+                'text-surface-700 dark:text-white/70',
+                'border-transparent',
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+                'hover:text-surface-700 hover:bg-surface-300/20',
+
+                // Transition
+                'transition duration-200',
+
+                // Misc
+                'overflow-hidden',
+                'cursor-pointer select-none'
+            ]
+        },
+        rowRadiobutton: {
+            root: {
+                class: [
+                    'relative',
+
+                    // Flexbox & Alignment
+                    'inline-flex',
+                    'align-bottom',
+
+                    // Size
+                    'w-5 h-5',
+
+                    // Misc
+                    'cursor-pointer',
+                    'select-none'
+                ]
+            },
+            box: ({ props }) => ({
+                class: [
+                    // Flexbox
+                    'flex justify-center items-center',
+
+                    // Size
+                    'w-5 h-5',
+
+                    // Shape
+                    'border',
+                    'rounded-full',
+
+                    // Transition
+                    'transition duration-200 ease-in-out',
+
+                    // Colors
+                    { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+
+                    {
+                        'text-surface-700 dark:text-white/80': props.value !== props.modelValue && props.value !== undefined,
+                        'border-surface-300 dark:border-surface-700': props.value !== props.modelValue && props.value !== undefined && !props.invalid,
+                        'border-primary': props.value == props.modelValue && props.value !== undefined && !props.disabled
+                    },
+                    {
+                        'peer-hover:border-surface-400 dark:peer-hover:border-surface-400': !props.disabled && !props.invalid && props.value !== props.modelValue,
+                        'peer-hover:border-primary-hover': !props.disabled && props.value == props.modelValue && props.value !== undefined,
+                        'peer-hover:[&>*:first-child]:bg-primary-600 dark:peer-hover:[&>*:first-child]:bg-primary-300': !props.disabled && props.value == props.modelValue && props.value !== undefined,
+                        'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
+                        'bg-surface-200 [&>*:first-child]:bg-surface-600 dark:bg-surface-700 dark:[&>*:first-child]:bg-surface-400 border-surface-300 dark:border-surface-700 select-none pointer-events-none cursor-default': props.disabled
+                    }
+                ]
+            }),
+            input: {
+                class: [
+                    'peer',
+
+                    // Size
+                    'w-full ',
+                    'h-full',
+
+                    // Position
+                    'absolute',
+                    'top-0 left-0',
+                    'z-10',
+
+                    // Spacing
+                    'p-0',
+                    'm-0',
+
+                    // Shape
+                    'opacity-0',
+                    'rounded-md',
+                    'outline-none',
+                    'border-1 border-surface-200 dark:border-surface-700',
+
+                    // Misc
+                    'appearance-none',
+                    'cursor-pointer'
+                ]
+            },
+            icon: ({ props }) => ({
+                class: [
+                    'block',
+
+                    // Shape
+                    'rounded-full',
+
+                    // Size
+                    'w-3 h-3',
+
+                    // Conditions
+                    {
+                        'bg-surface-0 dark:bg-surface-900 backface-hidden invisible scale-[0.1]': !props.modelValue,
+                        'bg-primary transform visible translate-z-0 scale-[1.1]': props.modelValue
+                    },
+
+                    // Transition
+                    'transition duration-200'
+                ]
+            })
+        },
+        headercheckbox: {
+            root: {
+                class: [
+                    'relative',
+
+                    // Alignment
+                    'inline-flex',
+                    'align-bottom',
+
+                    // Size
+                    'w-5',
+                    'h-5',
+
+                    // Misc
+                    'cursor-pointer',
+                    'select-none'
+                ]
+            },
+            box: ({ props, context }) => ({
+                class: [
+                    // Alignment
+                    'flex',
+                    'items-center',
+                    'justify-center',
+
+                    // Size
+                    'w-5',
+                    'h-5',
+
+                    // Shape
+                    'rounded',
+                    'border',
+
+                    // Colors
+                    {
+                        'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
+                        'bg-surface-0 dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
+                        'border-primary bg-primary': context.checked
+                    },
+
+                    // Invalid State
+                    'invalid:focus:ring-red-200',
+                    'invalid:hover:border-red-500',
+                    { 'border-red-500 dark:border-red-400': props.invalid },
+
+                    // States
+                    {
+                        'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
+                        'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                        'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
+                        'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+                    },
+
+                    // Transitions
+                    'transition-colors',
+                    'duration-200'
+                ]
+            }),
+            input: {
+                class: [
+                    'peer',
+
+                    // Size
+                    'w-full ',
+                    'h-full',
+
+                    // Position
+                    'absolute',
+                    'top-0 left-0',
+                    'z-10',
+
+                    // Spacing
+                    'p-0',
+                    'm-0',
+
+                    // Shape
+                    'opacity-0',
+                    'rounded',
+                    'outline-none',
+                    'border border-surface-300 dark:border-surface-700',
+
+                    // Misc
+                    'appearance-none',
+                    'cursor-pointer'
+                ]
+            },
+            icon: {
+                class: [
+                    // Size
+                    'w-[0.875rem]',
+                    'h-[0.875rem]',
+
+                    // Colors
+                    'text-white dark:text-surface-950',
+
+                    // Transitions
+                    'transition-all',
+                    'duration-200'
+                ]
+            }
+        },
+        rowCheckbox: {
+            root: {
+                class: [
+                    'relative',
+
+                    // Alignment
+                    'inline-flex',
+                    'align-bottom',
+
+                    // Size
+                    'w-5',
+                    'h-5',
+
+                    // Misc
+                    'cursor-pointer',
+                    'select-none'
+                ]
+            },
+            box: ({ props, context }) => ({
+                class: [
+                    // Alignment
+                    'flex',
+                    'items-center',
+                    'justify-center',
+
+                    // Size
+                    'w-5',
+                    'h-5',
+
+                    // Shape
+                    'rounded',
+                    'border',
+
+                    // Colors
+                    {
+                        'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
+                        'bg-surface-0 dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
+                        'border-primary bg-primary': context.checked
+                    },
+
+                    // Invalid State
+                    'invalid:focus:ring-red-200',
+                    'invalid:hover:border-red-500',
+                    { 'border-red-500 dark:border-red-400': props.invalid },
+
+                    // States
+                    {
+                        'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
+                        'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                        'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
+                        'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+                    },
+
+                    // Transitions
+                    'transition-colors',
+                    'duration-200'
+                ]
+            }),
+            input: {
+                class: [
+                    'peer',
+
+                    // Size
+                    'w-full ',
+                    'h-full',
+
+                    // Position
+                    'absolute',
+                    'top-0 left-0',
+                    'z-10',
+
+                    // Spacing
+                    'p-0',
+                    'm-0',
+
+                    // Shape
+                    'opacity-0',
+                    'rounded',
+                    'outline-none',
+                    'border border-surface-300 dark:border-surface-700',
+
+                    // Misc
+                    'appearance-none',
+                    'cursor-pointer'
+                ]
+            },
+            icon: {
+                class: [
+                    // Size
+                    'w-[0.875rem]',
+                    'h-[0.875rem]',
+
+                    // Colors
+                    'text-white dark:text-surface-950',
+
+                    // Transitions
+                    'transition-all',
+                    'duration-200'
+                ]
+            }
+        },
+        transition: {
+            class: 'p-3 flex flex-col gap-2',
+            enterFromClass: 'opacity-0 scale-y-[0.8]',
+            enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+            leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+            leaveToClass: 'opacity-0'
+        }
+    },
+    bodyrow: ({ context, props }) => ({
+        class: [
+            // Color
+            'dark:text-white/80',
+            { 'bg-primary-highlight text-primary-highlight-inverse': context.selected },
+            { 'bg-surface-0 text-surface-600 dark:bg-surface-900': !context.selected },
+            { 'font-bold bg-surface-0 dark:bg-surface-900 z-20': props.frozenRow },
+            { 'odd:bg-surface-0 odd:text-surface-600 dark:odd:bg-surface-900 even:bg-surface-50 even:text-surface-600 dark:even:bg-surface-800/50': context.stripedRows },
+
+            // State
+            { 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 ring-inset dark:focus:ring-primary-400': context.selectable },
+            { 'hover:bg-surface-300/20 dark:hover:bg-surface-800/50 hover:text-surface-600': props.selectionMode && !context.selected },
+
+            // Transition
+            { 'transition duration-200': (props.selectionMode && !context.selected) || props.rowHover },
+
+            // Misc
+            { 'cursor-pointer': props.selectionMode }
+        ]
+    }),
+    rowexpansion: {
+        class: 'bg-surface-0 dark:bg-surface-900 text-surface-600 dark:text-white/80'
+    },
+    rowgroupheader: {
+        class: ['sticky z-20', 'bg-surface-0 text-surface-600 dark:text-white/70', 'dark:bg-surface-900']
+    },
+    rowgroupfooter: {
+        class: ['sticky z-20', 'bg-surface-0 text-surface-600 dark:text-white/70', 'dark:bg-surface-900']
+    },
+    rowgrouptoggler: {
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'inline-flex items-center justify-center',
+            'text-left',
+
+            // Spacing
+            'm-0 p-0',
+
+            // Size
+            'w-8 h-8',
+
+            // Shape
+            'border-0 rounded-full',
+
+            // Color
+            'text-surface-500 dark:text-white/70',
+            'bg-transparent',
+            'focus-visible:outline-none focus-visible:outline-offset-0',
+            'focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'overflow-hidden',
+            'cursor-pointer select-none'
+        ]
+    },
+    rowgrouptogglericon: {
+        class: 'inline-block w-4 h-4'
+    },
+    resizehelper: {
+        class: 'absolute hidden w-[2px] z-20 bg-primary'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/dataview/index.js b/packages/tailwindcss-presets/src/aura/dataview/index.js
new file mode 100644
index 000000000..d8b012edd
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/dataview/index.js
@@ -0,0 +1,40 @@
+export default {
+    content: {
+        class: [
+            // Spacing
+            'p-0',
+
+            // Shape
+            'border-0',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-900'
+        ]
+    },
+    grid: {
+        class: [
+            // flex
+            'flex flex-wrap',
+
+            // Spacing
+            'ml-0 mr-0 mt-0',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900'
+        ]
+    },
+    header: {
+        class: [
+            'font-semibold',
+
+            // Spacing
+            'py-3 px-4',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-surface-00 dark:bg-surface-900',
+            'border-b border-surface-200 dark:border-surface-700'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/dataviewlayoutoptions/index.js b/packages/tailwindcss-presets/src/aura/dataviewlayoutoptions/index.js
new file mode 100644
index 000000000..b8b5be9eb
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/dataviewlayoutoptions/index.js
@@ -0,0 +1,58 @@
+export default {
+    listbutton: ({ props }) => ({
+        class: [
+            // Font
+            'leading-none',
+
+            // Flex Alignment
+            'inline-flex items-center align-bottom text-center',
+
+            // Shape
+            'border rounded-md rounded-r-none',
+
+            // Spacing
+            'px-4 py-3',
+
+            // Color
+            props.modelValue === 'list' ? 'bg-primary border-primary text-primary-inverse' : 'bg-surface-0 dark:bg-surface-900 border-surface-200 dark:border-surface-700 text-surface-700 dark:text-white/80',
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+            props.modelValue === 'list' ? 'hover:bg-primary-hover' : 'hover:bg-surface-50 dark:hover:bg-surface-800/80',
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'cursor-pointer select-none overflow-hidden'
+        ]
+    }),
+    gridbutton: ({ props }) => ({
+        class: [
+            // Font
+            'leading-none',
+
+            // Flex Alignment
+            'inline-flex items-center align-bottom text-center',
+
+            // Shape
+            'border rounded-md rounded-l-none',
+
+            // Spacing
+            'px-4 py-3',
+
+            // Color
+            props.modelValue === 'grid' ? 'bg-primary border-primary text-primary-inverse' : 'bg-surface-0 dark:bg-surface-900 border-surface-200 dark:border-surface-700 text-surface-700 dark:text-white/80',
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+            props.modelValue === 'grid' ? 'hover:bg-primary-hover' : 'hover:bg-surface-50 dark:hover:bg-surface-800/80',
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'cursor-pointer select-none overflow-hidden'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/deferred/index.js b/packages/tailwindcss-presets/src/aura/deferred/index.js
new file mode 100644
index 000000000..2064371ae
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/deferred/index.js
@@ -0,0 +1,3 @@
+export default {
+    root: {}
+};
diff --git a/packages/tailwindcss-presets/src/aura/dialog/index.js b/packages/tailwindcss-presets/src/aura/dialog/index.js
new file mode 100644
index 000000000..aca50e738
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/dialog/index.js
@@ -0,0 +1,239 @@
+export default {
+    root: ({ state }) => ({
+        class: [
+            // Shape
+            'rounded-lg',
+            'shadow-lg',
+            'border-0',
+
+            // Size
+            'max-h-[90vh]',
+            'w-[50vw]',
+            'm-0',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            '[&:last-child]:border-b',
+            'border-surface-200 dark:border-surface-700',
+
+            // Transitions
+            'transform',
+            'scale-100',
+
+            // Maximized State
+            {
+                'transition-none': state.maximized,
+                'transform-none': state.maximized,
+                '!w-screen': state.maximized,
+                '!h-screen': state.maximized,
+                '!max-h-full': state.maximized,
+                '!top-0': state.maximized,
+                '!left-0': state.maximized
+            }
+        ]
+    }),
+    header: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-between',
+            'shrink-0',
+
+            // Spacing
+            'p-6',
+
+            // Shape
+            'rounded-tl-lg',
+            'rounded-tr-lg',
+
+            // Colors
+            'text-surface-700 dark:text-surface-0/80',
+            'border border-b-0',
+            'border-surface-200 dark:border-surface-700'
+        ]
+    },
+    title: {
+        class: ['font-semibold text-xl leading-[normal]']
+    },
+    icons: {
+        class: ['flex items-center']
+    },
+    closeButton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Size and Spacing
+            'mr-2',
+            'last:mr-0',
+            'w-7 h-7',
+
+            // Shape
+            'border-0',
+            'rounded-full',
+
+            // Colors
+            'text-surface-500',
+            'bg-transparent',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1',
+            'focus:ring-primary-500 dark:focus:ring-primary-400',
+
+            // Misc
+            'overflow-hidden'
+        ]
+    },
+    maximizablebutton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Size and Spacing
+            'mr-2',
+            'last:mr-0',
+            'w-7 h-7',
+
+            // Shape
+            'border-0',
+            'rounded-full',
+
+            // Colors
+            'text-surface-500',
+            'bg-transparent',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1',
+            'focus:ring-primary-500 dark:focus:ring-primary-400',
+
+            // Misc
+            'overflow-hidden'
+        ]
+    },
+    closeButtonIcon: {
+        class: [
+            // Display
+            'inline-block',
+
+            // Size
+            'w-4',
+            'h-4'
+        ]
+    },
+    maximizableicon: {
+        class: [
+            // Display
+            'inline-block',
+
+            // Size
+            'w-4',
+            'h-4'
+        ]
+    },
+    content: ({ state, instance }) => ({
+        class: [
+            // Spacing
+            'px-6',
+            'pb-6',
+            'pt-0',
+
+            // Shape
+            {
+                grow: state.maximized,
+                'rounded-bl-lg': !instance.$slots.footer,
+                'rounded-br-lg': !instance.$slots.footer
+            },
+
+            // Colors
+            'text-surface-700 dark:text-surface-0/80',
+            'border border-t-0 border-b-0',
+            'border-surface-200 dark:border-surface-700',
+
+            // Misc
+            'overflow-y-auto'
+        ]
+    }),
+    footer: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-end',
+            'shrink-0',
+            'text-right',
+            'gap-2',
+
+            // Spacing
+            'px-6',
+            'pb-6',
+
+            // Shape
+            'border-t-0',
+            'rounded-b-lg',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-surface-0/80',
+            'border border-t-0 border-b-0',
+            'border-surface-200 dark:border-surface-700'
+        ]
+    },
+    mask: ({ props }) => ({
+        class: [
+            // Transitions
+            'transition-all',
+            'duration-300',
+            { 'p-5': !props.position == 'full' },
+
+            // Background and Effects
+            { 'has-[.mask-active]:bg-transparent bg-black/40': props.modal }
+        ]
+    }),
+    transition: ({ props }) => {
+        return props.position === 'top'
+            ? {
+                  enterFromClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
+                  enterActiveClass: 'transition-all duration-200 ease-out',
+                  leaveActiveClass: 'transition-all duration-200 ease-out',
+                  leaveToClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active'
+              }
+            : props.position === 'bottom'
+            ? {
+                  enterFromClass: 'opacity-0 scale-75 translate-y-full mask-active',
+                  enterActiveClass: 'transition-all duration-200 ease-out',
+                  leaveActiveClass: 'transition-all duration-200 ease-out',
+                  leaveToClass: 'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0 mask-active'
+              }
+            : props.position === 'left' || props.position === 'topleft' || props.position === 'bottomleft'
+            ? {
+                  enterFromClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active',
+                  enterActiveClass: 'transition-all duration-200 ease-out',
+                  leaveActiveClass: 'transition-all duration-200 ease-out',
+                  leaveToClass: 'opacity-0 scale-75  -translate-x-full translate-y-0 translate-z-0 mask-active'
+              }
+            : props.position === 'right' || props.position === 'topright' || props.position === 'bottomright'
+            ? {
+                  enterFromClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
+                  enterActiveClass: 'transition-all duration-200 ease-out',
+                  leaveActiveClass: 'transition-all duration-200 ease-out',
+                  leaveToClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active'
+              }
+            : {
+                  enterFromClass: 'opacity-0 scale-75 mask-active',
+                  enterActiveClass: 'transition-all duration-200 ease-out',
+                  leaveActiveClass: 'transition-all duration-200 ease-out',
+                  leaveToClass: 'opacity-0 scale-75 mask-active'
+              };
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/divider/index.js b/packages/tailwindcss-presets/src/aura/divider/index.js
new file mode 100644
index 000000000..b4406974e
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/divider/index.js
@@ -0,0 +1,67 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Flex and Position
+            'flex relative',
+            { 'justify-center': props.layout == 'vertical' },
+            { 'items-center': props.layout == 'vertical' },
+            {
+                'justify-start': props?.align == 'left' && props.layout == 'horizontal',
+                'justify-center': props?.align == 'center' && props.layout == 'horizontal',
+                'justify-end': props?.align == 'right' && props.layout == 'horizontal',
+                'items-center': props?.align == 'top' && props.layout == 'vertical',
+                'items-start': props?.align == 'center' && props.layout == 'vertical',
+                'items-end': props?.align == 'bottom' && props.layout == 'vertical'
+            },
+
+            // Spacing
+            {
+                'my-5 mx-0 py-0 px-5': props.layout == 'horizontal',
+                'mx-4 md:mx-5 py-5': props.layout == 'vertical'
+            },
+
+            // Size
+            {
+                'w-full': props.layout == 'horizontal',
+                'min-h-full': props.layout == 'vertical'
+            },
+
+            // Before: Line
+            'before:block',
+
+            // Position
+            {
+                'before:absolute before:left-0 before:top-1/2': props.layout == 'horizontal',
+                'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2': props.layout == 'vertical'
+            },
+
+            // Size
+            {
+                'before:w-full': props.layout == 'horizontal',
+                'before:min-h-full': props.layout == 'vertical'
+            },
+
+            // Shape
+            {
+                'before:border-solid': props.type == 'solid',
+                'before:border-dotted': props.type == 'dotted',
+                'before:border-dashed': props.type == 'dashed'
+            },
+
+            // Color
+            {
+                'before:border-t before:border-surface-200 before:dark:border-surface-600': props.layout == 'horizontal',
+                'before:border-l before:border-surface-200 before:dark:border-surface-600': props.layout == 'vertical'
+            }
+        ]
+    }),
+    content: {
+        class: [
+            // Space and Position
+            'px-1 z-10',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-800'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/dock/index.js b/packages/tailwindcss-presets/src/aura/dock/index.js
new file mode 100644
index 000000000..5a33adedf
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/dock/index.js
@@ -0,0 +1,93 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Positioning
+            'absolute z-1',
+            {
+                'left-0 bottom-0 w-full': props.position == 'bottom',
+                'left-0 top-0 w-full': props.position == 'top',
+                'left-0 top-0 h-full': props.position == 'left',
+                'right-0 top-0 h-full': props.position == 'right'
+            },
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Interactivity
+            'pointer-events-none'
+        ]
+    }),
+    container: {
+        class: [
+            // Flexbox
+            'flex',
+
+            // Shape & Border
+            'rounded-md',
+
+            // Color
+            'bg-surface-0/10 dark:bg-surface-900/20 border border-surface-0/20',
+            'backdrop-blur-sm',
+
+            // Spacing
+            'p-2',
+
+            // Misc
+            'pointer-events-auto'
+        ]
+    },
+    menu: ({ props }) => ({
+        class: [
+            // Flexbox & Alignment
+            'flex items-center justify-center',
+            {
+                'flex-col': props.position == 'left' || props.position == 'right'
+            },
+
+            // List Style
+            'm-0 p-0 list-none',
+
+            // Shape
+            'outline-none'
+        ]
+    }),
+    menuitem: ({ props, context, instance }) => ({
+        class: [
+            // Spacing & Shape
+            'p-2 rounded-md',
+
+            // Conditional Scaling
+            {
+                'hover:scale-150': instance.currentIndex === context.index,
+                'scale-125': instance.currentIndex - 1 === context.index || instance.currentIndex + 1 === context.index,
+                'scale-110': instance.currentIndex - 2 === context.index || instance.currentIndex + 2 === context.index
+            },
+
+            // Positioning & Hover States
+            {
+                'origin-bottom hover:mx-6': props.position == 'bottom',
+                'origin-top hover:mx-6': props.position == 'top',
+                'origin-left hover:my-6': props.position == 'left',
+                'origin-right hover:my-6': props.position == 'right'
+            },
+
+            // Transitions & Transform
+            'transition-all duration-200 ease-cubic-bezier-will-change-transform transform'
+        ]
+    }),
+    action: {
+        class: [
+            // Flexbox & Alignment
+            'flex flex-col items-center justify-center',
+
+            // Position
+            'relative',
+
+            // Size
+            'w-16 h-16',
+
+            // Misc
+            'cursor-default overflow-hidden'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/dropdown/index.js b/packages/tailwindcss-presets/src/aura/dropdown/index.js
new file mode 100644
index 000000000..9a8a9bd8c
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/dropdown/index.js
@@ -0,0 +1,263 @@
+export default {
+    root: ({ props, state, parent }) => ({
+        class: [
+            // Display and Position
+            'inline-flex',
+            'relative',
+            // Shape
+            { 'rounded-md': parent.instance.$name !== 'InputGroup' },
+            { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+            { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
+            { 'first:ml-0 ml-[-1px]': parent.instance.$name == 'InputGroup' && !props.showButtons },
+
+            // Color and Background
+            { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+
+            'border',
+            { 'dark:border-surface-700': parent.instance.$name != 'InputGroup' },
+            { 'dark:border-surface-600': parent.instance.$name == 'InputGroup' },
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            'invalid:focus:ring-red-200',
+            'invalid:hover:border-red-500',
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // Transitions
+            'transition-all',
+            'duration-200',
+
+            // States
+            { 'hover:border-surface-400 dark:hover:border-surface-600': !props.invalid },
+            { 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400 z-10': state.focused },
+
+            // Misc
+            'cursor-pointer',
+            'select-none',
+            { 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    input: ({ props, parent }) => ({
+        class: [
+            //Font
+            'leading-[normal]',
+
+            // Display
+            'block',
+            'flex-auto',
+
+            // Color and Background
+            'bg-transparent',
+            'border-0',
+            { 'text-surface-800 dark:text-white/80': props.modelValue != undefined, 'text-surface-400 dark:text-surface-500': props.modelValue == undefined },
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+            // Sizing and Spacing
+            'w-[1%]',
+            'py-2 px-3',
+            { 'pr-7': props.showClear },
+
+            //Shape
+            'rounded-none',
+
+            // Transitions
+            'transition',
+            'duration-200',
+
+            // States
+            'focus:outline-none focus:shadow-none',
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null },
+
+            // Misc
+            'relative',
+            'cursor-pointer',
+            'overflow-hidden overflow-ellipsis',
+            'whitespace-nowrap',
+            'appearance-none'
+        ]
+    }),
+    trigger: {
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+            'shrink-0',
+
+            // Color and Background
+            'bg-transparent',
+            'text-surface-500',
+
+            // Size
+            'w-12',
+
+            // Shape
+            'rounded-r-md'
+        ]
+    },
+    panel: {
+        class: [
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-white/80',
+
+            // Shape
+            'border border-surface-300 dark:border-surface-700',
+            'rounded-md',
+            'shadow-md'
+        ]
+    },
+    wrapper: {
+        class: [
+            // Sizing
+            'max-h-[200px]',
+
+            // Misc
+            'overflow-auto'
+        ]
+    },
+    list: {
+        class: 'p-1 list-none m-0'
+    },
+    item: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Font
+            'leading-none',
+
+            // Spacing
+            'm-0 px-3 py-2',
+            'first:mt-0 mt-[2px]',
+
+            // Shape
+            'border-0 rounded',
+
+            // Colors
+            {
+                'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
+                'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
+                'text-surface-700 dark:text-white/80': context.focused && !context.selected,
+
+                'text-primary-highlight-inverse': context.selected,
+                'bg-primary-highlight': context.selected
+            },
+
+            //States
+            { 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
+            { 'hover:bg-primary-highlight-hover': context.selected },
+            { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
+
+            // Transition
+            'transition-shadow duration-200',
+
+            // Misc
+            'cursor-pointer overflow-hidden whitespace-nowrap'
+        ]
+    }),
+    itemgroup: {
+        class: [
+            'font-semibold',
+
+            // Spacing
+            'm-0 py-2 px-3',
+
+            // Colors
+            'text-surface-400 dark:text-surface-500',
+
+            // Misc
+            'cursor-auto'
+        ]
+    },
+    emptymessage: {
+        class: [
+            // Font
+            'leading-none',
+
+            // Spacing
+            'py-2 px-3',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-transparent'
+        ]
+    },
+    header: {
+        class: [
+            // Spacing
+            'pt-2 px-2 pb-0',
+            'm-0',
+
+            //Shape
+            'border-b-0',
+            'rounded-tl-md',
+            'rounded-tr-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-900',
+            'border-surface-300 dark:border-surface-700'
+        ]
+    },
+    filtercontainer: {
+        class: 'relative'
+    },
+    filterinput: {
+        class: [
+            // Font
+            'leading-[normal]',
+
+            // Sizing
+            'py-2 pl-3 pr-7',
+            '-mr-7',
+            'w-full',
+
+            //Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-950',
+            'border-surface-200 dark:border-surface-700',
+
+            // Shape
+            'border',
+            'rounded-lg',
+            'appearance-none',
+
+            // Transitions
+            'transition',
+            'duration-200',
+
+            // States
+            'hover:border-surface-400 dark:hover:border-surface-600',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+
+            // Misc
+            'appearance-none'
+        ]
+    },
+    filtericon: {
+        class: ['absolute', 'top-1/2 right-3', '-mt-2']
+    },
+    clearicon: {
+        class: [
+            // Color
+            'text-surface-400 dark:text-surface-500',
+
+            // Position
+            'absolute',
+            'top-1/2',
+            'right-12',
+
+            // Spacing
+            '-mt-2'
+        ]
+    },
+    loadingicon: {
+        class: 'text-surface-400 dark:text-surface-500 animate-spin'
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/fieldset/index.js b/packages/tailwindcss-presets/src/aura/fieldset/index.js
new file mode 100644
index 000000000..88c05033b
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/fieldset/index.js
@@ -0,0 +1,81 @@
+export default {
+    root: {
+        class: [
+            // Spacing
+            'p-[1.125rem] pt-0',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'border border-surface-200 dark:border-surface-700',
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    legend: ({ props }) => ({
+        class: [
+            // Font
+            'font-semibold',
+            'leading-none',
+
+            //Spacing
+            'p-0 mb-[0.375rem]',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'text-surface-700 dark:text-surface-0/80',
+            'bg-surface-0 dark:bg-surface-900',
+
+            // Transition
+            'transition-none',
+
+            // States
+            { 'hover:bg-surface-100 dark:hover:bg-surface-800': props.toggleable }
+        ]
+    }),
+    toggler: ({ props }) => ({
+        class: [
+            // Alignments
+            'flex items-center justify-center',
+            'relative',
+
+            //Spacing
+            { 'py-2 px-3': props.toggleable },
+
+            // Shape
+            { 'rounded-md': props.toggleable },
+
+            // Color
+            { 'text-surface-700 dark:text-surface-200 hover:text-surface-900': props.toggleable },
+
+            // States
+            { 'hover:text-surface-900 dark:hover:text-surface-100': props.toggleable },
+            { 'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300': props.toggleable },
+
+            // Misc
+            {
+                'transition-none cursor-pointer overflow-hidden select-none': props.toggleable
+            }
+        ]
+    }),
+    togglerIcon: {
+        class: 'mr-2 inline-block'
+    },
+    legendTitle: ({ props }) => ({
+        class: ['flex items-center justify-center leading-none', { 'py-2 px-3': !props.toggleable }]
+    }),
+    content: {
+        class: 'p-0'
+    },
+    transition: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+        enterToClass: 'max-h-[1000px]',
+        leaveFromClass: 'max-h-[1000px]',
+        leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+        leaveToClass: 'max-h-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/fileupload/index.js b/packages/tailwindcss-presets/src/aura/fileupload/index.js
new file mode 100644
index 000000000..310d03b67
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/fileupload/index.js
@@ -0,0 +1,175 @@
+export default {
+    input: {
+        class: 'hidden'
+    },
+    buttonbar: {
+        class: [
+            // Flexbox
+            'flex',
+            'flex-wrap',
+
+            // Colors
+            'bg-surface-0',
+            'dark:bg-surface-900',
+            'text-surface-700',
+            'dark:text-white/80',
+
+            // Spacing
+            'p-[1.125rem]',
+            'gap-2',
+
+            // Borders
+            'border',
+            'border-solid',
+            'border-surface-200',
+            'dark:border-surface-700',
+            'border-b-0',
+
+            // Shape
+            'rounded-tr-lg',
+            'rounded-tl-lg'
+        ]
+    },
+    chooseButton: {
+        class: [
+            'relative',
+
+            // Alignments
+            'items-center inline-flex text-center align-bottom justify-center',
+
+            // Spacing
+            'px-4 py-2',
+
+            // Shape
+            'rounded-md',
+
+            // Font
+            'leading-[normal]',
+            'font-medium',
+
+            // Colors
+            'text-primary-inverse',
+            'bg-primary',
+            'border-primary',
+
+            // States
+            'hover:bg-primary-hover',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1',
+            'focus:ring-primary',
+
+            // Misc
+            'overflow-hidden',
+            'cursor-pointer'
+        ]
+    },
+    chooseIcon: {
+        class: ['mr-2', 'inline-block']
+    },
+    chooseButtonLabel: {
+        class: ['flex-1', 'font-bold']
+    },
+    uploadbutton: {
+        icon: {
+            class: 'mr-2'
+        }
+    },
+    cancelbutton: {
+        icon: {
+            class: 'mr-2'
+        }
+    },
+    content: {
+        class: [
+            // Position
+            'relative',
+
+            // Colors
+            'bg-surface-0',
+            'dark:bg-surface-900',
+            'text-surface-700',
+            'dark:text-white/80',
+
+            // Spacing
+            'p-[1.125rem]',
+
+            // Borders
+            'border border-t-0',
+            'border-surface-200',
+            'dark:border-surface-700',
+
+            // Shape
+            'rounded-b-lg'
+        ]
+    },
+    file: {
+        class: [
+            // Flexbox
+            'flex',
+            'items-center',
+            'flex-wrap',
+
+            // Spacing
+            'p-4',
+            'mb-2',
+            'last:mb-0',
+
+            // Borders
+            'border',
+            'border-surface-200',
+            'dark:border-surface-700',
+            'gap-2',
+
+            // Shape
+            'rounded'
+        ]
+    },
+    thumbnail: {
+        class: 'shrink-0'
+    },
+    fileName: {
+        class: 'mb-2 break-all'
+    },
+    fileSize: {
+        class: 'mr-2'
+    },
+    uploadicon: {
+        class: 'mr-2'
+    },
+    progressbar: {
+        root: {
+            class: [
+                // Position and Overflow
+                'overflow-hidden',
+                'absolute top-0 left-0',
+
+                // Shape and Size
+                'border-0',
+                'h-2',
+                'rounded-md',
+                'w-full',
+
+                // Colors
+                'bg-surface-100 dark:bg-surface-700'
+            ]
+        },
+        value: {
+            class: [
+                // Flexbox & Overflow & Position
+                'absolute flex items-center justify-center overflow-hidden',
+
+                // Colors
+                'bg-primary',
+
+                // Spacing & Sizing
+                'm-0',
+                'h-full w-0',
+
+                // Shape
+                'border-0',
+
+                // Transitions
+                'transition-width duration-1000 ease-in-out'
+            ]
+        }
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/floatlabel/index.js b/packages/tailwindcss-presets/src/aura/floatlabel/index.js
new file mode 100644
index 000000000..557808fee
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/floatlabel/index.js
@@ -0,0 +1,26 @@
+export default {
+    root: {
+        class: [
+            'block relative',
+
+            // Base Label Appearance
+            '[&>*:last-child]:text-surface-900/60 dark:[&>*:last-child]:text-white/60',
+            '[&>*:last-child]:absolute',
+            '[&>*:last-child]:top-1/2',
+            '[&>*:last-child]:-translate-y-1/2',
+            '[&>*:last-child]:left-3',
+            '[&>*:last-child]:pointer-events-none',
+            '[&>*:last-child]:transition-all',
+            '[&>*:last-child]:duration-200',
+            '[&>*:last-child]:ease',
+
+            // Focus Label Appearance
+            '[&>*:last-child]:has-[:focus]:-top-3',
+            '[&>*:last-child]:has-[:focus]:text-sm',
+
+            // Filled Input Label Appearance
+            '[&>*:last-child]:has-[.filled]:-top-3',
+            '[&>*:last-child]:has-[.filled]:text-sm'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/galleria/index.js b/packages/tailwindcss-presets/src/aura/galleria/index.js
new file mode 100644
index 000000000..9f4d37e0e
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/galleria/index.js
@@ -0,0 +1,308 @@
+export default {
+    content: ({ parent, props }) => ({
+        class: [
+            'flex',
+            {
+                'flex-col': props.fullScreen
+            },
+            {
+                'flex-col': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom',
+                'flex-row': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
+            }
+        ]
+    }),
+    itemwrapper: ({ parent, props }) => ({
+        class: [
+            'group',
+            'flex relative',
+            {
+                'grow shrink w-0 justify-center': props.fullScreen
+            },
+            {
+                'flex-col': parent.props.indicatorsPosition === 'bottom' || parent.props.indicatorsPosition === 'top',
+                'flex-row items-center': parent.props.indicatorsPosition === 'left' || parent.props.indicatorsPosition === 'right'
+            },
+            {
+                'order-2': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'left',
+                'flex-row': parent.props.thumbnailsPosition === 'right'
+            }
+        ]
+    }),
+
+    itemcontainer: ({ parent }) => ({
+        class: [
+            'flex h-full relative',
+            {
+                'order-1': parent.props.indicatorsPosition === 'bottom' || parent.props.indicatorsPosition === 'right',
+                'order-2': parent.props.indicatorsPosition === 'top' || parent.props.indicatorsPosition === 'left'
+            }
+        ]
+    }),
+    item: {
+        class: [
+            // Flex
+            'flex justify-center items-center h-full w-full',
+
+            // Sizing
+            'h-full w-full'
+        ]
+    },
+    thumbnailwrapper: ({ parent }) => ({
+        class: [
+            // Flex
+            'flex flex-col shrink-0',
+
+            {
+                'order-1': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'left'
+            },
+
+            // Misc
+            'overflow-auto'
+        ]
+    }),
+    thumbnailcontainer: ({ parent }) => ({
+        class: [
+            // Flex
+            'flex',
+
+            // Spacing
+            'p-4',
+
+            // Colors
+            'bg-black/90',
+
+            {
+                'flex-row': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom',
+                'flex-col grow': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
+            }
+        ]
+    }),
+    previousthumbnailbutton: {
+        class: [
+            // Positioning
+            'self-center relative',
+
+            // Display & Flexbox
+            'flex shrink-0 justify-center items-center overflow-hidden',
+
+            // Spacing
+            'm-2',
+
+            // Appearance
+            'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
+
+            // Hover Effects
+            'hover:bg-surface-0/10 hover:text-white',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
+        ]
+    },
+    thumbnailitemscontainer: {
+        class: 'overflow-hidden w-full'
+    },
+    thumbnailitems: ({ parent }) => ({
+        class: [
+            'flex',
+            {
+                'flex-col h-full': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
+            }
+        ]
+    }),
+    thumbnailitem: ({ parent }) => ({
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+            'grow shrink-0',
+
+            // Sizing
+            {
+                'w-full md:w-[25%] lg:w-[20%]': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom'
+            },
+
+            // Misc
+            'overflow-auto',
+            'cursor-pointer',
+            'opacity-50',
+
+            // States
+            '[&[data-p-active="true"]]:opacity-100',
+            'hover:opacity-100',
+
+            // Transitions
+            'transition-opacity duration-300'
+        ]
+    }),
+    nextthumbnailbutton: {
+        class: [
+            // Positioning
+            'self-center relative',
+
+            // Display & Flexbox
+            'flex shrink-0 justify-center items-center overflow-hidden',
+
+            // Spacing
+            'm-2',
+
+            // Appearance
+            'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
+
+            // Hover Effects
+            'hover:bg-surface-0/10 hover:text-white',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
+        ]
+    },
+    indicators: ({ parent }) => ({
+        class: [
+            // flex
+            'flex items-center justify-center',
+
+            // Spacing
+            'p-4',
+
+            // Indicators Position
+            {
+                'order-2': parent.props.indicatorsPosition == 'bottom',
+                'order-1': parent.props.indicatorsPosition == 'top',
+                'order-1 flex-col': parent.props.indicatorsPosition == 'left',
+                'flex-col order-2': parent.props.indicatorsPosition == 'right'
+            },
+            {
+                'absolute z-10 bg-black/50': parent.props.showIndicatorsOnItem
+            },
+
+            {
+                'bottom-0 left-0 w-full items-start': parent.props.indicatorsPosition == 'bottom' && parent.props.showIndicatorsOnItem,
+                'top-0 left-0 w-full items-start': parent.props.indicatorsPosition == 'top' && parent.props.showIndicatorsOnItem,
+                'left-0 top-0 h-full items-start': parent.props.indicatorsPosition == 'left' && parent.props.showIndicatorsOnItem,
+                'right-0 top-0 h-full items-start': parent.props.indicatorsPosition == 'right' && parent.props.showIndicatorsOnItem
+            }
+        ]
+    }),
+    indicator: ({ parent }) => ({
+        class: [
+            {
+                'mr-2': parent.props.indicatorsPosition == 'bottom' || parent.props.indicatorsPosition == 'top',
+                'mb-2': parent.props.indicatorsPosition == 'left' || parent.props.indicatorsPosition == 'right'
+            }
+        ]
+    }),
+    indicatorbutton: ({ context }) => ({
+        class: [
+            // Size
+            'w-4 h-4',
+
+            // Appearance
+            'rounded-full transition duration-200',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+            // Conditional Appearance: Not Highlighted
+            { 'bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600': !context.highlighted },
+
+            // Conditional Appearance: Highlighted
+            { 'bg-primary hover:bg-primary-hover': context.highlighted }
+        ]
+    }),
+    mask: {
+        class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black/90']
+    },
+    closebutton: {
+        class: [
+            // Positioning
+            '!absolute top-0 right-0',
+
+            // Display & Flexbox
+            'flex justify-center items-center overflow-hidden',
+
+            // Spacing
+            'm-2',
+
+            // Appearance
+            'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out',
+
+            // Hover Effect
+            'hover:text-white hover:bg-surface-0/10',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
+        ]
+    },
+    closeicon: {
+        class: 'w-6 h-6'
+    },
+    previousitembutton: ({ parent }) => ({
+        class: [
+            // Display & Flexbox
+            'inline-flex justify-center items-center overflow-hidden',
+
+            // Appearance
+            'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
+            {
+                'opacity-0 group-hover:opacity-100': parent.props.showItemNavigatorsOnHover
+            },
+
+            // Spacing
+            'mx-2',
+
+            // Positioning
+            'top-1/2 mt-[-0.5rem] left-0',
+            {
+                '!absolute': parent.props.showItemNavigators,
+                '!fixed': !parent.props.showItemNavigators
+            },
+
+            // Hover Effect
+            'hover:bg-surface-0/10 hover:text-white',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
+        ]
+    }),
+    nextitembutton: ({ parent }) => ({
+        class: [
+            // Display & Flexbox
+            'inline-flex justify-center items-center overflow-hidden',
+
+            // Appearance
+            'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
+            {
+                'opacity-0 group-hover:opacity-100': parent.props.showItemNavigatorsOnHover
+            },
+
+            // Spacing
+            'mx-2',
+
+            // Positioning
+            'top-1/2 mt-[-0.5rem] right-0',
+            {
+                '!absolute': parent.props.showItemNavigators,
+                '!fixed': !parent.props.showItemNavigators
+            },
+
+            // Hover Effect
+            'hover:bg-surface-0/10 hover:text-white',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
+        ]
+    }),
+    caption: {
+        class: [
+            // Positioning
+            'absolute bottom-0 left-0 w-full',
+
+            // Appearance
+            'bg-black/50 text-white p-4'
+        ]
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-all duration-150 ease-in-out',
+        leaveActiveClass: 'transition-all duration-150 ease-in',
+        leaveToClass: 'opacity-0 scale-75'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/global.js b/packages/tailwindcss-presets/src/aura/global.js
new file mode 100644
index 000000000..42552db83
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/global.js
@@ -0,0 +1,90 @@
+export default {
+    css: `
+    *[data-pd-ripple="true"]{
+        overflow: hidden;
+        position: relative;
+    }
+    span[data-p-ink-active="true"]{
+        animation: ripple 0.4s linear;
+    }
+    @keyframes ripple {
+        100% {
+            opacity: 0;
+            transform: scale(2.5);
+        }
+    }
+
+    .progress-spinner-circle {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: 0;
+        animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+        stroke-linecap: round;
+    }
+
+    @keyframes p-progress-spinner-dash{
+        0% {
+            stroke-dasharray: 1, 200;
+            stroke-dashoffset: 0;
+        }
+
+        50% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -35px;
+        }
+        100% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -124px;
+        }
+    }
+    @keyframes p-progress-spinner-color {
+        100%, 0% {
+            stroke: #ff5757;
+        }
+        40% {
+            stroke: #696cff;
+        }
+        66% {
+            stroke: #1ea97c;
+        }
+        80%, 90% {
+            stroke: #cc8925;
+        }
+    }
+
+    .progressbar-value-animate::after {
+        will-change: left, right;
+        animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    }
+    .progressbar-value-animate::before {
+        will-change: left, right;
+        animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    }
+    @keyframes p-progressbar-indeterminate-anim {
+        0% {
+            left: -35%;
+            right: 100%;
+        }
+        60% {
+            left: 100%;
+            right: -90%;
+        }
+        100% {
+            left: 100%;
+            right: -90%;
+        }
+    }
+
+    .p-fadein {
+        animation: p-fadein 250ms linear;
+    }
+
+    @keyframes p-fadein {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+`
+};
diff --git a/packages/tailwindcss-presets/src/aura/iconfield/index.js b/packages/tailwindcss-presets/src/aura/iconfield/index.js
new file mode 100644
index 000000000..71216111b
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/iconfield/index.js
@@ -0,0 +1,22 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+            '[&>input]:w-full',
+
+            '[&>*:first-child]:absolute',
+            '[&>*:first-child]:top-1/2',
+            '[&>*:first-child]:-mt-2',
+            '[&>*:first-child]:leading-none',
+            '[&>*:first-child]:text-surface-900/60 dark:[&>*:first-child]:text-white/60',
+            {
+                '[&>*:first-child]:right-3': props.iconPosition === 'right',
+                '[&>*:first-child]:left-3': props.iconPosition === 'left'
+            },
+            {
+                '[&>*:last-child]:pr-10': props.iconPosition === 'right',
+                '[&>*:last-child]:pl-10': props.iconPosition === 'left'
+            }
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/image/index.js b/packages/tailwindcss-presets/src/aura/image/index.js
new file mode 100644
index 000000000..8faaaa1ab
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/image/index.js
@@ -0,0 +1,206 @@
+export default {
+    root: {
+        class: 'relative inline-block'
+    },
+    button: {
+        class: [
+            // Flexbox & Alignment
+            'flex items-center justify-center',
+
+            // Positioning
+            'absolute',
+
+            // Shape
+            'inset-0 opacity-0 transition-opacity duration-300',
+
+            // Color
+            'bg-transparent text-surface-100',
+
+            // States
+            'hover:opacity-100 hover:cursor-pointer hover:bg-black/50 hover:bg-opacity-50'
+        ]
+    },
+    mask: {
+        class: [
+            // Flexbox & Alignment
+            'flex items-center justify-center',
+
+            // Positioning
+            'fixed top-0 left-0',
+
+            // Sizing
+            'w-full h-full',
+
+            // Color
+            'bg-black/90'
+        ]
+    },
+    toolbar: {
+        class: [
+            // Flexbox
+            'flex',
+
+            // Positioning
+            'absolute top-0 right-0',
+
+            // Spacing
+            'p-4'
+        ]
+    },
+    rotaterightbutton: {
+        class: [
+            'z-20',
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Size
+            'w-12 h-12',
+
+            // Spacing
+            'mr-2',
+
+            // Shape
+            'rounded-full',
+
+            // Color
+            'text-white bg-transparent',
+
+            // States
+            'hover:text-white hover:bg-surface-0/10',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+            // Transition
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    rotaterighticon: {
+        class: 'w-6 h-6'
+    },
+    rotateleftbutton: {
+        class: [
+            'z-20',
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Size
+            'w-12 h-12',
+
+            // Spacing
+            'mr-2',
+
+            // Shape
+            'rounded-full',
+
+            // Color
+            'text-white bg-transparent',
+
+            // States
+            'hover:text-white hover:bg-surface-0/10',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+            // Transition
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    rotatelefticon: {
+        class: 'w-6 h-6'
+    },
+    zoomoutbutton: {
+        class: [
+            'z-20',
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Size
+            'w-12 h-12',
+
+            // Spacing
+            'mr-2',
+
+            // Shape
+            'rounded-full',
+
+            // Color
+            'text-white bg-transparent',
+
+            // States
+            'hover:text-white hover:bg-surface-0/10',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+            // Transition
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    zoomouticon: {
+        class: 'w-6 h-6'
+    },
+    zoominbutton: {
+        class: [
+            'z-20',
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Size
+            'w-12 h-12',
+
+            // Spacing
+            'mr-2',
+
+            // Shape
+            'rounded-full',
+
+            // Color
+            'text-white bg-transparent',
+
+            // States
+            'hover:text-white hover:bg-surface-0/10',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+            // Transition
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    zoominicon: {
+        class: 'w-6 h-6'
+    },
+    closebutton: {
+        class: [
+            'z-20',
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Size
+            'w-12 h-12',
+
+            // Spacing
+            'mr-2',
+
+            // Shape
+            'rounded-full',
+
+            // Color
+            'text-white bg-transparent',
+
+            // States
+            'hover:text-white hover:bg-surface-0/10',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+            // Transition
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    closeicon: {
+        class: 'w-6 h-6'
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-all duration-150 ease-in-out',
+        leaveActiveClass: 'transition-all duration-150 ease-in',
+        leaveToClass: 'opacity-0 scale-75'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/index.js b/packages/tailwindcss-presets/src/aura/index.js
new file mode 100644
index 000000000..49eb5e796
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/index.js
@@ -0,0 +1,207 @@
+import accordion from './accordion';
+import autocomplete from './autocomplete';
+import avatar from './avatar';
+import avatargroup from './avatargroup';
+import badge from './badge';
+import badgedirective from './badgedirective';
+import blockui from './blockui';
+import breadcrumb from './breadcrumb';
+import button from './button';
+import calendar from './calendar';
+import card from './card';
+import carousel from './carousel';
+import cascadeselect from './cascadeselect';
+import checkbox from './checkbox';
+import chip from './chip';
+import chips from './chips';
+import colorpicker from './colorpicker';
+import confirmpopup from './confirmpopup';
+import contextmenu from './contextmenu';
+import datatable from './datatable';
+import dataview from './dataview';
+import dataviewlayoutoptions from './dataviewlayoutoptions';
+import deferred from './deferred';
+import dialog from './dialog';
+import divider from './divider';
+import dock from './dock';
+import dropdown from './dropdown';
+import fieldset from './fieldset';
+import fileupload from './fileupload';
+import floatlabel from './floatlabel';
+import galleria from './galleria';
+import global from './global';
+import iconfield from './iconfield';
+import image from './image';
+import inlinemessage from './inlinemessage';
+import inplace from './inplace';
+import inputgroup from './inputgroup';
+import inputgroupaddon from './inputgroupaddon';
+import inputmask from './inputmask';
+import inputnumber from './inputnumber';
+import inputotp from './inputotp';
+import inputswitch from './inputswitch';
+import inputtext from './inputtext';
+import knob from './knob';
+import listbox from './listbox';
+import megamenu from './megamenu';
+import menu from './menu';
+import menubar from './menubar';
+import message from './message';
+import metergroup from './metergroup';
+import multiselect from './multiselect';
+import orderlist from './orderlist';
+import organizationchart from './organizationchart';
+import overlaypanel from './overlaypanel';
+import paginator from './paginator';
+import panel from './panel';
+import panelmenu from './panelmenu';
+import password from './password';
+import picklist from './picklist';
+import progressbar from './progressbar';
+import progressspinner from './progressspinner';
+import radiobutton from './radiobutton';
+import rating from './rating';
+import ripple from './ripple';
+import scrollpanel from './scrollpanel';
+import scrolltop from './scrolltop';
+import selectbutton from './selectbutton';
+import sidebar from './sidebar';
+import skeleton from './skeleton';
+import slider from './slider';
+import speeddial from './speeddial';
+import splitbutton from './splitbutton';
+import splitter from './splitter';
+import splitterpanel from './splitterpanel';
+import stepper from './stepper';
+import steps from './steps';
+import tabmenu from './tabmenu';
+import tabview from './tabview';
+import tag from './tag';
+import terminal from './terminal';
+import textarea from './textarea';
+import tieredmenu from './tieredmenu';
+import timeline from './timeline';
+import toast from './toast';
+import togglebutton from './togglebutton';
+import toolbar from './toolbar';
+import tooltip from './tooltip';
+import tree from './tree';
+import treeselect from './treeselect';
+import treetable from './treetable';
+import tristatecheckbox from './tristatecheckbox';
+
+export default {
+    global,
+    directives: {
+        badge: badgedirective,
+        ripple,
+        tooltip
+    },
+
+    //forms
+    autocomplete,
+    dropdown,
+    inputnumber,
+    inputtext,
+    calendar,
+    checkbox,
+    radiobutton,
+    inputswitch,
+    selectbutton,
+    slider,
+    chips,
+    rating,
+    multiselect,
+    togglebutton,
+    cascadeselect,
+    listbox,
+    colorpicker,
+    inputgroup,
+    inputgroupaddon,
+    inputmask,
+    knob,
+    treeselect,
+    tristatecheckbox,
+    textarea,
+    password,
+    iconfield,
+    floatlabel,
+    inputotp,
+
+    //buttons
+    button,
+    splitbutton,
+    speeddial,
+
+    //data
+    paginator,
+    datatable,
+    tree,
+    dataview,
+    dataviewlayoutoptions,
+    organizationchart,
+    orderlist,
+    picklist,
+    treetable,
+    timeline,
+
+    //panels
+    accordion,
+    panel,
+    fieldset,
+    card,
+    tabview,
+    divider,
+    toolbar,
+    scrollpanel,
+    splitter,
+    splitterpanel,
+    stepper,
+    deferred,
+
+    //file
+    fileupload,
+
+    //menu
+    contextmenu,
+    menu,
+    menubar,
+    steps,
+    tieredmenu,
+    breadcrumb,
+    panelmenu,
+    megamenu,
+    dock,
+    tabmenu,
+
+    //overlays
+    dialog,
+    overlaypanel,
+    sidebar,
+    confirmpopup,
+
+    //messages
+    message,
+    inlinemessage,
+    toast,
+
+    //media
+    carousel,
+    galleria,
+    image,
+
+    //misc
+    badge,
+    avatar,
+    avatargroup,
+    tag,
+    chip,
+    progressbar,
+    skeleton,
+    scrolltop,
+    terminal,
+    blockui,
+    metergroup,
+    inplace,
+    progressspinner
+};
diff --git a/packages/tailwindcss-presets/src/aura/inlinemessage/index.js b/packages/tailwindcss-presets/src/aura/inlinemessage/index.js
new file mode 100644
index 000000000..9eb01878d
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/inlinemessage/index.js
@@ -0,0 +1,42 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'inline-flex items-center justify-center align-top gap-2',
+            'p-3 m-0 rounded-md border',
+            {
+                'bg-blue-100/70 dark:bg-blue-500/20': props.severity == 'info',
+                'bg-green-100/70 dark:bg-green-500/20': props.severity == 'success',
+                'bg-surface-100/70 dark:bg-surface-500/20': props.severity == 'secondary',
+                'bg-orange-100/70 dark:bg-orange-500/20': props.severity == 'warn',
+                'bg-red-100/70 dark:bg-red-500/20': props.severity == 'error',
+                'bg-surface-950 dark:bg-surface-0': props.severity == 'contrast'
+            },
+            {
+                'border-blue-200 dark:border-blue-500/20': props.severity == 'info',
+                'border-green-200 dark:border-green-500/20': props.severity == 'success',
+                'border-surface-200 dark:border-surface-500/20': props.severity == 'secondary',
+                'border-orange-200 dark:border-orange-500/20': props.severity == 'warn',
+                'border-red-200 dark:border-red-500/20': props.severity == 'error',
+                'border-surface-950 dark:border-surface-0': props.severity == 'contrast'
+            },
+            {
+                'text-blue-700 dark:text-blue-300': props.severity == 'info',
+                'text-green-700 dark:text-green-300': props.severity == 'success',
+                'text-surface-700 dark:text-surface-300': props.severity == 'secondary',
+                'text-orange-700 dark:text-orange-300': props.severity == 'warn',
+                'text-red-700 dark:text-red-300': props.severity == 'error',
+                'text-surface-0 dark:text-surface-950': props.severity == 'contrast'
+            }
+        ]
+    }),
+    icon: {
+        class: 'text-base'
+    },
+    text: {
+        class: [
+            // Font and Text
+            'text-base leading-none',
+            'font-medium'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/inplace/index.js b/packages/tailwindcss-presets/src/aura/inplace/index.js
new file mode 100644
index 000000000..691230b24
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/inplace/index.js
@@ -0,0 +1,27 @@
+export default {
+    display: {
+        class: [
+            // Display
+            'inline',
+
+            // Spacing
+            'px-3 py-2',
+
+            // Shape
+            'rounded-md',
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+
+            // States
+            'hover:bg-surface-100 hover:text-surface-700 dark:hover:bg-surface-800 dark:hover:text-white/80',
+
+            // Transitions
+            'transition',
+            'duration-200',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/inputgroup/index.js b/packages/tailwindcss-presets/src/aura/inputgroup/index.js
new file mode 100644
index 000000000..cce711149
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/inputgroup/index.js
@@ -0,0 +1,5 @@
+export default {
+    root: {
+        class: ['flex items-stretch', 'w-full']
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/inputgroupaddon/index.js b/packages/tailwindcss-presets/src/aura/inputgroupaddon/index.js
new file mode 100644
index 000000000..888b31102
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/inputgroupaddon/index.js
@@ -0,0 +1,28 @@
+export default {
+    root: {
+        class: [
+            // Flex
+            'flex items-center justify-center',
+
+            // Shape
+            'first:rounded-l-md',
+            'last:rounded-r-md',
+            'border-y',
+
+            'last:border-r',
+            'border-l',
+            'border-r-0',
+
+            // Space
+            'p-2',
+
+            // Size
+            'min-w-[2.5rem]',
+
+            // Color
+            'bg-transparent dark:bg-surface-900',
+            'text-surface-800 dark:text-white/80',
+            'border-surface-300 dark:border-surface-700'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/inputmask/index.js b/packages/tailwindcss-presets/src/aura/inputmask/index.js
new file mode 100644
index 000000000..96076802f
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/inputmask/index.js
@@ -0,0 +1,39 @@
+export default {
+    root: ({ context, props, parent }) => ({
+        class: [
+            // Font
+            'leading-none',
+
+            // Spacing
+            'm-0 py-2 px-3',
+
+            // Colors
+            'text-surface-800 dark:text-white/80',
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+            { 'bg-surface-0 dark:bg-surface-950': !context.disabled },
+
+            'border',
+            { 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+            // Invalid State
+            'invalid:focus:ring-red-200',
+            'invalid:hover:border-red-500',
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'hover:border-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
+                'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
+            },
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },
+
+            // Misc
+            'rounded-md',
+            'appearance-none',
+            'transition-colors duration-200'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/inputnumber/index.js b/packages/tailwindcss-presets/src/aura/inputnumber/index.js
new file mode 100644
index 000000000..de76e68da
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/inputnumber/index.js
@@ -0,0 +1,172 @@
+export default {
+    root: ({ props, parent }) => ({
+        class: [
+            // Flex
+            'inline-flex',
+            'relative',
+            { 'flex-col': props.showButtons && props.buttonLayout == 'vertical' },
+            { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+
+            // Shape
+            { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' && !props.showButtons },
+            { 'border-0 border-y border-l last:border-r border-surface-300 dark:border-surface-700': parent.instance.$name == 'InputGroup' && !props.showButtons },
+            { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
+
+            //Sizing
+            { '!w-16': props.showButtons && props.buttonLayout == 'vertical' }
+        ]
+    }),
+    input: {
+        root: ({ parent, context }) => ({
+            class: [
+                // Font
+                'leading-none',
+
+                // Display
+                'flex flex-auto',
+
+                //Text
+                { 'text-center': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                // Spacing
+                'py-2 px-3',
+                'm-0',
+
+                // Shape
+                'rounded-md',
+                { 'rounded-l-none rounded-r-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
+                { 'rounded-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                { 'border-0': parent.instance.$parentInstance?.$name == 'InputGroup' && !parent.props.showButtons },
+
+                // Colors
+                'text-surface-800 dark:text-white/80',
+                'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+                { 'bg-surface-0 dark:bg-surface-950': !context.disabled },
+                'border',
+                { 'border-surface-300 dark:border-surface-700': !parent.props.invalid },
+
+                // Invalid State
+                'invalid:focus:ring-red-200',
+                'invalid:hover:border-red-500',
+                { 'border-red-500 dark:border-red-400': parent.props.invalid },
+
+                // States
+                { 'hover:border-primary': !parent.props.invalid },
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+                { 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled },
+
+                // Filled State *for FloatLabel
+                { filled: parent.instance?.$parentInstance?.$name == 'FloatLabel' && parent.state.d_modelValue !== null },
+
+                //Position
+                { 'order-2': parent.props.buttonLayout == 'horizontal' || parent.props.buttonLayout == 'vertical' }
+            ]
+        })
+    },
+    buttongroup: ({ props }) => ({
+        class: [
+            // Flex
+            'flex',
+            'flex-col',
+            { 'absolute top-px right-px h-[calc(100%-2px)] z-20': props.showButtons && props.buttonLayout == 'stacked' }
+        ]
+    }),
+
+    incrementbutton: {
+        root: ({ parent }) => ({
+            class: [
+                // Display
+                'flex flex-auto',
+
+                // Alignment
+                'items-center',
+                'justify-center',
+                'text-center align-bottom',
+
+                //Position
+                'relative',
+                { 'order-3': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
+                { 'order-1': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                //Color
+                'text-surface-800 dark:text-surface-0',
+                'bg-transparent',
+                { 'dark:bg-surface-900': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' },
+                'border border-surface-300 dark:border-surface-700',
+                { 'border-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
+                { 'border-l-0': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' && parent.props.buttonLayout == 'horizontal' },
+                { 'border-b-0': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' && parent.props.buttonLayout == 'vertical' },
+
+                // Sizing
+                'w-[3rem]',
+                { 'px-4 py-3': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' },
+                { 'p-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
+                { 'w-full': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                // Shape
+                'rounded-md',
+                { 'rounded-md': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
+                { 'rounded-bl-none rounded-tl-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
+                { 'rounded-bl-none rounded-br-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                //States
+                'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+
+                //Misc
+                'cursor-pointer overflow-hidden select-none'
+            ]
+        }),
+        label: {
+            class: 'h-0 w-0'
+        }
+    },
+    decrementbutton: {
+        root: ({ parent }) => ({
+            class: [
+                // Display
+                'flex flex-auto',
+
+                // Alignment
+                'items-center',
+                'justify-center',
+                'text-center align-bottom',
+
+                //Position
+                'relative',
+                { 'order-1': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
+                { 'order-3': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                //Color
+                'text-surface-800 dark:text-surface-0',
+                'bg-transparent',
+                { 'dark:bg-surface-900': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' },
+                'border border-surface-300 dark:border-surface-700',
+                { 'border-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
+                { 'border-r-0': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' && parent.props.buttonLayout == 'horizontal' },
+                { 'border-t-0': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' && parent.props.buttonLayout == 'vertical' },
+
+                // Sizing
+                'w-[3rem]',
+                { 'px-4 py-3': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' },
+                { 'p-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
+                { 'w-full': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                // Shape
+                'rounded-md',
+                { 'rounded-tr-none rounded-tl-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
+                { 'rounded-tr-none rounded-br-none ': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
+                { 'rounded-tr-none rounded-tl-none ': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                //States
+                'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+
+                //Misc
+                'cursor-pointer overflow-hidden select-none'
+            ]
+        }),
+        label: {
+            class: 'h-0 w-0'
+        }
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/inputotp/index.js b/packages/tailwindcss-presets/src/aura/inputotp/index.js
new file mode 100644
index 000000000..f3e8640e2
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/inputotp/index.js
@@ -0,0 +1,57 @@
+export default {
+    root: {
+        class: [
+            // Alignment
+            'flex items-center',
+            'gap-2'
+        ]
+    },
+    input: {
+        root: ({ props, context, parent }) => ({
+            class: [
+                // Font
+                'leading-none',
+
+                // Flex & Alignment
+                { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+                'text-center',
+
+                // Spacing
+                'm-0',
+                'py-2 px-3',
+
+                // Size
+                'w-10',
+
+                // Shape
+                { 'rounded-md': parent.instance.$name !== 'InputGroup' },
+                { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+                { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
+                { 'first:ml-0 ml-[-1px]': parent.instance.$name == 'InputGroup' && !props.showButtons },
+
+                // Colors
+                'text-surface-800 dark:text-white/80',
+                'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+                { 'bg-surface-0 dark:bg-surface-950': !context.disabled },
+                'border',
+                { 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+                // Invalid State
+                'invalid:focus:ring-red-200',
+                'invalid:hover:border-red-500',
+                { 'border-red-500 dark:border-red-400': props.invalid },
+
+                // States
+                {
+                    'hover:border-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
+                    'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
+                    'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
+                },
+
+                // Misc
+                'appearance-none',
+                'transition-colors duration-200'
+            ]
+        })
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/inputswitch/index.js b/packages/tailwindcss-presets/src/aura/inputswitch/index.js
new file mode 100644
index 000000000..b3cdd9a59
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/inputswitch/index.js
@@ -0,0 +1,79 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'inline-block relative',
+            'w-10 h-6',
+            'rounded-2xl',
+            {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            }
+        ]
+    }),
+    slider: ({ props }) => ({
+        class: [
+            // Position
+            'absolute top-0 left-0 right-0 bottom-0',
+            { 'before:transform before:translate-x-4': props.modelValue == props.trueValue },
+
+            // Shape
+            'rounded-2xl',
+
+            // Before:
+            'before:absolute before:top-1/2 before:left-1',
+            'before:-mt-2',
+            'before:h-4 before:w-4',
+            'before:rounded-full',
+            'before:duration-200',
+            'before:bg-surface-0 before:dark:bg-surface-500',
+
+            // Colors
+            {
+                'bg-surface-300 dark:bg-surface-800': !(props.modelValue == props.trueValue) && !props.invalid,
+                'bg-primary': props.modelValue == props.trueValue && !props.invalid,
+                'before:dark:bg-surface-950': props.modelValue == props.trueValue
+            },
+
+            // Invalid State
+            { 'bg-red-400 dark:bg-red-300': props.invalid },
+            { 'peer-hover:bg-red-500 dark:peer-hover:bg-red-200': props.invalid },
+
+            // States
+            { 'peer-hover:bg-surface-400 dark:peer-hover:bg-surface-700': !(props.modelValue == props.trueValue) && !props.disabled && !props.invalid },
+            { 'peer-hover:bg-primary-hover': props.modelValue == props.trueValue && !props.disabled && !props.invalid },
+            'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400',
+
+            // Transition
+            'transition-colors duration-200',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }),
+    input: {
+        class: [
+            'peer',
+
+            // Size
+            'w-full ',
+            'h-full',
+
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-10',
+
+            // Spacing
+            'p-0',
+            'm-0',
+
+            // Shape
+            'opacity-0',
+            'rounded-2xl',
+            'outline-none',
+
+            // Misc
+            'appearance-none',
+            'cursor-pointer'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/inputtext/index.js b/packages/tailwindcss-presets/src/aura/inputtext/index.js
new file mode 100644
index 000000000..323f4293a
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/inputtext/index.js
@@ -0,0 +1,51 @@
+export default {
+    root: ({ props, context, parent }) => ({
+        class: [
+            // Font
+            'leading-none',
+
+            // Flex
+            { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+
+            // Spacing
+            'm-0',
+            {
+                'py-3 px-3.5': props.size == 'large',
+                'py-1.5 px-2': props.size == 'small',
+                'py-2 px-3': props.size == null
+            },
+
+            // Shape
+            { 'rounded-md': parent.instance.$name !== 'InputGroup' },
+            { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+            { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
+            { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
+
+            // Colors
+            'text-surface-800 dark:text-white/80',
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+            { 'bg-surface-0 dark:bg-surface-950': !context.disabled },
+            'border',
+            { 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+            // Invalid State
+            'invalid:focus:ring-red-200',
+            'invalid:hover:border-red-500',
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'hover:border-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
+                'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
+            },
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && context.filled },
+
+            // Misc
+            'appearance-none',
+            'transition-colors duration-200'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/knob/index.js b/packages/tailwindcss-presets/src/aura/knob/index.js
new file mode 100644
index 000000000..21d2c6181
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/knob/index.js
@@ -0,0 +1,44 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Misc
+            { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    range: {
+        class: [
+            // Stroke
+            'stroke-current',
+
+            // Color
+            'stroke-surface-200 dark:stroke-surface-700',
+
+            // Fill
+            'fill-none',
+
+            // Transition
+            'transition duration-100 ease-in'
+        ]
+    },
+    value: {
+        class: [
+            // Animation
+            'animate-dash-frame',
+
+            // Color
+            'stroke-primary',
+
+            // Fill
+            'fill-none'
+        ]
+    },
+    label: {
+        class: [
+            // Text Style
+            'text-center text-xl',
+
+            // Color
+            'fill-surface-600 dark:fill-surface-200'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/listbox/index.js b/packages/tailwindcss-presets/src/aura/listbox/index.js
new file mode 100644
index 000000000..40da9be77
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/listbox/index.js
@@ -0,0 +1,146 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'rounded-md',
+
+            // Colors
+            { 'bg-surface-0 dark:bg-surface-900': !props.disabled },
+            'text-surface-700 dark:text-white/80',
+            'border',
+            { 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+            // Disabled State
+            { 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid }
+        ]
+    }),
+    wrapper: {
+        class: [
+            // Overflow
+            'overflow-auto'
+        ]
+    },
+    list: {
+        class: 'p-1 list-none m-0 outline-none'
+    },
+    item: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Font
+            'leading-none',
+
+            // Spacing
+            'm-0 px-3 py-2',
+            'first:mt-0 mt-[2px]',
+
+            // Shape
+            'border-0 rounded',
+
+            // Colors
+            {
+                'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
+                'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
+                'text-surface-700 dark:text-white/80': context.focused && !context.selected,
+
+                'text-primary-highlight-inverse': context.selected,
+                'bg-primary-highlight': context.selected
+            },
+
+            //States
+            { 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
+            { 'hover:bg-primary-highlight-hover': context.selected },
+            { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
+
+            // Transition
+            'transition-shadow duration-200',
+
+            // Misc
+            'cursor-pointer overflow-hidden whitespace-nowrap'
+        ]
+    }),
+    itemgroup: {
+        class: [
+            'font-semibold',
+
+            // Spacing
+            'm-0 py-2 px-3',
+
+            // Colors
+            'text-surface-400 dark:text-surface-500',
+
+            // Misc
+            'cursor-auto'
+        ]
+    },
+    emptymessage: {
+        class: [
+            // Font
+            'leading-none',
+
+            // Spacing
+            'py-2 px-3',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-transparent'
+        ]
+    },
+    header: {
+        class: [
+            // Spacing
+            'pt-2 px-2 pb-0',
+            'm-0',
+
+            //Shape
+            'border-b-0',
+            'rounded-tl-md',
+            'rounded-tr-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-900',
+            'border-surface-300 dark:border-surface-700'
+        ]
+    },
+    filtercontainer: {
+        class: 'relative'
+    },
+    filterinput: {
+        class: [
+            // Font
+            'leading-[normal]',
+
+            // Sizing
+            'py-2 pl-3 pr-7',
+            '-mr-7',
+            'w-full',
+
+            //Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-950',
+            'border-surface-200 dark:border-surface-700',
+
+            // Shape
+            'border',
+            'rounded-lg',
+            'appearance-none',
+
+            // Transitions
+            'transition',
+            'duration-200',
+
+            // States
+            'hover:border-surface-400 dark:hover:border-surface-600',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+
+            // Misc
+            'appearance-none'
+        ]
+    },
+    filtericon: {
+        class: ['absolute', 'top-1/2 right-3', '-mt-2']
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/megamenu/index.js b/packages/tailwindcss-presets/src/aura/megamenu/index.js
new file mode 100644
index 000000000..a9fca0910
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/megamenu/index.js
@@ -0,0 +1,196 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Flexbox
+            'flex',
+
+            // Shape & Size
+            'rounded-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            'border border-surface-200 dark:border-surface-700',
+            { 'p-2 items-center': props.orientation == 'horizontal', 'flex-col sm:w-48 p-1': props.orientation !== 'horizontal' }
+        ]
+    }),
+    menu: ({ props }) => ({
+        class: [
+            // Flexbox
+            'sm:flex',
+            'items-center',
+            'flex-wrap',
+            'flex-col sm:flex-row',
+            { hidden: !props?.mobileActive, flex: props?.mobileActive },
+
+            // Position
+            'absolute sm:relative',
+            'top-full left-0',
+            'sm:top-auto sm:left-auto',
+
+            // Size
+            'w-full sm:w-auto',
+
+            // Spacing
+            'm-0',
+            'p-1 sm:py-0 sm:p-0',
+            'list-none',
+
+            // Shape
+            'shadow-md sm:shadow-none',
+            'border-0',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900 sm:bg-transparent dark:sm:bg-transparent',
+
+            // Misc
+            'outline-none'
+        ]
+    }),
+    menuitem: ({ props }) => ({
+        class: [
+            'sm:relative static my-[2px] [&:first-child]:mt-0',
+            {
+                'sm:w-auto w-full': props.horizontal,
+                'w-full': !props.horizontal
+            }
+        ]
+    }),
+    content: ({ context }) => ({
+        class: [
+            'rounded-[4px]',
+
+            //  Colors
+            {
+                'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+                'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
+                'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+            },
+
+            // Hover States
+            {
+                'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
+                'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
+            },
+
+            // Transitions
+            'transition-all',
+            'duration-200'
+        ]
+    }),
+    action: {
+        class: [
+            'relative',
+
+            // Flexbox
+            'flex',
+            'items-center',
+
+            // Spacing
+            'py-2',
+            'px-3',
+
+            // Size
+            'leading-none',
+
+            // Misc
+            'select-none',
+            'cursor-pointer',
+            'no-underline ',
+            'overflow-hidden'
+        ]
+    },
+    icon: {
+        class: 'mr-2'
+    },
+    submenuicon: ({ props }) => ({
+        class: [
+            {
+                'ml-auto sm:ml-2': props.horizontal,
+                'ml-auto': !props.horizontal
+            }
+        ]
+    }),
+    panel: ({ props }) => ({
+        class: [
+            // Size
+            'w-auto',
+
+            // Spacing
+            'm-0',
+
+            // Shape
+            'shadow-none sm:shadow-md',
+
+            'rounded-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+
+            // Position
+            'static sm:absolute',
+            'z-10',
+            {
+                'sm:left-full top-0': !props.horizontal
+            }
+        ]
+    }),
+    grid: {
+        class: 'flex flex-wrap sm:flex-nowrap'
+    },
+    column: {
+        class: 'w-full sm:w-1/2'
+    },
+    submenu: {
+        class: ['m-0 list-none', 'p-1 px-2 w-full sm:min-w-[14rem]']
+    },
+    submenuheader: {
+        class: [
+            'font-semibold',
+
+            // Spacing
+            'py-2 px-3',
+            'm-0',
+
+            // Color
+            'text-surface-400 dark:text-surface-500',
+            'bg-surface-0 dark:bg-surface-900'
+        ]
+    },
+    separator: {
+        class: 'border-t border-surface-200 dark:border-surface-600 my-1'
+    },
+    menubutton: {
+        class: [
+            // Flexbox
+            'flex sm:hidden',
+            'items-center justify-center',
+
+            // Size
+            'w-7',
+            'h-7',
+
+            // Shape
+            'rounded-full',
+            // Color
+            'text-surface-500 dark:text-white/80',
+
+            // States
+            'hover:text-surface-600 dark:hover:text-white/60',
+            'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+            'focus:outline-none focus:outline-offset-0',
+            'focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-pointer',
+            'no-underline'
+        ]
+    },
+    end: {
+        class: 'ml-auto self-center'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/menu/index.js b/packages/tailwindcss-presets/src/aura/menu/index.js
new file mode 100644
index 000000000..0dabd5ba6
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/menu/index.js
@@ -0,0 +1,114 @@
+export default {
+    root: {
+        class: [
+            // Sizing and Shape
+            'min-w-[12.5rem]',
+            'rounded-md',
+
+            // Spacing
+            'p-1',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-white/80',
+            'border border-surface-200 dark:border-surface-700'
+        ]
+    },
+    menu: {
+        class: [
+            // Spacings and Shape
+            'list-none',
+            'm-0',
+            'p-0',
+            'outline-none'
+        ]
+    },
+    menuitem: {
+        class: 'relative my-[2px] [&:first-child]:mt-0'
+    },
+    content: ({ context }) => ({
+        class: [
+            //Shape
+            'rounded-[4px]',
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+            {
+                'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+                'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
+                'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+            },
+
+            // Transitions
+            'transition-shadow',
+            'duration-200',
+
+            // States
+            {
+                'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
+                'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
+            },
+
+            // Disabled
+            { 'opacity-60 pointer-events-none cursor-default': context.disabled }
+        ]
+    }),
+    action: {
+        class: [
+            'relative',
+            // Flexbox
+
+            'flex',
+            'items-center',
+
+            // Spacing
+            'py-2',
+            'px-3',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+
+            // Misc
+            'no-underline',
+            'overflow-hidden',
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    icon: {
+        class: [
+            // Spacing
+            'mr-2',
+
+            // Color
+            'text-surface-600 dark:text-white/70'
+        ]
+    },
+    label: {
+        class: ['leading-[normal]']
+    },
+    submenuheader: {
+        class: [
+            // Font
+            'font-bold',
+
+            // Spacing
+            'm-0',
+            'py-2 px-3',
+
+            // Shape
+            'rounded-tl-none',
+            'rounded-tr-none',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-400 dark:text-surface-600'
+        ]
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/menubar/index.js b/packages/tailwindcss-presets/src/aura/menubar/index.js
new file mode 100644
index 000000000..0ce24db06
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/menubar/index.js
@@ -0,0 +1,177 @@
+export default {
+    root: {
+        class: [
+            'relative',
+
+            // Flexbox
+            'flex',
+            'items-center',
+
+            // Spacing
+            'p-2',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            'border border-surface-200 dark:border-surface-700'
+        ]
+    },
+    menu: ({ props }) => ({
+        class: [
+            // Flexbox
+            'sm:flex',
+            'items-center',
+            'flex-wrap',
+            'flex-col sm:flex-row',
+            { hidden: !props?.mobileActive, flex: props?.mobileActive },
+
+            // Position
+            'absolute sm:relative',
+            'top-full left-0',
+            'sm:top-auto sm:left-auto',
+
+            // Size
+            'w-full sm:w-auto',
+
+            // Spacing
+            'm-0',
+            'p-1 sm:py-0 sm:p-0',
+            'list-none',
+
+            // Shape
+            'shadow-md sm:shadow-none',
+            'border-0',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900 sm:bg-transparent',
+
+            // Misc
+            'outline-none'
+        ]
+    }),
+    menuitem: {
+        class: 'sm:relative sm:w-auto w-full static my-[2px] [&:first-child]:mt-0'
+    },
+    content: ({ props, context }) => ({
+        class: [
+            // Shape
+            'rounded-[4px]',
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+            {
+                'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+                'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
+                'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+            },
+
+            // States
+            {
+                'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
+                'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
+            },
+
+            // Transitions
+            'transition-all',
+            'duration-200'
+        ]
+    }),
+    action: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flexbox
+            'flex',
+            'items-center',
+
+            // Spacing
+            'py-2',
+            'px-3',
+
+            // Size
+            {
+                'pl-9 sm:pl-5': context.level === 1,
+                'pl-14 sm:pl-5': context.level === 2
+            },
+            'leading-none',
+
+            // Misc
+            'select-none',
+            'cursor-pointer',
+            'no-underline ',
+            'overflow-hidden'
+        ]
+    }),
+    icon: {
+        class: 'mr-2'
+    },
+    submenuicon: ({ props }) => ({
+        class: [
+            {
+                'ml-auto sm:ml-2': props.root,
+                'ml-auto': !props.root
+            }
+        ]
+    }),
+    submenu: ({ props }) => ({
+        class: [
+            // Size
+            'rounded-md',
+            'min-w-[12.5rem]',
+
+            // Spacing
+            'p-1',
+            'm-0',
+            'list-none',
+
+            // Shape
+            'shadow-none sm:shadow-md',
+            'border border-surface-200 dark:border-surface-700',
+
+            // Position
+            'static sm:absolute',
+            'z-10',
+            { 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900'
+        ]
+    }),
+    separator: {
+        class: 'border-t border-surface-200 dark:border-surface-600 my-[2px]'
+    },
+    button: {
+        class: [
+            // Flexbox
+            'flex sm:hidden',
+            'items-center justify-center',
+
+            // Size
+            'w-7',
+            'h-7',
+
+            // Shape
+            'rounded-full',
+            // Color
+            'text-surface-500 dark:text-white/80',
+
+            // States
+            'hover:text-surface-600 dark:hover:text-white/60',
+            'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+            'focus:outline-none focus:outline-offset-0',
+            'focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-pointer',
+            'no-underline'
+        ]
+    },
+    end: {
+        class: 'ml-auto self-center'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/message/index.js b/packages/tailwindcss-presets/src/aura/message/index.js
new file mode 100644
index 000000000..3e6b13f8e
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/message/index.js
@@ -0,0 +1,102 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Spacing and Shape
+            'my-4 mx-0',
+            'rounded-md',
+            'border',
+
+            // Colors
+            {
+                'bg-blue-100/70 dark:bg-blue-500/20': props.severity == 'info',
+                'bg-green-100/70 dark:bg-green-500/20': props.severity == 'success',
+                'bg-surface-100/70 dark:bg-surface-500/20': props.severity == 'secondary',
+                'bg-orange-100/70 dark:bg-orange-500/20': props.severity == 'warn',
+                'bg-red-100/70 dark:bg-red-500/20': props.severity == 'error',
+                'bg-surface-950 dark:bg-surface-0': props.severity == 'contrast'
+            },
+            {
+                'border-blue-200 dark:border-blue-500/20': props.severity == 'info',
+                'border-green-200 dark:border-green-500/20': props.severity == 'success',
+                'border-surface-200 dark:border-surface-500/20': props.severity == 'secondary',
+                'border-orange-200 dark:border-orange-500/20': props.severity == 'warn',
+                'border-red-200 dark:border-red-500/20': props.severity == 'error',
+                'border-surface-950 dark:border-surface-0': props.severity == 'contrast'
+            },
+            {
+                'text-blue-700 dark:text-blue-300': props.severity == 'info',
+                'text-green-700 dark:text-green-300': props.severity == 'success',
+                'text-surface-700 dark:text-surface-300': props.severity == 'secondary',
+                'text-orange-700 dark:text-orange-300': props.severity == 'warn',
+                'text-red-700 dark:text-red-300': props.severity == 'error',
+                'text-surface-0 dark:text-surface-950': props.severity == 'contrast'
+            }
+        ]
+    }),
+    wrapper: {
+        class: [
+            // Flexbox
+            'flex items-center',
+
+            // Spacing
+            'py-2 px-3'
+        ]
+    },
+    icon: {
+        class: [
+            // Sizing and Spacing
+            'w-4 h-4',
+            'leading-[normal] mr-2 shrink-0'
+        ]
+    },
+    text: {
+        class: [
+            // Font and Text
+            'text-base leading-[normal]',
+            'font-medium'
+        ]
+    },
+    button: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+
+            // Size
+            'w-7 h-7',
+
+            // Spacing and Misc
+            'ml-auto  relative',
+
+            // Shape
+            'rounded-full',
+
+            // Colors
+            'bg-transparent',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // States
+            'hover:bg-surface-0/30 dark:hover:bg-[rgba(255,255,255,0.03)]',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1',
+            {
+                'focus:ring-blue-500 dark:focus:ring-blue-400': props.severity == 'info',
+                'focus:ring-green-500 dark:focus:ring-green-400': props.severity == 'success',
+                'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity == 'secondary',
+                'focus:ring-orange-500 dark:focus:ring-orange-400': props.severity == 'warn',
+                'focus:ring-red-500 dark:focus:ring-red-4000': props.severity == 'error',
+                'focus:ring-surface-0 dark:focus:ring-surface-950': props.severity == 'contrast'
+            },
+
+            // Misc
+            'overflow-hidden'
+        ]
+    }),
+    transition: {
+        enterFromClass: 'opacity-0',
+        enterActiveClass: 'transition-opacity duration-300',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-300 ease-in',
+        leaveToClass: 'max-h-0 opacity-0 !m-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/metergroup/index.js b/packages/tailwindcss-presets/src/aura/metergroup/index.js
new file mode 100644
index 000000000..2269682d5
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/metergroup/index.js
@@ -0,0 +1,97 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex gap-4',
+
+            { 'flex-col': props.orientation == 'horizontal', 'flex-row': props.orientation == 'vertical' }
+        ]
+    }),
+    metercontainer: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex',
+
+            { 'flex-col': props.orientation === 'vertical' },
+
+            // Sizing
+            { 'w-2 h-full': props.orientation === 'vertical' },
+            { 'h-2': props.orientation === 'horizontal' },
+
+            // Colors
+            'bg-gray-200 dark:bg-gray-700',
+
+            // Border Radius
+            'rounded-lg'
+        ]
+    }),
+    meter: ({ props }) => ({
+        class: [
+            // Shape
+            'border-0',
+
+            // Rounded Corners - Horizontal
+            {
+                'first:rounded-l-lg last:rounded-r-lg': props.orientation === 'horizontal'
+            },
+
+            // Rounded Corners - Vertical
+            {
+                'first:rounded-t-lg last:rounded-b-lg': props.orientation === 'vertical'
+            },
+
+            // Colors
+            'bg-primary'
+        ]
+    }),
+    labellist: ({ props }) => ({
+        class: [
+            // Display & Flexbox
+            'flex flex-wrap',
+
+            { 'gap-4': props.labelOrientation === 'horizontal' },
+
+            { 'gap-2': props.labelOrientation === 'vertical' },
+
+            { 'flex-col': props.labelOrientation === 'vertical' },
+
+            // Conditional Alignment - Horizontal
+            {
+                'align-end': props.labelOrientation === 'horizontal' && props.labelPosition === 'end',
+                'align-start': props.labelOrientation === 'horizontal' && props.labelPosition === 'start'
+            },
+
+            // Conditional Alignment - Vertical
+            {
+                'justify-end': props.labelOrientation === 'vertical' && props.labelPosition === 'end',
+                'justify-start': props.labelOrientation === 'vertical' && props.labelPosition === 'start'
+            },
+
+            // List Styling
+            'm-0 p-0 list-none'
+        ]
+    }),
+    labellistitem: {
+        class: [
+            // Flexbox
+            'inline-flex',
+            'items-center',
+            'gap-2'
+        ]
+    },
+    labellisttype: {
+        class: [
+            // Display
+            'inline-flex',
+
+            // Background Color
+            'bg-primary',
+
+            // Size
+            'w-2 h-2',
+
+            // Rounded Shape
+            'rounded-full'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/multiselect/index.js b/packages/tailwindcss-presets/src/aura/multiselect/index.js
new file mode 100644
index 000000000..f4c40bf60
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/multiselect/index.js
@@ -0,0 +1,543 @@
+export default {
+    root: ({ props, state, parent }) => ({
+        class: [
+            // Font
+            'leading-none',
+
+            // Display and Position
+            'inline-flex',
+            'relative',
+
+            // Shape
+            'rounded-md',
+
+            // Color and Background
+            { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            'invalid:focus:ring-red-200',
+            'invalid:hover:border-red-500',
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // Transitions
+            'transition-all',
+            'duration-200',
+
+            // States
+            { 'hover:border-surface-400 dark:hover:border-surface-700': !props.invalid },
+            { 'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
+
+            // Misc
+            'cursor-pointer',
+            'select-none',
+            { 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    labelContainer: {
+        class: 'overflow-hidden flex flex-auto cursor-pointer '
+    },
+    label: ({ props }) => ({
+        class: [
+            'leading-none',
+            'block',
+
+            // Spacing
+            {
+                'py-2 px-3': props.display === 'comma' || (props.display === 'chip' && !props?.modelValue?.length),
+                'py-1 px-1': props.display === 'chip' && props?.modelValue?.length > 0
+            },
+
+            // Color
+            { 'text-surface-800 dark:text-white/80': props.modelValue?.length, 'text-surface-400 dark:text-surface-500': !props.modelValue?.length },
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+            // Transitions
+            'transition duration-200',
+
+            // Misc
+            'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis'
+        ]
+    }),
+    token: {
+        class: [
+            // Flex
+            'inline-flex items-center',
+
+            // Spacings
+            'py-1 px-3 m-0 mr-1',
+
+            // Shape
+            'rounded',
+
+            // Colors
+            'bg-surface-100 dark:bg-surface-700',
+            'text-surface-700 dark:text-white',
+
+            // Misc
+            'cursor-default'
+        ]
+    },
+    removeTokenIcon: {
+        class: [
+            // Spacing
+            'ml-[0.375rem]',
+
+            // Size
+            'w-4 h-4',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    },
+    trigger: {
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+            'shrink-0',
+
+            // Color and Background
+            'bg-transparent',
+            'text-surface-500',
+
+            // Size
+            'w-12',
+
+            // Shape
+            'rounded-r-md'
+        ]
+    },
+    panel: {
+        class: [
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-white/80',
+
+            // Shape
+            'border border-surface-300 dark:border-surface-700',
+            'rounded-md',
+            'shadow-md'
+        ]
+    },
+    header: {
+        class: [
+            //Flex
+            'flex items-center justify-between',
+
+            // Spacing
+            'pt-2 px-4 pb-0',
+            'm-0',
+
+            //Shape
+            'border-b-0',
+            'rounded-tl-md',
+            'rounded-tr-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-900',
+            'border-surface-300 dark:border-surface-700'
+        ]
+    },
+    headerCheckboxContainer: {
+        class: [
+            'relative',
+
+            // Alignment
+            'inline-flex',
+            'align-bottom',
+
+            // Size
+            'w-5',
+            'h-5',
+
+            // Spacing
+            'mr-2',
+
+            // Misc
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    headerCheckbox: {
+        root: {
+            class: [
+                'relative',
+
+                // Alignment
+                'inline-flex',
+                'align-bottom',
+
+                // Size
+                'w-5',
+                'h-5',
+
+                // Spacing
+                'mr-2',
+
+                // Misc
+                'cursor-pointer',
+                'select-none'
+            ]
+        },
+        box: ({ props, context }) => ({
+            class: [
+                // Alignment
+                'flex',
+                'items-center',
+                'justify-center',
+
+                // Size
+                'w-5',
+                'h-5',
+
+                // Shape
+                'rounded',
+                'border',
+
+                // Colors
+                {
+                    'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
+                    'bg-surface-0 dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
+                    'border-primary bg-primary': context.checked
+                },
+
+                // Invalid State
+                'invalid:focus:ring-red-200',
+                'invalid:hover:border-red-500',
+                { 'border-red-500 dark:border-red-400': props.invalid },
+
+                // States
+                {
+                    'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
+                    'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                    'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
+                    'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+                },
+
+                // Transitions
+                'transition-colors',
+                'duration-200'
+            ]
+        }),
+        input: {
+            class: [
+                'peer',
+
+                // Size
+                'w-full ',
+                'h-full',
+
+                // Position
+                'absolute',
+                'top-0 left-0',
+                'z-10',
+
+                // Spacing
+                'p-0',
+                'm-0',
+
+                // Shape
+                'opacity-0',
+                'rounded',
+                'outline-none',
+                'border border-surface-300 dark:border-surface-700',
+
+                // Misc
+                'appearance-none',
+                'cursor-pointer'
+            ]
+        },
+        icon: {
+            class: [
+                // Size
+                'w-[0.875rem]',
+                'h-[0.875rem]',
+
+                // Colors
+                'text-white dark:text-surface-950',
+
+                // Transitions
+                'transition-all',
+                'duration-200'
+            ]
+        }
+    },
+    itemCheckbox: {
+        root: {
+            class: [
+                'relative',
+
+                // Alignment
+                'inline-flex',
+                'align-bottom',
+
+                // Size
+                'w-5',
+                'h-5',
+
+                // Spacing
+                'mr-2',
+
+                // Misc
+                'cursor-pointer',
+                'select-none'
+            ]
+        },
+        box: ({ props, context }) => ({
+            class: [
+                // Alignment
+                'flex',
+                'items-center',
+                'justify-center',
+
+                // Size
+                'w-5',
+                'h-5',
+
+                // Shape
+                'rounded',
+                'border',
+
+                // Colors
+                {
+                    'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
+                    'bg-surface-0  dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
+                    'border-primary bg-primary': context.checked
+                },
+
+                // Invalid State
+                'invalid:focus:ring-red-200',
+                'invalid:hover:border-red-500',
+                { 'border-red-500 dark:border-red-400': props.invalid },
+
+                // States
+                {
+                    'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
+                    'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                    'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
+                    'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+                },
+
+                // Transitions
+                'transition-colors',
+                'duration-200'
+            ]
+        }),
+        input: {
+            class: [
+                'peer',
+
+                // Size
+                'w-full ',
+                'h-full',
+
+                // Position
+                'absolute',
+                'top-0 left-0',
+                'z-10',
+
+                // Spacing
+                'p-0',
+                'm-0',
+
+                // Shape
+                'opacity-0',
+                'rounded',
+                'outline-none',
+                'border border-surface-300 dark:border-surface-700',
+
+                // Misc
+                'appearance-none',
+                'cursor-pointer'
+            ]
+        },
+        icon: {
+            class: [
+                // Size
+                'w-[0.875rem]',
+                'h-[0.875rem]',
+
+                // Colors
+                'text-white dark:text-surface-950',
+
+                // Transitions
+                'transition-all',
+                'duration-200'
+            ]
+        }
+    },
+    closeButton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Size and Spacing
+            'ml-2',
+            'last:mr-0',
+            'w-8 h-8',
+
+            // Shape
+            'border-0',
+            'rounded-full',
+
+            // Colors
+            'text-surface-500',
+            'bg-transparent',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-surface-800/80',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset',
+            'focus:ring-primary-500 dark:focus:ring-primary-400',
+
+            // Misc
+            'overflow-hidden'
+        ]
+    },
+    closeButtonIcon: {
+        class: 'w-4 h-4 inline-block'
+    },
+    wrapper: {
+        class: [
+            // Sizing
+            'max-h-[200px]',
+
+            // Misc
+            'overflow-auto'
+        ]
+    },
+    list: {
+        class: 'p-1 list-none m-0'
+    },
+    item: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Font
+            'leading-none',
+
+            // Spacing
+            'm-0 px-3 py-2',
+            'first:mt-0 mt-[2px]',
+
+            // Shape
+            'border-0 rounded',
+
+            // Colors
+            {
+                'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
+                'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
+                'text-surface-700 dark:text-white/80': context.focused && !context.selected,
+
+                'text-primary-highlight-inverse': context.selected,
+                'bg-primary-highlight': context.selected
+            },
+
+            //States
+            { 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
+            { 'hover:bg-primary-highlight-hover': context.selected },
+            { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
+
+            // Transition
+            'transition-shadow duration-200',
+
+            // Misc
+            'cursor-pointer overflow-hidden whitespace-nowrap'
+        ]
+    }),
+    itemgroup: {
+        class: [
+            'font-semibold',
+
+            // Spacing
+            'm-0 py-2 px-3',
+
+            // Colors
+            'text-surface-400 dark:text-surface-500',
+
+            // Misc
+            'cursor-auto'
+        ]
+    },
+    filtercontainer: {
+        class: 'relative'
+    },
+    filterinput: {
+        class: [
+            // Font
+            'leading-[normal]',
+
+            // Sizing
+            'py-2 pl-3 pr-7',
+            '-mr-7',
+            'w-full',
+
+            //Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-950',
+            'border-surface-200 dark:border-surface-700',
+
+            // Shape
+            'border',
+            'rounded-lg',
+            'appearance-none',
+
+            // Transitions
+            'transition',
+            'duration-200',
+
+            // States
+            'hover:border-surface-400 dark:hover:border-surface-600',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+
+            // Misc
+            'appearance-none'
+        ]
+    },
+    filtericon: {
+        class: ['absolute', 'top-1/2 right-3', '-mt-2']
+    },
+    clearicon: {
+        class: [
+            // Color
+            'text-surface-400 dark:text-surface-500',
+
+            // Position
+            'absolute',
+            'top-1/2',
+            'right-12',
+
+            // Spacing
+            '-mt-2'
+        ]
+    },
+    emptymessage: {
+        class: [
+            // Font
+            'leading-none',
+
+            // Spacing
+            'py-2 px-3',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-transparent'
+        ]
+    },
+    loadingicon: {
+        class: 'text-surface-400 dark:text-surface-500 animate-spin'
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/orderlist/index.js b/packages/tailwindcss-presets/src/aura/orderlist/index.js
new file mode 100644
index 000000000..24db2692e
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/orderlist/index.js
@@ -0,0 +1,277 @@
+export default {
+    root: {
+        class: [
+            // Flexbox
+            'flex xl:flex-row flex-col'
+        ]
+    },
+    controls: {
+        class: [
+            // Flexbox & Alignment
+            'flex xl:flex-col justify-center gap-2',
+
+            // Spacing
+            'p-[1.125rem]'
+        ]
+    },
+    moveupbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-surface-700 dark:text-surface-0',
+                'bg-surface-100 dark:bg-surface-800',
+                'border border-surface-100 dark:border-surface-800',
+
+                // Spacing & Size
+                'w-10',
+                'm-0',
+                'px-0 py-2',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-500 dark:focus:ring-primary-400',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    movedownbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-surface-700 dark:text-surface-0',
+                'bg-surface-100 dark:bg-surface-800',
+                'border border-surface-100 dark:border-surface-800',
+
+                // Spacing & Size
+                'w-10',
+                'm-0',
+                'px-0 py-2',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-500 dark:focus:ring-primary-400',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    movetopbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-surface-700 dark:text-surface-0',
+                'bg-surface-100 dark:bg-surface-800',
+                'border border-surface-100 dark:border-surface-800',
+
+                // Spacing & Size
+                'w-10',
+                'm-0',
+                'px-0 py-2',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-500 dark:focus:ring-primary-400',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    movebottombutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-surface-700 dark:text-surface-0',
+                'bg-surface-100 dark:bg-surface-800',
+                'border border-surface-100 dark:border-surface-800',
+
+                // Spacing & Size
+                'w-10',
+                'm-0',
+                'px-0 py-2',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-500 dark:focus:ring-primary-400',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    container: {
+        class: [
+            'flex-auto',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            'border border-surface-200 dark:border-surface-700',
+            'outline-none'
+        ]
+    },
+    header: {
+        class: [
+            'font-semibold',
+
+            // Shape
+            'border-0 rounded-t-md',
+
+            // Spacing
+            'pt-3 px-4 pb-2',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-900'
+        ]
+    },
+    list: {
+        class: [
+            // Spacing
+            'list-none m-0',
+            'p-1',
+
+            // Size
+            'min-h-[12rem] max-h-[24rem]',
+
+            // Shape
+            'rounded-b-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-900',
+
+            // Focus & Outline
+            'outline-none',
+
+            // Misc
+            'overflow-auto'
+        ]
+    },
+    item: ({ context }) => ({
+        class: [
+            // Position
+            'relative',
+
+            // Spacing
+            'py-2 px-3 m-0 my-[2px] first:mt-0 last:mb-0',
+
+            // Shape
+            'border-none',
+            'rounded-md',
+
+            // Transition
+            'transition duration-200',
+
+            // Color
+            { 'text-surface-700 dark:text-white/80 bg-surface-0 dark:bg-surface-900': !context.active },
+            { 'text-primary-highlight-inverse bg-primary-highlight': context.active },
+
+            // State
+            {
+                'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
+                'hover:bg-primary-highlight-hover': context.active
+            },
+
+            // Misc
+            'cursor-pointer overflow-hidden'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/organizationchart/index.js b/packages/tailwindcss-presets/src/aura/organizationchart/index.js
new file mode 100644
index 000000000..47b78c9af
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/organizationchart/index.js
@@ -0,0 +1,138 @@
+export default {
+    table: {
+        class: [
+            // Spacing & Position
+            'mx-auto my-0',
+
+            // Table Style
+            'border-spacing-0 border-separate'
+        ]
+    },
+    cell: {
+        class: [
+            // Alignment
+            'text-center align-top',
+
+            // Spacing
+            'py-0 px-3'
+        ]
+    },
+    node: ({ context }) => ({
+        class: [
+            'relative inline-block',
+
+            // Spacing
+            'py-3 px-4',
+
+            // Shape
+            'border',
+            'rounded-md',
+            'border-surface-200 dark:border-surface-700',
+            // Color
+            {
+                'text-surface-600 dark:text-white/80': !context?.selected,
+                'bg-surface-0 dark:bg-surface-900': !context?.selected,
+                'text-primary-highlight-inverse': context?.selected,
+                'bg-primary-highlight': context?.selected
+            },
+
+            // States
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-800': context?.selectable && !context?.selected,
+                'hover:bg-primary-highlight-hover': context?.selectable && context?.selected
+            },
+
+            { 'cursor-pointer': context?.selectable }
+        ]
+    }),
+    linecell: {
+        class: [
+            // Alignment
+            'text-center align-top',
+
+            // Spacing
+            'py-0 px-3'
+        ]
+    },
+    linedown: {
+        class: [
+            // Spacing
+            'mx-auto my-0',
+
+            // Size
+            'w-px h-[20px]',
+
+            // Color
+            'bg-surface-200 dark:bg-surface-700'
+        ]
+    },
+    lineleft: ({ context }) => ({
+        class: [
+            // Alignment
+            'text-center align-top',
+
+            // Spacing
+            'py-0 px-3',
+
+            // Shape
+            'rounded-none border-r',
+            { 'border-t': context.lineTop },
+
+            // Color
+            'border-surface-200 dark:border-surface-700'
+        ]
+    }),
+    lineright: ({ context }) => ({
+        class: [
+            // Alignment
+            'text-center align-top',
+
+            // Spacing
+            'py-0 px-3',
+
+            // Shape
+            'rounded-none',
+
+            // Color
+            { 'border-t border-surface-200 dark:border-surface-700': context.lineTop }
+        ]
+    }),
+    nodecell: {
+        class: 'text-center align-top py-0 px-3'
+    },
+    nodetoggler: {
+        class: [
+            // Position
+            'absolute bottom-[-0.75rem] left-2/4 -ml-3',
+            'z-20',
+
+            // Flexbox
+            'flex items-center justify-center',
+
+            // Size
+            'w-6 h-6',
+
+            // Shape
+            'rounded-full',
+            'border border-surface-200 dark:border-surface-700',
+
+            // Color
+            'bg-inherit text-inherit',
+
+            // Focus
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+            // Misc
+            'cursor-pointer no-underline select-none'
+        ]
+    },
+    nodetogglericon: {
+        class: [
+            // Position
+            'static inline-block',
+
+            // Size
+            'w-4 h-4'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/overlaypanel/index.js b/packages/tailwindcss-presets/src/aura/overlaypanel/index.js
new file mode 100644
index 000000000..f4208cf9b
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/overlaypanel/index.js
@@ -0,0 +1,29 @@
+export default {
+    root: {
+        class: [
+            // Shape
+            'rounded-md shadow-lg',
+
+            // Position
+            'absolute left-0 top-0 mt-2',
+            'z-40 transform origin-center',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-surface-0/80',
+
+            // Before: Arrow
+            'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-[calc(var(--overlayArrowLeft,0)+1.25rem)] before:border-x-[10px] before:border-b-[10px] before:border-t-0 before:border-b-surface-200 dark:before:border-b-surface-700',
+            'after:absolute after:w-0 after:-top-[0.54rem] after:h-0 after:border-transparent after:border-solid after:ml-[calc(var(--overlayArrowLeft,0)+1.3rem)] after:border-x-[9px] after:border-b-[8px] after:border-t-0 after:border-b-surface-0 dark:after:border-b-surface-900'
+        ]
+    },
+    content: {
+        class: ['p-5 items-center flex', 'rounded-lg', 'border border-surface-200 dark:border-surface-700']
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/paginator/index.js b/packages/tailwindcss-presets/src/aura/paginator/index.js
new file mode 100644
index 000000000..1aa971354
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/paginator/index.js
@@ -0,0 +1,526 @@
+export default {
+    root: {
+        class: [
+            // Flex & Alignment
+            'flex items-center justify-center flex-wrap',
+
+            // Spacing
+            'px-4 py-2',
+
+            // Shape
+            'border-0 rounded-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-500 dark:text-white/60'
+        ]
+    },
+    firstpagebutton: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full',
+
+            // Size
+            'min-w-[2.5rem] h-10 m-[0.143rem]',
+            'leading-none',
+
+            // Color
+            'text-surface-500 dark:text-white/60',
+
+            // State
+            {
+                'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled
+            },
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'user-none overflow-hidden',
+            { 'cursor-default pointer-events-none opacity-60': context.disabled }
+        ]
+    }),
+    previouspagebutton: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full',
+
+            // Size
+            'min-w-[2.5rem] h-10 m-[0.143rem]',
+            'leading-none',
+
+            // Color
+            'text-surface-500 dark:text-white/60',
+
+            // State
+            {
+                'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled
+            },
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'user-none overflow-hidden',
+            { 'cursor-default pointer-events-none opacity-60': context.disabled }
+        ]
+    }),
+    nextpagebutton: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full',
+
+            // Size
+            'min-w-[2.5rem] h-10 m-[0.143rem]',
+            'leading-none',
+
+            // Color
+            'text-surface-500 dark:text-white/60',
+
+            // State
+            {
+                'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled
+            },
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'user-none overflow-hidden',
+            { 'cursor-default pointer-events-none opacity-60': context.disabled }
+        ]
+    }),
+    lastpagebutton: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full',
+
+            // Size
+            'min-w-[2.5rem] h-10 m-[0.143rem]',
+            'leading-none',
+
+            // Color
+            'text-surface-500 dark:text-white/60',
+
+            // State
+            {
+                'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled
+            },
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'user-none overflow-hidden',
+            { 'cursor-default pointer-events-none opacity-60': context.disabled }
+        ]
+    }),
+    pagebutton: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full',
+
+            // Size
+            'min-w-[2.5rem] h-10 m-[0.143rem]',
+            'leading-none',
+
+            // Color
+            'text-surface-500 dark:text-white/60',
+
+            // State
+            {
+                'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled
+            },
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'user-none overflow-hidden',
+            { 'cursor-default pointer-events-none opacity-60': context.disabled }
+        ]
+    }),
+    rowperpagedropdown: {
+        root: ({ props, state }) => ({
+            class: [
+                // Display and Position
+                'inline-flex',
+                'relative',
+
+                // Shape
+                'h-10',
+                'rounded-md',
+
+                // Spacing
+                'mx-2',
+
+                // Color and Background
+                'bg-surface-0 dark:bg-surface-950',
+                'border border-surface-300 dark:border-surface-700',
+
+                // Transitions
+                'transition-all',
+                'duration-200',
+
+                // States
+                'hover:border-surface-400 dark:hover:border-surface-600',
+                { 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !state.focused },
+
+                // Misc
+                'cursor-pointer',
+                'select-none',
+                { 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
+            ]
+        }),
+        input: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Display
+                'block',
+                'flex-auto',
+
+                // Color and Background
+                'bg-transparent',
+                'border-0',
+                'text-surface-800 dark:text-white/80',
+
+                // Sizing and Spacing
+                'w-[1%]',
+                'py-2 pl-3 pr-0',
+
+                //Shape
+                'rounded-none',
+
+                // Transitions
+                'transition',
+                'duration-200',
+
+                // States
+                'focus:outline-none focus:shadow-none',
+
+                // Misc
+                'relative',
+                'cursor-pointer',
+                'overflow-hidden overflow-ellipsis',
+                'whitespace-nowrap',
+                'appearance-none'
+            ]
+        },
+        trigger: {
+            class: [
+                // Flexbox
+                'flex items-center justify-center',
+                'shrink-0',
+
+                // Color and Background
+                'bg-transparent',
+                'text-surface-500',
+
+                // Size
+                'w-10',
+
+                // Shape
+                'rounded-tr-md',
+                'rounded-br-md'
+            ]
+        },
+        panel: {
+            class: [
+                // Colors
+                'bg-surface-0 dark:bg-surface-900',
+                'text-surface-700 dark:text-white/80',
+
+                // Shape
+                'border border-surface-300 dark:border-surface-700',
+                'rounded-md',
+                'shadow-md'
+            ]
+        },
+        wrapper: {
+            class: [
+                // Sizing
+                'max-h-[200px]',
+
+                // Misc
+                'overflow-auto'
+            ]
+        },
+        list: {
+            class: 'p-1 list-none m-0'
+        },
+        item: ({ context }) => ({
+            class: [
+                'relative',
+
+                // Font
+                'leading-none',
+
+                // Spacing
+                'm-0 px-3 py-2',
+                'first:mt-0 mt-[2px]',
+
+                // Shape
+                'border-0 rounded',
+
+                // Colors
+                {
+                    'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
+                    'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
+                    'text-surface-700 dark:text-white/80': context.focused && !context.selected,
+
+                    'text-primary-highlight-inverse': context.selected,
+                    'bg-primary-highlight': context.selected
+                },
+
+                //States
+                { 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
+                { 'hover:bg-primary-highlight-hover': context.selected },
+                { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
+
+                // Transitions
+                'transition-shadow',
+                'duration-200',
+
+                // Misc
+                'cursor-pointer',
+                'overflow-hidden',
+                'whitespace-nowrap'
+            ]
+        })
+    },
+    jumptopageinput: {
+        root: {
+            class: 'inline-flex mx-2'
+        },
+        input: {
+            root: {
+                class: [
+                    'relative',
+
+                    //Font
+                    'leading-none',
+
+                    // Display
+                    'block',
+                    'flex-auto',
+
+                    // Colors
+                    'text-surface-600 dark:text-surface-200',
+                    'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+                    'bg-surface-0 dark:bg-surface-950',
+                    'border border-surface-300 dark:border-surface-700',
+
+                    // Sizing and Spacing
+                    'w-[1%] max-w-[3rem]',
+                    'py-2 px-3 m-0',
+
+                    //Shape
+                    'rounded-md',
+
+                    // Transitions
+                    'transition',
+                    'duration-200',
+
+                    // States
+                    'hover:border-surface-400 dark:hover:border-surface-600',
+                    'focus:outline-none focus:shadow-none',
+                    'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+                    // Misc
+                    'cursor-pointer',
+                    'overflow-hidden overflow-ellipsis',
+                    'whitespace-nowrap',
+                    'appearance-none'
+                ]
+            }
+        }
+    },
+    jumptopagedropdown: {
+        root: ({ props, state }) => ({
+            class: [
+                // Display and Position
+                'inline-flex',
+                'relative',
+
+                // Shape
+                'h-10',
+                'rounded-md',
+
+                // Spacing
+                'mx-2',
+
+                // Color and Background
+                'bg-surface-0 dark:bg-surface-950',
+                'border border-surface-300 dark:border-surface-700',
+
+                // Transitions
+                'transition-all',
+                'duration-200',
+
+                // States
+                'hover:border-surface-400 dark:hover:border-surface-600',
+                { 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !state.focused },
+
+                // Misc
+                'cursor-pointer',
+                'select-none',
+                { 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
+            ]
+        }),
+        input: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Display
+                'block',
+                'flex-auto',
+
+                // Color and Background
+                'bg-transparent',
+                'border-0',
+                'text-surface-800 dark:text-white/80',
+
+                // Sizing and Spacing
+                'w-[1%]',
+                'py-2 pl-3 pr-0',
+
+                //Shape
+                'rounded-none',
+
+                // Transitions
+                'transition',
+                'duration-200',
+
+                // States
+                'focus:outline-none focus:shadow-none',
+
+                // Misc
+                'relative',
+                'cursor-pointer',
+                'overflow-hidden overflow-ellipsis',
+                'whitespace-nowrap',
+                'appearance-none'
+            ]
+        },
+        trigger: {
+            class: [
+                // Flexbox
+                'flex items-center justify-center',
+                'shrink-0',
+
+                // Color and Background
+                'bg-transparent',
+                'text-surface-500',
+
+                // Size
+                'w-10',
+
+                // Shape
+                'rounded-tr-md',
+                'rounded-br-md'
+            ]
+        },
+        panel: {
+            class: [
+                // Colors
+                'bg-surface-0 dark:bg-surface-900',
+                'text-surface-700 dark:text-white/80',
+
+                // Shape
+                'border border-surface-300 dark:border-surface-700',
+                'rounded-md',
+                'shadow-md'
+            ]
+        },
+        wrapper: {
+            class: [
+                // Sizing
+                'max-h-[200px]',
+
+                // Misc
+                'overflow-auto'
+            ]
+        },
+        list: {
+            class: 'p-1 list-none m-0'
+        },
+        item: ({ context }) => ({
+            class: [
+                'relative',
+
+                // Font
+                'leading-none',
+
+                // Spacing
+                'm-0 px-3 py-2',
+                'first:mt-0 mt-[2px]',
+
+                // Shape
+                'border-0 rounded',
+
+                // Colors
+                {
+                    'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
+                    'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
+                    'text-surface-700 dark:text-white/80': context.focused && !context.selected,
+
+                    'text-primary-highlight-inverse': context.selected,
+                    'bg-primary-highlight': context.selected
+                },
+
+                //States
+                { 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
+                { 'hover:bg-primary-highlight-hover': context.selected },
+                { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
+
+                // Transitions
+                'transition-shadow',
+                'duration-200',
+
+                // Misc
+                'cursor-pointer',
+                'overflow-hidden',
+                'whitespace-nowrap'
+            ]
+        })
+    },
+    start: {
+        class: 'mr-auto'
+    },
+    end: {
+        class: 'ml-auto'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/panel/index.js b/packages/tailwindcss-presets/src/aura/panel/index.js
new file mode 100644
index 000000000..9bd92d21e
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/panel/index.js
@@ -0,0 +1,97 @@
+export default {
+    root: {
+        class: [
+            //Shape
+            'rounded-md',
+
+            //Colors
+            'border border-surface-200 dark:border-surface-700',
+            'bg-surface-0 dark:bg-surface-900'
+        ]
+    },
+    header: ({ props }) => ({
+        class: [
+            // Flex
+            'flex items-center justify-between',
+
+            // Colors
+            'text-surface-700 dark:text-surface-0/80',
+            'bg-transparent',
+
+            //Shape
+            'rounded-tl-md rounded-tr-md',
+            'border-0',
+
+            // Conditional Spacing
+            { 'p-[1.125rem]': !props.toggleable, 'py-3 px-[1.125rem]': props.toggleable }
+        ]
+    }),
+    title: {
+        class: 'leading-none font-semibold'
+    },
+    toggler: {
+        class: [
+            // Alignments
+            'inline-flex items-center justify-center',
+            'relative',
+
+            // Sized
+            'w-7 h-7',
+            'm-0 p-0',
+
+            //Shape
+            'border-0 rounded-full',
+
+            //Color
+            'bg-transparent',
+            'text-surface-600 dark:text-surface-0/80',
+
+            // States
+            'hover:text-surface-800 dark:hover:text-surface-0',
+            'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]',
+            'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
+
+            // Transitions
+            'transition-all duration-200 ease-in-out',
+
+            // Misc
+            'overflow-hidden no-underline',
+            'cursor-pointer'
+        ]
+    },
+    togglerIcon: {
+        class: 'inline-block w-4 h-4'
+    },
+    content: {
+        class: [
+            // Spacing
+            'p-[1.125rem] pt-0',
+
+            // Shape
+            'border-0 border-t-0 last:rounded-br-md last:rounded-bl-md',
+
+            //Color
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    footer: {
+        class: [
+            // Spacing
+            'p-[1.125rem] pt-0',
+
+            // Shape
+            'border-0 border-t-0 rounded-br-lg rounded-bl-lg',
+
+            //Color
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    transition: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+        enterToClass: 'max-h-[1000px]',
+        leaveFromClass: 'max-h-[1000px]',
+        leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+        leaveToClass: 'max-h-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/panelmenu/index.js b/packages/tailwindcss-presets/src/aura/panelmenu/index.js
new file mode 100644
index 000000000..ecb412e29
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/panelmenu/index.js
@@ -0,0 +1,126 @@
+export default {
+    panel: {
+        class: 'p-1 overflow-hidden mb-3 border border-surface-200 dark:border-surface-700 rounded-md'
+    },
+    header: {
+        class: ['rounded-[4px]', 'outline-none']
+    },
+    headercontent: ({ context, instance }) => ({
+        class: [
+            // Shape
+            'rounded-[4px]',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-600 dark:text-surface-0/80',
+            { 'text-surface-900': context.active },
+
+            // States
+            'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+            'hover:text-surface-900',
+
+            // Transition
+            'transition duration-200 ease-in-out',
+            'transition-shadow duration-200'
+        ]
+    }),
+    headeraction: {
+        class: [
+            'relative',
+
+            // Font
+            'font-semibold',
+            'leading-none',
+
+            // Flex & Alignments
+            'flex items-center',
+
+            // Spacing
+            'py-2 px-3',
+
+            // Misc
+            'select-none cursor-pointer no-underline'
+        ]
+    },
+    headerlabel: {
+        class: 'leading-none'
+    },
+    headerIcon: {
+        class: 'mr-2'
+    },
+    submenuicon: {
+        class: 'mr-2'
+    },
+    menucontent: {
+        class: [
+            // Spacing
+            'pl-4',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-900'
+        ]
+    },
+    menu: {
+        class: ['outline-none', 'm-0 p-0 list-none']
+    },
+    menuitem: {
+        class: 'relative my-[2px]'
+    },
+    content: {
+        class: [
+            // Shape
+            'border-none rounded-[4px]',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+
+            // Transition
+            'transition-shadow duration-200'
+        ]
+    },
+    action: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Font
+            'leading-none',
+
+            // Flex & Alignments
+            'flex items-center',
+
+            // Spacing
+            'py-2 px-3',
+
+            // Shape
+            'rounded-[4px]',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+
+            // States
+            'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)] hover:text-surface-700 dark:hover:text-white/80',
+            {
+                'bg-surface-200 text-surface-700 dark:text-white/80 dark:bg-surface-0/10': context.focused
+            },
+
+            // Misc
+            'cursor-pointer no-underline',
+            'select-none overflow-hidden'
+        ]
+    }),
+    icon: {
+        class: 'mr-2'
+    },
+    submenu: {
+        class: 'p-0 pl-4 m-0 list-none'
+    },
+    transition: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+        enterToClass: 'max-h-[1000px]',
+        leaveFromClass: 'max-h-[1000px]',
+        leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+        leaveToClass: 'max-h-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/password/index.js b/packages/tailwindcss-presets/src/aura/password/index.js
new file mode 100644
index 000000000..cfc3dda4b
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/password/index.js
@@ -0,0 +1,117 @@
+export default {
+    root: ({ props }) => ({
+        class: ['inline-flex relative', { '[&>input]:pr-10': props.toggleMask }]
+    }),
+    panel: {
+        class: [
+            // Spacing
+            'p-3',
+
+            // Shape
+            'border',
+            'shadow-md rounded-md',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-white/80',
+            'border-surface-200 dark:border-surface-700'
+        ]
+    },
+    meter: {
+        class: [
+            // Position and Overflow
+            'overflow-hidden',
+            'relative',
+
+            // Shape and Size
+            'border-0',
+            'h-[10px]',
+            'rounded-md',
+
+            // Spacing
+            'mb-3',
+
+            // Colors
+            'bg-surface-100 dark:bg-surface-700'
+        ]
+    },
+    meterlabel: ({ instance }) => ({
+        class: [
+            // Size
+            'h-full',
+
+            // Colors
+            {
+                'bg-red-500 dark:bg-red-400/50': instance?.meter?.strength == 'weak',
+                'bg-orange-500 dark:bg-orange-400/50': instance?.meter?.strength == 'medium',
+                'bg-green-500 dark:bg-green-400/50': instance?.meter?.strength == 'strong'
+            },
+
+            // Transitions
+            'transition-all duration-1000 ease-in-out'
+        ]
+    }),
+    showicon: {
+        class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70']
+    },
+    hideicon: {
+        class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70']
+    },
+    input: {
+        root: ({ props, context, parent }) => ({
+            class: [
+                // Font
+                'leading-none',
+
+                // Flex
+                { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+
+                // Spacing
+                'm-0',
+                {
+                    'py-3 px-3.5': props.size == 'large',
+                    'py-1.5 px-2': props.size == 'small',
+                    'py-2 px-3': props.size == null
+                },
+
+                // Shape
+                { 'rounded-md': parent.instance.$name !== 'InputGroup' },
+                { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+                { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
+                { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
+
+                // Colors
+                'text-surface-800 dark:text-white/80',
+                'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+                { 'bg-surface-0 dark:bg-surface-950': !context.disabled },
+                'border',
+                { 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+                // Invalid State
+                'invalid:focus:ring-red-200',
+                'invalid:hover:border-red-500',
+                { 'border-red-500 dark:border-red-400': props.invalid },
+
+                // States
+                {
+                    'hover:border-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
+                    'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
+                    'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
+                },
+
+                // Filled State *for FloatLabel
+                { filled: parent.instance?.$parentInstance?.$name == 'FloatLabel' && parent.props.modelValue !== null && parent.props.modelValue?.length !== 0 },
+
+                // Misc
+                'appearance-none',
+                'transition-colors duration-200'
+            ]
+        })
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/picklist/index.js b/packages/tailwindcss-presets/src/aura/picklist/index.js
new file mode 100644
index 000000000..cc9b48e69
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/picklist/index.js
@@ -0,0 +1,714 @@
+export default {
+    root: {
+        class: [
+            // Flexbox
+            'flex xl:flex-row flex-col'
+        ]
+    },
+    sourcecontrols: {
+        class: [
+            // Flexbox & Alignment
+            'flex xl:flex-col justify-center gap-2',
+
+            // Spacing
+            'p-[1.125rem]'
+        ]
+    },
+    sourcemoveupbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-surface-700 dark:text-surface-0',
+                'bg-surface-100 dark:bg-surface-800',
+                'border border-surface-100 dark:border-surface-800',
+
+                // Spacing & Size
+                'w-10',
+                'm-0',
+                'px-0 py-2',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-500 dark:focus:ring-primary-400',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    sourcemovetopbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-surface-700 dark:text-surface-0',
+                'bg-surface-100 dark:bg-surface-800',
+                'border border-surface-100 dark:border-surface-800',
+
+                // Spacing & Size
+                'w-10',
+                'm-0',
+                'px-0 py-2',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-500 dark:focus:ring-primary-400',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    sourcemovedownbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-surface-700 dark:text-surface-0',
+                'bg-surface-100 dark:bg-surface-800',
+                'border border-surface-100 dark:border-surface-800',
+
+                // Spacing & Size
+                'w-10',
+                'm-0',
+                'px-0 py-2',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-500 dark:focus:ring-primary-400',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    sourcemovebottombutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-surface-700 dark:text-surface-0',
+                'bg-surface-100 dark:bg-surface-800',
+                'border border-surface-100 dark:border-surface-800',
+
+                // Spacing & Size
+                'w-10',
+                'm-0',
+                'px-0 py-2',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-500 dark:focus:ring-primary-400',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    sourcewrapper: {
+        class: [
+            // Flexbox
+            'grow shrink basis-2/4',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            'border border-surface-200 dark:border-surface-700',
+            'outline-none'
+        ]
+    },
+    sourceheader: {
+        class: [
+            'font-semibold',
+
+            // Shape
+            'border-0 rounded-t-md',
+
+            // Spacing
+            'pt-3 px-4 pb-2',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-900'
+        ]
+    },
+    sourcelist: {
+        class: [
+            // Spacing
+            'list-none m-0',
+            'p-1',
+
+            // Size
+            'min-h-[12rem] max-h-[24rem]',
+
+            // Shape
+            'rounded-b-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-900',
+
+            // Focus & Outline
+            'outline-none',
+
+            // Misc
+            'overflow-auto'
+        ]
+    },
+    item: ({ context }) => ({
+        class: [
+            // Position
+            'relative',
+
+            // Spacing
+            'py-2 px-3 m-0 my-[2px] first:mt-0 last:mb-0',
+
+            // Shape
+            'border-none',
+            'rounded-md',
+
+            // Transition
+            'transition duration-200',
+
+            // Color
+            { 'text-surface-700 dark:text-white/80 bg-surface-0 dark:bg-surface-900': !context.active },
+            { 'text-primary-highlight-inverse bg-primary-highlight': context.active },
+
+            // State
+            {
+                'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
+                'hover:bg-primary-highlight-hover': context.active
+            },
+
+            // Misc
+            'cursor-pointer overflow-hidden'
+        ]
+    }),
+    buttons: {
+        class: [
+            // Flexbox & Alignment
+            'flex xl:flex-col justify-center gap-2',
+
+            // Spacing
+            'p-[1.125rem]'
+        ]
+    },
+    movetotargetbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-surface-700 dark:text-surface-0',
+                'bg-surface-100 dark:bg-surface-800',
+                'border border-surface-100 dark:border-surface-800',
+
+                // Spacing & Size
+                'w-10',
+                'm-0',
+                'px-0 py-2',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-500 dark:focus:ring-primary-400',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    movealltotargetbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-surface-700 dark:text-surface-0',
+                'bg-surface-100 dark:bg-surface-800',
+                'border border-surface-100 dark:border-surface-800',
+
+                // Spacing & Size
+                'w-10',
+                'm-0',
+                'px-0 py-2',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-500 dark:focus:ring-primary-400',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    movetosourcebutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-surface-700 dark:text-surface-0',
+                'bg-surface-100 dark:bg-surface-800',
+                'border border-surface-100 dark:border-surface-800',
+
+                // Spacing & Size
+                'w-10',
+                'm-0',
+                'px-0 py-2',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-500 dark:focus:ring-primary-400',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    movealltosourcebutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-surface-700 dark:text-surface-0',
+                'bg-surface-100 dark:bg-surface-800',
+                'border border-surface-100 dark:border-surface-800',
+
+                // Spacing & Size
+                'w-10',
+                'm-0',
+                'px-0 py-2',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-500 dark:focus:ring-primary-400',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    targetcontrols: {
+        class: [
+            // Flexbox & Alignment
+            'flex xl:flex-col justify-center gap-2',
+
+            // Spacing
+            'p-[1.125rem]'
+        ]
+    },
+    targetmoveupbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-surface-700 dark:text-surface-0',
+                'bg-surface-100 dark:bg-surface-800',
+                'border border-surface-100 dark:border-surface-800',
+
+                // Spacing & Size
+                'w-10',
+                'm-0',
+                'px-0 py-2',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-500 dark:focus:ring-primary-400',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    targetmovetopbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-surface-700 dark:text-surface-0',
+                'bg-surface-100 dark:bg-surface-800',
+                'border border-surface-100 dark:border-surface-800',
+
+                // Spacing & Size
+                'w-10',
+                'm-0',
+                'px-0 py-2',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-500 dark:focus:ring-primary-400',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    targetmovedownbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-surface-700 dark:text-surface-0',
+                'bg-surface-100 dark:bg-surface-800',
+                'border border-surface-100 dark:border-surface-800',
+
+                // Spacing & Size
+                'w-10',
+                'm-0',
+                'px-0 py-2',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-500 dark:focus:ring-primary-400',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    targetmovebottombutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-surface-700 dark:text-surface-0',
+                'bg-surface-100 dark:bg-surface-800',
+                'border border-surface-100 dark:border-surface-800',
+
+                // Spacing & Size
+                'w-10',
+                'm-0',
+                'px-0 py-2',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-500 dark:focus:ring-primary-400',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    targetwrapper: {
+        class: [
+            // Flexbox
+            'grow shrink basis-2/4',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            'border border-surface-200 dark:border-surface-700',
+            'outline-none'
+        ]
+    },
+    targetheader: {
+        class: [
+            'font-semibold',
+
+            // Shape
+            'border-0 rounded-t-md',
+
+            // Spacing
+            'pt-3 px-4 pb-2',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-900'
+        ]
+    },
+    targetlist: {
+        class: [
+            // Spacing
+            'list-none m-0',
+            'p-1',
+
+            // Size
+            'min-h-[12rem] max-h-[24rem]',
+
+            // Shape
+            'rounded-b-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-900',
+
+            // Focus & Outline
+            'outline-none',
+
+            // Misc
+            'overflow-auto'
+        ]
+    },
+    transition: {
+        enterFromClass: '!transition-none',
+        enterActiveClass: '!transition-none',
+        leaveActiveClass: '!transition-none',
+        leaveToClass: '!transition-none'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/progressbar/index.js b/packages/tailwindcss-presets/src/aura/progressbar/index.js
new file mode 100644
index 000000000..7cc565a3a
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/progressbar/index.js
@@ -0,0 +1,58 @@
+export default {
+    root: {
+        class: [
+            // Position and Overflow
+            'overflow-hidden',
+            'relative',
+
+            // Shape and Size
+            'border-0',
+            'h-5',
+            'rounded-md',
+
+            // Colors
+            'bg-surface-100 dark:bg-surface-800'
+        ]
+    },
+    value: ({ props }) => ({
+        class: [
+            // Flexbox & Overflow & Position
+            { 'absolute flex items-center justify-center overflow-hidden': props.mode !== 'indeterminate' },
+
+            // Colors
+            'bg-primary',
+
+            // Spacing & Sizing
+            'm-0',
+            { 'h-full w-0': props.mode !== 'indeterminate' },
+
+            // Shape
+            'border-0',
+
+            // Transitions
+            {
+                'transition-width duration-1000 ease-in-out': props.mode !== 'indeterminate',
+                'progressbar-value-animate': props.mode == 'indeterminate'
+            },
+
+            // Before & After (indeterminate)
+            {
+                'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit ': props.mode == 'indeterminate',
+                'after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': props.mode == 'indeterminate'
+            }
+        ]
+    }),
+    label: {
+        class: [
+            //Font
+            'text-xs font-semibold',
+
+            // Flexbox
+            'inline-flex',
+
+            // Font and Text
+            'text-white dark:text-surface-900',
+            'leading-5'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/progressspinner/index.js b/packages/tailwindcss-presets/src/aura/progressspinner/index.js
new file mode 100644
index 000000000..4e1faec86
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/progressspinner/index.js
@@ -0,0 +1,51 @@
+export default {
+    root: {
+        class: [
+            // Position
+            'relative',
+            'mx-auto',
+
+            // Sizing
+            'w-28',
+            'h-28',
+
+            // Flexbox
+            'inline-block',
+
+            // Pseudo-Elements
+            'before:block',
+            'before:pt-full'
+        ]
+    },
+    spinner: {
+        class: [
+            // Position
+            'absolute',
+            'top-0',
+            'bottom-0',
+            'left-0',
+            'right-0',
+            'm-auto',
+
+            // Sizing
+            'w-full',
+            'h-full',
+
+            // Transformations
+            'transform',
+            'origin-center',
+
+            // Animations
+            'animate-spin'
+        ]
+    },
+    circle: {
+        class: [
+            // Colors
+            'text-red-500',
+
+            // Misc
+            'progress-spinner-circle'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/radiobutton/index.js b/packages/tailwindcss-presets/src/aura/radiobutton/index.js
new file mode 100644
index 000000000..9fa627ca4
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/radiobutton/index.js
@@ -0,0 +1,103 @@
+export default {
+    root: {
+        class: [
+            'relative',
+
+            // Flexbox & Alignment
+            'inline-flex',
+            'align-bottom',
+
+            // Size
+            'w-5 h-5',
+
+            // Misc
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    box: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex justify-center items-center',
+
+            // Size
+            'w-5 h-5',
+
+            // Shape
+            'border',
+            'rounded-full',
+
+            // Transition
+            'transition duration-200 ease-in-out',
+
+            // Colors
+            { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+            {
+                'text-surface-700 dark:text-white/80': props.value !== props.modelValue && props.value !== undefined,
+                'border-surface-300 dark:border-surface-700': props.value !== props.modelValue && props.value !== undefined && !props.invalid,
+                'border-primary': props.value == props.modelValue && props.value !== undefined && !props.disabled
+            },
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'peer-hover:border-surface-400 dark:peer-hover:border-surface-400': !props.disabled && !props.invalid && props.value !== props.modelValue,
+                'peer-hover:border-primary-hover': !props.disabled && props.value == props.modelValue && props.value !== undefined,
+                'peer-hover:[&>*:first-child]:bg-primary-600 dark:peer-hover:[&>*:first-child]:bg-primary-300': !props.disabled && props.value == props.modelValue && props.value !== undefined,
+                'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
+                'bg-surface-200 [&>*:first-child]:bg-surface-600 dark:bg-surface-700 dark:[&>*:first-child]:bg-surface-400 border-surface-300 dark:border-surface-700 select-none pointer-events-none cursor-default': props.disabled
+            }
+        ]
+    }),
+    input: {
+        class: [
+            'peer',
+
+            // Size
+            'w-full ',
+            'h-full',
+
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-10',
+
+            // Spacing
+            'p-0',
+            'm-0',
+
+            // Shape
+            'opacity-0',
+            'rounded-md',
+            'outline-none',
+            'border-1 border-surface-200 dark:border-surface-700',
+
+            // Misc
+            'appearance-none',
+            'cursor-pointer'
+        ]
+    },
+    icon: ({ props }) => ({
+        class: [
+            'block',
+
+            // Shape
+            'rounded-full',
+
+            // Size
+            'w-3 h-3',
+
+            // Conditions
+            {
+                'bg-surface-0 dark:bg-surface-900': props.value !== props.modelValue,
+                'bg-primary': props.value == props.modelValue,
+                'backface-hidden invisible scale-[0.1]': props.value !== props.modelValue,
+                'transform visible translate-z-0 scale-[1,1]': props.value == props.modelValue
+            },
+
+            // Transition
+            'transition duration-200'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/rating/index.js b/packages/tailwindcss-presets/src/aura/rating/index.js
new file mode 100644
index 000000000..348cc3d19
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/rating/index.js
@@ -0,0 +1,92 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'flex items-center',
+            'gap-1',
+
+            // Misc
+            {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            }
+        ]
+    }),
+    cancelitem: ({ context }) => ({
+        class: [
+            // Flex & Alignment
+            'inline-flex items-center',
+
+            //State
+            {
+                'outline-none ring-1 ring-primary-500/50 dark:ring-primary-500': context.focused
+            },
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }),
+    cancelicon: {
+        class: [
+            // Size
+            'w-4 h-4',
+
+            // Color
+            'text-red-500 dark:text-red-400',
+
+            // State
+            'hover:text-red-600 dark:hover:text-red-300',
+
+            // Transition
+            'transition duration-200 ease-in'
+        ]
+    },
+    item: ({ props, context }) => ({
+        class: [
+            // Flex & Alignment
+            'inline-flex items-center',
+
+            // State
+            {
+                'outline-none ring-1 ring-primary-500/50 dark:ring-primary-500': context.focused
+            },
+
+            // Misc
+            {
+                'cursor-pointer': !props.readonly,
+                'cursor-default': props.readonly
+            }
+        ]
+    }),
+    officon: ({ props }) => ({
+        class: [
+            // Size
+            'w-4 h-4',
+
+            // Color
+            'text-surface-700 dark:text-surface-0/80',
+
+            // State
+            { 'hover:text-primary-500 dark:hover:text-primary-400': !props.readonly },
+
+            // Transition
+            'transition duration-200 ease-in'
+        ]
+    }),
+    onicon: ({ props }) => ({
+        class: [
+            // Size
+            'w-4 h-4',
+
+            // Color
+            'text-primary',
+
+            // State
+            { 'hover:text-primary-600 dark:hover:text-primary-300': !props.readonly },
+
+            // Transition
+            'transition duration-200 ease-in'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/ripple/index.js b/packages/tailwindcss-presets/src/aura/ripple/index.js
new file mode 100644
index 000000000..429c249e8
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/ripple/index.js
@@ -0,0 +1,6 @@
+export default {
+    root: {
+        class: ['block absolute bg-surface-0/50 rounded-full pointer-events-none'],
+        style: 'transform: scale(0)'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/scrollpanel/index.js b/packages/tailwindcss-presets/src/aura/scrollpanel/index.js
new file mode 100644
index 000000000..d41e690c3
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/scrollpanel/index.js
@@ -0,0 +1,77 @@
+export default {
+    wrapper: {
+        class: [
+            // Size & Position
+            'h-full w-full',
+
+            // Layering
+            'z-[1]',
+
+            // Spacing
+            'overflow-hidden',
+
+            // Misc
+            'relative float-left'
+        ]
+    },
+    content: {
+        class: [
+            // Size & Spacing
+            'h-[calc(100%+18px)] w-[calc(100%+18px)] pr-[18px] pb-[18px] pl-0 pt-0',
+
+            // Overflow & Scrollbar
+            'overflow-scroll scrollbar-none',
+
+            // Box Model
+            'box-border',
+
+            // Position
+            'relative',
+
+            // Webkit Specific
+            '[&::-webkit-scrollbar]:hidden'
+        ]
+    },
+    barX: {
+        class: [
+            // Size & Position
+            'h-[9px] bottom-0',
+
+            // Appearance
+            'bg-surface-50 dark:bg-surface-700 rounded',
+
+            // Interactivity
+            'cursor-pointer',
+
+            // Visibility & Layering
+            'invisible z-20',
+
+            // Transition
+            'transition duration-[250ms] ease-linear',
+
+            // Misc
+            'relative'
+        ]
+    },
+    barY: {
+        class: [
+            // Size & Position
+            'w-[9px] top-0',
+
+            // Appearance
+            'bg-surface-50 dark:bg-surface-700 rounded',
+
+            // Interactivity
+            'cursor-pointer',
+
+            // Visibility & Layering
+            'z-20',
+
+            // Transition
+            'transition duration-[250ms] ease-linear',
+
+            // Misc
+            'relative'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/scrolltop/index.js b/packages/tailwindcss-presets/src/aura/scrolltop/index.js
new file mode 100644
index 000000000..7b29dbdf5
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/scrolltop/index.js
@@ -0,0 +1,43 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Flex & Alignment
+            'flex items-center justify-center',
+
+            // Positioning
+            {
+                sticky: props.target === 'parent',
+                fixed: props.target === 'window'
+            },
+            'bottom-[20px] right-[20px]',
+            'ml-auto',
+
+            // Shape & Size
+            {
+                'rounded-md h-8 w-8': props.target === 'parent',
+                'h-12 w-12 rounded-full shadow-md': props.target === 'window'
+            },
+
+            // Color
+
+            {
+                'text-white dark:text-surface-900': props.target === 'parent',
+                'text-surface-0': props.target === 'window',
+                'bg-primary': props.target === 'parent',
+                'bg-surface-600 dark:bg-surface-700 hover:bg-surface-700 dark:hover:bg-surface-600': props.target === 'window'
+            },
+
+            // States
+            {
+                'hover:bg-primary-hover': props.target === 'parent',
+                'hover:bg-surface-600 dark:hover:bg-surface-300': props.target === 'window'
+            }
+        ]
+    }),
+    transition: {
+        enterFromClass: 'opacity-0',
+        enterActiveClass: 'transition-opacity duration-150',
+        leaveActiveClass: 'transition-opacity duration-150',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/selectbutton/index.js b/packages/tailwindcss-presets/src/aura/selectbutton/index.js
new file mode 100644
index 000000000..04a522b01
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/selectbutton/index.js
@@ -0,0 +1,52 @@
+export default {
+    root: ({ props }) => ({
+        class: [{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+    }),
+    button: ({ context, props }) => ({
+        class: [
+            'relative',
+            // Font
+            'leading-none',
+
+            // Flex Alignment
+            'inline-flex items-center align-bottom text-center',
+
+            // Spacing
+            'px-4 py-2',
+
+            // Shape
+            'first:rounded-l-md first:rounded-tr-none first:rounded-br-none',
+            'last:rounded-tl-none last:rounded-bl-none last:rounded-r-md',
+
+            // Before
+            'before:absolute before:left-1 before:top-1 before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)] before:rounded-[4px] before:z-0',
+            '[&>*]:z-10',
+
+            // Color
+            'bg-surface-100 dark:bg-surface-950',
+            {
+                'text-surface-600 dark:text-white/60 before:bg-transparent': !context.active,
+                'text-surface-800 dark:text-white/80 before:bg-surface-0 dark:before:bg-surface-800': context.active
+            },
+
+            // Invalid State
+            { 'border first:border-r-0 last:border-l-0 border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:z-10',
+            {
+                'hover:text-surface-800 dark:hover:text-white/80': !context.active && !props.invalid
+            },
+            { 'opacity-60 select-none pointer-events-none cursor-default': context.disabled },
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'cursor-pointer select-none overflow-hidden'
+        ]
+    }),
+    label: {
+        class: 'font-medium leading-[normal] text-center w-full z-10 relative'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/sidebar/index.js b/packages/tailwindcss-presets/src/aura/sidebar/index.js
new file mode 100644
index 000000000..3e3ee4896
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/sidebar/index.js
@@ -0,0 +1,149 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex flex-col',
+
+            // Position
+            'relative',
+            { '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': props.position == 'full' },
+
+            // Size
+            {
+                'h-full w-80': props.position == 'left' || props.position == 'right',
+                'h-auto w-full': props.position == 'top' || props.position == 'bottom'
+            },
+
+            // Shape
+            'border-0 dark:border',
+            'shadow-lg',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-white/80',
+            'dark:border-surface-700',
+
+            // Transitions
+            'transition-transform',
+            'duration-300',
+
+            // Misc
+            'pointer-events-auto'
+        ]
+    }),
+    header: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-between',
+            'shrink-0',
+
+            // Spacing
+            'p-[1.125rem]',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    title: {
+        class: ['font-semibold text-xl']
+    },
+    icons: {
+        class: ['flex items-center']
+    },
+    closeButton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Size and Spacing
+            'mr-2',
+            'last:mr-0',
+            'w-7 h-7',
+
+            // Shape
+            'border-0',
+            'rounded-full',
+
+            // Colors
+            'text-surface-500',
+            'bg-transparent',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1',
+            'focus:ring-primary-500 dark:focus:ring-primary-400',
+
+            // Misc
+            'overflow-hidden'
+        ]
+    },
+    closeButtonIcon: {
+        class: [
+            // Display
+            'inline-block',
+
+            // Size
+            'w-4',
+            'h-4'
+        ]
+    },
+    content: {
+        class: [
+            // Spacing and Size
+            'p-[1.125rem]',
+            'pt-0',
+            'h-full',
+            'w-full',
+
+            // Growth and Overflow
+            'grow',
+            'overflow-y-auto'
+        ]
+    },
+    mask: ({ props }) => ({
+        class: [
+            // Transitions
+            'transition-all',
+            'duration-300',
+            { 'p-5': !props.position == 'full' },
+
+            // Background and Effects
+            { 'has-[.mask-active]:bg-transparent bg-black/40': props.modal }
+        ]
+    }),
+    transition: ({ props }) => {
+        return props.position === 'top'
+            ? {
+                  enterFromClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active',
+                  leaveToClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active'
+              }
+            : props.position === 'bottom'
+            ? {
+                  enterFromClass: 'translate-x-0 translate-y-full translate-z-0 mask-active',
+                  leaveToClass: 'translate-x-0 translate-y-full translate-z-0 mask-active'
+              }
+            : props.position === 'left'
+            ? {
+                  enterFromClass: '-translate-x-full translate-y-0 translate-z-0 mask-active',
+                  leaveToClass: '-translate-x-full translate-y-0 translate-z-0 mask-active'
+              }
+            : props.position === 'right'
+            ? {
+                  enterFromClass: 'translate-x-full translate-y-0 translate-z-0 mask-active',
+                  leaveToClass: 'translate-x-full translate-y-0 translate-z-0 mask-active'
+              }
+            : {
+                  enterFromClass: 'opacity-0 mask-active',
+                  enterActiveClass: 'transition-opacity duration-400 ease-in',
+                  leaveActiveClass: 'transition-opacity duration-400 ease-in',
+                  leaveToClass: 'opacity-0 mask-active'
+              };
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/skeleton/index.js b/packages/tailwindcss-presets/src/aura/skeleton/index.js
new file mode 100644
index 000000000..d459aaac9
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/skeleton/index.js
@@ -0,0 +1,16 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'overflow-hidden',
+            {
+                'animate-pulse': props.animation !== 'none'
+            },
+
+            // Round
+            { 'rounded-full': props.shape === 'circle', 'rounded-md': props.shape !== 'circle' },
+
+            // Colors
+            'bg-surface-200 dark:bg-surface-700'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/slider/index.js b/packages/tailwindcss-presets/src/aura/slider/index.js
new file mode 100644
index 000000000..0bce0ce2a
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/slider/index.js
@@ -0,0 +1,138 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Size
+            { 'h-[3px]': props.orientation == 'horizontal', 'w-[3px]': props.orientation == 'vertical' },
+
+            // Shape
+            'border-0',
+            'rounded-md',
+
+            // Colors
+            'bg-surface-200 dark:bg-surface-800',
+
+            // States
+            { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    range: ({ props }) => ({
+        class: [
+            // Position
+            'block absolute',
+            {
+                'top-0 left-0': props.orientation == 'horizontal',
+                'bottom-0 left-0': props.orientation == 'vertical'
+            },
+
+            //Size
+            {
+                'h-full': props.orientation == 'horizontal',
+                'w-full': props.orientation == 'vertical'
+            },
+
+            // Shape
+            'rounded-md',
+
+            // Colors
+            'bg-primary'
+        ]
+    }),
+    handle: ({ props }) => ({
+        class: [
+            'flex items-center justify-center',
+
+            // Size
+            'h-[20px]',
+            'w-[20px]',
+            {
+                'top-[50%] -mt-[10px] -ml-[10px]': props.orientation == 'horizontal',
+                'left-[50%] -mb-[10px] -ml-[10px]': props.orientation == 'vertical'
+            },
+
+            // Shape
+            'rounded-full',
+
+            'before:block before:w-[16px] before:h-[16px] before:rounded-full before:bg-surface-0 dark:before:bg-surface-950 before:shadow-md',
+
+            // Colors
+            'bg-surface-200 dark:bg-surface-800',
+
+            // States
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1',
+            'ring-primary-500 dark:ring-primary-400',
+
+            // Transitions
+            'transition duration-200',
+
+            // Misc
+            'cursor-grab',
+            'touch-action-none'
+        ]
+    }),
+    starthandler: ({ props }) => ({
+        class: [
+            'flex items-center justify-center',
+
+            // Size
+            'h-[20px]',
+            'w-[20px]',
+            {
+                'top-[50%] -mt-[10px] -ml-[10px]': props.orientation == 'horizontal',
+                'left-[50%] -mb-[10px] -ml-[10px]': props.orientation == 'vertical'
+            },
+
+            // Shape
+            'rounded-full',
+
+            'before:block before:w-[16px] before:h-[16px] before:rounded-full before:bg-surface-0 dark:before:bg-surface-950 before:shadow-md',
+
+            // Colors
+            'bg-surface-200 dark:bg-surface-800',
+
+            // States
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1',
+            'ring-primary-500 dark:ring-primary-400',
+
+            // Transitions
+            'transition duration-200',
+
+            // Misc
+            'cursor-grab',
+            'touch-action-none'
+        ]
+    }),
+    endhandler: ({ props }) => ({
+        class: [
+            'flex items-center justify-center',
+
+            // Size
+            'h-[20px]',
+            'w-[20px]',
+            {
+                'top-[50%] -mt-[10px] -ml-[10px]': props.orientation == 'horizontal',
+                'left-[50%] -mb-[10px] -ml-[10px]': props.orientation == 'vertical'
+            },
+
+            // Shape
+            'rounded-full',
+
+            'before:block before:w-[16px] before:h-[16px] before:rounded-full before:bg-surface-0 dark:before:bg-surface-950 before:shadow-md',
+
+            // Colors
+            'bg-surface-200 dark:bg-surface-800',
+
+            // States
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1',
+            'ring-primary-500 dark:ring-primary-400',
+
+            // Transitions
+            'transition duration-200',
+
+            // Misc
+            'cursor-grab',
+            'touch-action-none'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/speeddial/index.js b/packages/tailwindcss-presets/src/aura/speeddial/index.js
new file mode 100644
index 000000000..84a782edd
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/speeddial/index.js
@@ -0,0 +1,302 @@
+export default {
+    root: {
+        class: 'absolute flex'
+    },
+    button: {
+        root: ({ props, context, parent }) => ({
+            class: [
+                'relative',
+                'z-20',
+
+                // Alignments
+                'items-center inline-flex text-center align-bottom justify-center',
+
+                // Sizes & Spacing
+                'leading-[normal]',
+                'w-10 h-10 p-0 py-2',
+
+                // Shapes
+                'rounded-full',
+                'shadow-md',
+                // Link Button
+                { 'text-primary-600 bg-transparent border-transparent': props.link },
+
+                // Plain Button
+                { 'text-white bg-gray-500 border border-gray-500': props.plain && !props.outlined && !props.text },
+                // Plain Text Button
+                { 'text-surface-500': props.plain && props.text },
+                // Plain Outlined Button
+                { 'text-surface-500 border border-gray-500': props.plain && props.outlined },
+
+                // Text Button
+                { 'bg-transparent border-transparent': props.text && !props.plain },
+
+                // Outlined Button
+                { 'bg-transparent border': props.outlined && !props.plain },
+
+                // --- Severity Buttons ---
+
+                // Primary Button
+                {
+                    'text-primary-inverse': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
+                    'bg-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
+                    'border border-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain
+                },
+                // Primary Text Button
+                { 'text-primary': props.text && props.severity === null && !props.plain },
+                // Primary Outlined Button
+                { 'text-primary border border-primary': props.outlined && props.severity === null && !props.plain },
+
+                // Secondary Button
+                {
+                    'text-surface-900 dark:text-white': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
+                    'bg-surface-100 dark:bg-surface-700': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
+                    'border border-surface-100 dark:border-surface-700': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain
+                },
+                // Secondary Text Button
+                { 'text-surface-500 dark:text-surface-300': props.text && props.severity === 'secondary' && !props.plain },
+                // Secondary Outlined Button
+                { 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/10': props.outlined && props.severity === 'secondary' && !props.plain },
+
+                // Success Button
+                {
+                    'text-white dark:text-green-900': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
+                    'bg-green-500 dark:bg-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
+                    'border border-green-500 dark:border-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain
+                },
+                // Success Text Button
+                { 'text-green-500 dark:text-green-400': props.text && props.severity === 'success' && !props.plain },
+                // Success Outlined Button
+                { 'text-green-500 border border-green-500 hover:bg-green-300/10': props.outlined && props.severity === 'success' && !props.plain },
+
+                // Info Button
+                {
+                    'text-white dark:text-surface-900': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
+                    'bg-blue-500 dark:bg-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
+                    'border border-blue-500 dark:border-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain
+                },
+                // Info Text Button
+                { 'text-blue-500 dark:text-blue-400': props.text && props.severity === 'info' && !props.plain },
+                // Info Outlined Button
+                { 'text-blue-500 border border-blue-500 hover:bg-blue-300/10 ': props.outlined && props.severity === 'info' && !props.plain },
+
+                // Warning Button
+                {
+                    'text-white dark:text-surface-900': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
+                    'bg-orange-500 dark:bg-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
+                    'border border-orange-500 dark:border-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain
+                },
+                // Warning Text Button
+                { 'text-orange-500 dark:text-orange-400': props.text && props.severity === 'warning' && !props.plain },
+                // Warning Outlined Button
+                { 'text-orange-500 border border-orange-500 hover:bg-orange-300/10': props.outlined && props.severity === 'warning' && !props.plain },
+
+                // Help Button
+                {
+                    'text-white dark:text-surface-900': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
+                    'bg-purple-500 dark:bg-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
+                    'border border-purple-500 dark:border-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain
+                },
+                // Help Text Button
+                { 'text-purple-500 dark:text-purple-400': props.text && props.severity === 'help' && !props.plain },
+                // Help Outlined Button
+                { 'text-purple-500 border border-purple-500 hover:bg-purple-300/10': props.outlined && props.severity === 'help' && !props.plain },
+
+                // Danger Button
+                {
+                    'text-white dark:text-surface-900': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
+                    'bg-red-500 dark:bg-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
+                    'border border-red-500 dark:border-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain
+                },
+                // Danger Text Button
+                { 'text-red-500 dark:text-red-400': props.text && props.severity === 'danger' && !props.plain },
+                // Danger Outlined Button
+                { 'text-red-500 border border-red-500 hover:bg-red-300/10': props.outlined && props.severity === 'danger' && !props.plain },
+
+                // Contrast Button
+                {
+                    'text-white dark:text-surface-900': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
+                    'bg-surface-900 dark:bg-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
+                    'border border-surface-900 dark:border-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain
+                },
+                // Contrast Text Button
+                { 'text-surface-900 dark:text-surface-0': props.text && props.severity === 'contrast' && !props.plain },
+                // Contrast Outlined Button
+                { 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': props.outlined && props.severity === 'contrast' && !props.plain },
+
+                // --- Severity Button States ---
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+
+                // Link
+                { 'focus:ring-primary': props.link },
+
+                // Plain
+                { 'hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text },
+                // Text & Outlined Button
+                { 'hover:bg-surface-300/10': props.plain && (props.text || props.outlined) },
+
+                // Primary
+                { 'hover:bg-primary-hover hover:border-primary-hover': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain },
+                { 'focus:ring-primary': props.severity === null },
+                // Text & Outlined Button
+                { 'hover:bg-primary-300/10': (props.text || props.outlined) && props.severity === null && !props.plain },
+
+                // Secondary
+                { 'hover:bg-surface-200 dark:hover:bg-surface-600 hover:border-surface-200 dark:hover:border-surface-600': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain },
+                { 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'secondary' },
+                // Text & Outlined Button
+                { 'hover:bg-surface-300/10': (props.text || props.outlined) && props.severity === 'secondary' && !props.plain },
+
+                // Success
+                { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': props.severity === 'success' && !props.text && !props.outlined && !props.plain },
+                { 'focus:ring-green-500 dark:focus:ring-green-400': props.severity === 'success' },
+                // Text & Outlined Button
+                { 'hover:bg-green-300/10': (props.text || props.outlined) && props.severity === 'success' && !props.plain },
+
+                // Info
+                { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': props.severity === 'info' && !props.text && !props.outlined && !props.plain },
+                { 'focus:ring-blue-500 dark:focus:ring-blue-400': props.severity === 'info' },
+                // Text & Outlined Button
+                { 'hover:bg-blue-300/10': (props.text || props.outlined) && props.severity === 'info' && !props.plain },
+
+                // Warning
+                { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': props.severity === 'warning' && !props.text && !props.outlined && !props.plain },
+                { 'focus:ring-orange-500 dark:focus:ring-orange-400': props.severity === 'warning' },
+                // Text & Outlined Button
+                { 'hover:bg-orange-300/10': (props.text || props.outlined) && props.severity === 'warning' && !props.plain },
+
+                // Help
+                { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': props.severity === 'help' && !props.text && !props.outlined && !props.plain },
+                { 'focus:ring-purple-500 dark:focus:ring-purple-400': props.severity === 'help' },
+                // Text & Outlined Button
+                { 'hover:bg-purple-300/10': (props.text || props.outlined) && props.severity === 'help' && !props.plain },
+
+                // Danger
+                { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': props.severity === 'danger' && !props.text && !props.outlined && !props.plain },
+                { 'focus:ring-red-500 dark:focus:ring-red-400': props.severity === 'danger' },
+                // Text & Outlined Button
+                { 'hover:bg-red-300/10': (props.text || props.outlined) && props.severity === 'danger' && !props.plain },
+
+                // Contrast
+                { 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain },
+                { 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'contrast' },
+                // Text & Outlined Button
+                { 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (props.text || props.outlined) && props.severity === 'contrast' && !props.plain },
+
+                // Disabled
+                { 'opacity-60 pointer-events-none cursor-default': context.disabled },
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+                parent.state.d_visible ? 'rotate-45' : 'rotate-0',
+
+                // Misc
+                'cursor-pointer overflow-hidden select-none'
+            ]
+        }),
+        label: ({ props }) => ({
+            class: [
+                'duration-200',
+                'font-medium',
+                {
+                    'hover:underline': props.link
+                },
+                { 'flex-1': props.label !== null, 'invisible w-0': props.label == null }
+            ]
+        }),
+        icon: ({ props }) => ({
+            class: [
+                'mx-0',
+                {
+                    'mr-2': props.iconPos == 'left' && props.label != null,
+                    'ml-2 order-1': props.iconPos == 'right' && props.label != null,
+                    'mb-2': props.iconPos == 'top' && props.label != null,
+                    'mt-2': props.iconPos == 'bottom' && props.label != null
+                }
+            ]
+        }),
+        loadingicon: ({ props }) => ({
+            class: [
+                'h-4 w-4',
+                'mx-0',
+                {
+                    'mr-2': props.iconPos == 'left' && props.label != null,
+                    'ml-2 order-1': props.iconPos == 'right' && props.label != null,
+                    'mb-2': props.iconPos == 'top' && props.label != null,
+                    'mt-2': props.iconPos == 'bottom' && props.label != null
+                },
+                'animate-spin'
+            ]
+        }),
+        badge: ({ props }) => ({
+            class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }]
+        })
+    },
+    menu: {
+        class: [
+            // Spacing
+            'm-0 p-0',
+
+            // Layout & Flexbox
+            'list-none flex items-center justify-center',
+
+            // Transitions
+            'transition delay-200',
+
+            // Z-Index (Positioning)
+            'z-20'
+        ]
+    },
+    menuitem: ({ props, context }) => ({
+        class: [
+            'transform transition-transform duration-200 ease-out transition-opacity duration-800',
+
+            // Conditional Appearance
+            context.hidden ? 'opacity-0 scale-0' : 'opacity-100 scale-100',
+
+            // Conditional Spacing
+            {
+                'my-1 first:mb-2': props.direction == 'up' && props.type == 'linear',
+                'my-1 first:mt-2': props.direction == 'down' && props.type == 'linear',
+                'mx-1 first:mr-2': props.direction == 'left' && props.type == 'linear',
+                'mx-1 first:ml-2': props.direction == 'right' && props.type == 'linear'
+            },
+
+            // Conditional Positioning
+            { absolute: props.type !== 'linear' }
+        ]
+    }),
+    action: {
+        class: [
+            // Flexbox & Alignment
+            'flex items-center justify-center',
+
+            // Size
+            'w-10 h-10',
+
+            // Shape
+            'rounded-full relative overflow-hidden',
+
+            // Appearance
+            'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-0/80',
+
+            // Hover Effects
+            'hover:bg-surface-200 dark:hover:bg-surface-800 dark:hover:text-surface-0',
+
+            // Transitions
+            'transition duration-200'
+        ]
+    },
+    mask: ({ state }) => ({
+        class: [
+            // Base Styles
+            'absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-black/40 z-0',
+
+            // Conditional Appearance
+            {
+                'opacity-0 pointer-events-none': !state.d_visible,
+                'opacity-100 transition-opacity duration-400 ease-in-out': state.d_visible
+            }
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/splitbutton/index.js b/packages/tailwindcss-presets/src/aura/splitbutton/index.js
new file mode 100644
index 000000000..bef60ae46
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/splitbutton/index.js
@@ -0,0 +1,553 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Flexbox and Position
+            'inline-flex',
+            'relative',
+
+            // Shape
+            'rounded-md',
+            { 'shadow-lg': props.raised }
+        ]
+    }),
+    button: {
+        root: ({ parent }) => ({
+            class: [
+                'relative',
+
+                // Alignments
+                'items-center inline-flex text-center align-bottom justify-center',
+
+                // Sizes & Spacing
+                'leading-[normal]',
+                {
+                    'px-4 py-2': parent.props.size === null,
+                    'text-sm py-1.5 px-3': parent.props.size === 'small',
+                    'text-xl py-3 px-4': parent.props.size === 'large'
+                },
+                {
+                    'px-0 py-2': parent.props.label == null && parent.props.icon !== null
+                },
+
+                // Shape
+                'rounded-r-none',
+                'border-r-0',
+                { 'rounded-l-full': parent.props.rounded },
+                { 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded },
+
+                // Link Button
+                { 'text-primary-600 bg-transparent border-transparent': parent.props.link },
+
+                // Plain Button
+                { 'text-white bg-gray-500 border border-gray-500': parent.props.plain && !parent.props.outlined && !parent.props.text },
+                // Plain Text Button
+                { 'text-surface-500': parent.props.plain && parent.props.text },
+                // Plain Outlined Button
+                { 'text-surface-500 border border-gray-500': parent.props.plain && parent.props.outlined },
+
+                // Text Button
+                { 'bg-transparent border-transparent': parent.props.text && !parent.props.plain },
+
+                // Outlined Button
+                { 'bg-transparent border': parent.props.outlined && !parent.props.plain },
+
+                // --- Severity Buttons ---
+
+                // Primary Button
+                {
+                    'text-primary-inverse': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-primary': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-primary': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Primary Text Button
+                { 'text-primary': parent.props.text && parent.props.severity === null && !parent.props.plain },
+                // Primary Outlined Button
+                { 'text-primary border border-primary': parent.props.outlined && parent.props.severity === null && !parent.props.plain },
+
+                // Secondary Button
+                {
+                    'text-surface-900 dark:text-white': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-surface-100 dark:bg-surface-700': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-surface-100 dark:border-surface-700': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Secondary Text Button
+                { 'text-surface-500 dark:text-surface-300': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain },
+                // Secondary Outlined Button
+                { 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/10': parent.props.outlined && parent.props.severity === 'secondary' && !parent.props.plain },
+
+                // Success Button
+                {
+                    'text-white dark:text-green-900': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-green-500 dark:bg-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-green-500 dark:border-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Success Text Button
+                { 'text-green-500 dark:text-green-400': parent.props.text && parent.props.severity === 'success' && !parent.props.plain },
+                // Success Outlined Button
+                { 'text-green-500 border border-green-500 hover:bg-green-300/10': parent.props.outlined && parent.props.severity === 'success' && !parent.props.plain },
+
+                // Info Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-blue-500 dark:bg-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-blue-500 dark:border-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Info Text Button
+                { 'text-blue-500 dark:text-blue-400': parent.props.text && parent.props.severity === 'info' && !parent.props.plain },
+                // Info Outlined Button
+                { 'text-blue-500 border border-blue-500 hover:bg-blue-300/10 ': parent.props.outlined && parent.props.severity === 'info' && !parent.props.plain },
+
+                // Warning Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-orange-500 dark:bg-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-orange-500 dark:border-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Warning Text Button
+                { 'text-orange-500 dark:text-orange-400': parent.props.text && parent.props.severity === 'warning' && !parent.props.plain },
+                // Warning Outlined Button
+                { 'text-orange-500 border border-orange-500 hover:bg-orange-300/10': parent.props.outlined && parent.props.severity === 'warning' && !parent.props.plain },
+
+                // Help Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-purple-500 dark:bg-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-purple-500 dark:border-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Help Text Button
+                { 'text-purple-500 dark:text-purple-400': parent.props.text && parent.props.severity === 'help' && !parent.props.plain },
+                // Help Outlined Button
+                { 'text-purple-500 border border-purple-500 hover:bg-purple-300/10': parent.props.outlined && parent.props.severity === 'help' && !parent.props.plain },
+
+                // Danger Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-red-500 dark:bg-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-red-500 dark:border-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Danger Text Button
+                { 'text-red-500 dark:text-red-400': parent.props.text && parent.props.severity === 'danger' && !parent.props.plain },
+                // Danger Outlined Button
+                { 'text-red-500 border border-red-500 hover:bg-red-300/10': parent.props.outlined && parent.props.severity === 'danger' && !parent.props.plain },
+
+                // Contrast Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-surface-900 dark:bg-surface-0': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-surface-900 dark:border-surface-0': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Contrast Text Button
+                { 'text-surface-900 dark:text-surface-0': parent.props.text && parent.props.severity === 'contrast' && !parent.props.plain },
+                // Contrast Outlined Button
+                { 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': parent.props.outlined && parent.props.severity === 'contrast' && !parent.props.plain },
+
+                // --- Severity Button States ---
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+
+                // Link
+                { 'focus:ring-primary': parent.props.link },
+
+                // Plain
+                { 'hover:bg-gray-600 hover:border-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text },
+                // Text & Outlined Button
+                { 'hover:bg-surface-300/10': parent.props.plain && (parent.props.text || parent.props.outlined) },
+
+                // Primary
+                { 'hover:bg-primary-hover hover:border-primary-hover': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-primary': parent.props.severity === null },
+                // Text & Outlined Button
+                { 'hover:bg-primary-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain },
+
+                // Secondary
+                { 'hover:bg-surface-200 dark:hover:bg-surface-600 hover:border-surface-200 dark:hover:border-surface-600': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-surface-500 dark:focus:ring-surface-400': parent.props.severity === 'secondary' },
+                // Text & Outlined Button
+                { 'hover:bg-surface-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'secondary' && !parent.props.plain },
+
+                // Success
+                { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-green-500 dark:focus:ring-green-400': parent.props.severity === 'success' },
+                // Text & Outlined Button
+                { 'hover:bg-green-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'success' && !parent.props.plain },
+
+                // Info
+                { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-blue-500 dark:focus:ring-blue-400': parent.props.severity === 'info' },
+                // Text & Outlined Button
+                { 'hover:bg-blue-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'info' && !parent.props.plain },
+
+                // Warning
+                { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-orange-500 dark:focus:ring-orange-400': parent.props.severity === 'warning' },
+                // Text & Outlined Button
+                { 'hover:bg-orange-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'warning' && !parent.props.plain },
+
+                // Help
+                { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-purple-500 dark:focus:ring-purple-400': parent.props.severity === 'help' },
+                // Text & Outlined Button
+                { 'hover:bg-purple-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'help' && !parent.props.plain },
+
+                // Danger
+                { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-red-500 dark:focus:ring-red-400': parent.props.severity === 'danger' },
+                // Text & Outlined Button
+                { 'hover:bg-red-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'danger' && !parent.props.plain },
+
+                // Contrast
+                { 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-surface-500 dark:focus:ring-surface-400': parent.props.severity === 'contrast' },
+                // Text & Outlined Button
+                { 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (parent.props.text || parent.props.outlined) && parent.props.severity === 'contrast' && !parent.props.plain },
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // Misc
+                'cursor-pointer overflow-hidden select-none'
+            ]
+        }),
+        icon: {
+            class: [
+                // Margins
+                'mr-2'
+            ]
+        }
+    },
+    menubutton: {
+        root: ({ parent }) => ({
+            class: [
+                'relative',
+
+                // Alignments
+                'items-center inline-flex text-center align-bottom justify-center',
+
+                // Sizes & Spacing
+                'leading-[normal]',
+                {
+                    'px-4 py-2': parent.props.size === null,
+                    'text-sm py-1.5 px-3': parent.props.size === 'small',
+                    'text-xl py-3 px-4': parent.props.size === 'large'
+                },
+                {
+                    'min-w-10 px-0 py-2': parent.props.label == null && parent.props.icon !== null
+                },
+
+                // Shape
+                'rounded-l-none',
+                { 'rounded-l-full': parent.props.rounded },
+                { 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded },
+
+                // Link Button
+                { 'text-primary-600 bg-transparent border-transparent': parent.props.link },
+
+                // Plain Button
+                { 'text-white bg-gray-500 border border-gray-500': parent.props.plain && !parent.props.outlined && !parent.props.text },
+                // Plain Text Button
+                { 'text-surface-500': parent.props.plain && parent.props.text },
+                // Plain Outlined Button
+                { 'text-surface-500 border border-gray-500': parent.props.plain && parent.props.outlined },
+
+                // Text Button
+                { 'bg-transparent border-transparent': parent.props.text && !parent.props.plain },
+
+                // Outlined Button
+                { 'bg-transparent border': parent.props.outlined && !parent.props.plain },
+
+                // --- Severity Buttons ---
+
+                // Primary Button
+                {
+                    'text-primary-inverse': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-primary': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-primary': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Primary Text Button
+                { 'text-primary': parent.props.text && parent.props.severity === null && !parent.props.plain },
+                // Primary Outlined Button
+                { 'text-primary border border-primary': parent.props.outlined && parent.props.severity === null && !parent.props.plain },
+
+                // Secondary Button
+                {
+                    'text-surface-900 dark:text-white': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-surface-100 dark:bg-surface-700': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-surface-100 dark:border-surface-700': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Secondary Text Button
+                { 'text-surface-500 dark:text-surface-300': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain },
+                // Secondary Outlined Button
+                { 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/10': parent.props.outlined && parent.props.severity === 'secondary' && !parent.props.plain },
+
+                // Success Button
+                {
+                    'text-white dark:text-green-900': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-green-500 dark:bg-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-green-500 dark:border-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Success Text Button
+                { 'text-green-500 dark:text-green-400': parent.props.text && parent.props.severity === 'success' && !parent.props.plain },
+                // Success Outlined Button
+                { 'text-green-500 border border-green-500 hover:bg-green-300/10': parent.props.outlined && parent.props.severity === 'success' && !parent.props.plain },
+
+                // Info Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-blue-500 dark:bg-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-blue-500 dark:border-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Info Text Button
+                { 'text-blue-500 dark:text-blue-400': parent.props.text && parent.props.severity === 'info' && !parent.props.plain },
+                // Info Outlined Button
+                { 'text-blue-500 border border-blue-500 hover:bg-blue-300/10 ': parent.props.outlined && parent.props.severity === 'info' && !parent.props.plain },
+
+                // Warning Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-orange-500 dark:bg-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-orange-500 dark:border-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Warning Text Button
+                { 'text-orange-500 dark:text-orange-400': parent.props.text && parent.props.severity === 'warning' && !parent.props.plain },
+                // Warning Outlined Button
+                { 'text-orange-500 border border-orange-500 hover:bg-orange-300/10': parent.props.outlined && parent.props.severity === 'warning' && !parent.props.plain },
+
+                // Help Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-purple-500 dark:bg-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-purple-500 dark:border-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Help Text Button
+                { 'text-purple-500 dark:text-purple-400': parent.props.text && parent.props.severity === 'help' && !parent.props.plain },
+                // Help Outlined Button
+                { 'text-purple-500 border border-purple-500 hover:bg-purple-300/10': parent.props.outlined && parent.props.severity === 'help' && !parent.props.plain },
+
+                // Danger Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-red-500 dark:bg-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-red-500 dark:border-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Danger Text Button
+                { 'text-red-500 dark:text-red-400': parent.props.text && parent.props.severity === 'danger' && !parent.props.plain },
+                // Danger Outlined Button
+                { 'text-red-500 border border-red-500 hover:bg-red-300/10': parent.props.outlined && parent.props.severity === 'danger' && !parent.props.plain },
+
+                // Contrast Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-surface-900 dark:bg-surface-0': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-surface-900 dark:border-surface-0': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Contrast Text Button
+                { 'text-surface-900 dark:text-surface-0': parent.props.text && parent.props.severity === 'contrast' && !parent.props.plain },
+                // Contrast Outlined Button
+                { 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': parent.props.outlined && parent.props.severity === 'contrast' && !parent.props.plain },
+
+                // --- Severity Button States ---
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+
+                // Link
+                { 'focus:ring-primary': parent.props.link },
+
+                // Plain
+                { 'hover:bg-gray-600 hover:border-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text },
+                // Text & Outlined Button
+                { 'hover:bg-surface-300/10': parent.props.plain && (parent.props.text || parent.props.outlined) },
+
+                // Primary
+                { 'hover:bg-primary-hover hover:border-primary-hover': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-primary': parent.props.severity === null },
+                // Text & Outlined Button
+                { 'hover:bg-primary-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain },
+
+                // Secondary
+                { 'hover:bg-surface-200 dark:hover:bg-surface-600 hover:border-surface-200 dark:hover:border-surface-600': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-surface-500 dark:focus:ring-surface-400': parent.props.severity === 'secondary' },
+                // Text & Outlined Button
+                { 'hover:bg-surface-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'secondary' && !parent.props.plain },
+
+                // Success
+                { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-green-500 dark:focus:ring-green-400': parent.props.severity === 'success' },
+                // Text & Outlined Button
+                { 'hover:bg-green-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'success' && !parent.props.plain },
+
+                // Info
+                { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-blue-500 dark:focus:ring-blue-400': parent.props.severity === 'info' },
+                // Text & Outlined Button
+                { 'hover:bg-blue-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'info' && !parent.props.plain },
+
+                // Warning
+                { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-orange-500 dark:focus:ring-orange-400': parent.props.severity === 'warning' },
+                // Text & Outlined Button
+                { 'hover:bg-orange-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'warning' && !parent.props.plain },
+
+                // Help
+                { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-purple-500 dark:focus:ring-purple-400': parent.props.severity === 'help' },
+                // Text & Outlined Button
+                { 'hover:bg-purple-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'help' && !parent.props.plain },
+
+                // Danger
+                { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-red-500 dark:focus:ring-red-400': parent.props.severity === 'danger' },
+                // Text & Outlined Button
+                { 'hover:bg-red-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'danger' && !parent.props.plain },
+
+                // Contrast
+                { 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-surface-500 dark:focus:ring-surface-400': parent.props.severity === 'contrast' },
+                // Text & Outlined Button
+                { 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (parent.props.text || parent.props.outlined) && parent.props.severity === 'contrast' && !parent.props.plain },
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // Misc
+                'cursor-pointer overflow-hidden select-none'
+            ]
+        }),
+        label: {
+            class: ['hidden']
+        }
+    },
+    menu: {
+        root: {
+            class: [
+                // Sizing and Shape
+                'min-w-[12.5rem]',
+                'rounded-md',
+
+                // Spacing
+                'p-1',
+
+                // Colors
+                'bg-surface-0 dark:bg-surface-900',
+                'text-surface-700 dark:text-white/80',
+                'border border-surface-200 dark:border-surface-700'
+            ]
+        },
+        menu: {
+            class: [
+                // Spacings and Shape
+                'list-none',
+                'm-0',
+                'p-0',
+                'outline-none'
+            ]
+        },
+        menuitem: {
+            class: 'relative my-[2px] [&:first-child]:mt-0'
+        },
+        content: ({ context }) => ({
+            class: [
+                //Shape
+                'rounded-[4px]',
+
+                // Colors
+                'text-surface-700 dark:text-white/80',
+                {
+                    'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+                    'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
+                    'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+                },
+
+                // Transitions
+                'transition-shadow',
+                'duration-200',
+
+                // States
+                {
+                    'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
+                    'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
+                },
+
+                // Disabled
+                { 'opacity-60 pointer-events-none cursor-default': context.disabled }
+            ]
+        }),
+        action: {
+            class: [
+                'relative',
+                // Flexbox
+
+                'flex',
+                'items-center',
+
+                // Spacing
+                'py-2',
+                'px-3',
+
+                // Color
+                'text-surface-700 dark:text-white/80',
+
+                // Misc
+                'no-underline',
+                'overflow-hidden',
+                'cursor-pointer',
+                'select-none'
+            ]
+        },
+        icon: {
+            class: [
+                // Spacing
+                'mr-2',
+
+                // Color
+                'text-surface-600 dark:text-white/70'
+            ]
+        },
+        label: {
+            class: ['leading-[normal]']
+        },
+        submenuheader: {
+            class: [
+                // Font
+                'font-bold',
+
+                // Spacing
+                'm-0',
+                'py-2 px-3',
+
+                // Shape
+                'rounded-tl-none',
+                'rounded-tr-none',
+
+                // Colors
+                'bg-surface-0 dark:bg-surface-900',
+                'text-surface-400 dark:text-surface-600'
+            ]
+        },
+        submenuicon: {
+            class: [
+                // Position
+                'ml-auto'
+            ]
+        },
+        submenu: {
+            class: [
+                // Sizing and Shape
+                'min-w-[12.5rem]',
+                'rounded-md',
+
+                // Spacing
+                'p-1',
+
+                // Position
+                'static sm:absolute',
+                'z-10',
+
+                // Colors
+                'bg-surface-0 dark:bg-surface-900',
+                'text-surface-700 dark:text-white/80',
+                'border border-surface-200 dark:border-surface-700'
+            ],
+            separator: {
+                class: 'border-t border-surface-200 dark:border-surface-600 my-1'
+            }
+        }
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/splitter/index.js b/packages/tailwindcss-presets/src/aura/splitter/index.js
new file mode 100644
index 000000000..412d03fd1
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/splitter/index.js
@@ -0,0 +1,68 @@
+export default {
+    root: ({ context }) => ({
+        class: [
+            // Colors
+            'bg-surface-0',
+            'dark:bg-surface-900',
+            'text-surface-700',
+            'dark:text-surface-0/80',
+
+            // Shape
+            'rounded-md',
+
+            // Borders (Conditional)
+            { 'border border-solid border-surface-200 dark:border-surface-700': !context.nested },
+
+            // Nested
+            { 'flex grow border-0': context.nested }
+        ]
+    }),
+
+    gutter: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex',
+            'items-center',
+            'justify-center',
+            'shrink-0',
+
+            // Colors
+            'bg-surface-100',
+            'dark:bg-surface-700',
+
+            // Transitions
+            'transition-all',
+            'duration-200',
+
+            // Misc
+            {
+                'cursor-col-resize': props.layout == 'horizontal',
+                'cursor-row-resize': props.layout !== 'horizontal'
+            }
+        ]
+    }),
+    gutterhandler: ({ props }) => ({
+        class: [
+            'z-20',
+            // Colors
+            'bg-surface-100',
+            'dark:bg-surface-700',
+
+            // Shape
+            'rounded-md',
+
+            //States
+            'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
+
+            // Transitions
+            'transition-all',
+            'duration-200',
+
+            // Sizing (Conditional)
+            {
+                'h-[1.70rem]': props.layout == 'horizontal',
+                'w-[1.70rem] h-2': props.layout !== 'horizontal'
+            }
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/splitterpanel/index.js b/packages/tailwindcss-presets/src/aura/splitterpanel/index.js
new file mode 100644
index 000000000..6a21cd3a0
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/splitterpanel/index.js
@@ -0,0 +1,5 @@
+export default {
+    root: ({ context }) => ({
+        class: ['grow', { flex: context.nested }]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/stepper/index.js b/packages/tailwindcss-presets/src/aura/stepper/index.js
new file mode 100644
index 000000000..93026b0df
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/stepper/index.js
@@ -0,0 +1,161 @@
+export default {
+    root: ({ props }) => ({
+        class: ['flex-1', props.orientation === 'vertical' ? 'flex-col' : 'flex-row']
+    }),
+    nav: {
+        class: [
+            // Flexbox
+            'flex',
+            'justify-between',
+            'items-center',
+
+            // Spacing
+            'm-0',
+            'p-0',
+
+            // Positioning
+            'relative',
+
+            // Lists
+            'list-none',
+
+            // Overflow
+            'overflow-x-auto'
+        ]
+    },
+    stepperpanel: {
+        panel: ({ context, parent }) => ({
+            class: [context.active ? 'flex-1' : '', parent.props.orientation === 'vertical' ? 'flex flex-col flex-initial' : '']
+        }),
+        header: ({ parent, context }) => ({
+            class: [
+                // Position
+                'relative',
+
+                // Flexbox
+                'flex',
+                'items-center',
+                context.last ? 'flex-initial' : 'flex-1',
+                parent.props.orientation === 'vertical' ? 'flex-initial' : '',
+
+                // Spacing
+                'p-2'
+            ]
+        }),
+        action: {
+            class: [
+                // Borders
+                'border-0',
+                'border-none',
+
+                // Flexbox
+                'inline-flex',
+                'items-center',
+
+                // Text
+                'text-decoration-none',
+
+                // Transitions
+                'transition',
+                'transition-shadow',
+                'duration-200',
+
+                // Shape
+                'rounded-md',
+
+                // Backgrounds
+                'bg-transparent',
+
+                // Focus
+                'outline-none'
+            ]
+        },
+        number: ({ context }) => ({
+            class: [
+                // Flexbox
+                'flex',
+                'items-center',
+                'justify-center',
+
+                //Colors
+                'border-solid border-2 border-surface-200 dark:border-surface-700',
+
+                // Colors (Conditional)
+                context.active ? 'text-primary' : 'text-surface-900 dark:text-surface-0', // Adjust colors as needed
+
+                // Size and Shape
+                'min-w-[2rem]',
+                'h-[2rem]',
+                'line-height-[2rem]',
+                'rounded-full',
+
+                // Text
+                'text-lg',
+
+                // Transitions
+                'transition',
+                'transition-colors',
+                'transition-shadow',
+                'duration-200'
+            ]
+        }),
+        title: ({ context }) => ({
+            class: [
+                // Layout
+                'block',
+                'whitespace-nowrap',
+                'overflow-hidden',
+                'text-ellipsis',
+                'max-w-full',
+
+                // Spacing
+                'ml-2',
+
+                // Text
+                context.active ? 'text-primary' : 'text-surface-700 dark:text-surface-0/80',
+                'font-medium',
+
+                // Transitions
+                'transition',
+                'transition-colors',
+                'transition-shadow',
+                'duration-200'
+            ]
+        }),
+        separator: ({ context, state, parent }) => ({
+            class: [
+                // Colors (Conditional for active step)
+                state.d_activeStep <= context.index ? 'bg-surface-200 dark:bg-surface-700' : 'bg-primary',
+
+                // Conditional for Vertical Orientation
+                parent.props.orientation === 'vertical' ? ['flex-none', 'w-[2px]', 'h-auto', 'ml-[calc(1.29rem+2px)]'] : ['flex-1', 'w-full', 'h-[2px]', 'ml-4'],
+
+                // Transitions
+                'transition-shadow',
+                'duration-200'
+            ]
+        }),
+        transition: {
+            class: ['flex flex-1', 'bg-surface-0 dark:bg-surface-900', 'text-surface-900 dark:text-surface-0'],
+            enterFromClass: 'max-h-0',
+            enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+            enterToClass: 'max-h-[1000px]',
+            leaveFromClass: 'max-h-[1000px]',
+            leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+            leaveToClass: 'max-h-0'
+        },
+        content: ({ parent }) => ({
+            class: [parent.props.orientation === 'vertical' ? 'w-full pl-4' : '']
+        })
+    },
+    panelcontainer: {
+        class: [
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-900 dark:text-surface-0',
+
+            // Spacing
+            'p-4'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/steps/index.js b/packages/tailwindcss-presets/src/aura/steps/index.js
new file mode 100644
index 000000000..a2791096c
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/steps/index.js
@@ -0,0 +1,113 @@
+export default {
+    root: {
+        class: 'relative'
+    },
+    menu: {
+        class: 'p-0 m-0 list-none flex'
+    },
+    menuitem: {
+        class: [
+            // Flexbox and Position
+            'relative',
+            'flex',
+            'justify-center',
+            'flex-1',
+            'overflow-hidden',
+
+            // Before
+            'before:border-t-2',
+            'before:border-surface-200',
+            'before:dark:border-surface-700',
+            'before:w-full',
+            '[&:first-child]:before:w-[calc(50%+1rem)]',
+            '[&:last-child]:before:w-1/2',
+            'before:absolute',
+            'before:top-1/2',
+            'before:left-0',
+            'before:transform',
+            'before:mt-[calc(-1rem+1px)]',
+            '[&:first-child]:before:translate-x-[100%]'
+        ]
+    },
+    action: ({ props }) => ({
+        class: [
+            // Flexbox
+            'inline-flex items-center',
+            'flex-col',
+
+            // Transitions and Shape
+            'transition-shadow',
+            'rounded-md',
+
+            // Colors
+            'bg-surface-0',
+            'dark:bg-transparent',
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring',
+            'focus:ring-primary-500 dark:focus:ring-primary-400',
+
+            // Misc
+            'overflow-hidden',
+            { 'cursor-pointer': !props.readonly }
+        ]
+    }),
+    step: ({ context, props }) => ({
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+
+            // Position
+            'z-20',
+
+            // Shape
+            'rounded-full',
+            'border-2',
+
+            // Size
+            'w-8',
+            'h-8',
+            'text-sm',
+            'leading-[2rem]',
+            'font-medium',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'border-surface-100 dark:border-surface-700',
+            {
+                'text-surface-400 dark:text-white/60': !context.active,
+                'text-primary': context.active
+            },
+
+            // States
+            {
+                'hover:border-surface-300 dark:hover:border-surface-500': !context.active && !props.readonly
+            },
+
+            // Transition
+            'transition-colors duration-200 ease-in-out'
+        ]
+    }),
+    label: ({ context }) => ({
+        class: [
+            // Font
+            'leading-[normal]',
+            'font-medium',
+
+            // Display
+            'block',
+
+            // Spacing
+            'mt-2',
+
+            // Colors
+            { 'text-surface-700 dark:text-white/70': !context.active, 'text-primary': context.active },
+
+            // Text and Overflow
+            'whitespace-nowrap',
+            'overflow-hidden',
+            'overflow-ellipsis',
+            'max-w-full'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/tabmenu/index.js b/packages/tailwindcss-presets/src/aura/tabmenu/index.js
new file mode 100644
index 000000000..43c15e62a
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/tabmenu/index.js
@@ -0,0 +1,70 @@
+export default {
+    root: {
+        class: 'overflow-x-auto'
+    },
+    menu: {
+        class: [
+            // Flexbox
+            'flex flex-1',
+
+            // Spacing
+            'list-none',
+            'p-0 m-0',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'border-b-2 border-surface-200 dark:border-surface-700',
+            'text-surface-900 dark:text-surface-0/80'
+        ]
+    },
+    menuitem: {
+        class: 'mr-0'
+    },
+    action: ({ context, state }) => ({
+        class: [
+            'relative',
+
+            // Font
+            'font-semibold leading-none',
+
+            // Flexbox and Alignment
+            'flex items-center',
+
+            // Spacing
+            'py-4 px-[1.125rem]',
+            '-mb-px',
+
+            // Shape
+            'border-b',
+            'rounded-t-md',
+
+            // Colors and Conditions
+            {
+                'border-surface-200 dark:border-surface-700': state.d_activeIndex !== context.index,
+                'bg-surface-0 dark:bg-surface-900': state.d_activeIndex !== context.index,
+                'text-surface-700 dark:text-surface-0/80': state.d_activeIndex !== context.index,
+
+                'bg-surface-0 dark:bg-surface-900': state.d_activeIndex === context.index,
+                'border-primary': state.d_activeIndex === context.index,
+                'text-primary': state.d_activeIndex === context.index
+            },
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
+            {
+                'hover:text-surface-900 dark:hover:text-surface-0': state.d_activeIndex !== context.index
+            },
+
+            // Transitions
+            'transition-all duration-200',
+
+            // Misc
+            'cursor-pointer select-none text-decoration-none',
+            'overflow-hidden',
+            'user-select-none'
+        ]
+    }),
+    icon: {
+        class: 'mr-2'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/tabview/index.js b/packages/tailwindcss-presets/src/aura/tabview/index.js
new file mode 100644
index 000000000..d7a0b4c6b
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/tabview/index.js
@@ -0,0 +1,155 @@
+export default {
+    navContainer: ({ props }) => ({
+        class: [
+            // Position
+            'relative',
+
+            // Misc
+            { 'overflow-hidden': props.scrollable }
+        ]
+    }),
+    navContent: ({ instance }) => ({
+        class: [
+            // Overflow and Scrolling
+            'overflow-y-hidden overscroll-contain',
+            'overscroll-auto',
+            'scroll-smooth',
+            '[&::-webkit-scrollbar]:hidden'
+        ]
+    }),
+    previousButton: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Position
+            '!absolute',
+            'top-0 left-0',
+            'z-20',
+
+            // Size and Shape
+            'h-full w-10',
+            'rounded-none',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-surface-0/80',
+            'shadow-sm'
+        ]
+    },
+    nextButton: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Position
+            '!absolute',
+            'top-0 right-0',
+            'z-20',
+
+            // Size and Shape
+            'h-full w-10',
+            'rounded-none',
+
+            // Colors
+            'text-surface-700 dark:text-surface-0/80',
+            'bg-surface-0 dark:bg-surface-900',
+            'shadow-sm'
+        ]
+    },
+    nav: {
+        class: [
+            // Flexbox
+            'flex flex-1',
+
+            // Spacing
+            'list-none',
+            'p-0 m-0',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'border-b border-surface-200 dark:border-surface-700',
+            'text-surface-900 dark:text-surface-0/80'
+        ]
+    },
+    tabpanel: {
+        header: ({ props }) => ({
+            class: [
+                // Spacing
+                'mr-0',
+
+                // Misc
+                'outline-none',
+                {
+                    'opacity-60 cursor-default user-select-none select-none pointer-events-none': props?.disabled
+                }
+            ]
+        }),
+        headerAction: ({ parent, context }) => ({
+            class: [
+                'relative',
+
+                // Font
+                'font-semibold',
+
+                // Flexbox and Alignment
+                'flex items-center',
+
+                // Spacing
+                'py-4 px-[1.125rem]',
+                '-mb-px',
+
+                // Shape
+                'border-b-2',
+                'rounded-t-md',
+
+                // Colors and Conditions
+                {
+                    'border-surface-200 dark:border-surface-700': parent.state.d_activeIndex !== context.index,
+                    'bg-surface-0 dark:bg-surface-900': parent.state.d_activeIndex !== context.index,
+                    'text-surface-700 dark:text-surface-0/80': parent.state.d_activeIndex !== context.index,
+
+                    'bg-surface-0 dark:bg-surface-900': parent.state.d_activeIndex === context.index,
+                    'border-primary': parent.state.d_activeIndex === context.index,
+                    'text-primary': parent.state.d_activeIndex === context.index
+                },
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
+                {
+                    'hover:bg-surface-0 dark:hover:bg-surface-800/80': parent.state.d_activeIndex !== context.index,
+                    'hover:text-surface-900 dark:hover:text-surface-0': parent.state.d_activeIndex !== context.index
+                },
+
+                // Transitions
+                'transition-all duration-200',
+
+                // Misc
+                'cursor-pointer select-none text-decoration-none',
+                'overflow-hidden',
+                'user-select-none'
+            ]
+        }),
+        headerTitle: {
+            class: [
+                // Text
+                'leading-none',
+                'whitespace-nowrap'
+            ]
+        }
+    },
+    panelcontainer: {
+        class: [
+            // Spacing
+            'p-[1.125rem] pt-[0.875rem]',
+
+            // Shape
+            'border-0 rounded-none',
+            'border-br-md border-bl-md',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-900 dark:text-surface-0/80'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/tag/index.js b/packages/tailwindcss-presets/src/aura/tag/index.js
new file mode 100644
index 000000000..79f659efc
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/tag/index.js
@@ -0,0 +1,37 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            //Font
+            'text-xs font-bold',
+
+            //Alignments
+            'inline-flex items-center justify-center',
+
+            //Spacing
+            'px-[0.4rem] py-1',
+
+            //Shape
+            {
+                'rounded-md': !props.rounded,
+                'rounded-full': props.rounded
+            },
+
+            //Colors
+            {
+                'text-primary-highlight-inverse bg-primary-highlight': props.severity == null || props.severity == 'primary',
+                'text-green-700 dark:text-green-300 bg-green-100 dark:bg-green-500/20': props.severity == 'success',
+                'text-surface-700 dark:text-surface-300 bg-surface-100 dark:bg-surface-500/20': props.severity == 'secondary',
+                'text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-500/20': props.severity == 'info',
+                'text-orange-700 dark:text-orange-300 bg-orange-100 dark:bg-orange-500/20': props.severity == 'warning',
+                'text-red-700 dark:text-red-300 bg-red-100 dark:bg-red-500/20': props.severity == 'danger',
+                'text-surface-0 dark:text-surface-900 bg-surface-900 dark:bg-surface-0': props.severity == 'contrast'
+            }
+        ]
+    }),
+    value: {
+        class: 'leading-normal'
+    },
+    icon: {
+        class: 'mr-1 text-sm'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/terminal/index.js b/packages/tailwindcss-presets/src/aura/terminal/index.js
new file mode 100644
index 000000000..d7145669d
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/terminal/index.js
@@ -0,0 +1,60 @@
+export default {
+    root: {
+        class: [
+            // Spacing
+            'py-2 px-3',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-950 text-surface-700 dark:text-surface-0',
+            'border border-surface-200 dark:border-surface-700',
+
+            // Sizing & Overflow
+            'h-72 overflow-auto'
+        ]
+    },
+    container: {
+        class: [
+            // Flexbox
+            'flex items-center'
+        ]
+    },
+    prompt: {
+        class: [
+            // Color
+            'text-surface-700 dark:text-surface-0'
+        ]
+    },
+    response: {
+        class: [
+            // Color
+            'text-surface-700 dark:text-surface-0'
+        ]
+    },
+    command: {
+        class: [
+            // Color
+            'text-surface-700 dark:text-surface-0'
+        ]
+    },
+    commandtext: {
+        class: [
+            // Flexbox
+            'flex-1 shrink grow-0',
+
+            // Shape
+            'border-0',
+
+            // Spacing
+            'p-0',
+
+            // Color
+            'bg-transparent text-inherit',
+
+            // Outline
+            'outline-none'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/textarea/index.js b/packages/tailwindcss-presets/src/aura/textarea/index.js
new file mode 100644
index 000000000..b12bdbe93
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/textarea/index.js
@@ -0,0 +1,41 @@
+export default {
+    root: ({ context, props, parent }) => ({
+        class: [
+            // Font
+            'leading-none',
+
+            // Spacing
+            'm-0',
+            'py-2 px-3',
+
+            // Shape
+            'rounded-md',
+
+            // Colors
+            'text-surface-800 dark:text-white/80',
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+            { 'bg-surface-0 dark:bg-surface-950': !context.disabled },
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            'invalid:focus:ring-red-200',
+            'invalid:hover:border-red-500',
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'hover:border-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
+                'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
+            },
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },
+
+            // Misc
+            'appearance-none',
+            'transition-colors duration-200'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/tieredmenu/index.js b/packages/tailwindcss-presets/src/aura/tieredmenu/index.js
new file mode 100644
index 000000000..73af80c2f
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/tieredmenu/index.js
@@ -0,0 +1,118 @@
+export default {
+    root: {
+        class: [
+            // Shape
+            'rounded-md',
+
+            // Size
+            'min-w-[12rem]',
+            'p-1',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'border border-surface-200 dark:border-surface-700'
+        ]
+    },
+    menu: {
+        class: [
+            // Spacings and Shape
+            'list-none',
+            'm-0',
+            'p-0',
+            'outline-none'
+        ]
+    },
+    menuitem: {
+        class: 'relative my-[2px] [&:first-child]:mt-0'
+    },
+    content: ({ context }) => ({
+        class: [
+            //Shape
+            'rounded-[4px]',
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+            {
+                'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+                'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
+                'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+            },
+
+            // Transitions
+            'transition-shadow',
+            'duration-200',
+
+            // States
+            {
+                'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
+                'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
+            },
+
+            // Disabled
+            { 'opacity-60 pointer-events-none cursor-default': context.disabled }
+        ]
+    }),
+    action: {
+        class: [
+            'relative',
+            // Flexbox
+
+            'flex',
+            'items-center',
+
+            // Spacing
+            'py-2',
+            'px-3',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+
+            // Misc
+            'no-underline',
+            'overflow-hidden',
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    icon: {
+        class: [
+            // Spacing
+            'mr-2',
+
+            // Color
+            'text-surface-600 dark:text-white/70'
+        ]
+    },
+    label: {
+        class: ['leading-none']
+    },
+    submenuicon: {
+        class: [
+            // Position
+            'ml-auto'
+        ]
+    },
+    submenu: {
+        class: [
+            // Spacing
+            'p-1',
+            'm-0',
+            'list-none',
+            'min-w-[12.5rem]',
+
+            // Shape
+            'shadow-none sm:shadow-md',
+            'border border-surface-200 dark:border-surface-700',
+
+            // Position
+            'static sm:absolute',
+            'z-10',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900'
+        ]
+    },
+    separator: {
+        class: 'border-t border-surface-200 dark:border-surface-600 my-[2px]'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/timeline/index.js b/packages/tailwindcss-presets/src/aura/timeline/index.js
new file mode 100644
index 000000000..29db67fb4
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/timeline/index.js
@@ -0,0 +1,88 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'flex grow',
+            {
+                'flex-col': props.layout === 'vertical',
+                'flex-row flex-1': props.layout === 'horizontal'
+            }
+        ]
+    }),
+    event: ({ props, context }) => ({
+        class: [
+            'flex relative min-h-[70px]',
+            {
+                'flex-row-reverse': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1),
+                'flex-col flex-1': props.layout === 'horizontal',
+                'flex-col-reverse ': props.align === 'bottom' || (props.layout === 'horizontal' && props.align === 'alternate' && context.index % 2 === 1)
+            }
+        ]
+    }),
+    opposite: ({ props, context }) => ({
+        class: [
+            'flex-1',
+            {
+                'px-4': props.layout === 'vertical',
+                'py-4': props.layout === 'horizontal'
+            },
+            {
+                'text-right': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
+                'text-left': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
+            }
+        ]
+    }),
+    separator: ({ props }) => ({
+        class: [
+            'flex items-center flex-initial',
+            {
+                'flex-col': props.layout === 'vertical',
+                'flex-row': props.layout === 'horizontal'
+            }
+        ]
+    }),
+    marker: {
+        class: [
+            'relative',
+
+            // Display & Flexbox
+            'inline-flex items-center justify-center',
+
+            // Size
+            'w-[1.125rem] h-[1.125rem]',
+
+            // Appearance
+            'rounded-full border-2 border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-950',
+
+            // Before
+            'before:rounded-full before:w-[0.375rem] before:h-[0.375rem] before:bg-primary',
+            // After
+            'after:absolute after:rounded-full after:w-full after:h-full after:shadow-sm'
+        ]
+    },
+    connector: ({ props }) => ({
+        class: [
+            'grow bg-surface-300 dark:bg-surface-700',
+            {
+                'w-[2px]': props.layout === 'vertical',
+                'w-full h-[2px]': props.layout === 'horizontal'
+            }
+        ]
+    }),
+    content: ({ props, context }) => ({
+        class: [
+            'flex-1',
+            {
+                'px-4': props.layout === 'vertical',
+                'py-4': props.layout === 'horizontal'
+            },
+            {
+                'text-left': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
+                'text-right': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
+            },
+            {
+                'min-h-0': props.layout === 'vertical' && context.index === context.count - 1,
+                'grow-0': props.layout === 'horizontal' && context.index === context.count - 1
+            }
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/aura/toast/index.js b/packages/tailwindcss-presets/src/aura/toast/index.js
new file mode 100644
index 000000000..80edb8ebe
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/toast/index.js
@@ -0,0 +1,117 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            //Size and Shape
+            'w-96 rounded-md',
+
+            // Positioning
+            { '-translate-x-2/4': props.position == 'top-center' || props.position == 'bottom-center' }
+        ]
+    }),
+    container: ({ props }) => ({
+        class: [
+            'mb-4 rounded-md w-full',
+            'border border-transparent',
+            'backdrop-blur-[10px] shadow-md',
+
+            // Colors
+            {
+                'bg-blue-50/90 dark:bg-blue-500/20': props.message.severity == 'info',
+                'bg-green-50/90 dark:bg-green-500/20': props.message.severity == 'success',
+                'bg-surface-50 dark:bg-surface-800': props.message.severity == 'secondary',
+                'bg-orange-50/90 dark:bg-orange-500/20': props.message.severity == 'warn',
+                'bg-red-50/90 dark:bg-red-500/20': props.message.severity == 'error',
+                'bg-surface-950 dark:bg-surface-0': props.message.severity == 'contrast'
+            },
+            {
+                'border-blue-200 dark:border-blue-500/20': props.message.severity == 'info',
+                'border-green-200 dark:border-green-500/20': props.message.severity == 'success',
+                'border-surface-300 dark:border-surface-500/20': props.message.severity == 'secondary',
+                'border-orange-200 dark:border-orange-500/20': props.message.severity == 'warn',
+                'border-red-200 dark:border-red-500/20': props.message.severity == 'error',
+                'border-surface-950 dark:border-surface-0': props.message.severity == 'contrast'
+            },
+            {
+                'text-blue-700 dark:text-blue-300': props.message.severity == 'info',
+                'text-green-700 dark:text-green-300': props.message.severity == 'success',
+                'text-surface-700 dark:text-surface-300': props.message.severity == 'secondary',
+                'text-orange-700 dark:text-orange-300': props.message.severity == 'warn',
+                'text-red-700 dark:text-red-300': props.message.severity == 'error',
+                'text-surface-0 dark:text-surface-950': props.message.severity == 'contrast'
+            }
+        ]
+    }),
+    content: ({ props }) => ({
+        class: [
+            'flex p-3',
+            {
+                'items-start': props.message.summary,
+                'items-center': !props.message.summary
+            }
+        ]
+    }),
+    icon: ({ props }) => ({
+        class: [
+            // Sizing and Spacing
+            props.message.severity === 'contrast' || props.message.severity === 'secondary' ? 'w-0' : 'w-[1.125rem] h-[1.125rem] mr-2',
+            'text-lg leading-[normal]'
+        ]
+    }),
+    text: {
+        class: [
+            // Font and Text
+            'text-base leading-[normal]',
+            'ml-2',
+            'flex-1'
+        ]
+    },
+    summary: {
+        class: 'font-medium block'
+    },
+    detail: ({ props }) => ({
+        class: ['block', 'text-sm', props.message.severity === 'contrast' ? 'text-surface-0 dark:text-surface-950' : 'text-surface-700 dark:text-surface-0', { 'mt-2': props.message.summary }]
+    }),
+    closebutton: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+
+            // Size
+            'w-7 h-7',
+
+            // Spacing and Misc
+            'ml-auto  relative',
+
+            // Shape
+            'rounded-full',
+
+            // Colors
+            'bg-transparent',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // States
+            'hover:bg-surface-0/30 dark:hover:bg-[rgba(255,255,255,0.03)]',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1',
+            {
+                'focus:ring-blue-500 dark:focus:ring-blue-400': props.severity == 'info',
+                'focus:ring-green-500 dark:focus:ring-green-400': props.severity == 'success',
+                'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity == 'secondary',
+                'focus:ring-orange-500 dark:focus:ring-orange-400': props.severity == 'warn',
+                'focus:ring-red-500 dark:focus:ring-red-4000': props.severity == 'error',
+                'focus:ring-surface-0 dark:focus:ring-surface-950': props.severity == 'contrast'
+            },
+
+            // Misc
+            'overflow-hidden'
+        ]
+    }),
+    transition: {
+        enterFromClass: 'opacity-0 translate-y-2/4',
+        enterActiveClass: 'transition-[transform,opacity] duration-300',
+        leaveFromClass: 'max-h-[1000px]',
+        leaveActiveClass: '!transition-[max-height_.45s_cubic-bezier(0,1,0,1),opacity_.3s,margin-bottom_.3s] overflow-hidden',
+        leaveToClass: 'max-h-0 opacity-0 mb-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/togglebutton/index.js b/packages/tailwindcss-presets/src/aura/togglebutton/index.js
new file mode 100644
index 000000000..83c72c160
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/togglebutton/index.js
@@ -0,0 +1,90 @@
+export default {
+    root: {
+        class: [
+            'relative',
+
+            // Alignment
+            'inline-flex',
+            'align-bottom',
+
+            // Misc
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    box: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Alignments
+            'items-center inline-flex flex-1 text-center align-bottom justify-center',
+
+            // Sizes & Spacing
+            'px-4 py-2 leading-none',
+
+            // Shapes
+            'rounded-md',
+            'border',
+            { 'border-transparent': !props.invalid },
+
+            // Colors
+            'bg-surface-100 dark:bg-surface-950',
+            {
+                'text-surface-600 dark:text-white/60 before:bg-transparent': !props.modelValue,
+                'text-surface-800 dark:text-white/80 before:bg-surface-0 dark:before:bg-surface-800': props.modelValue
+            },
+
+            // Before
+            'before:absolute before:left-1 before:top-1 before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)] before:rounded-[4px] before:z-0',
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'peer-hover:text-surface-800 dark:peer-hover:text-white/80': !props.disabled && !props.modelValue,
+                'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled
+            },
+
+            // Transitions
+            'transition-all duration-200',
+
+            // Misc
+            { 'cursor-pointer': !props.disabled, 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    label: {
+        class: 'font-medium leading-[normal] text-center w-full z-10 relative'
+    },
+    input: {
+        class: [
+            'peer',
+
+            // Size
+            'w-full ',
+            'h-full',
+
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-20',
+
+            // Spacing
+            'p-0',
+            'm-0',
+
+            // Shape
+            'opacity-0',
+            'rounded-md',
+            'outline-none',
+            'border border-surface-200 dark:border-surface-700',
+
+            // Misc
+            'appearance-none',
+            'cursor-pointer'
+        ]
+    },
+    icon: {
+        class: ['relative z-10', 'mr-2']
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/toolbar/index.js b/packages/tailwindcss-presets/src/aura/toolbar/index.js
new file mode 100644
index 000000000..6a825fe43
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/toolbar/index.js
@@ -0,0 +1,28 @@
+export default {
+    root: {
+        class: [
+            // Flex & Alignment
+            'flex items-center justify-between flex-wrap',
+            'gap-2',
+
+            // Spacing
+            'p-3',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            'border border-surface-200 dark:border-surface-700'
+        ]
+    },
+    start: {
+        class: 'flex items-center'
+    },
+    center: {
+        class: 'flex items-center'
+    },
+    end: {
+        class: 'flex items-center'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/tooltip/index.js b/packages/tailwindcss-presets/src/aura/tooltip/index.js
new file mode 100644
index 000000000..212f76752
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/tooltip/index.js
@@ -0,0 +1,45 @@
+export default {
+    root: ({ context }) => ({
+        class: [
+            // Position and Shadows
+            'absolute',
+            'shadow-md',
+            'p-fadein',
+            // Spacing
+            {
+                'py-0 px-1': context?.right || context?.left || (!context?.right && !context?.left && !context?.top && !context?.bottom),
+                'py-1 px-0': context?.top || context?.bottom
+            }
+        ]
+    }),
+    arrow: ({ context }) => ({
+        class: [
+            // Position
+
+            'absolute',
+
+            // Size
+            'w-0',
+            'h-0',
+
+            // Shape
+            'border-transparent',
+            'border-solid',
+            {
+                'border-y-[10px] border-r-[10px] border-l-0 border-r-surface-700': context?.right || (!context?.right && !context?.left && !context?.top && !context?.bottom),
+                'border-y-[10px] border-l-[10px] border-r-0 border-l-surface-700': context?.left,
+                'border-x-[10px] border-t-[10px] border-b-0 border-t-surface-700': context?.top,
+                'border-x-[10px] border-b-[10px] border-t-0 border-b-surface-700': context?.bottom
+            },
+
+            // Spacing
+            {
+                '-mt-[10px] top-1/2': context?.right || context?.left || (!context?.right && !context?.left && !context?.top && !context?.bottom),
+                '-ml-[10px] left-1/2': context?.top || context?.bottom
+            }
+        ]
+    }),
+    text: {
+        class: ['p-3', 'bg-surface-700', 'text-white', 'leading-none', 'rounded-md', 'whitespace-pre-line', 'break-words']
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/tree/index.js b/packages/tailwindcss-presets/src/aura/tree/index.js
new file mode 100644
index 000000000..328391655
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/tree/index.js
@@ -0,0 +1,268 @@
+export default {
+    root: {
+        class: [
+            // Space
+            'p-4',
+
+            // Shape
+            'rounded-md',
+            'border-none',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-white/80'
+        ]
+    },
+    wrapper: {
+        class: ['overflow-auto']
+    },
+    container: {
+        class: [
+            // Spacing
+            'm-0 p-0',
+
+            // Misc
+            'list-none overflow-auto'
+        ]
+    },
+    node: {
+        class: ['p-0 my-[2px] mx-0 first:mt-0', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10']
+    },
+    content: ({ context, props }) => ({
+        class: [
+            // Flex and Alignment
+            'flex items-center',
+
+            // Shape
+            'rounded-md',
+
+            // Spacing
+            'py-1 px-2',
+
+            // Colors
+            context.selected ? 'bg-primary-highlight text-primary-highlight-inverse' : 'bg-transparent text-surface-600 dark:text-white/70',
+
+            // States
+            { 'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': (props.selectionMode == 'single' || props.selectionMode == 'multiple') && !context.selected },
+
+            // Transition
+            'transition-shadow duration-200',
+
+            { 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' }
+        ]
+    }),
+    toggler: ({ context }) => ({
+        class: [
+            // Flex and Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full',
+
+            // Size
+            'w-7 h-7',
+
+            // Spacing
+            'mr-2',
+
+            // Colors
+            'bg-transparent',
+            {
+                'text-surface-600 dark:text-white/70': !context.selected,
+                'text-primary-600 dark:text-white': context.selected,
+                invisible: context.leaf
+            },
+
+            // States
+            'hover:bg-surface-200/20 dark:hover:bg-surface-500/20',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'cursor-pointer select-none'
+        ]
+    }),
+    nodeCheckbox: ({ props, context, instance }) => ({
+        root: {
+            class: [
+                'relative',
+
+                // Alignment
+                'inline-flex',
+                'align-bottom',
+
+                // Size
+                'w-5',
+                'h-5',
+
+                // Spacing
+                'mr-2',
+
+                // Misc
+                'cursor-pointer',
+                'select-none'
+            ]
+        },
+        box: {
+            class: [
+                // Alignment
+                'flex',
+                'items-center',
+                'justify-center',
+
+                // Size
+                'w-5',
+                'h-5',
+
+                // Shape
+                'rounded',
+                'border',
+
+                // Colors
+                {
+                    'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
+                    'bg-surface-0  dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
+                    'border-primary bg-primary': context.checked
+                },
+
+                // States
+                {
+                    'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
+                    'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                    'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
+                    'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+                },
+
+                // Transitions
+                'transition-colors',
+                'duration-200'
+            ]
+        },
+        input: {
+            class: [
+                'peer',
+
+                // Size
+                'w-full ',
+                'h-full',
+
+                // Position
+                'absolute',
+                'top-0 left-0',
+                'z-10',
+
+                // Spacing
+                'p-0',
+                'm-0',
+
+                // Shape
+                'opacity-0',
+                'rounded-md',
+                'outline-none',
+                'border border-surface-300 dark:border-surface-700',
+
+                // Misc
+                'appearance-none',
+                'cursor-pointer'
+            ]
+        },
+        icon: {
+            class: [
+                // Font
+                'text-base leading-none',
+
+                // Size
+                'w-[0.875rem]',
+                'h-[0.875rem]',
+
+                // Colors
+                {
+                    'text-white dark:text-surface-950': !instance.partialChecked,
+                    'text-surface-700 dark:text-surface-0/80': instance.partialChecked
+                },
+
+                // Transitions
+                'transition-all',
+                'duration-200'
+            ]
+        }
+    }),
+    nodeicon: {
+        class: [
+            // Space
+            'mr-2',
+
+            // Color
+            'text-surface-600 dark:text-white/70'
+        ]
+    },
+    subgroup: {
+        class: ['m-0 list-none p-0 pl-4 [&:not(ul)]:pl-0 [&:not(ul)]:my-[2px]']
+    },
+    filtercontainer: {
+        class: [
+            'relative block',
+
+            // Space
+            'mb-2',
+
+            // Size
+            'w-full'
+        ]
+    },
+    input: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Font
+            'leading-none',
+
+            // Spacing
+            'm-0',
+            'py-2 px-3 pr-10',
+
+            // Size
+            'w-full',
+
+            // Shape
+            'rounded-md',
+            'border',
+
+            // Colors
+            'text-surface-800 dark:text-white/80',
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+            { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+            { 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+            // Invalid State
+            'invalid:focus:ring-red-200',
+            'invalid:hover:border-red-500',
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'hover:border-surface-400 dark:hover:border-surface-600': !props.disabled && !props.invalid,
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !props.disabled,
+                'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+            },
+
+            // Transition & Misc
+            'appearance-none',
+            'transition-colors duration-200'
+        ]
+    }),
+    loadingicon: {
+        class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin']
+    },
+    searchicon: {
+        class: [
+            // Position
+            'absolute top-1/2 -mt-2 right-3 z-20',
+
+            // Color
+            'text-surface-600 dark:hover:text-white/70'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/treeselect/index.js b/packages/tailwindcss-presets/src/aura/treeselect/index.js
new file mode 100644
index 000000000..35e02bcd9
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/treeselect/index.js
@@ -0,0 +1,367 @@
+export default {
+    root: ({ props, state }) => ({
+        class: [
+            // Display and Position
+            'inline-flex',
+            'relative',
+
+            // Shape
+            'rounded-md',
+
+            // Color and Background
+            { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+            'border',
+            { 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+            // Invalid State
+            'invalid:focus:ring-red-200',
+            'invalid:hover:border-red-500',
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // Transitions
+            'transition-all',
+            'duration-200',
+
+            // States
+            { 'hover:border-surface-400 dark:hover:border-surface-600': !props.invalid },
+            { 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400 z-10': state.focused },
+
+            // Misc
+            'cursor-pointer',
+            'select-none',
+            { 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    labelContainer: {
+        class: ['overflow-hidden flex flex-auto cursor-pointer']
+    },
+    label: {
+        class: [
+            'block leading-[normal]',
+
+            // Space
+            'py-2 px-3',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis'
+        ]
+    },
+    trigger: {
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+            'shrink-0',
+
+            // Color and Background
+            'bg-transparent',
+            'text-surface-500',
+
+            // Size
+            'w-12',
+
+            // Shape
+            'rounded-r-md'
+        ]
+    },
+    panel: {
+        class: [
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-white/80',
+
+            // Shape
+            'border border-surface-300 dark:border-surface-700',
+            'rounded-md',
+            'shadow-md'
+        ]
+    },
+    wrapper: {
+        class: [
+            // Sizing
+            'max-h-[200px]',
+
+            // Misc
+            'overflow-auto'
+        ]
+    },
+    tree: {
+        root: {
+            class: [
+                // Space
+                'p-1',
+
+                // Shape
+                'rounded-md',
+                'border-none',
+
+                // Color
+                'bg-surface-0 dark:bg-surface-900',
+                'text-surface-700 dark:text-white/80'
+            ]
+        },
+        wrapper: {
+            class: ['overflow-auto']
+        },
+        container: {
+            class: [
+                // Spacing
+                'm-0 p-0',
+
+                // Misc
+                'list-none overflow-auto'
+            ]
+        },
+        node: {
+            class: ['p-0 my-[2px] mx-0 first:mt-0', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10']
+        },
+        content: ({ context, props }) => ({
+            class: [
+                // Flex and Alignment
+                'flex items-center',
+
+                // Shape
+                'rounded-md',
+
+                // Spacing
+                'py-1 px-2',
+
+                // Colors
+                context.selected ? 'bg-primary-highlight text-primary-highlight-inverse' : 'bg-transparent text-surface-600 dark:text-white/70',
+
+                // States
+                { 'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': (props.selectionMode == 'single' || props.selectionMode == 'multiple') && !context.selected },
+
+                // Transition
+                'transition-shadow duration-200',
+
+                { 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' }
+            ]
+        }),
+        toggler: ({ context }) => ({
+            class: [
+                // Flex and Alignment
+                'inline-flex items-center justify-center',
+
+                // Shape
+                'border-0 rounded-full',
+
+                // Size
+                'w-7 h-7',
+
+                // Spacing
+                'mr-2',
+
+                // Colors
+                'bg-transparent',
+                {
+                    'text-surface-600 dark:text-white/70': !context.selected,
+                    'text-primary-600 dark:text-white': context.selected,
+                    invisible: context.leaf
+                },
+
+                // States
+                'hover:bg-surface-200/20 dark:hover:bg-surface-500/20',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+                // Transition
+                'transition duration-200',
+
+                // Misc
+                'cursor-pointer select-none'
+            ]
+        }),
+        nodeCheckbox: ({ props, context, instance }) => ({
+            root: {
+                class: [
+                    'relative',
+
+                    // Alignment
+                    'inline-flex',
+                    'align-bottom',
+
+                    // Size
+                    'w-5',
+                    'h-5',
+
+                    // Spacing
+                    'mr-2',
+
+                    // Misc
+                    'cursor-pointer',
+                    'select-none'
+                ]
+            },
+            box: {
+                class: [
+                    // Alignment
+                    'flex',
+                    'items-center',
+                    'justify-center',
+
+                    // Size
+                    'w-5',
+                    'h-5',
+
+                    // Shape
+                    'rounded',
+                    'border',
+
+                    // Colors
+                    {
+                        'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
+                        'bg-surface-0 dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
+                        'border-primary bg-primary': context.checked
+                    },
+
+                    // States
+                    {
+                        'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
+                        'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                        'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
+                        'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+                    },
+
+                    // Transitions
+                    'transition-colors',
+                    'duration-200'
+                ]
+            },
+            input: {
+                class: [
+                    'peer',
+
+                    // Size
+                    'w-full ',
+                    'h-full',
+
+                    // Position
+                    'absolute',
+                    'top-0 left-0',
+                    'z-10',
+
+                    // Spacing
+                    'p-0',
+                    'm-0',
+
+                    // Shape
+                    'opacity-0',
+                    'rounded-md',
+                    'outline-none',
+                    'border border-surface-300 dark:border-surface-700',
+
+                    // Misc
+                    'appearance-none',
+                    'cursor-pointer'
+                ]
+            },
+            icon: {
+                class: [
+                    // Font
+                    'text-base leading-none',
+
+                    // Size
+                    'w-[0.875rem]',
+                    'h-[0.875rem]',
+
+                    // Colors
+                    {
+                        'text-white dark:text-surface-950': !instance.partialChecked,
+                        'text-surface-700 dark:text-surface-0/80': instance.partialChecked
+                    },
+
+                    // Transitions
+                    'transition-all',
+                    'duration-200'
+                ]
+            }
+        }),
+        nodeicon: {
+            class: [
+                // Space
+                'mr-2',
+
+                // Color
+                'text-surface-600 dark:text-white/70'
+            ]
+        },
+        subgroup: {
+            class: ['m-0 list-none p-0 pl-4 [&:not(ul)]:pl-0 [&:not(ul)]:my-[2px]']
+        },
+        filtercontainer: {
+            class: [
+                'relative block',
+
+                // Space
+                'mb-2',
+
+                // Size
+                'w-full'
+            ]
+        },
+        input: ({ props }) => ({
+            class: [
+                'relative',
+
+                // Font
+                'leading-none',
+
+                // Spacing
+                'm-0',
+                'py-2 px-3 pr-10',
+
+                // Size
+                'w-full',
+
+                // Shape
+                'rounded-md',
+                'border',
+
+                // Colors
+                'text-surface-800 dark:text-white/80',
+                'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+                { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+                { 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+                // Invalid State
+                'invalid:focus:ring-red-200',
+                'invalid:hover:border-red-500',
+                { 'border-red-500 dark:border-red-400': props.invalid },
+
+                // States
+                {
+                    'hover:border-surface-400 dark:hover:border-surface-600': !props.disabled && !props.invalid,
+                    'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !props.disabled,
+                    'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+                },
+
+                // Transition & Misc
+                'appearance-none',
+                'transition-colors duration-200'
+            ]
+        }),
+        loadingicon: {
+            class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin']
+        },
+        searchicon: {
+            class: [
+                // Position
+                'absolute top-1/2 -mt-2 right-3 z-20',
+
+                // Color
+                'text-surface-600 dark:hover:text-white/70'
+            ]
+        }
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/treetable/index.js b/packages/tailwindcss-presets/src/aura/treetable/index.js
new file mode 100644
index 000000000..b96147457
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/treetable/index.js
@@ -0,0 +1,442 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+            {
+                'flex flex-col h-full': props.scrollHeight === 'flex'
+            }
+        ]
+    }),
+    loadingoverlay: {
+        class: [
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-20',
+
+            // Flex & Alignment
+            'flex items-center justify-center',
+
+            // Size
+            'w-full h-full',
+
+            // Color
+            'bg-surface-100/40 dark:bg-surface-800/40',
+
+            // Transition
+            'transition duration-200'
+        ]
+    },
+    loadingicon: {
+        class: 'w-8 h-8 animate-spin'
+    },
+    wrapper: ({ props }) => ({
+        class: [
+            // Overflow
+            {
+                'relative overflow-auto': props.scrollable,
+                'overflow-x-auto': props.resizableColumns
+            }
+        ]
+    }),
+    header: ({ props }) => ({
+        class: [
+            'font-semibold',
+
+            // Shape
+            props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0',
+
+            // Spacing
+            'p-4',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            'border-surface-200 dark:border-surface-700',
+            'text-surface-700 dark:text-white/80'
+        ]
+    }),
+    footer: {
+        class: [
+            'font-semibold',
+
+            // Shape
+            'border-t-0 border-b border-x-0',
+
+            // Spacing
+            'p-4',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            'border-surface-200 dark:border-surface-700',
+            'text-surface-700 dark:text-white/80'
+        ]
+    },
+    table: {
+        class: [
+            // Table & Width
+            'border-collapse table-fixed w-full '
+        ]
+    },
+    thead: ({ props }) => ({
+        class: [
+            // Position & Z-index
+            {
+                'top-0 z-40 sticky': props.scrollable
+            }
+        ]
+    }),
+    tbody: ({ props }) => ({
+        class: [
+            // Block Display
+            {
+                block: props.scrollable
+            }
+        ]
+    }),
+    tfoot: ({ props }) => ({
+        class: [
+            // Block Display
+            {
+                block: props.scrollable
+            }
+        ]
+    }),
+    headerrow: ({ props }) => ({
+        class: [
+            // Flexbox & Width
+            {
+                'flex flex-nowrap w-full': props.scrollable
+            }
+        ]
+    }),
+    row: ({ context, props }) => ({
+        class: [
+            // Flex
+            { 'flex flex-nowrap w-full': context.scrollable },
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            { 'bg-primary-highlight text-primary-highlight-inverse': context.selected },
+            { 'bg-surface-0 text-surface-600 dark:bg-surface-900': !context.selected },
+
+            // Hover & Flexbox
+            {
+                'hover:bg-surface-100 dark:bg-surface-800/50': context.selectable && !context.selected
+            },
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 ring-inset dark:focus:ring-primary-400',
+
+            // Transition
+            { 'transition duration-200': (props.selectionMode && !context.selected) || props.rowHover }
+        ]
+    }),
+    headercell: ({ context, props }) => ({
+        class: [
+            'font-semibold',
+            'leading-[normal]',
+
+            // Position
+            { 'sticky z-40': context.scrollable && context.scrollDirection === 'both' && context.frozen },
+
+            // Flex & Alignment
+            {
+                'flex flex-1 items-center': context.scrollable,
+                'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
+            },
+            'text-left',
+
+            // Shape
+            { 'first:border-l border-y border-r': context?.showGridlines },
+            'border-0 border-b border-solid',
+
+            // Spacing
+            context?.size === 'small' ? 'py-[0.375rem] px-2' : context?.size === 'large' ? 'py-[0.9375rem] px-5' : 'py-3 px-4',
+
+            // Color
+            (props.sortable === '' || props.sortable) && context.sorted ? 'bg-primary-highlight text-primary-highlight-inverse' : 'bg-surface-0 text-surface-700 dark:text-white/80 dark:bg-surface-900',
+            'border-surface-200 dark:border-surface-700',
+
+            // States
+            { 'hover:bg-surface-100 dark:hover:bg-surface-80/50': (props.sortable === '' || props.sortable) && !context?.sorted },
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+            // Transition
+            { 'transition duration-200': props.sortable === '' || props.sortable },
+
+            // Misc
+            {
+                'overflow-hidden relative bg-clip-padding': context.resizable && !context.frozen
+            }
+        ]
+    }),
+    column: {
+        headercell: ({ context, props }) => ({
+            class: [
+                'font-semibold',
+                'leading-[normal]',
+
+                // Position
+                { 'sticky z-40': context.scrollable && context.scrollDirection === 'both' && context.frozen },
+
+                // Flex & Alignment
+                {
+                    'flex flex-1 items-center': context.scrollable,
+                    'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
+                },
+                'text-left',
+
+                // Shape
+                { 'first:border-l border-y border-r': context?.showGridlines },
+                'border-0 border-b border-solid',
+
+                // Spacing
+                context?.size === 'small' ? 'py-[0.375rem] px-2' : context?.size === 'large' ? 'py-[0.9375rem] px-5' : 'py-3 px-4',
+
+                // Color
+                (props.sortable === '' || props.sortable) && context.sorted ? 'bg-primary-highlight text-primary-highlight-inverse' : 'bg-surface-0 text-surface-700 dark:text-white/80 dark:bg-surface-900',
+                'border-surface-200 dark:border-surface-700',
+
+                // States
+                { 'hover:bg-surface-100 dark:hover:bg-surface-80/50': (props.sortable === '' || props.sortable) && !context?.sorted },
+                'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+                // Transition
+                { 'transition duration-200': props.sortable === '' || props.sortable },
+
+                // Misc
+                {
+                    'overflow-hidden relative bg-clip-padding': context.resizable && !context.frozen
+                }
+            ]
+        }),
+        bodycell: ({ context }) => ({
+            class: [
+                // Font
+                'leading-[normal]',
+
+                // Position
+                {
+                    sticky: context.scrollable && context.scrollDirection === 'both' && context.frozen
+                },
+
+                // Flex & Alignment
+                {
+                    'flex flex-1 items-center': context.scrollable,
+                    'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
+                },
+                'text-left',
+
+                // Shape
+                'border-0 border-b border-solid',
+                'border-surface-200 dark:border-surface-700',
+                {
+                    'border-x-0 border-l-0': !context.showGridlines
+                },
+                { 'first:border-l border-r border-b': context?.showGridlines },
+
+                // Spacing
+                context?.size === 'small' ? 'py-[0.375rem] px-2' : context?.size === 'large' ? 'py-[0.9375rem] px-5' : 'py-3 px-4',
+
+                // Misc
+                {
+                    'cursor-pointer': context.selectable,
+                    sticky: context.scrollable && context.scrollDirection === 'both' && context.frozen,
+                    'border-x-0 border-l-0': !context.showGridlines
+                }
+            ]
+        }),
+        rowtoggler: {
+            class: [
+                'relative',
+
+                // Flex & Alignment
+                'inline-flex items-center justify-center',
+                'text-left align-middle',
+
+                // Spacing
+                'm-0 mr-2 p-0',
+
+                // Size
+                'w-7 h-7',
+
+                // Shape
+                'border-0 rounded-full',
+
+                // Color
+                'text-surface-700 dark:text-white/70',
+                'border-transparent',
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+                'hover:text-surface-700 hover:bg-surface-50 dark:hover:bg-surface-800/50',
+
+                // Transition
+                'transition duration-200',
+
+                // Misc
+                'overflow-hidden',
+                'cursor-pointer select-none'
+            ]
+        },
+        sorticon: ({ context }) => ({
+            class: ['ml-2 inline-block', context.sorted ? 'fill-primary-highlight-inverse' : 'fill-surface-700 dark:fill-white/70']
+        }),
+        sortbadge: {
+            class: [
+                // Flex & Alignment
+                'inline-flex items-center justify-center align-middle',
+
+                // Shape
+                'rounded-full',
+
+                // Size
+                'w-[1.143rem] leading-[1.143rem]',
+
+                // Spacing
+                'ml-2',
+
+                // Color
+                'text-primary-highlight-inverse bg-primary-highlight'
+            ]
+        },
+        columnresizer: {
+            class: [
+                'block',
+
+                // Position
+                'absolute top-0 right-0',
+
+                // Sizing
+                'w-2 h-full',
+
+                // Spacing
+                'm-0 p-0',
+
+                // Color
+                'border border-transparent',
+
+                // Misc
+                'cursor-col-resize'
+            ]
+        },
+        rowCheckbox: ({ props, context, instance }) => ({
+            root: {
+                class: [
+                    'relative',
+
+                    // Alignment
+                    'inline-flex',
+                    'align-middle',
+
+                    // Size
+                    'w-5',
+                    'h-5',
+
+                    // Spacing
+                    'mr-2',
+
+                    // Misc
+                    'cursor-pointer',
+                    'select-none'
+                ]
+            },
+            box: {
+                class: [
+                    // Alignment
+                    'flex',
+                    'items-center',
+                    'justify-center',
+
+                    // Size
+                    'w-5',
+                    'h-5',
+
+                    // Shape
+                    'rounded',
+                    'border',
+
+                    // Colors
+                    {
+                        'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
+                        'bg-surface-0  dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
+                        'border-primary bg-primary': context.checked
+                    },
+
+                    // Invalid State
+                    'invalid:focus:ring-red-200',
+                    'invalid:hover:border-red-500',
+                    { 'border-red-500 dark:border-red-400': props.invalid },
+
+                    // States
+                    {
+                        'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
+                        'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                        'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
+                        'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+                    },
+
+                    // Transitions
+                    'transition-colors',
+                    'duration-200'
+                ]
+            },
+            input: {
+                class: [
+                    'peer',
+
+                    // Size
+                    'w-full ',
+                    'h-full',
+
+                    // Position
+                    'absolute',
+                    'top-0 left-0',
+                    'z-10',
+
+                    // Spacing
+                    'p-0',
+                    'm-0',
+
+                    // Shape
+                    'opacity-0',
+                    'rounded-md',
+                    'outline-none',
+                    'border-1 border-surface-200 dark:border-surface-700',
+
+                    // Misc
+                    'appearance-none',
+                    'cursor-pointer'
+                ]
+            },
+            icon: {
+                class: [
+                    // Font
+                    'text-base leading-none',
+
+                    // Size
+                    'w-[0.875rem]',
+                    'h-[0.875rem]',
+
+                    // Colors
+                    {
+                        'text-white dark:text-surface-950': !instance.partialChecked,
+                        'text-gray dark:text-white': instance.partialChecked
+                    },
+
+                    // Transitions
+                    'transition-all',
+                    'duration-200'
+                ]
+            }
+        }),
+
+        transition: {
+            enterFromClass: 'opacity-0 scale-y-[0.8]',
+            enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+            leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+            leaveToClass: 'opacity-0'
+        }
+    },
+    resizehelper: {
+        class: 'absolute hidden w-[2px] z-20 bg-primary'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/aura/tristatecheckbox/index.js b/packages/tailwindcss-presets/src/aura/tristatecheckbox/index.js
new file mode 100644
index 000000000..a4a8b945c
--- /dev/null
+++ b/packages/tailwindcss-presets/src/aura/tristatecheckbox/index.js
@@ -0,0 +1,115 @@
+export default {
+    root: {
+        class: [
+            'relative',
+
+            // Alignment
+            'inline-flex',
+            'align-bottom',
+
+            // Size
+            'w-5',
+            'h-5',
+
+            // Misc
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    box: ({ props, context }) => ({
+        class: [
+            // Alignment
+            'flex',
+            'items-center',
+            'justify-center',
+
+            // Size
+            'w-5',
+            'h-5',
+
+            // Shape
+            'rounded',
+            'border',
+
+            // Colors
+            {
+                'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
+                'bg-surface-0 dark:bg-surface-900': !context.active && !props.invalid && !props.disabled,
+                'border-primary bg-primary': context.active
+            },
+
+            // Invalid State
+            'invalid:focus:ring-red-200',
+            'invalid:hover:border-red-500',
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
+                'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
+                'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+            },
+
+            // Transitions
+            'transition-colors',
+            'duration-200'
+        ]
+    }),
+    input: {
+        class: [
+            'peer',
+
+            // Size
+            'w-full ',
+            'h-full',
+
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-10',
+
+            // Spacing
+            'p-0',
+            'm-0',
+
+            // Shape
+            'opacity-0',
+            'rounded',
+            'outline-none',
+            'border border-surface-300 dark:border-surface-700',
+
+            // Misc
+            'appearance-none',
+            'cursor-pointer'
+        ]
+    },
+    checkicon: {
+        class: [
+            // Size
+            'w-[0.875rem]',
+            'h-[0.875rem]',
+
+            // Colors
+            'text-white dark:text-surface-950',
+
+            // Transitions
+            'transition-all',
+            'duration-200'
+        ]
+    },
+    uncheckicon: {
+        class: [
+            // Size
+            'w-[0.875rem]',
+            'h-[0.875rem]',
+
+            // Colors
+            'text-white dark:text-surface-950',
+
+            // Transitions
+            'transition-all',
+            'duration-200'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/accordion/index.js b/packages/tailwindcss-presets/src/lara/accordion/index.js
new file mode 100644
index 000000000..24fcb5063
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/accordion/index.js
@@ -0,0 +1,78 @@
+export default {
+    accordiontab: {
+        root: {
+            class: 'mb-1'
+        },
+        header: ({ props }) => ({
+            class: [
+                // State
+                { 'select-none pointer-events-none cursor-default opacity-60': props?.disabled }
+            ]
+        }),
+        headerAction: ({ context }) => ({
+            class: [
+                //Font
+                'font-bold',
+                'leading-none',
+
+                // Alignments
+                'flex items-center',
+                'relative',
+
+                // Sizing
+                'p-5',
+
+                // Shape
+                'rounded-t-md',
+                { 'rounded-br-md rounded-bl-md': !context.active, 'rounded-br-0 rounded-bl-0': context.active },
+
+                // Color
+                'border border-surface-200 dark:border-surface-700',
+                'bg-surface-50 dark:bg-surface-800',
+                'text-surface-600 dark:text-surface-0/80',
+                { 'text-surface-900': context.active },
+
+                // Transition
+                'transition duration-200 ease-in-out',
+                'transition-shadow duration-200',
+
+                // States
+                'hover:bg-surface-100 dark:hover:bg-surface-700/40',
+                'hover:text-surface-900',
+                'focus:outline-none focus:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50 ring-inset dark:focus-visible:ring-primary-300/50', // Focus
+
+                // Misc
+                'cursor-pointer no-underline select-none'
+            ]
+        }),
+        headerIcon: {
+            class: 'inline-block mr-2'
+        },
+        headerTitle: {
+            class: 'leading-none'
+        },
+        content: {
+            class: [
+                // Spacing
+                'p-5',
+
+                //Shape
+                'rounded-tl-none rounded-tr-none rounded-br-lg rounded-bl-lg',
+                'border-t-0',
+
+                // Color
+                'bg-surface-0 dark:bg-surface-800',
+                'border border-surface-200 dark:border-surface-700',
+                'text-surface-700 dark:text-surface-0/80'
+            ]
+        },
+        transition: {
+            enterFromClass: 'max-h-0',
+            enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+            enterToClass: 'max-h-[1000px]',
+            leaveFromClass: 'max-h-[1000px]',
+            leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+            leaveToClass: 'max-h-0'
+        }
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/autocomplete/index.js b/packages/tailwindcss-presets/src/lara/autocomplete/index.js
new file mode 100644
index 000000000..229ef0908
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/autocomplete/index.js
@@ -0,0 +1,261 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Flex
+            'inline-flex',
+
+            // Size
+            { 'w-full': props.multiple },
+
+            // Color
+            'text-surface-900 dark:text-surface-0',
+
+            //States
+            {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            }
+        ]
+    }),
+    container: ({ props, state }) => ({
+        class: [
+            // Font
+            'text-base leading-[normal]',
+
+            // Flex
+            'flex items-center flex-wrap',
+            'gap-2',
+
+            // Spacing
+            'm-0 list-none',
+            'px-3 py-1.5',
+
+            // Size
+            'w-full',
+            'min-h-[2.877rem]',
+
+            // Shape
+            'appearance-none rounded-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+            'bg-surface-0 dark:bg-surface-900',
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            { 'hover:border-primary': !props.invalid },
+            'focus:outline-none focus:outline-offset-0',
+            { 'ring ring-primary-400/50 dark:ring-primary-300/50': state.focused },
+            { 'ring ring-primary-400/50 dark:ring-primary-300/50': state.hovered },
+            // Transition
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-text overflow-hidden'
+        ]
+    }),
+    inputtoken: {
+        class: ['py-1.5 px-0', 'inline-flex flex-auto']
+    },
+    input: ({ props, parent }) => ({
+        class: [
+            // Font
+            'text-base leading-[normal]',
+
+            // Shape
+            'appearance-none rounded-md',
+            { 'rounded-tr-none rounded-br-none': props.dropdown },
+            { 'outline-none shadow-none rounded-none': props.multiple },
+
+            // Size
+            { 'w-full': props.multiple },
+
+            // Spacing
+            'm-0',
+            { 'p-3': !props.multiple, 'p-0': props.multiple },
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+            'border',
+            {
+                'bg-surface-0 dark:bg-surface-900': !props.multiple,
+                ' border-surface-300 dark:border-surface-700': !props.multiple && !props.invalid,
+                'border-0 bg-transparent': props.multiple
+            },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            { 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !props.multiple },
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== '' },
+
+            // Transition
+            'transition-colors duration-200'
+        ]
+    }),
+    token: {
+        class: [
+            // Flex
+            'inline-flex items-center',
+
+            // Spacings
+            'py-1.5 px-3',
+
+            // Shape
+            'rounded-[1.14rem]',
+
+            // Colors
+            'bg-surface-200 dark:bg-surface-700',
+            'text-surface-700 dark:text-white/70',
+
+            // Misc
+            'cursor-default'
+        ]
+    },
+    label: {
+        class: 'leading-[normal]'
+    },
+    removeTokenIcon: {
+        class: [
+            // Shape
+            'rounded-md leading-6',
+
+            // Spacing
+            'ml-2',
+
+            // Size
+            'w-4 h-4',
+
+            // Transition
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    },
+    dropdownbutton: {
+        root: {
+            class: [
+                'relative',
+
+                // Alignments
+                'items-center inline-flex text-center align-bottom',
+
+                // Shape
+                'rounded-r-md',
+
+                // Size
+                'px-4 py-3 leading-[normal]',
+
+                // Colors
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+            ]
+        }
+    },
+    loadingicon: {
+        class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[0.5rem] -mt-2 animate-spin']
+    },
+    panel: {
+        class: [
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-white/80',
+
+            // Shape
+            'border-0',
+            'rounded-md',
+            'shadow-md',
+
+            // Size
+            'max-h-[200px] overflow-auto'
+        ]
+    },
+    list: {
+        class: 'py-3 px-0 list-none m-0'
+    },
+    item: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Font
+            'font-normal text-base leading-[normal]',
+
+            // Spacing
+            'm-0 px-5 py-3',
+
+            // Shape
+            'border-0 rounded-none',
+
+            // Colors
+            {
+                'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
+                'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
+                'text-surface-700 dark:text-white/80': context.focused && !context.selected,
+
+                'text-primary-highlight-inverse': context.selected,
+                'bg-primary-highlight': context.selected
+            },
+
+            //States
+            { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected },
+            { 'hover:bg-primary-highlight-hover': context.selected },
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+
+            // Transition
+            'transition-shadow duration-200',
+
+            // Misc
+            'cursor-pointer overflow-hidden whitespace-nowrap'
+        ]
+    }),
+    itemgroup: {
+        class: [
+            'font-bold',
+
+            // Spacing
+            'm-0 p-3',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-700',
+            'text-surface-800 dark:text-white/80',
+
+            // Misc
+            'cursor-auto'
+        ]
+    },
+    emptymessage: {
+        class: [
+            // Font
+            'leading-[normal]',
+
+            // Spacing
+            'py-3 px-5',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-transparent'
+        ]
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/avatar/index.js b/packages/tailwindcss-presets/src/lara/avatar/index.js
new file mode 100644
index 000000000..9c77beb98
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/avatar/index.js
@@ -0,0 +1,43 @@
+export default {
+    root: ({ props, parent }) => ({
+        class: [
+            // Font
+            {
+                'text-xl': props.size == 'large',
+                'text-2xl': props.size == 'xlarge'
+            },
+
+            // Alignments
+            'inline-flex items-center justify-center',
+            'relative',
+
+            // Sizes
+            {
+                'h-8 w-8': props.size == null || props.size == 'normal',
+                'w-12 h-12': props.size == 'large',
+                'w-16 h-16': props.size == 'xlarge'
+            },
+            { '-ml-4': parent.instance.$style?.name == 'avatargroup' },
+
+            // Shapes
+            {
+                'rounded-lg': props.shape == 'square',
+                'rounded-full': props.shape == 'circle'
+            },
+            { 'border-2': parent.instance.$style?.name == 'avatargroup' },
+
+            // Colors
+            'bg-surface-300 dark:bg-surface-700',
+            { 'border-white dark:border-surface-800': parent.instance.$style?.name == 'avatargroup' }
+        ]
+    }),
+    image: ({ props }) => ({
+        class: [
+            'h-full w-full',
+            {
+                'rounded-lg': props.shape == 'square',
+                'rounded-full': props.shape == 'circle'
+            }
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/avatargroup/index.js b/packages/tailwindcss-presets/src/lara/avatargroup/index.js
new file mode 100644
index 000000000..d267e0698
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/avatargroup/index.js
@@ -0,0 +1,5 @@
+export default {
+    root: {
+        class: 'flex items-center'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/badge/index.js b/packages/tailwindcss-presets/src/lara/badge/index.js
new file mode 100644
index 000000000..3c4a713f6
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/badge/index.js
@@ -0,0 +1,43 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Font
+            'font-bold',
+
+            {
+                'text-xs leading-[1.5rem]': props.size == null,
+                'text-lg leading-[2.25rem]': props.size == 'large',
+                'text-2xl leading-[3rem]': props.size == 'xlarge'
+            },
+
+            // Alignment
+            'text-center inline-block',
+
+            // Size
+            'p-0 px-1',
+            {
+                'min-w-[1.5rem] h-[1.5rem]': props.size == null,
+                'min-w-[2.25rem] h-[2.25rem]': props.size == 'large',
+                'min-w-[3rem] h-[3rem]': props.size == 'xlarge'
+            },
+
+            // Shape
+            {
+                'rounded-full': props.value.length == 1,
+                'rounded-[0.71rem]': props.value.length !== 1
+            },
+
+            // Color
+            'text-primary-inverse',
+            {
+                'bg-primary': props.severity == null || props.severity == 'primary',
+                'bg-surface-500 dark:bg-surface-400': props.severity == 'secondary',
+                'bg-green-500 dark:bg-green-400': props.severity == 'success',
+                'bg-blue-500 dark:bg-blue-400': props.severity == 'info',
+                'bg-orange-500 dark:bg-orange-400': props.severity == 'warning',
+                'bg-purple-500 dark:bg-purple-400': props.severity == 'help',
+                'bg-red-500 dark:bg-red-400': props.severity == 'danger'
+            }
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/badgedirective/index.js b/packages/tailwindcss-presets/src/lara/badgedirective/index.js
new file mode 100644
index 000000000..19b6e2e35
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/badgedirective/index.js
@@ -0,0 +1,43 @@
+export default {
+    root: ({ context }) => ({
+        class: [
+            // Font
+            'font-bold',
+            'text-xs leading-[normal]',
+
+            // Alignment
+            'flex items-center justify-center',
+            'text-center',
+
+            // Position
+            'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right',
+
+            // Size
+            'm-0',
+            {
+                'p-0': context.nogutter || context.dot,
+                'px-2': !context.nogutter && !context.dot,
+                'min-w-[0.5rem] w-2 h-2': context.dot,
+                'min-w-[1.5rem] h-6': !context.dot
+            },
+
+            // Shape
+            {
+                'rounded-full': context.nogutter || context.dot,
+                'rounded-[10px]': !context.nogutter && !context.dot
+            },
+
+            // Color
+            'text-primary-inverse',
+            {
+                'bg-primary': !context.info && !context.success && !context.warning && !context.danger && !context.help && !context.secondary,
+                'bg-surface-500 dark:bg-surface-400': context.secondary,
+                'bg-green-500 dark:bg-green-400': context.success,
+                'bg-blue-500 dark:bg-blue-400': context.info,
+                'bg-orange-500 dark:bg-orange-400': context.warning,
+                'bg-purple-500 dark:bg-purple-400': context.help,
+                'bg-red-500 dark:bg-red-400': context.danger
+            }
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/blockui/index.js b/packages/tailwindcss-presets/src/lara/blockui/index.js
new file mode 100644
index 000000000..0c81a0c93
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/blockui/index.js
@@ -0,0 +1,8 @@
+export default {
+    root: {
+        class: 'relative'
+    },
+    mask: {
+        class: 'bg-black/40'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/breadcrumb/index.js b/packages/tailwindcss-presets/src/lara/breadcrumb/index.js
new file mode 100644
index 000000000..81b23fd0d
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/breadcrumb/index.js
@@ -0,0 +1,64 @@
+export default {
+    root: {
+        class: [
+            // Shape
+            'rounded-md',
+
+            // Spacing
+            'p-4',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-700',
+            'border border-surface-200 dark:border-surface-700',
+
+            // Misc
+            'overflow-x-auto'
+        ]
+    },
+    menu: {
+        class: [
+            // Flex & Alignment
+            'flex items-center flex-nowrap',
+
+            // Spacing
+            'm-0 p-0 list-none leading-none'
+        ]
+    },
+    action: {
+        class: [
+            // Flex & Alignment
+            'flex items-center',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'text-surface-600 dark:text-white/70',
+
+            // States
+            'focus-visible:outline-none focus-visible:outline-offset-0',
+            'focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+
+            // Transitions
+            'transition-shadow duration-200',
+
+            // Misc
+            'text-decoration-none'
+        ]
+    },
+    icon: {
+        class: 'text-surface-600 dark:text-white/70'
+    },
+    separator: {
+        class: [
+            // Flex & Alignment
+            'flex items-center',
+
+            // Spacing
+            ' mx-2',
+
+            // Color
+            'text-surface-600 dark:text-white/70'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/button/index.js b/packages/tailwindcss-presets/src/lara/button/index.js
new file mode 100644
index 000000000..9fdc03ef3
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/button/index.js
@@ -0,0 +1,234 @@
+export default {
+    root: ({ props, context, parent }) => ({
+        class: [
+            'relative',
+
+            // Alignments
+            'items-center inline-flex text-center align-bottom justify-center',
+
+            // Sizes & Spacing
+            'leading-[normal]',
+            {
+                'px-4 py-3': props.size === null,
+                'text-sm py-2 px-3': props.size === 'small',
+                'text-xl py-3 px-4': props.size === 'large'
+            },
+            {
+                'w-12 p-0 py-3': props.label == null && props.icon !== null
+            },
+
+            // Shapes
+            { 'shadow-lg': props.raised },
+            { 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
+            { 'rounded-none first:rounded-l-md last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+
+            // Link Button
+            { 'text-primary-600 bg-transparent border-transparent': props.link },
+
+            // Plain Button
+            { 'text-white bg-gray-500 border border-gray-500': props.plain && !props.outlined && !props.text },
+            // Plain Text Button
+            { 'text-surface-500': props.plain && props.text },
+            // Plain Outlined Button
+            { 'text-surface-500 border border-gray-500': props.plain && props.outlined },
+
+            // Text Button
+            { 'bg-transparent border-transparent': props.text && !props.plain },
+
+            // Outlined Button
+            { 'bg-transparent border': props.outlined && !props.plain },
+
+            // --- Severity Buttons ---
+
+            // Primary Button
+            {
+                'text-primary-inverse': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
+                'bg-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
+                'border border-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain
+            },
+            // Primary Text Button
+            { 'text-primary': props.text && props.severity === null && !props.plain },
+            // Primary Outlined Button
+            { 'text-primary border border-primary': props.outlined && props.severity === null && !props.plain },
+
+            // Secondary Button
+            {
+                'text-white dark:text-surface-900': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
+                'bg-surface-500 dark:bg-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
+                'border border-surface-500 dark:border-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain
+            },
+            // Secondary Text Button
+            { 'text-surface-500 dark:text-surface-300': props.text && props.severity === 'secondary' && !props.plain },
+            // Secondary Outlined Button
+            { 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/20': props.outlined && props.severity === 'secondary' && !props.plain },
+
+            // Success Button
+            {
+                'text-white dark:text-green-900': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
+                'bg-green-500 dark:bg-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
+                'border border-green-500 dark:border-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain
+            },
+            // Success Text Button
+            { 'text-green-500 dark:text-green-400': props.text && props.severity === 'success' && !props.plain },
+            // Success Outlined Button
+            { 'text-green-500 border border-green-500 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain },
+
+            // Info Button
+            {
+                'text-white dark:text-surface-900': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
+                'bg-blue-500 dark:bg-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
+                'border border-blue-500 dark:border-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain
+            },
+            // Info Text Button
+            { 'text-blue-500 dark:text-blue-400': props.text && props.severity === 'info' && !props.plain },
+            // Info Outlined Button
+            { 'text-blue-500 border border-blue-500 hover:bg-blue-300/20 ': props.outlined && props.severity === 'info' && !props.plain },
+
+            // Warning Button
+            {
+                'text-white dark:text-surface-900': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
+                'bg-orange-500 dark:bg-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
+                'border border-orange-500 dark:border-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain
+            },
+            // Warning Text Button
+            { 'text-orange-500 dark:text-orange-400': props.text && props.severity === 'warning' && !props.plain },
+            // Warning Outlined Button
+            { 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain },
+
+            // Help Button
+            {
+                'text-white dark:text-surface-900': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
+                'bg-purple-500 dark:bg-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
+                'border border-purple-500 dark:border-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain
+            },
+            // Help Text Button
+            { 'text-purple-500 dark:text-purple-400': props.text && props.severity === 'help' && !props.plain },
+            // Help Outlined Button
+            { 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain },
+
+            // Danger Button
+            {
+                'text-white dark:text-surface-900': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
+                'bg-red-500 dark:bg-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
+                'border border-red-500 dark:border-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain
+            },
+            // Danger Text Button
+            { 'text-red-500 dark:text-red-400': props.text && props.severity === 'danger' && !props.plain },
+            // Danger Outlined Button
+            { 'text-red-500 border border-red-500 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain },
+            // Contrast Button
+            {
+                'text-white dark:text-surface-900': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
+                'bg-surface-900 dark:bg-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
+                'border border-surface-900 dark:border-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain
+            },
+            // Contrast Text Button
+            { 'text-surface-900 dark:text-surface-0': props.text && props.severity === 'contrast' && !props.plain },
+            // Contrast Outlined Button
+            { 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': props.outlined && props.severity === 'contrast' && !props.plain },
+
+            // --- Severity Button States ---
+            'focus:outline-none focus:outline-offset-0 focus:ring',
+
+            // Link
+            { 'focus:ring-primary': props.link },
+
+            // Plain
+            { 'hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text },
+            // Text & Outlined Button
+            { 'hover:bg-surface-300/20': props.plain && (props.text || props.outlined) },
+
+            // Primary
+            { 'hover:bg-primary-hover hover:border-primary-hover': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-primary': props.severity === null },
+            // Text & Outlined Button
+            { 'hover:bg-primary-300/20': (props.text || props.outlined) && props.severity === null && !props.plain },
+
+            // Secondary
+            { 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-surface-400/50 dark:focus:ring-surface-300/50': props.severity === 'secondary' },
+            // Text & Outlined Button
+            { 'hover:bg-surface-300/20': (props.text || props.outlined) && props.severity === 'secondary' && !props.plain },
+
+            // Success
+            { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': props.severity === 'success' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-green-400/50 dark:focus:ring-green-300/50': props.severity === 'success' },
+            // Text & Outlined Button
+            { 'hover:bg-green-300/20': (props.text || props.outlined) && props.severity === 'success' && !props.plain },
+
+            // Info
+            { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': props.severity === 'info' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-blue-400/50 dark:focus:ring-blue-300/50': props.severity === 'info' },
+            // Text & Outlined Button
+            { 'hover:bg-blue-300/20': (props.text || props.outlined) && props.severity === 'info' && !props.plain },
+
+            // Warning
+            { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': props.severity === 'warning' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-orange-400/50 dark:focus:ring-orange-300/50': props.severity === 'warning' },
+            // Text & Outlined Button
+            { 'hover:bg-orange-300/20': (props.text || props.outlined) && props.severity === 'warning' && !props.plain },
+
+            // Help
+            { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': props.severity === 'help' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-purple-400/50 dark:focus:ring-purple-300/50': props.severity === 'help' },
+            // Text & Outlined Button
+            { 'hover:bg-purple-300/20': (props.text || props.outlined) && props.severity === 'help' && !props.plain },
+
+            // Danger
+            { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': props.severity === 'danger' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-red-400/50 dark:focus:ring-red-300/50': props.severity === 'danger' },
+            // Text & Outlined Button
+            { 'hover:bg-red-300/20': (props.text || props.outlined) && props.severity === 'danger' && !props.plain },
+            // Contrast
+            { 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'contrast' },
+            // Text & Outlined Button
+            { 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (props.text || props.outlined) && props.severity === 'contrast' && !props.plain },
+            // Disabled
+            { 'opacity-60 pointer-events-none cursor-default': context.disabled },
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-pointer overflow-hidden select-none'
+        ]
+    }),
+    label: ({ props }) => ({
+        class: [
+            'duration-200',
+            'font-bold',
+            {
+                'hover:underline': props.link
+            },
+            { 'flex-1': props.label !== null, 'invisible w-0': props.label == null }
+        ]
+    }),
+    icon: ({ props }) => ({
+        class: [
+            'mx-0',
+            {
+                'mr-2': props.iconPos == 'left' && props.label != null,
+                'ml-2 order-1': props.iconPos == 'right' && props.label != null,
+                'mb-2': props.iconPos == 'top' && props.label != null,
+                'mt-2': props.iconPos == 'bottom' && props.label != null
+            }
+        ]
+    }),
+    loadingicon: ({ props }) => ({
+        class: [
+            'h-4 w-4',
+            'mx-0',
+            {
+                'mr-2': props.iconPos == 'left' && props.label != null,
+                'ml-2 order-1': props.iconPos == 'right' && props.label != null,
+                'mb-2': props.iconPos == 'top' && props.label != null,
+                'mt-2': props.iconPos == 'bottom' && props.label != null
+            },
+            'animate-spin'
+        ]
+    }),
+    badge: ({ props }) => ({
+        class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/calendar/index.js b/packages/tailwindcss-presets/src/lara/calendar/index.js
new file mode 100644
index 000000000..ad0b15641
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/calendar/index.js
@@ -0,0 +1,646 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Display and Position
+            'inline-flex',
+            'max-w-full',
+            'relative',
+
+            // Misc
+            { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    input: ({ props, parent }) => ({
+        class: [
+            // Display
+            'flex flex-auto',
+
+            // Font
+            'leading-none',
+
+            // Colors
+            'text-surface-600 dark:text-surface-200',
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+            'bg-surface-0 dark:bg-surface-900',
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // Spacing
+            'm-0 p-3',
+
+            // Shape
+            'appearance-none',
+            { 'rounded-md': !props.showIcon || props.iconDisplay == 'input' },
+            { 'rounded-l-md  flex-1 pr-9': props.showIcon && props.iconDisplay !== 'input' },
+            { 'rounded-md flex-1 pr-9': props.showIcon && props.iconDisplay === 'input' },
+
+            // Transitions
+            'transition-colors',
+            'duration-200',
+
+            // States
+            { 'hover:border-primary-hover': !props.invalid },
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50',
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null }
+        ]
+    }),
+    inputicon: {
+        class: ['absolute top-[50%] -mt-2', 'text-surface-600 dark:text-surface-200', 'right-[.75rem]']
+    },
+    dropdownbutton: {
+        root: {
+            class: [
+                'relative',
+
+                // Alignments
+                'items-center inline-flex text-center align-bottom',
+
+                // Shape
+                'rounded-r-md',
+
+                // Size
+                'px-4 py-3 leading-none',
+
+                // Colors
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+            ]
+        }
+    },
+    panel: ({ props }) => ({
+        class: [
+            // Display & Position
+            {
+                absolute: !props.inline,
+                'inline-block': props.inline
+            },
+
+            // Size
+            { 'w-auto p-2 ': !props.inline },
+            { 'min-w-[80vw] w-auto p-2 ': props.touchUI },
+            { 'p-2 min-w-full': props.inline },
+
+            // Shape
+            'border rounded-lg',
+            {
+                'shadow-md': !props.inline
+            },
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'border-surface-200 dark:border-surface-700',
+
+            //misc
+            { 'overflow-x-auto': props.inline }
+        ]
+    }),
+    datepickerMask: {
+        class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90']
+    },
+    header: {
+        class: [
+            //Font
+            'font-semibold',
+
+            // Flexbox and Alignment
+            'flex items-center justify-between',
+
+            // Spacing
+            'p-2',
+            'm-0',
+
+            // Shape
+            'border-b',
+            'rounded-t-md',
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-800',
+            'border-surface-200 dark:border-surface-700'
+        ]
+    },
+    previousbutton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'inline-flex items-center justify-center',
+
+            // Size
+            'w-8 h-8',
+            'p-0 m-0',
+
+            // Shape
+            'rounded-full',
+
+            // Colors
+            'text-surface-600 dark:text-white/70',
+            'border-0',
+            'bg-transparent',
+
+            // Transitions
+            'transition-colors duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-surface-800/80',
+
+            // Misc
+            'cursor-pointer overflow-hidden'
+        ]
+    },
+    title: {
+        class: [
+            // Text
+            'leading-8',
+            'mx-auto my-0'
+        ]
+    },
+    monthTitle: {
+        class: [
+            // Font
+            'text-base leading-[normal]',
+            'font-semibold',
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+
+            // Transitions
+            'transition duration-200',
+
+            // Spacing
+            'p-2',
+            'm-0 mr-2',
+
+            // States
+            'hover:text-primary-500 dark:hover:text-primary-400',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    },
+    yearTitle: {
+        class: [
+            // Font
+            'text-base leading-[normal]',
+            'font-semibold',
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+
+            // Transitions
+            'transition duration-200',
+
+            // Spacing
+            'p-2',
+            'm-0',
+
+            // States
+            'hover:text-primary-500 dark:hover:text-primary-400',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    },
+    nextbutton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'inline-flex items-center justify-center',
+
+            // Size
+            'w-8 h-8',
+            'p-0 m-0',
+
+            // Shape
+            'rounded-full',
+
+            // Colors
+            'text-surface-600 dark:text-white/70',
+            'border-0',
+            'bg-transparent',
+
+            // Transitions
+            'transition-colors duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-surface-800/80',
+
+            // Misc
+            'cursor-pointer overflow-hidden'
+        ]
+    },
+    table: {
+        class: [
+            // Font
+            'text-base leading-none',
+            // Size & Shape
+            'border-collapse',
+            'w-full',
+
+            // Spacing
+            'm-0 my-2'
+        ]
+    },
+    tableheadercell: {
+        class: [
+            // Spacing
+            'p-0 md:p-2'
+        ]
+    },
+    weekheader: {
+        class: ['leading-[normal]', 'text-surface-600 dark:text-white/70', 'opacity-60 cursor-default']
+    },
+    weeknumber: {
+        class: ['text-surface-600 dark:text-white/70', 'opacity-60 cursor-default']
+    },
+    weekday: {
+        class: [
+            // Colors
+            'text-surface-500 dark:text-white/60'
+        ]
+    },
+    day: {
+        class: [
+            // Spacing
+            'p-0 md:p-2'
+        ]
+    },
+    weeklabelcontainer: ({ context }) => ({
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+            'mx-auto',
+
+            // Shape & Size
+            'w-10 h-10',
+            'rounded-full',
+            'border-transparent border',
+
+            // Colors
+            {
+                'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
+                'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled
+            },
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-800/80': !context.selected && !context.disabled,
+                'hover:bg-primary-highlight-hover': context.selected && !context.disabled
+            },
+            {
+                'opacity-60 cursor-default': context.disabled,
+                'cursor-pointer': !context.disabled
+            }
+        ]
+    }),
+    daylabel: ({ context }) => ({
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+            'mx-auto',
+
+            // Shape & Size
+            'w-10 h-10',
+            'rounded-full',
+            'border-transparent border',
+
+            // Colors
+            {
+                'text-primary': context.date.today,
+                'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled && !context.date.today,
+                'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled
+            },
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.selected && !context.disabled,
+                'hover:bg-primary-highlight-hover': context.selected && !context.disabled
+            },
+            {
+                'opacity-60 cursor-default': context.disabled,
+                'cursor-pointer': !context.disabled
+            }
+        ]
+    }),
+    monthpicker: {
+        class: [
+            // Spacing
+            'my-2'
+        ]
+    },
+    month: ({ context }) => ({
+        class: [
+            // Flexbox and Alignment
+            'inline-flex items-center justify-center',
+
+            // Size
+            'w-1/3',
+            'p-2',
+
+            // Shape
+            'rounded-md',
+
+            // Colors
+            {
+                'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
+                'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled
+            },
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.selected && !context.disabled,
+                'hover:bg-primary-highlight-hover': context.selected && !context.disabled
+            },
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }),
+    yearpicker: {
+        class: [
+            // Spacing
+            'my-2'
+        ]
+    },
+    year: ({ context }) => ({
+        class: [
+            // Flexbox and Alignment
+            'inline-flex items-center justify-center',
+
+            // Size
+            'w-1/3',
+            'p-2',
+
+            // Shape
+            'rounded-md',
+
+            // Colors
+            {
+                'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
+                'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled
+            },
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.selected && !context.disabled,
+                'hover:bg-primary-highlight-hover': context.selected && !context.disabled
+            },
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }),
+    timepicker: {
+        class: [
+            // Flexbox
+            'flex',
+            'justify-center items-center',
+
+            // Borders
+            'border-t-1',
+            'border-solid border-surface-200',
+
+            // Spacing
+            'p-2'
+        ]
+    },
+    separatorcontainer: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+
+            // Spacing
+            'px-2'
+        ]
+    },
+    separator: {
+        class: [
+            // Text
+            'text-xl'
+        ]
+    },
+    hourpicker: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+
+            // Spacing
+            'px-2'
+        ]
+    },
+    minutepicker: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+
+            // Spacing
+            'px-2'
+        ]
+    },
+    secondPicker: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+
+            // Spacing
+            'px-2'
+        ]
+    },
+    ampmpicker: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+
+            // Spacing
+            'px-2'
+        ]
+    },
+    incrementbutton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'inline-flex items-center justify-center',
+
+            // Size
+            'w-8 h-8',
+            'p-0 m-0',
+
+            // Shape
+            'rounded-full',
+
+            // Colors
+            'text-surface-600 dark:text-white/70',
+            'border-0',
+            'bg-transparent',
+
+            // Transitions
+            'transition-colors duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-surface-800/80',
+
+            // Misc
+            'cursor-pointer overflow-hidden'
+        ]
+    },
+    decrementbutton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'inline-flex items-center justify-center',
+
+            // Size
+            'w-8 h-8',
+            'p-0 m-0',
+
+            // Shape
+            'rounded-full',
+
+            // Colors
+            'text-surface-600 dark:text-white/70',
+            'border-0',
+            'bg-transparent',
+
+            // Transitions
+            'transition-colors duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-surface-800/80',
+
+            // Misc
+            'cursor-pointer overflow-hidden'
+        ]
+    },
+    groupcontainer: {
+        class: [
+            // Flexbox
+            'flex'
+        ]
+    },
+    group: {
+        class: [
+            // Flexbox and Sizing
+            'flex-1',
+
+            // Borders
+            'border-l',
+            'border-surface-200',
+
+            // Spacing
+            'pr-0.5',
+            'pl-0.5',
+            'pt-0',
+            'pb-0',
+
+            // Pseudo-Classes
+            'first:pl-0',
+            'first:border-l-0'
+        ]
+    },
+    buttonbar: {
+        class: [
+            // Flexbox
+            'flex justify-between items-center',
+
+            // Spacing
+            'py-3 px-0',
+
+            // Shape
+            'border-t border-surface-200 dark:border-surface-700'
+        ]
+    },
+    todaybutton: {
+        root: {
+            class: [
+                // Flexbox and Alignment
+                'inline-flex items-center justify-center',
+
+                // Spacing
+                'px-4 py-3 leading-none',
+
+                // Shape
+                'rounded-md',
+
+                // Colors
+                'bg-transparent border-transparent',
+                'text-primary',
+
+                // Transitions
+                'transition-colors duration-200 ease-in-out',
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'hover:bg-primary-300/20',
+
+                // Misc
+                'cursor-pointer'
+            ]
+        }
+    },
+    clearbutton: {
+        root: {
+            class: [
+                // Flexbox and Alignment
+                'inline-flex items-center justify-center',
+
+                // Spacing
+                'px-4 py-3 leading-none',
+
+                // Shape
+                'rounded-md',
+
+                // Colors
+                'bg-transparent border-transparent',
+                'text-primary',
+
+                // Transitions
+                'transition-colors duration-200 ease-in-out',
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'hover:bg-primary-300/20',
+
+                // Misc
+                'cursor-pointer'
+            ]
+        }
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/card/index.js b/packages/tailwindcss-presets/src/lara/card/index.js
new file mode 100644
index 000000000..d4832f650
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/card/index.js
@@ -0,0 +1,37 @@
+export default {
+    root: {
+        class: [
+            //Shape
+            'rounded-md',
+            'shadow-md',
+
+            //Color
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-surface-0'
+        ]
+    },
+    body: {
+        class: 'p-5'
+    },
+    title: {
+        class: 'text-2xl font-bold mb-2'
+    },
+    subtitle: {
+        class: [
+            //Font
+            'font-normal',
+
+            //Spacing
+            'mb-2',
+
+            //Color
+            'text-surface-600 dark:text-surface-0/60'
+        ]
+    },
+    content: {
+        class: 'py-5' // Vertical padding.
+    },
+    footer: {
+        class: 'pt-5' // Top padding.
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/carousel/index.js b/packages/tailwindcss-presets/src/lara/carousel/index.js
new file mode 100644
index 000000000..c4ac897b3
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/carousel/index.js
@@ -0,0 +1,149 @@
+export default {
+    root: {
+        class: [
+            // Flexbox
+            'flex flex-col'
+        ]
+    },
+    content: {
+        class: [
+            // Flexbox & Overflow
+            'flex flex-col overflow-auto'
+        ]
+    },
+    container: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex',
+
+            // Orientation
+            {
+                'flex-row': props.orientation !== 'vertical',
+                'flex-col': props.orientation == 'vertical'
+            }
+        ]
+    }),
+    previousbutton: {
+        class: [
+            // Flexbox & Alignment
+            'flex justify-center items-center self-center',
+
+            // Sizing & Overflow
+            'overflow-hidden w-8 h-8',
+
+            // Spacing
+            'mx-2',
+
+            // Shape
+            'rounded-full',
+
+            // Border & Background
+            'border-0 bg-transparent',
+
+            // Color
+            'text-surface-600',
+
+            // Transitions
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    nextbutton: {
+        class: [
+            // Flexbox & Alignment
+            'flex justify-center items-center self-center',
+
+            // Sizing & Overflow
+            'overflow-hidden w-8 h-8',
+
+            // Spacing
+            'mx-2',
+
+            // Shape
+            'rounded-full',
+
+            // Border & Background
+            'border-0 bg-transparent',
+
+            // Color
+            'text-surface-600',
+
+            // Transitions
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    itemscontent: {
+        class: [
+            // Overflow & Width
+            'overflow-hidden w-full'
+        ]
+    },
+    itemscontainer: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex',
+
+            // Orientation & Sizing
+            {
+                'flex-row': props.orientation !== 'vertical',
+                'flex-col h-full': props.orientation == 'vertical'
+            }
+        ]
+    }),
+    item: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex shrink-0 grow ',
+
+            // Size
+            {
+                'w-full sm:w-[50%] md:w-[33.333333333333336%]': props.orientation !== 'vertical',
+
+                'w-full h-full': props.orientation == 'vertical'
+            }
+        ]
+    }),
+    itemcloned: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex shrink-0 grow',
+            'unvisible',
+
+            // Size
+            {
+                'w-full sm:w-[50%] md:w-[33.333333333333336%]': props.orientation !== 'vertical',
+
+                'w-full h-full': props.orientation == 'vertical'
+            }
+        ]
+    }),
+    indicators: {
+        class: [
+            // Flexbox & Alignment
+            'flex flex-row justify-center flex-wrap'
+        ]
+    },
+    indicator: {
+        class: [
+            // Spacing
+            'mr-2 mb-2'
+        ]
+    },
+    indicatorbutton: ({ context }) => ({
+        class: [
+            // Sizing & Shape
+            'w-8 h-2 rounded-0',
+
+            // Transitions
+            'transition duration-200',
+
+            // Focus Styles
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Color & Background
+            {
+                'bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600': !context.highlighted,
+                'bg-primary hover:bg-primary-hover': context.highlighted
+            }
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/cascadeselect/index.js b/packages/tailwindcss-presets/src/lara/cascadeselect/index.js
new file mode 100644
index 000000000..c599884fc
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/cascadeselect/index.js
@@ -0,0 +1,207 @@
+export default {
+    root: ({ props, state }) => ({
+        class: [
+            // Display and Position
+            'inline-flex',
+            'relative',
+
+            // Shape
+            'rounded-md',
+
+            // Color and Background
+            'bg-surface-0 dark:bg-surface-900',
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // Transitions
+            'transition-all',
+            'duration-200',
+
+            // States
+            { 'hover:border-primary': !props.invalid },
+            { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused },
+
+            // Misc
+            'cursor-pointer',
+            'select-none',
+            { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled }
+        ]
+    }),
+    label: ({ props }) => ({
+        class: [
+            //Font
+            'leading-[normal]',
+
+            // Flex & Alignment
+            ' flex flex-auto',
+
+            // Sizing and Spacing
+            'w-[1%]',
+            'p-3',
+
+            //Shape
+            'rounded-none',
+
+            // Color and Background
+            'bg-transparent',
+            'border-0',
+            { 'text-surface-800 dark:text-white/80': props.modelValue, 'text-surface-400 dark:text-surface-500': !props.modelValue },
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+            // Transitions
+            'transition',
+            'duration-200',
+
+            // States
+            'focus:outline-none focus:shadow-none',
+
+            // Misc
+            'relative',
+            'cursor-pointer',
+            'overflow-hidden overflow-ellipsis',
+            'whitespace-nowrap',
+            'appearance-none'
+        ]
+    }),
+    dropdownbutton: {
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+            'shrink-0',
+
+            // Color and Background
+            'bg-transparent',
+            'text-surface-500',
+
+            // Size
+            'w-12',
+
+            // Shape
+            'rounded-tr-md',
+            'rounded-br-md'
+        ]
+    },
+    panel: {
+        class: [
+            // Position
+            'absolute top-0 left-0',
+
+            // Shape
+            'border-0 dark:border',
+            'rounded-md',
+            'shadow-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-700',
+            'text-surface-800 dark:text-white/80',
+            'dark:border-surface-700'
+        ]
+    },
+    wrapper: {
+        class: [
+            // Sizing
+            'max-h-[200px]',
+
+            // Misc
+            'overflow-auto'
+        ]
+    },
+    list: {
+        class: 'py-3 list-none m-0'
+    },
+    item: ({ context }) => ({
+        class: [
+            // Font
+            'font-normal',
+            'leading-none',
+
+            // Shape
+            'border-0',
+            'rounded-none',
+
+            // Spacing
+            'm-0',
+
+            //  Colors
+            {
+                'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+                'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active,
+                'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+            },
+
+            // Hover States
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.active,
+                'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
+            },
+
+            // Transitions
+            'transition-shadow',
+            'duration-200',
+
+            // Misc
+            'cursor-pointer',
+            'overflow-hidden',
+            'whitespace-nowrap'
+        ]
+    }),
+    content: {
+        class: [
+            'relative',
+
+            // Flexbox
+            'flex',
+            'items-center',
+
+            // Spacing
+            'py-3',
+            'px-5',
+
+            // Misc
+            'no-underline',
+            'overflow-hidden',
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    groupicon: {
+        class: [
+            // Alignment
+            'ml-auto'
+        ]
+    },
+    sublist: {
+        class: [
+            // Size
+            'w-full',
+
+            // Spacing
+            'py-1',
+            'm-0',
+            'list-none',
+
+            // Shape
+            'shadow-none sm:shadow-md',
+            'border-0',
+
+            // Position
+            'static sm:absolute',
+            'z-10',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-700'
+        ]
+    },
+    separator: {
+        class: 'border-t border-surface-200 dark:border-surface-600 my-1'
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/checkbox/index.js b/packages/tailwindcss-presets/src/lara/checkbox/index.js
new file mode 100644
index 000000000..7db60b1b7
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/checkbox/index.js
@@ -0,0 +1,101 @@
+export default {
+    root: {
+        class: [
+            'relative',
+
+            // Alignment
+            'inline-flex',
+            'align-bottom',
+
+            // Size
+            'w-6',
+            'h-6',
+
+            // Misc
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    box: ({ props, context }) => ({
+        class: [
+            // Alignment
+            'flex',
+            'items-center',
+            'justify-center',
+
+            // Size
+            'w-6',
+            'h-6',
+
+            // Shape
+            'rounded-md',
+            'border-2',
+
+            // Colors
+            {
+                'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked && !props.invalid,
+                'border-primary bg-primary': context.checked
+            },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'peer-hover:border-primary': !props.disabled && !context.checked && !props.invalid,
+                'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled,
+                'cursor-default opacity-60': props.disabled
+            },
+
+            // Transitions
+            'transition-colors',
+            'duration-200'
+        ]
+    }),
+    input: {
+        class: [
+            'peer',
+
+            // Size
+            'w-full ',
+            'h-full',
+
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-10',
+
+            // Spacing
+            'p-0',
+            'm-0',
+
+            // Shape
+            'opacity-0',
+            'rounded-md',
+            'outline-none',
+            'border-2 border-surface-200 dark:border-surface-700',
+
+            // Misc
+            'appearance-none',
+            'cursor-pointer'
+        ]
+    },
+    icon: {
+        class: [
+            // Font
+            'text-base leading-none',
+
+            // Size
+            'w-4',
+            'h-4',
+
+            // Colors
+            'text-white dark:text-surface-900',
+
+            // Transitions
+            'transition-all',
+            'duration-200'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/chip/index.js b/packages/tailwindcss-presets/src/lara/chip/index.js
new file mode 100644
index 000000000..c6ff8795a
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/chip/index.js
@@ -0,0 +1,45 @@
+export default {
+    root: {
+        class: [
+            // Flexbox
+            'inline-flex items-center',
+
+            // Spacing
+            'px-3',
+
+            // Shape
+            'rounded-[1.14rem]',
+
+            // Colors
+            'text-surface-700 dark:text-white/70',
+            'bg-surface-200 dark:bg-surface-700'
+        ]
+    },
+    label: {
+        class: 'leading-6 my-1.5 mx-0'
+    },
+    icon: {
+        class: 'leading-6 mr-2'
+    },
+    image: {
+        class: ['w-9 h-9 -ml-3 mr-2', 'rounded-full']
+    },
+    removeIcon: {
+        class: [
+            // Shape
+            'rounded-md leading-6',
+
+            // Spacing
+            'ml-2',
+
+            // Size
+            'w-4 h-4',
+
+            // Transition
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/chips/index.js b/packages/tailwindcss-presets/src/lara/chips/index.js
new file mode 100644
index 000000000..b14f4a12e
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/chips/index.js
@@ -0,0 +1,117 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'flex',
+            {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            }
+        ]
+    }),
+    container: ({ state, props, parent }) => ({
+        class: [
+            // Font
+            'text-base leading-none',
+
+            // Flex
+            'flex items-center flex-wrap gap-2',
+
+            // Spacing
+            'm-0 py-[0.375rem] px-3',
+
+            // Size
+            'w-full',
+            'min-h-[2.877rem]',
+
+            // Shape
+            'list-none',
+            'rounded-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-900',
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            { 'hover:border-primary': !props.invalid },
+            'focus:outline-none focus:outline-offset-0',
+            { 'ring ring-primary-400/50 dark:ring-primary-300/50': state.focused },
+            { 'ring ring-primary-400/50 dark:ring-primary-300/50': state.hovered },
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },
+
+            // Transition
+            'transition-colors duration-200',
+
+            // Misc
+            'cursor-text overflow-hidden',
+            'appearance-none'
+        ]
+    }),
+
+    inputtoken: {
+        class: ['py-1.5 px-0', 'inline-flex flex-auto']
+    },
+    input: {
+        class: [
+            // Font
+            'text-base leading-[normal]',
+
+            // Size
+            'w-full',
+
+            // Spacing
+            'p-0 m-0',
+
+            // Shape
+            'appearance-none rounded-none',
+            'border-0 outline-none',
+            'shadow-none',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-transparent'
+        ]
+    },
+    token: {
+        class: [
+            // Flexbox
+            'inline-flex items-center',
+
+            // Spacing
+            'py-1.5 px-3',
+
+            // Shape
+            'rounded-[1.14rem]',
+
+            // Colors
+            'text-surface-700 dark:text-white/70',
+            'bg-surface-200 dark:bg-surface-700'
+        ]
+    },
+    label: {
+        class: 'leading-[normal]'
+    },
+    removeTokenIcon: {
+        class: [
+            // Shape
+            'rounded-md leading-6',
+
+            // Spacing
+            'ml-2',
+
+            // Size
+            'w-4 h-4',
+
+            // Transition
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/colorpicker/index.js b/packages/tailwindcss-presets/src/lara/colorpicker/index.js
new file mode 100644
index 000000000..1b454681c
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/colorpicker/index.js
@@ -0,0 +1,123 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Display
+            'inline-block',
+
+            // Misc
+            { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    input: {
+        class: [
+            // Font
+            'text-base ',
+
+            // Spacing
+            'm-0',
+            'p-3',
+
+            // Size & Shape
+            'rounded-lg w-8 h-8',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'border border-surface-300 dark:border-surface-700',
+
+            // States
+            'hover:border-primary',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transition
+            'transition-colors duration-200',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    },
+    panel: ({ props }) => ({
+        class: [
+            // Position & Size
+            {
+                'relative h-[166px] w-[193px]': props.inline,
+                'absolute h-[166px] w-[193px]': !props.inline
+            },
+
+            // Shape
+            'shadow-md border',
+
+            // Colors
+            'bg-surface-800 border-surface-900 dark:border-surface-600'
+        ]
+    }),
+    selector: {
+        class: [
+            // Position
+            'absolute top-[8px] left-[8px]',
+
+            // Size
+            'h-[150px] w-[150px]'
+        ]
+    },
+    color: {
+        class: [
+            // Size
+            'h-[150px] w-[150px]'
+        ],
+        style: 'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)'
+    },
+    colorhandle: {
+        class: [
+            'absolute',
+
+            // Shape
+            'rounded-full border border-solid',
+
+            // Size
+            'h-[10px] w-[10px]',
+
+            // Spacing
+            '-ml-[5px] -mt-[5px]',
+
+            // Colors
+            'border-white',
+
+            // Misc
+            'cursor-pointer opacity-85'
+        ]
+    },
+    hue: {
+        class: [
+            // Position
+            'absolute top-[8px] left-[167px]',
+
+            // Size
+            'h-[150px] w-[17px]',
+
+            // Opacity
+            'opacity-85'
+        ],
+        style: 'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)'
+    },
+    huehandle: {
+        class: [
+            // Position
+            'absolute left-0 -ml-[2px] -mt-[5px]',
+
+            // Size
+            'h-[10px] w-[21px]',
+
+            // Shape
+            'border-solid border-2',
+
+            // Misc
+            'cursor-pointer opacity-85'
+        ]
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/confirmpopup/index.js b/packages/tailwindcss-presets/src/lara/confirmpopup/index.js
new file mode 100644
index 000000000..b0f21c215
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/confirmpopup/index.js
@@ -0,0 +1,106 @@
+export default {
+    root: {
+        class: [
+            // Shape
+            'rounded-lg',
+            'shadow-lg',
+            'border-0',
+
+            // Positioning
+            'z-40 transform origin-center',
+            'mt-3 absolute left-0 top-0',
+
+            // Color
+            'dark:border',
+            'dark:border-surface-700',
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-surface-0/80',
+
+            // Before: Arrow
+            'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-surface-0 dark:before:border-b-surface-800'
+        ]
+    },
+    content: {
+        class: 'p-5 items-center flex'
+    },
+    icon: {
+        class: 'text-2xl mr-4'
+    },
+    footer: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-end',
+            'shrink-0',
+            'text-right',
+            'gap-2',
+
+            // Spacing
+            'px-6',
+            'pb-6',
+
+            // Shape
+            'border-t-0',
+            'rounded-b-lg',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    rejectbutton: {
+        root: {
+            class: [
+                'relative',
+
+                // Alignments
+                'items-center inline-flex text-center align-bottom justify-center',
+
+                // Sizes & Spacing
+                'px-4 py-3 leading-none',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary',
+
+                // States
+                'hover:bg-primary-300/20',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+            ]
+        }
+    },
+    acceptbutton: {
+        root: {
+            class: [
+                'relative',
+
+                // Alignments
+                'items-center inline-flex text-center align-bottom justify-center',
+
+                // Sizes & Spacing
+                'px-4 py-3 leading-none',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // States
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+            ]
+        }
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/contextmenu/index.js b/packages/tailwindcss-presets/src/lara/contextmenu/index.js
new file mode 100644
index 000000000..ce8adb3ca
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/contextmenu/index.js
@@ -0,0 +1,124 @@
+export default {
+    root: {
+        class: [
+            // Sizing and Shape
+            'min-w-[12rem]',
+            'rounded-md',
+            'shadow-md',
+
+            // Spacing
+            'py-2',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-700',
+            'text-surface-700 dark:text-white/80',
+            'dark:border dark:border-surface-700'
+        ]
+    },
+    menu: {
+        class: [
+            // Spacings and Shape
+            'list-none',
+            'm-0',
+            'p-0',
+            'outline-none'
+        ]
+    },
+    menuitem: {
+        class: 'relative'
+    },
+    content: ({ context }) => ({
+        class: [
+            //Shape
+            'rounded-none',
+            // Colors
+            'text-surface-700 dark:text-white/80',
+            {
+                'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+                'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active,
+                'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+            },
+
+            // Transitions
+            'transition-shadow',
+            'duration-200',
+
+            // States
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.active,
+                'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
+            },
+
+            // Disabled
+            { 'opacity-60 pointer-events-none cursor-default': context.disabled }
+        ]
+    }),
+    action: {
+        class: [
+            'relative',
+            // Flexbox
+
+            'flex',
+            'items-center',
+
+            // Spacing
+            'py-3',
+            'px-5',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+
+            // Misc
+            'no-underline',
+            'overflow-hidden',
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    icon: {
+        class: [
+            // Spacing
+            'mr-2',
+
+            // Color
+            'text-surface-600 dark:text-white/70'
+        ]
+    },
+    label: {
+        class: ['leading-none']
+    },
+    submenu: ({ props }) => ({
+        class: [
+            // Size
+            'w-full sm:w-48',
+
+            // Spacing
+            'py-1',
+            'm-0',
+            'list-none',
+
+            // Shape
+            'shadow-md',
+            'rounded-md',
+            'dark:border dark:border-surface-700',
+
+            // Position
+            'static sm:absolute',
+            'z-10',
+            { 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
+
+            // Color
+            'bg-surface-0 dark:bg-surface-700'
+        ]
+    }),
+    submenuicon: {
+        class: ['ml-auto']
+    },
+    separator: {
+        class: 'border-t border-surface-200 dark:border-surface-600 my-1'
+    },
+    transition: {
+        enterFromClass: 'opacity-0',
+        enterActiveClass: 'transition-opacity duration-250'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/datatable/index.js b/packages/tailwindcss-presets/src/lara/datatable/index.js
new file mode 100644
index 000000000..aab59144c
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/datatable/index.js
@@ -0,0 +1,1166 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            { 'flex flex-col': props.scrollable && props.scrollHeight === 'flex' },
+
+            // Size
+            { 'h-full': props.scrollable && props.scrollHeight === 'flex' }
+        ]
+    }),
+    loadingoverlay: {
+        class: [
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-20',
+
+            // Flex & Alignment
+            'flex items-center justify-center',
+
+            // Size
+            'w-full h-full',
+
+            // Color
+            'bg-surface-100/40 dark:bg-surface-800/40',
+
+            // Transition
+            'transition duration-200'
+        ]
+    },
+    loadingicon: {
+        class: 'w-8 h-8 animate-spin'
+    },
+    wrapper: ({ props }) => ({
+        class: [
+            { relative: props.scrollable, 'flex flex-col grow': props.scrollable && props.scrollHeight === 'flex' },
+
+            // Size
+            { 'h-full': props.scrollable && props.scrollHeight === 'flex' }
+        ]
+    }),
+    header: ({ props }) => ({
+        class: [
+            'font-bold',
+
+            // Shape
+            props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0',
+
+            // Spacing
+            'p-4',
+
+            // Color
+            'bg-surface-50 dark:bg-surface-800',
+            'border-surface-200 dark:border-surface-700',
+            'text-surface-700 dark:text-white/80'
+        ]
+    }),
+    table: {
+        class: 'w-full border-spacing-0 border-separate'
+    },
+    thead: ({ context }) => ({
+        class: [
+            {
+                'bg-surface-50 dark:bg-surface-800 top-0 z-40 sticky': context.scrollable
+            }
+        ]
+    }),
+    tbody: ({ instance, context }) => ({
+        class: [
+            {
+                'sticky z-20': instance.frozenRow && context.scrollable
+            },
+            'bg-surface-50 dark:bg-surface-800'
+        ]
+    }),
+    tfoot: ({ context }) => ({
+        class: [
+            {
+                'bg-surface-50 bottom-0 z-0': context.scrollable
+            }
+        ]
+    }),
+    footer: {
+        class: [
+            'font-bold',
+
+            // Shape
+            'border-t-0 border-b border-x-0',
+
+            // Spacing
+            'p-4',
+
+            // Color
+            'bg-surface-50 dark:bg-surface-800',
+            'border-surface-200 dark:border-surface-700',
+            'text-surface-700 dark:text-white/80'
+        ]
+    },
+    column: {
+        headercell: ({ context, props }) => ({
+            class: [
+                'font-bold',
+
+                // Position
+                { 'sticky z-20 border-b': props.frozen || props.frozen === '' },
+
+                { relative: context.resizable },
+
+                // Alignment
+                'text-left',
+
+                // Shape
+                { 'first:border-l border-y border-r': context?.showGridlines },
+                'border-0 border-b border-solid',
+
+                // Spacing
+                context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4',
+
+                // Color
+                (props.sortable === '' || props.sortable) && context.sorted ? 'bg-primary-highlight text-primary-highlight-inverse' : 'bg-surface-50 text-surface-700 dark:text-white/80 dark:bg-surface-800',
+                'border-surface-200 dark:border-surface-700 ',
+
+                // States
+                { 'hover:bg-surface-100 dark:hover:bg-surface-400/30': (props.sortable === '' || props.sortable) && !context?.sorted },
+                'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+
+                // Transition
+                { 'transition duration-200': props.sortable === '' || props.sortable },
+
+                // Misc
+                { 'cursor-pointer': props.sortable === '' || props.sortable },
+                {
+                    'overflow-hidden space-nowrap border-y bg-clip-padding': context.resizable // Resizable
+                }
+            ]
+        }),
+        headercontent: {
+            class: 'flex items-center'
+        },
+        sort: ({ context }) => ({
+            class: [context.sorted ? 'text-primary-500' : 'text-surface-700', context.sorted ? 'dark:text-primary-400' : 'dark:text-white/80']
+        }),
+        bodycell: ({ props, context, state, parent }) => ({
+            class: [
+                //Position
+                { 'sticky box-border border-b': parent.instance.frozenRow },
+                { 'sticky box-border border-b z-20': props.frozen || props.frozen === '' },
+
+                // Alignment
+                'text-left',
+
+                // Shape
+                'border-0 border-b border-solid',
+                { 'first:border-l border-r border-b': context?.showGridlines },
+                { 'bg-surface-0 dark:bg-surface-800': parent.instance.frozenRow || props.frozen || props.frozen === '' },
+
+                // Spacing
+                { 'p-2': context?.size === 'small' && !state['d_editing'] },
+                { 'p-5': context?.size === 'large' && !state['d_editing'] },
+                { 'p-4': context?.size !== 'large' && context?.size !== 'small' && !state['d_editing'] },
+                { 'py-[0.6rem] px-2': state['d_editing'] },
+
+                // Color
+                'border-surface-200 dark:border-surface-700'
+            ]
+        }),
+        footercell: ({ context }) => ({
+            class: [
+                // Font
+                'font-bold',
+
+                // Alignment
+                'text-left',
+
+                // Shape
+                'border-0 border-b border-solid',
+                { 'border-x border-y': context?.showGridlines },
+
+                // Spacing
+                context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4',
+
+                // Color
+                'border-surface-200 dark:border-surface-700',
+                'text-surface-700 dark:text-white/80',
+                'bg-surface-50 dark:bg-surface-800'
+            ]
+        }),
+        sorticon: ({ context }) => ({
+            class: ['ml-2', context.sorted ? 'text-primary-highlight-inverse' : 'text-surface-700 dark:text-white/70']
+        }),
+        sortbadge: {
+            class: [
+                // Flex & Alignment
+                'flex items-center justify-center align-middle',
+
+                // Shape
+                'rounded-full',
+
+                // Size
+                'w-[1.143rem] leading-[1.143rem]',
+
+                // Spacing
+                'ml-2',
+
+                // Color
+                'text-primary-highlight-inverse',
+                'bg-primary-highlight'
+            ]
+        },
+        columnfilter: {
+            class: 'inline-flex items-center ml-auto'
+        },
+        filteroverlay: {
+            class: [
+                // Position
+                'absolute top-0 left-0',
+
+                // Shape
+                'border-0 dark:border',
+                'rounded-md',
+                'shadow-md',
+
+                // Size
+                'min-w-[12.5rem]',
+
+                // Color
+                'bg-surface-0 dark:bg-surface-800',
+                'text-surface-800 dark:text-white/80',
+                'dark:border-surface-700'
+            ]
+        },
+        filtermatchmodedropdown: {
+            root: ({ state }) => ({
+                class: [
+                    // Display and Position
+                    'flex',
+                    'relative',
+
+                    // Spacing
+                    'my-2',
+
+                    // Shape
+                    'w-full',
+                    'rounded-md',
+
+                    // Color and Background
+                    'bg-surface-0 dark:bg-surface-900',
+                    'border border-surface-300 dark:border-surface-700',
+                    'text-surface-800 dark:text-white/80',
+                    'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+                    // Transitions
+                    'transition-all',
+                    'duration-200',
+
+                    // States
+                    'hover:border-primary',
+                    { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused },
+
+                    // Misc
+                    'cursor-pointer',
+                    'select-none'
+                ]
+            })
+        },
+        filterrowitems: {
+            class: 'm-0 p-0 py-3 list-none'
+        },
+        filterrowitem: ({ context }) => ({
+            class: [
+                // Font
+                'font-normal',
+                'leading-none',
+
+                // Position
+                'relative',
+
+                // Shape
+                'border-0',
+                'rounded-none',
+
+                // Spacing
+                'm-0',
+                'py-3 px-5',
+
+                // Color
+                { 'bg-surface-0 dark:bg-surface-800 text-surface-700 dark:text-white/80': !context?.highlighted },
+                { 'bg-primary-highlight text-primary-highlight-inverse': context?.highlighted },
+
+                //States
+                { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context?.highlighted },
+                { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': !context?.highlighted },
+                'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+
+                // Transitions
+                'transition-shadow',
+                'duration-200',
+
+                // Misc
+                'cursor-pointer',
+                'overflow-hidden',
+                'whitespace-nowrap'
+            ]
+        }),
+        filteroperator: {
+            class: [
+                // Spacing
+                'px-5 py-3',
+
+                // Shape
+                'border-b border-solid',
+                'rounded-t-md',
+
+                // Color
+                'text-surface-700 dark:text-white/80',
+                'border-surface-200 dark:border-surface-800',
+                'bg-surface-0 dark:bg-surface-700'
+            ]
+        },
+        filteroperatordropdown: {
+            root: ({ state }) => ({
+                class: [
+                    // Display and Position
+                    'inline-flex',
+                    'relative',
+
+                    // Shape
+                    'w-full',
+                    'rounded-md',
+
+                    // Color and Background
+                    'bg-surface-0 dark:bg-surface-900',
+                    'border border-surface-300 dark:border-surface-700',
+
+                    // Transitions
+                    'transition-all',
+                    'duration-200',
+
+                    // States
+                    'hover:border-primary',
+                    { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused },
+
+                    // Misc
+                    'cursor-pointer',
+                    'select-none'
+                ]
+            }),
+            input: ({ props }) => ({
+                class: [
+                    //Font
+                    'leading-[normal]',
+
+                    // Display
+                    'block',
+                    'flex-auto',
+
+                    // Color and Background
+                    'bg-transparent',
+                    'border-0',
+                    { 'text-surface-800 dark:text-white/80': props.modelValue, 'text-surface-400 dark:text-surface-500': !props.modelValue },
+                    'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+                    // Sizing and Spacing
+                    'w-[1%]',
+                    'p-3',
+
+                    //Shape
+                    'rounded-none',
+
+                    // Transitions
+                    'transition',
+                    'duration-200',
+
+                    // States
+                    'focus:outline-none focus:shadow-none',
+
+                    // Misc
+                    'relative',
+                    'cursor-pointer',
+                    'overflow-hidden overflow-ellipsis',
+                    'whitespace-nowrap',
+                    'appearance-none'
+                ]
+            }),
+            trigger: {
+                class: [
+                    // Flexbox
+                    'flex items-center justify-center',
+                    'shrink-0',
+
+                    // Color and Background
+                    'bg-transparent',
+                    'text-surface-500',
+
+                    // Size
+                    'w-12',
+
+                    // Shape
+                    'rounded-tr-md',
+                    'rounded-br-md'
+                ]
+            },
+            panel: {
+                class: [
+                    // Position
+                    'absolute top-0 left-0',
+
+                    // Shape
+                    'border-0 dark:border',
+                    'rounded-md',
+                    'shadow-md',
+
+                    // Color
+                    'bg-surface-0 dark:bg-surface-800',
+                    'text-surface-800 dark:text-white/80',
+                    'dark:border-surface-700'
+                ]
+            },
+            item: ({ context }) => ({
+                class: [
+                    // Font
+                    'font-normal',
+                    'leading-none',
+
+                    // Position
+                    'relative',
+
+                    // Shape
+                    'border-0',
+                    'rounded-none',
+
+                    // Spacing
+                    'm-0',
+                    'py-3 px-5',
+
+                    // Color
+                    { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected },
+                    { 'bg-surface-50 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected },
+                    { 'bg-primary-highlight text-primary-highlight-inverse': !context.focused && context.selected },
+
+                    //States
+                    { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected },
+                    { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected },
+
+                    // Transitions
+                    'transition-shadow',
+                    'duration-200',
+
+                    // Misc
+                    'cursor-pointer',
+                    'overflow-hidden',
+                    'whitespace-nowrap'
+                ]
+            })
+        },
+        filterconstraint: {
+            class: [
+                // Spacing
+                'py-3 px-5',
+
+                // Shape
+                'border-b border-solid',
+
+                // Color
+                'border-surface-200 dark:border-surface-700'
+            ]
+        },
+        filteraddrule: {
+            class: 'py-3 px-5'
+        },
+        filteraddrulebutton: {
+            root: {
+                class: [
+                    'relative',
+
+                    // Alignments
+                    'items-center inline-flex text-center align-bottom justify-center',
+
+                    // Sizes & Spacing
+                    'text-sm py-2 px-3 w-full',
+
+                    // Shape
+                    'rounded-md',
+
+                    'bg-transparent border-transparent',
+                    'text-primary',
+                    'hover:bg-primary-300/20',
+
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+
+                    // Misc
+                    'cursor-pointer overflow-hidden select-none'
+                ]
+            },
+            label: {
+                class: 'flex-auto grow-0'
+            },
+            icon: {
+                class: 'mr-2'
+            }
+        },
+        filterremovebutton: {
+            root: {
+                class: [
+                    'relative',
+
+                    // Alignments
+                    'items-center inline-flex text-center align-bottom justify-center',
+
+                    // Sizes & Spacing
+                    'text-sm py-2 px-3 w-full mt-2',
+
+                    // Shape
+                    'rounded-md',
+
+                    'bg-transparent border-transparent',
+                    'text-red-500 dark:text-red-400',
+                    'hover:bg-red-300/20',
+
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+
+                    // Misc
+                    'cursor-pointer overflow-hidden select-none'
+                ]
+            },
+            label: {
+                class: 'flex-auto grow-0'
+            },
+            icon: {
+                class: 'mr-2'
+            }
+        },
+        filterbuttonbar: {
+            class: [
+                // Flex & Alignment
+                'flex items-center justify-between',
+
+                // Space
+                'py-3 px-5'
+            ]
+        },
+        filterclearbutton: {
+            root: {
+                class: [
+                    'relative',
+
+                    // Alignments
+                    'items-center inline-flex text-center align-bottom justify-center',
+
+                    // Sizes & Spacing
+                    'text-sm py-2 px-3',
+
+                    // Shape
+                    'rounded-md',
+
+                    'text-primary-500 border border-primary',
+                    'hover:bg-primary-300/20',
+
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+
+                    // Misc
+                    'cursor-pointer overflow-hidden select-none'
+                ]
+            }
+        },
+        filterapplybutton: {
+            root: {
+                class: [
+                    'relative',
+
+                    // Alignments
+                    'items-center inline-flex text-center align-bottom justify-center',
+
+                    // Sizes & Spacing
+                    'text-sm py-2 px-3',
+
+                    // Shape
+                    'rounded-md',
+
+                    'text-primary-inverse',
+                    'bg-primary',
+                    'hover:bg-primary-hover hover:border-primary-hover',
+
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+
+                    // Misc
+                    'cursor-pointer overflow-hidden select-none'
+                ]
+            }
+        },
+        filtermenubutton: ({ context }) => ({
+            class: [
+                'relative',
+                // Flex & Alignment
+                'inline-flex items-center justify-center',
+
+                // Size
+                'w-8 h-8',
+
+                // Spacing
+                'ml-2',
+
+                // Shape
+                'rounded-full',
+
+                // Color
+                { 'bg-primary-highlight text-highlight-inverse': context.active },
+                'dark:text-white/70 dark:hover:text-white/80 dark:bg-surface-800',
+
+                // States
+                'hover:text-surface-700 hover:bg-surface-300/20',
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+                // Transition
+                'transition duration-200',
+
+                // Misc
+                'cursor-pointer no-underline overflow-hidden'
+            ]
+        }),
+        headerfilterclearbutton: ({ context }) => ({
+            class: [
+                'relative',
+
+                // Flex & Alignment
+                'inline-flex items-center justify-center',
+                'text-left',
+
+                // Shape
+                'border-none',
+
+                // Spacing
+                'm-0 p-0 ml-2',
+
+                // Color
+                'bg-transparent',
+
+                // Misc
+                'cursor-pointer no-underline overflow-hidden select-none',
+                {
+                    invisible: !context.hidden
+                }
+            ]
+        }),
+        rowtoggler: {
+            class: [
+                'relative',
+
+                // Flex & Alignment
+                'inline-flex items-center justify-center',
+                'text-left',
+
+                // Spacing
+                'm-0 p-0',
+
+                // Size
+                'w-8 h-8',
+
+                // Shape
+                'border-0 rounded-full',
+
+                // Color
+                'text-surface-500 dark:text-white/70',
+                'bg-transparent',
+                'focus-visible:outline-none focus-visible:outline-offset-0',
+                'focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+
+                // Transition
+                'transition duration-200',
+
+                // Misc
+                'overflow-hidden',
+                'cursor-pointer select-none'
+            ]
+        },
+        columnresizer: {
+            class: [
+                'block',
+
+                // Position
+                'absolute top-0 right-0',
+
+                // Sizing
+                'w-2 h-full',
+
+                // Spacing
+                'm-0 p-0',
+
+                // Color
+                'border border-transparent',
+
+                // Misc
+                'cursor-col-resize'
+            ]
+        },
+        rowreordericon: {
+            class: 'cursor-move'
+        },
+        roweditorinitbutton: {
+            class: [
+                'relative',
+
+                // Flex & Alignment
+                'inline-flex items-center justify-center',
+                'text-left',
+
+                // Size
+                'w-8 h-8',
+
+                // Shape
+                'border-0 rounded-full',
+
+                // Color
+                'text-surface-700 dark:text-white/70',
+                'border-transparent',
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+                'hover:text-surface-700 hover:bg-surface-300/20',
+
+                // Transition
+                'transition duration-200',
+
+                // Misc
+                'overflow-hidden',
+                'cursor-pointer select-none'
+            ]
+        },
+        roweditorsavebutton: {
+            class: [
+                'relative',
+
+                // Flex & Alignment
+                'inline-flex items-center justify-center',
+                'text-left',
+
+                // Size
+                'w-8 h-8',
+
+                // Shape
+                'border-0 rounded-full',
+
+                // Color
+                'text-surface-700 dark:text-white/70',
+                'border-transparent',
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+                'hover:text-surface-700 hover:bg-surface-300/20',
+
+                // Transition
+                'transition duration-200',
+
+                // Misc
+                'overflow-hidden',
+                'cursor-pointer select-none'
+            ]
+        },
+        roweditorcancelbutton: {
+            class: [
+                'relative',
+
+                // Flex & Alignment
+                'inline-flex items-center justify-center',
+                'text-left',
+
+                // Size
+                'w-8 h-8',
+
+                // Shape
+                'border-0 rounded-full',
+
+                // Color
+                'text-surface-700 dark:text-white/70',
+                'border-transparent',
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+                'hover:text-surface-700 hover:bg-surface-300/20',
+
+                // Transition
+                'transition duration-200',
+
+                // Misc
+                'overflow-hidden',
+                'cursor-pointer select-none'
+            ]
+        },
+        rowRadiobutton: {
+            root: {
+                class: [
+                    'relative',
+
+                    // Flexbox & Alignment
+                    'inline-flex',
+                    'align-bottom',
+
+                    // Size
+                    'w-[1.571rem] h-[1.571rem]',
+
+                    // Misc
+                    'cursor-pointer',
+                    'select-none'
+                ]
+            },
+            box: ({ props }) => ({
+                class: [
+                    // Flexbox
+                    'flex justify-center items-center',
+
+                    // Size
+                    'w-[1.571rem] h-[1.571rem]',
+
+                    // Shape
+                    'border-2',
+                    'rounded-full',
+
+                    // Transition
+                    'transition duration-200 ease-in-out',
+
+                    // Colors
+                    {
+                        'text-surface-700 dark:text-white/80': !props.modelValue,
+                        'bg-surface-0 dark:bg-surface-900': !props.modelValue,
+                        'border-surface-300 dark:border-surface-700': !props.modelValue,
+                        'border-primary dark:border-primary': props.modelValue,
+                        'bg-primary dark:bg-primary': props.modelValue
+                    },
+
+                    // States
+                    {
+                        'peer-hover:border-primary': !props.disabled,
+                        'peer-hover:border-primary-hover peer-hover:bg-primary-hover': !props.disabled && props.modelValue,
+                        'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled,
+                        'opacity-60 cursor-default': props.disabled
+                    }
+                ]
+            }),
+            input: {
+                class: [
+                    'peer',
+
+                    // Size
+                    'w-full ',
+                    'h-full',
+
+                    // Position
+                    'absolute',
+                    'top-0 left-0',
+                    'z-10',
+
+                    // Spacing
+                    'p-0',
+                    'm-0',
+
+                    // Shape
+                    'opacity-0',
+                    'rounded-md',
+                    'outline-none',
+                    'border-2 border-surface-200 dark:border-surface-700',
+
+                    // Misc
+                    'appearance-none',
+                    'cursor-pointer'
+                ]
+            },
+            icon: ({ props }) => ({
+                class: [
+                    'block',
+
+                    // Shape
+                    'rounded-full',
+
+                    // Size
+                    'w-[0.857rem] h-[0.857rem]',
+
+                    // Colors
+                    'bg-surface-0 dark:bg-surface-900',
+
+                    // Conditions
+                    {
+                        'backface-hidden scale-10 invisible': !props.modelValue,
+                        'transform visible scale-[1.1]': props.modelValue
+                    },
+
+                    // Transition
+                    'transition duration-200'
+                ]
+            })
+        },
+        headercheckbox: {
+            root: {
+                class: [
+                    'relative',
+
+                    // Alignment
+                    'inline-flex',
+                    'align-bottom',
+
+                    // Size
+                    'w-6',
+                    'h-6',
+
+                    // Misc
+                    'cursor-pointer',
+                    'select-none'
+                ]
+            },
+            box: ({ props, context }) => ({
+                class: [
+                    // Alignment
+                    'flex',
+                    'items-center',
+                    'justify-center',
+
+                    // Size
+                    'w-6',
+                    'h-6',
+
+                    // Shape
+                    'rounded-md',
+                    'border-2',
+
+                    // Colors
+                    {
+                        'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked,
+                        'border-primary bg-primary': context.checked
+                    },
+
+                    // States
+                    {
+                        'peer-hover:border-primary': !props.disabled && !context.checked,
+                        'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                        'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled,
+                        'cursor-default opacity-60': props.disabled
+                    },
+
+                    // Transitions
+                    'transition-colors',
+                    'duration-200'
+                ]
+            }),
+            input: {
+                class: [
+                    'peer',
+
+                    // Size
+                    'w-full ',
+                    'h-full',
+
+                    // Position
+                    'absolute',
+                    'top-0 left-0',
+                    'z-10',
+
+                    // Spacing
+                    'p-0',
+                    'm-0',
+
+                    // Shape
+                    'opacity-0',
+                    'rounded-md',
+                    'outline-none',
+                    'border-2 border-surface-200 dark:border-surface-700',
+
+                    // Misc
+                    'appearance-none',
+                    'cursor-pointer'
+                ]
+            },
+            icon: {
+                class: [
+                    // Font
+                    'text-base leading-none',
+
+                    // Size
+                    'w-4',
+                    'h-4',
+
+                    // Colors
+                    'text-white dark:text-surface-900',
+
+                    // Transitions
+                    'transition-all',
+                    'duration-200'
+                ]
+            }
+        },
+        rowCheckbox: {
+            root: {
+                class: [
+                    'relative',
+
+                    // Alignment
+                    'inline-flex',
+                    'align-bottom',
+
+                    // Size
+                    'w-6',
+                    'h-6',
+
+                    // Misc
+                    'cursor-pointer',
+                    'select-none'
+                ]
+            },
+            box: ({ props, context }) => ({
+                class: [
+                    // Alignment
+                    'flex',
+                    'items-center',
+                    'justify-center',
+
+                    // Size
+                    'w-6',
+                    'h-6',
+
+                    // Shape
+                    'rounded-md',
+                    'border-2',
+
+                    // Colors
+                    {
+                        'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked,
+                        'border-primary bg-primary': context.checked
+                    },
+
+                    // States
+                    {
+                        'peer-hover:border-primary': !props.disabled && !context.checked,
+                        'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                        'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled,
+                        'cursor-default opacity-60': props.disabled
+                    },
+
+                    // Transitions
+                    'transition-colors',
+                    'duration-200'
+                ]
+            }),
+            input: {
+                class: [
+                    'peer',
+
+                    // Size
+                    'w-full ',
+                    'h-full',
+
+                    // Position
+                    'absolute',
+                    'top-0 left-0',
+                    'z-10',
+
+                    // Spacing
+                    'p-0',
+                    'm-0',
+
+                    // Shape
+                    'opacity-0',
+                    'rounded-md',
+                    'outline-none',
+                    'border-2 border-surface-200 dark:border-surface-700',
+
+                    // Misc
+                    'appearance-none',
+                    'cursor-pointer'
+                ]
+            },
+            icon: {
+                class: [
+                    // Font
+                    'text-base leading-none',
+
+                    // Size
+                    'w-4',
+                    'h-4',
+
+                    // Colors
+                    'text-white dark:text-surface-900',
+
+                    // Transitions
+                    'transition-all',
+                    'duration-200'
+                ]
+            }
+        },
+        transition: {
+            enterFromClass: 'opacity-0 scale-y-[0.8]',
+            enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+            leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+            leaveToClass: 'opacity-0'
+        }
+    },
+    bodyrow: ({ context, props }) => ({
+        class: [
+            // Color
+            'dark:text-white/80',
+            { 'bg-primary-highlight text-primary-highlight-inverse': context.selected },
+            { 'bg-surface-0 text-surface-600 dark:bg-surface-800': !context.selected },
+            { 'font-bold bg-surface-0 dark:bg-surface-800 z-20': props.frozenRow },
+            { 'odd:bg-surface-0 odd:text-surface-600 dark:odd:bg-surface-800 even:bg-surface-50 even:text-surface-600 dark:even:bg-surface-900/50': context.stripedRows },
+
+            // State
+            { 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 ring-inset dark:focus:ring-primary-300/50': context.selectable },
+            { 'hover:bg-surface-300/20 hover:text-surface-600': props.selectionMode && !context.selected },
+
+            // Transition
+            { 'transition duration-200': (props.selectionMode && !context.selected) || props.rowHover },
+
+            // Misc
+            { 'cursor-pointer': props.selectionMode }
+        ]
+    }),
+    rowexpansion: {
+        class: 'bg-surface-0 dark:bg-surface-800 text-surface-600 dark:text-white/80'
+    },
+    rowgroupheader: {
+        class: ['sticky z-20', 'bg-surface-0 text-surface-600 dark:text-white/70', 'dark:bg-surface-800']
+    },
+    rowgroupfooter: {
+        class: ['sticky z-20', 'bg-surface-0 text-surface-600 dark:text-white/70', 'dark:bg-surface-800']
+    },
+    rowgrouptoggler: {
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'inline-flex items-center justify-center',
+            'text-left',
+
+            // Spacing
+            'm-0 p-0',
+
+            // Size
+            'w-8 h-8',
+
+            // Shape
+            'border-0 rounded-full',
+
+            // Color
+            'text-surface-500 dark:text-white/70',
+            'bg-transparent',
+            'focus-visible:outline-none focus-visible:outline-offset-0',
+            'focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'overflow-hidden',
+            'cursor-pointer select-none'
+        ]
+    },
+    rowgrouptogglericon: {
+        class: 'inline-block w-4 h-4'
+    },
+    resizehelper: {
+        class: 'absolute hidden w-[2px] z-20 bg-primary'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/dataview/index.js b/packages/tailwindcss-presets/src/lara/dataview/index.js
new file mode 100644
index 000000000..2eed11b05
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/dataview/index.js
@@ -0,0 +1,40 @@
+export default {
+    content: {
+        class: [
+            // Spacing
+            'p-0',
+
+            // Shape
+            'border-0',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-800'
+        ]
+    },
+    grid: {
+        class: [
+            // flex
+            'flex flex-wrap',
+
+            // Spacing
+            'ml-0 mr-0 mt-0',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-800'
+        ]
+    },
+    header: {
+        class: [
+            'font-bold',
+
+            // Spacing
+            'p-4',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-surface-50 dark:bg-surface-800',
+            'border-surface-200 dark:border-surface-700 border-y'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/dataviewlayoutoptions/index.js b/packages/tailwindcss-presets/src/lara/dataviewlayoutoptions/index.js
new file mode 100644
index 000000000..18584aecd
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/dataviewlayoutoptions/index.js
@@ -0,0 +1,58 @@
+export default {
+    listbutton: ({ props }) => ({
+        class: [
+            // Font
+            'leading-none',
+
+            // Flex Alignment
+            'inline-flex items-center align-bottom text-center',
+
+            // Shape
+            'border rounded-md rounded-r-none',
+
+            // Spacing
+            'px-4 py-3',
+
+            // Color
+            props.modelValue === 'list' ? 'bg-primary border-primary text-primary-inverse' : 'bg-surface-0 dark:bg-surface-900 border-surface-200 dark:border-surface-700 text-surface-700 dark:text-white/80',
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+            props.modelValue === 'list' ? 'hover:bg-primary-hover' : 'hover:bg-surface-50 dark:hover:bg-surface-800/80',
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'cursor-pointer select-none overflow-hidden'
+        ]
+    }),
+    gridbutton: ({ props }) => ({
+        class: [
+            // Font
+            'leading-none',
+
+            // Flex Alignment
+            'inline-flex items-center align-bottom text-center',
+
+            // Shape
+            'border rounded-md rounded-l-none',
+
+            // Spacing
+            'px-4 py-3',
+
+            // Color
+            props.modelValue === 'grid' ? 'bg-primary border-primary text-primary-inverse' : 'bg-surface-0 dark:bg-surface-900 border-surface-200 dark:border-surface-700 text-surface-700 dark:text-white/80',
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+            props.modelValue === 'grid' ? 'hover:bg-primary-hover' : 'hover:bg-surface-50 dark:hover:bg-surface-800/80',
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'cursor-pointer select-none overflow-hidden'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/deferred/index.js b/packages/tailwindcss-presets/src/lara/deferred/index.js
new file mode 100644
index 000000000..2064371ae
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/deferred/index.js
@@ -0,0 +1,3 @@
+export default {
+    root: {}
+};
diff --git a/packages/tailwindcss-presets/src/lara/dialog/index.js b/packages/tailwindcss-presets/src/lara/dialog/index.js
new file mode 100644
index 000000000..adb8f1e6e
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/dialog/index.js
@@ -0,0 +1,235 @@
+export default {
+    root: ({ state }) => ({
+        class: [
+            // Shape
+            'rounded-lg',
+            'shadow-lg',
+            'border-0',
+
+            // Size
+            'max-h-[90vh]',
+            'w-[50vw]',
+            'm-0',
+
+            // Color
+            'dark:border',
+            'dark:border-surface-700',
+
+            // Transitions
+            'transform',
+            'scale-100',
+
+            // Maximized State
+            {
+                'transition-none': state.maximized,
+                'transform-none': state.maximized,
+                '!w-screen': state.maximized,
+                '!h-screen': state.maximized,
+                '!max-h-full': state.maximized,
+                '!top-0': state.maximized,
+                '!left-0': state.maximized
+            }
+        ]
+    }),
+    header: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-between',
+            'shrink-0',
+
+            // Spacing
+            'p-6',
+
+            // Shape
+            'border-t-0',
+            'rounded-tl-lg',
+            'rounded-tr-lg',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    title: {
+        class: ['font-bold text-lg']
+    },
+    icons: {
+        class: ['flex items-center']
+    },
+    closeButton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Size and Spacing
+            'mr-2',
+            'last:mr-0',
+            'w-8 h-8',
+
+            // Shape
+            'border-0',
+            'rounded-full',
+
+            // Colors
+            'text-surface-500',
+            'bg-transparent',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-surface-800/80',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset',
+            'focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Misc
+            'overflow-hidden'
+        ]
+    },
+    maximizablebutton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Size and Spacing
+            'mr-2',
+            'last:mr-0',
+            'w-8 h-8',
+
+            // Shape
+            'border-0',
+            'rounded-full',
+
+            // Colors
+            'text-surface-500',
+            'bg-transparent',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-surface-800/80',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset',
+            'focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Misc
+            'overflow-hidden'
+        ]
+    },
+    closeButtonIcon: {
+        class: [
+            // Display
+            'inline-block',
+
+            // Size
+            'w-4',
+            'h-4'
+        ]
+    },
+    maximizableicon: {
+        class: [
+            // Display
+            'inline-block',
+
+            // Size
+            'w-4',
+            'h-4'
+        ]
+    },
+    content: ({ state, instance }) => ({
+        class: [
+            // Spacing
+            'px-6',
+            'pb-8',
+            'pt-0',
+
+            // Shape
+            {
+                grow: state.maximized,
+                'rounded-bl-lg': !instance.$slots.footer,
+                'rounded-br-lg': !instance.$slots.footer
+            },
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-surface-0/80',
+
+            // Misc
+            'overflow-y-auto'
+        ]
+    }),
+    footer: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-end',
+            'shrink-0',
+            'text-right',
+            'gap-2',
+
+            // Spacing
+            'px-6',
+            'pb-6',
+
+            // Shape
+            'border-t-0',
+            'rounded-b-lg',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    mask: ({ props }) => ({
+        class: [
+            // Transitions
+            'transition-all',
+            'duration-300',
+            { 'p-5': !props.position == 'full' },
+
+            // Background and Effects
+            { 'has-[.mask-active]:bg-transparent bg-black/40': props.modal, 'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': props.modal }
+        ]
+    }),
+    transition: ({ props }) => {
+        return props.position === 'top'
+            ? {
+                  enterFromClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
+                  enterActiveClass: 'transition-all duration-200 ease-out',
+                  leaveActiveClass: 'transition-all duration-200 ease-out',
+                  leaveToClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active'
+              }
+            : props.position === 'bottom'
+            ? {
+                  enterFromClass: 'opacity-0 scale-75 translate-y-full mask-active',
+                  enterActiveClass: 'transition-all duration-200 ease-out',
+                  leaveActiveClass: 'transition-all duration-200 ease-out',
+                  leaveToClass: 'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0 mask-active'
+              }
+            : props.position === 'left' || props.position === 'topleft' || props.position === 'bottomleft'
+            ? {
+                  enterFromClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active',
+                  enterActiveClass: 'transition-all duration-200 ease-out',
+                  leaveActiveClass: 'transition-all duration-200 ease-out',
+                  leaveToClass: 'opacity-0 scale-75  -translate-x-full translate-y-0 translate-z-0 mask-active'
+              }
+            : props.position === 'right' || props.position === 'topright' || props.position === 'bottomright'
+            ? {
+                  enterFromClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
+                  enterActiveClass: 'transition-all duration-200 ease-out',
+                  leaveActiveClass: 'transition-all duration-200 ease-out',
+                  leaveToClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active'
+              }
+            : {
+                  enterFromClass: 'opacity-0 scale-75 mask-active',
+                  enterActiveClass: 'transition-all duration-200 ease-out',
+                  leaveActiveClass: 'transition-all duration-200 ease-out',
+                  leaveToClass: 'opacity-0 scale-75 mask-active'
+              };
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/divider/index.js b/packages/tailwindcss-presets/src/lara/divider/index.js
new file mode 100644
index 000000000..b4406974e
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/divider/index.js
@@ -0,0 +1,67 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Flex and Position
+            'flex relative',
+            { 'justify-center': props.layout == 'vertical' },
+            { 'items-center': props.layout == 'vertical' },
+            {
+                'justify-start': props?.align == 'left' && props.layout == 'horizontal',
+                'justify-center': props?.align == 'center' && props.layout == 'horizontal',
+                'justify-end': props?.align == 'right' && props.layout == 'horizontal',
+                'items-center': props?.align == 'top' && props.layout == 'vertical',
+                'items-start': props?.align == 'center' && props.layout == 'vertical',
+                'items-end': props?.align == 'bottom' && props.layout == 'vertical'
+            },
+
+            // Spacing
+            {
+                'my-5 mx-0 py-0 px-5': props.layout == 'horizontal',
+                'mx-4 md:mx-5 py-5': props.layout == 'vertical'
+            },
+
+            // Size
+            {
+                'w-full': props.layout == 'horizontal',
+                'min-h-full': props.layout == 'vertical'
+            },
+
+            // Before: Line
+            'before:block',
+
+            // Position
+            {
+                'before:absolute before:left-0 before:top-1/2': props.layout == 'horizontal',
+                'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2': props.layout == 'vertical'
+            },
+
+            // Size
+            {
+                'before:w-full': props.layout == 'horizontal',
+                'before:min-h-full': props.layout == 'vertical'
+            },
+
+            // Shape
+            {
+                'before:border-solid': props.type == 'solid',
+                'before:border-dotted': props.type == 'dotted',
+                'before:border-dashed': props.type == 'dashed'
+            },
+
+            // Color
+            {
+                'before:border-t before:border-surface-200 before:dark:border-surface-600': props.layout == 'horizontal',
+                'before:border-l before:border-surface-200 before:dark:border-surface-600': props.layout == 'vertical'
+            }
+        ]
+    }),
+    content: {
+        class: [
+            // Space and Position
+            'px-1 z-10',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-800'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/dock/index.js b/packages/tailwindcss-presets/src/lara/dock/index.js
new file mode 100644
index 000000000..5a33adedf
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/dock/index.js
@@ -0,0 +1,93 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Positioning
+            'absolute z-1',
+            {
+                'left-0 bottom-0 w-full': props.position == 'bottom',
+                'left-0 top-0 w-full': props.position == 'top',
+                'left-0 top-0 h-full': props.position == 'left',
+                'right-0 top-0 h-full': props.position == 'right'
+            },
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Interactivity
+            'pointer-events-none'
+        ]
+    }),
+    container: {
+        class: [
+            // Flexbox
+            'flex',
+
+            // Shape & Border
+            'rounded-md',
+
+            // Color
+            'bg-surface-0/10 dark:bg-surface-900/20 border border-surface-0/20',
+            'backdrop-blur-sm',
+
+            // Spacing
+            'p-2',
+
+            // Misc
+            'pointer-events-auto'
+        ]
+    },
+    menu: ({ props }) => ({
+        class: [
+            // Flexbox & Alignment
+            'flex items-center justify-center',
+            {
+                'flex-col': props.position == 'left' || props.position == 'right'
+            },
+
+            // List Style
+            'm-0 p-0 list-none',
+
+            // Shape
+            'outline-none'
+        ]
+    }),
+    menuitem: ({ props, context, instance }) => ({
+        class: [
+            // Spacing & Shape
+            'p-2 rounded-md',
+
+            // Conditional Scaling
+            {
+                'hover:scale-150': instance.currentIndex === context.index,
+                'scale-125': instance.currentIndex - 1 === context.index || instance.currentIndex + 1 === context.index,
+                'scale-110': instance.currentIndex - 2 === context.index || instance.currentIndex + 2 === context.index
+            },
+
+            // Positioning & Hover States
+            {
+                'origin-bottom hover:mx-6': props.position == 'bottom',
+                'origin-top hover:mx-6': props.position == 'top',
+                'origin-left hover:my-6': props.position == 'left',
+                'origin-right hover:my-6': props.position == 'right'
+            },
+
+            // Transitions & Transform
+            'transition-all duration-200 ease-cubic-bezier-will-change-transform transform'
+        ]
+    }),
+    action: {
+        class: [
+            // Flexbox & Alignment
+            'flex flex-col items-center justify-center',
+
+            // Position
+            'relative',
+
+            // Size
+            'w-16 h-16',
+
+            // Misc
+            'cursor-default overflow-hidden'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/dropdown/index.js b/packages/tailwindcss-presets/src/lara/dropdown/index.js
new file mode 100644
index 000000000..34551930e
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/dropdown/index.js
@@ -0,0 +1,278 @@
+export default {
+    root: ({ props, state, parent }) => ({
+        class: [
+            // Display and Position
+            'inline-flex',
+            'relative',
+
+            // Shape
+            { 'rounded-md': parent.instance.$name !== 'InputGroup' },
+            { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+            { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
+            { 'first:ml-0 ml-[-1px]': parent.instance.$name == 'InputGroup' && !props.showButtons },
+
+            // Color and Background
+            'bg-surface-0 dark:bg-surface-900',
+
+            'border border-surface-300',
+            { 'dark:border-surface-700': parent.instance.$name != 'InputGroup' },
+            { 'dark:border-surface-600': parent.instance.$name == 'InputGroup' },
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // Transitions
+            'transition-all',
+            'duration-200',
+
+            // States
+            { 'hover:border-primary': !props.invalid },
+            { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused },
+
+            // Misc
+            'cursor-pointer',
+            'select-none',
+            { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled }
+        ]
+    }),
+    input: ({ props, parent }) => ({
+        class: [
+            //Font
+            'leading-[normal]',
+
+            // Display
+            'block',
+            'flex-auto',
+
+            // Color and Background
+            'bg-transparent',
+            'border-0',
+            { 'text-surface-800 dark:text-white/80': props.modelValue != undefined, 'text-surface-400 dark:text-surface-500': props.modelValue == undefined },
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+            // Sizing and Spacing
+            'w-[1%]',
+            'p-3',
+            { 'pr-7': props.showClear },
+
+            //Shape
+            'rounded-none',
+
+            // Transitions
+            'transition',
+            'duration-200',
+
+            // States
+            'focus:outline-none focus:shadow-none',
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null },
+
+            // Misc
+            'relative',
+            'cursor-pointer',
+            'overflow-hidden overflow-ellipsis',
+            'whitespace-nowrap',
+            'appearance-none'
+        ]
+    }),
+    trigger: {
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+            'shrink-0',
+
+            // Color and Background
+            'bg-transparent',
+            'text-surface-500',
+
+            // Size
+            'w-12',
+
+            // Shape
+            'rounded-tr-md',
+            'rounded-br-md'
+        ]
+    },
+    panel: {
+        class: [
+            // Position
+            'absolute top-0 left-0',
+
+            // Shape
+            'border-0 dark:border',
+            'rounded-md',
+            'shadow-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-800 dark:text-white/80',
+            'dark:border-surface-700'
+        ]
+    },
+    wrapper: {
+        class: [
+            // Sizing
+            'max-h-[200px]',
+
+            // Misc
+            'overflow-auto'
+        ]
+    },
+    list: {
+        class: 'py-3 list-none m-0'
+    },
+    item: ({ context }) => ({
+        class: [
+            // Font
+            'font-normal',
+            'leading-none',
+
+            // Position
+            'relative',
+
+            // Shape
+            'border-0',
+            'rounded-none',
+
+            // Spacing
+            'm-0',
+            'py-3 px-5',
+
+            // Colors
+            {
+                'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
+                'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
+                'text-surface-700 dark:text-white/80': context.focused && !context.selected,
+
+                'text-primary-highlight-inverse': context.selected,
+                'bg-primary-highlight': context.selected
+            },
+
+            //States
+            { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected },
+            { 'hover:bg-primary-highlight-hover': context.selected },
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+
+            // Transitions
+            'transition-shadow',
+            'duration-200',
+
+            // Misc
+            { 'pointer-events-none cursor-default': context.disabled },
+            { 'cursor-pointer': !context.disabled },
+            'overflow-hidden',
+            'whitespace-nowrap'
+        ]
+    }),
+    itemgroup: {
+        class: [
+            //Font
+            'font-bold',
+
+            // Spacing
+            'm-0',
+            'py-3 px-5',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-600/80',
+
+            // Misc
+            'cursor-auto'
+        ]
+    },
+    emptymessage: {
+        class: [
+            // Font
+            'leading-none',
+
+            // Spacing
+            'py-3 px-5',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-transparent'
+        ]
+    },
+    header: {
+        class: [
+            // Spacing
+            'py-3 px-5',
+            'm-0',
+
+            //Shape
+            'border-b',
+            'rounded-tl-md',
+            'rounded-tr-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-100 dark:bg-surface-800',
+            'border-surface-300 dark:border-surface-700'
+        ]
+    },
+    filtercontainer: {
+        class: 'relative'
+    },
+    filterinput: {
+        class: [
+            // Font
+            'leading-[normal]',
+
+            // Sizing
+            'pr-7 py-3 px-3',
+            '-mr-7',
+            'w-full',
+
+            //Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-900',
+            'border-surface-200 dark:border-surface-700',
+
+            // Shape
+            'border',
+            'rounded-lg',
+            'appearance-none',
+
+            // Transitions
+            'transition',
+            'duration-200',
+
+            // States
+            'hover:border-primary',
+            'focus:ring focus:outline-none focus:outline-offset-0',
+            'focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Misc
+            'appearance-none'
+        ]
+    },
+    filtericon: {
+        class: ['absolute', 'top-1/2 right-3', '-mt-2']
+    },
+    clearicon: {
+        class: [
+            // Color
+            'text-surface-500',
+
+            // Position
+            'absolute',
+            'top-1/2',
+            'right-12',
+
+            // Spacing
+            '-mt-2'
+        ]
+    },
+    loadingicon: {
+        class: 'text-surface-400 dark:text-surface-500 animate-spin'
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/fieldset/index.js b/packages/tailwindcss-presets/src/lara/fieldset/index.js
new file mode 100644
index 000000000..3b70c8043
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/fieldset/index.js
@@ -0,0 +1,84 @@
+export default {
+    root: {
+        class: [
+            'block',
+
+            // Spacing
+            'px-4 pt-2 py-3',
+            'inline-size-min',
+
+            // Shape
+            'rounded-md',
+            // Color
+            'border border-surface-200 dark:border-surface-700',
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    legend: ({ props }) => ({
+        class: [
+            // Font
+            'font-bold',
+            'leading-none',
+
+            //Spacing
+            { 'p-0': props.toggleable, 'p-5': !props.toggleable },
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'text-surface-700 dark:text-surface-0/80',
+            'border border-surface-200 dark:border-surface-700',
+            'bg-surface-50 dark:bg-surface-900',
+
+            // Transition
+            'transition-none',
+
+            // States
+            { 'hover:bg-surface-100 hover:border-surface-200 hover:text-surface-900 dark:hover:text-surface-0/80 dark:hover:bg-surface-800/80': props.toggleable }
+        ]
+    }),
+    toggler: ({ props }) => ({
+        class: [
+            // Alignments
+            'flex items-center justify-center',
+            'relative',
+
+            //Spacing
+            { 'p-5': props.toggleable },
+
+            // Shape
+            { 'rounded-md': props.toggleable },
+
+            // Color
+            { 'text-surface-700 dark:text-surface-200 hover:text-surface-900': props.toggleable },
+
+            // States
+            { 'hover:text-surface-900 dark:hover:text-surface-100': props.toggleable },
+            { 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50': props.toggleable },
+
+            // Misc
+            {
+                'transition-none cursor-pointer overflow-hidden select-none': props.toggleable
+            }
+        ]
+    }),
+    togglerIcon: {
+        class: 'mr-2 inline-block'
+    },
+    legendTitle: {
+        class: 'flex items-center justify-center leading-none'
+    },
+    content: {
+        class: 'p-5'
+    },
+    transition: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+        enterToClass: 'max-h-[1000px]',
+        leaveFromClass: 'max-h-[1000px]',
+        leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+        leaveToClass: 'max-h-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/fileupload/index.js b/packages/tailwindcss-presets/src/lara/fileupload/index.js
new file mode 100644
index 000000000..097ee48cf
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/fileupload/index.js
@@ -0,0 +1,173 @@
+export default {
+    input: {
+        class: 'hidden'
+    },
+    buttonbar: {
+        class: [
+            // Flexbox
+            'flex',
+            'flex-wrap',
+
+            // Colors
+            'bg-surface-50',
+            'dark:bg-surface-800',
+            'text-surface-700',
+            'dark:text-white/80',
+
+            // Spacing
+            'p-5',
+            'gap-2',
+
+            // Borders
+            'border',
+            'border-solid',
+            'border-surface-200',
+            'dark:border-surface-700',
+            'border-b-0',
+
+            // Shape
+            'rounded-tr-lg',
+            'rounded-tl-lg'
+        ]
+    },
+    chooseButton: {
+        class: [
+            'relative',
+
+            // Alignments
+            'items-center inline-flex text-center align-bottom justify-center',
+
+            // Spacing
+            'px-4 py-3',
+
+            // Shape
+            'rounded-md',
+
+            // Font
+            'leading-[normal]',
+            'font-bold',
+
+            // Colors
+            'text-primary-inverse',
+            'bg-primary',
+            'border-primary',
+
+            // States
+            'hover:bg-primary-hover',
+
+            // Misc
+            'overflow-hidden',
+            'cursor-pointer'
+        ]
+    },
+    chooseIcon: {
+        class: ['mr-2', 'inline-block']
+    },
+    chooseButtonLabel: {
+        class: ['flex-1', 'font-bold']
+    },
+    uploadbutton: {
+        icon: {
+            class: 'mr-2'
+        }
+    },
+    cancelbutton: {
+        icon: {
+            class: 'mr-2'
+        }
+    },
+    content: {
+        class: [
+            // Position
+            'relative',
+
+            // Colors
+            'bg-surface-0',
+            'dark:bg-surface-900',
+            'text-surface-700',
+            'dark:text-white/80',
+
+            // Spacing
+            'p-8',
+
+            // Borders
+            'border',
+            'border-surface-200',
+            'dark:border-surface-700',
+
+            // Shape
+            'rounded-b-lg'
+        ]
+    },
+    file: {
+        class: [
+            // Flexbox
+            'flex',
+            'items-center',
+            'flex-wrap',
+
+            // Spacing
+            'p-4',
+            'mb-2',
+            'last:mb-0',
+
+            // Borders
+            'border',
+            'border-surface-200',
+            'dark:border-surface-700',
+            'gap-2',
+
+            // Shape
+            'rounded'
+        ]
+    },
+    thumbnail: {
+        class: 'shrink-0'
+    },
+    fileName: {
+        class: 'mb-2 break-all'
+    },
+    fileSize: {
+        class: 'mr-2'
+    },
+    uploadicon: {
+        class: 'mr-2'
+    },
+    progressbar: {
+        root: {
+            class: [
+                // Position and Overflow
+                'overflow-hidden',
+                'absolute top-0 left-0',
+
+                // Shape and Size
+                'border-0',
+                'h-2',
+                'rounded-md',
+                'w-full',
+
+                // Colors
+                'bg-surface-100 dark:bg-surface-700'
+            ]
+        },
+        value: {
+            class: [
+                // Flexbox & Overflow & Position
+                'absolute flex items-center justify-center overflow-hidden',
+
+                // Colors
+                'bg-primary',
+
+                // Spacing & Sizing
+                'm-0',
+                'h-full w-0',
+
+                // Shape
+                'border-0',
+
+                // Transitions
+                'transition-width duration-1000 ease-in-out'
+            ]
+        }
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/floatlabel/index.js b/packages/tailwindcss-presets/src/lara/floatlabel/index.js
new file mode 100644
index 000000000..557808fee
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/floatlabel/index.js
@@ -0,0 +1,26 @@
+export default {
+    root: {
+        class: [
+            'block relative',
+
+            // Base Label Appearance
+            '[&>*:last-child]:text-surface-900/60 dark:[&>*:last-child]:text-white/60',
+            '[&>*:last-child]:absolute',
+            '[&>*:last-child]:top-1/2',
+            '[&>*:last-child]:-translate-y-1/2',
+            '[&>*:last-child]:left-3',
+            '[&>*:last-child]:pointer-events-none',
+            '[&>*:last-child]:transition-all',
+            '[&>*:last-child]:duration-200',
+            '[&>*:last-child]:ease',
+
+            // Focus Label Appearance
+            '[&>*:last-child]:has-[:focus]:-top-3',
+            '[&>*:last-child]:has-[:focus]:text-sm',
+
+            // Filled Input Label Appearance
+            '[&>*:last-child]:has-[.filled]:-top-3',
+            '[&>*:last-child]:has-[.filled]:text-sm'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/galleria/index.js b/packages/tailwindcss-presets/src/lara/galleria/index.js
new file mode 100644
index 000000000..fe7f785db
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/galleria/index.js
@@ -0,0 +1,308 @@
+export default {
+    content: ({ parent, props }) => ({
+        class: [
+            'flex',
+            {
+                'flex-col': props.fullScreen
+            },
+            {
+                'flex-col': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom',
+                'flex-row': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
+            }
+        ]
+    }),
+    itemwrapper: ({ parent, props }) => ({
+        class: [
+            'group',
+            'flex relative',
+            {
+                'grow shrink w-0 justify-center': props.fullScreen
+            },
+            {
+                'flex-col': parent.props.indicatorsPosition === 'bottom' || parent.props.indicatorsPosition === 'top',
+                'flex-row items-center': parent.props.indicatorsPosition === 'left' || parent.props.indicatorsPosition === 'right'
+            },
+            {
+                'order-2': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'left',
+                'flex-row': parent.props.thumbnailsPosition === 'right'
+            }
+        ]
+    }),
+
+    itemcontainer: ({ parent }) => ({
+        class: [
+            'flex h-full relative',
+            {
+                'order-1': parent.props.indicatorsPosition === 'bottom' || parent.props.indicatorsPosition === 'right',
+                'order-2': parent.props.indicatorsPosition === 'top' || parent.props.indicatorsPosition === 'left'
+            }
+        ]
+    }),
+    item: {
+        class: [
+            // Flex
+            'flex justify-center items-center h-full w-full',
+
+            // Sizing
+            'h-full w-full'
+        ]
+    },
+    thumbnailwrapper: ({ parent }) => ({
+        class: [
+            // Flex
+            'flex flex-col shrink-0',
+
+            {
+                'order-1': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'left'
+            },
+
+            // Misc
+            'overflow-auto'
+        ]
+    }),
+    thumbnailcontainer: ({ parent }) => ({
+        class: [
+            // Flex
+            'flex',
+
+            // Spacing
+            'p-4',
+
+            // Colors
+            'bg-black/90',
+
+            {
+                'flex-row': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom',
+                'flex-col grow': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
+            }
+        ]
+    }),
+    previousthumbnailbutton: {
+        class: [
+            // Positioning
+            'self-center relative',
+
+            // Display & Flexbox
+            'flex shrink-0 justify-center items-center overflow-hidden',
+
+            // Spacing
+            'm-2',
+
+            // Appearance
+            'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
+
+            // Hover Effects
+            'hover:bg-surface-0/10 hover:text-white',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+        ]
+    },
+    thumbnailitemscontainer: {
+        class: 'overflow-hidden w-full'
+    },
+    thumbnailitems: ({ parent }) => ({
+        class: [
+            'flex',
+            {
+                'flex-col h-full': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
+            }
+        ]
+    }),
+    thumbnailitem: ({ parent }) => ({
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+            'grow shrink-0',
+
+            // Sizing
+            {
+                'w-full md:w-[25%] lg:w-[20%]': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom'
+            },
+
+            // Misc
+            'overflow-auto',
+            'cursor-pointer',
+            'opacity-50',
+
+            // States
+            '[&[data-p-active="true"]]:opacity-100',
+            'hover:opacity-100',
+
+            // Transitions
+            'transition-opacity duration-300'
+        ]
+    }),
+    nextthumbnailbutton: {
+        class: [
+            // Positioning
+            'self-center relative',
+
+            // Display & Flexbox
+            'flex shrink-0 justify-center items-center overflow-hidden',
+
+            // Spacing
+            'm-2',
+
+            // Appearance
+            'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
+
+            // Hover Effects
+            'hover:bg-surface-0/10 hover:text-white',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+        ]
+    },
+    indicators: ({ parent }) => ({
+        class: [
+            // flex
+            'flex items-center justify-center',
+
+            // Spacing
+            'p-4',
+
+            // Indicators Position
+            {
+                'order-2': parent.props.indicatorsPosition == 'bottom',
+                'order-1': parent.props.indicatorsPosition == 'top',
+                'order-1 flex-col': parent.props.indicatorsPosition == 'left',
+                'flex-col order-2': parent.props.indicatorsPosition == 'right'
+            },
+            {
+                'absolute z-10 bg-black/50': parent.props.showIndicatorsOnItem
+            },
+
+            {
+                'bottom-0 left-0 w-full items-start': parent.props.indicatorsPosition == 'bottom' && parent.props.showIndicatorsOnItem,
+                'top-0 left-0 w-full items-start': parent.props.indicatorsPosition == 'top' && parent.props.showIndicatorsOnItem,
+                'left-0 top-0 h-full items-start': parent.props.indicatorsPosition == 'left' && parent.props.showIndicatorsOnItem,
+                'right-0 top-0 h-full items-start': parent.props.indicatorsPosition == 'right' && parent.props.showIndicatorsOnItem
+            }
+        ]
+    }),
+    indicator: ({ parent }) => ({
+        class: [
+            {
+                'mr-2': parent.props.indicatorsPosition == 'bottom' || parent.props.indicatorsPosition == 'top',
+                'mb-2': parent.props.indicatorsPosition == 'left' || parent.props.indicatorsPosition == 'right'
+            }
+        ]
+    }),
+    indicatorbutton: ({ context }) => ({
+        class: [
+            // Size
+            'w-4 h-4',
+
+            // Appearance
+            'rounded-full transition duration-200',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Conditional Appearance: Not Highlighted
+            { 'bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600': !context.highlighted },
+
+            // Conditional Appearance: Highlighted
+            { 'bg-primary hover:bg-primary-hover': context.highlighted }
+        ]
+    }),
+    mask: {
+        class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black/90']
+    },
+    closebutton: {
+        class: [
+            // Positioning
+            '!absolute top-0 right-0',
+
+            // Display & Flexbox
+            'flex justify-center items-center overflow-hidden',
+
+            // Spacing
+            'm-2',
+
+            // Appearance
+            'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out',
+
+            // Hover Effect
+            'hover:text-white hover:bg-surface-0/10',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+        ]
+    },
+    closeicon: {
+        class: 'w-6 h-6'
+    },
+    previousitembutton: ({ parent }) => ({
+        class: [
+            // Display & Flexbox
+            'inline-flex justify-center items-center overflow-hidden',
+
+            // Appearance
+            'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
+            {
+                'opacity-0 group-hover:opacity-100': parent.props.showItemNavigatorsOnHover
+            },
+
+            // Spacing
+            'mx-2',
+
+            // Positioning
+            'top-1/2 mt-[-0.5rem] left-0',
+            {
+                '!absolute': parent.props.showItemNavigators,
+                '!fixed': !parent.props.showItemNavigators
+            },
+
+            // Hover Effect
+            'hover:bg-surface-0/10 hover:text-white',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+        ]
+    }),
+    nextitembutton: ({ parent }) => ({
+        class: [
+            // Display & Flexbox
+            'inline-flex justify-center items-center overflow-hidden',
+
+            // Appearance
+            'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
+            {
+                'opacity-0 group-hover:opacity-100': parent.props.showItemNavigatorsOnHover
+            },
+
+            // Spacing
+            'mx-2',
+
+            // Positioning
+            'top-1/2 mt-[-0.5rem] right-0',
+            {
+                '!absolute': parent.props.showItemNavigators,
+                '!fixed': !parent.props.showItemNavigators
+            },
+
+            // Hover Effect
+            'hover:bg-surface-0/10 hover:text-white',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+        ]
+    }),
+    caption: {
+        class: [
+            // Positioning
+            'absolute bottom-0 left-0 w-full',
+
+            // Appearance
+            'bg-black/50 text-white p-4'
+        ]
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-all duration-150 ease-in-out',
+        leaveActiveClass: 'transition-all duration-150 ease-in',
+        leaveToClass: 'opacity-0 scale-75'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/global.js b/packages/tailwindcss-presets/src/lara/global.js
new file mode 100644
index 000000000..42552db83
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/global.js
@@ -0,0 +1,90 @@
+export default {
+    css: `
+    *[data-pd-ripple="true"]{
+        overflow: hidden;
+        position: relative;
+    }
+    span[data-p-ink-active="true"]{
+        animation: ripple 0.4s linear;
+    }
+    @keyframes ripple {
+        100% {
+            opacity: 0;
+            transform: scale(2.5);
+        }
+    }
+
+    .progress-spinner-circle {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: 0;
+        animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+        stroke-linecap: round;
+    }
+
+    @keyframes p-progress-spinner-dash{
+        0% {
+            stroke-dasharray: 1, 200;
+            stroke-dashoffset: 0;
+        }
+
+        50% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -35px;
+        }
+        100% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -124px;
+        }
+    }
+    @keyframes p-progress-spinner-color {
+        100%, 0% {
+            stroke: #ff5757;
+        }
+        40% {
+            stroke: #696cff;
+        }
+        66% {
+            stroke: #1ea97c;
+        }
+        80%, 90% {
+            stroke: #cc8925;
+        }
+    }
+
+    .progressbar-value-animate::after {
+        will-change: left, right;
+        animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    }
+    .progressbar-value-animate::before {
+        will-change: left, right;
+        animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    }
+    @keyframes p-progressbar-indeterminate-anim {
+        0% {
+            left: -35%;
+            right: 100%;
+        }
+        60% {
+            left: 100%;
+            right: -90%;
+        }
+        100% {
+            left: 100%;
+            right: -90%;
+        }
+    }
+
+    .p-fadein {
+        animation: p-fadein 250ms linear;
+    }
+
+    @keyframes p-fadein {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+`
+};
diff --git a/packages/tailwindcss-presets/src/lara/iconfield/index.js b/packages/tailwindcss-presets/src/lara/iconfield/index.js
new file mode 100644
index 000000000..554c02edf
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/iconfield/index.js
@@ -0,0 +1,22 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+            '[&>input]:w-full',
+
+            '[&>*:first-child]:absolute',
+            '[&>*:first-child]:top-1/2',
+            '[&>*:first-child]:-mt-2',
+            '[&>*:first-child]:leading-[normal]',
+            '[&>*:first-child]:text-surface-900/60 dark:[&>*:first-child]:text-white/60',
+            {
+                '[&>*:first-child]:right-3': props.iconPosition === 'right',
+                '[&>*:first-child]:left-3': props.iconPosition === 'left'
+            },
+            {
+                '[&>*:last-child]:pr-10': props.iconPosition === 'right',
+                '[&>*:last-child]:pl-10': props.iconPosition === 'left'
+            }
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/image/index.js b/packages/tailwindcss-presets/src/lara/image/index.js
new file mode 100644
index 000000000..e6d6f9fed
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/image/index.js
@@ -0,0 +1,206 @@
+export default {
+    root: {
+        class: 'relative inline-block'
+    },
+    button: {
+        class: [
+            // Flexbox & Alignment
+            'flex items-center justify-center',
+
+            // Positioning
+            'absolute',
+
+            // Shape
+            'inset-0 opacity-0 transition-opacity duration-300',
+
+            // Color
+            'bg-transparent text-surface-100',
+
+            // States
+            'hover:opacity-100 hover:cursor-pointer hover:bg-black/50 hover:bg-opacity-50'
+        ]
+    },
+    mask: {
+        class: [
+            // Flexbox & Alignment
+            'flex items-center justify-center',
+
+            // Positioning
+            'fixed top-0 left-0',
+
+            // Sizing
+            'w-full h-full',
+
+            // Color
+            'bg-black/90'
+        ]
+    },
+    toolbar: {
+        class: [
+            // Flexbox
+            'flex',
+
+            // Positioning
+            'absolute top-0 right-0',
+
+            // Spacing
+            'p-4'
+        ]
+    },
+    rotaterightbutton: {
+        class: [
+            'z-20',
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Size
+            'w-12 h-12',
+
+            // Spacing
+            'mr-2',
+
+            // Shape
+            'rounded-full',
+
+            // Color
+            'text-white bg-transparent',
+
+            // States
+            'hover:text-white hover:bg-surface-0/10',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transition
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    rotaterighticon: {
+        class: 'w-6 h-6'
+    },
+    rotateleftbutton: {
+        class: [
+            'z-20',
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Size
+            'w-12 h-12',
+
+            // Spacing
+            'mr-2',
+
+            // Shape
+            'rounded-full',
+
+            // Color
+            'text-white bg-transparent',
+
+            // States
+            'hover:text-white hover:bg-surface-0/10',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transition
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    rotatelefticon: {
+        class: 'w-6 h-6'
+    },
+    zoomoutbutton: {
+        class: [
+            'z-20',
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Size
+            'w-12 h-12',
+
+            // Spacing
+            'mr-2',
+
+            // Shape
+            'rounded-full',
+
+            // Color
+            'text-white bg-transparent',
+
+            // States
+            'hover:text-white hover:bg-surface-0/10',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transition
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    zoomouticon: {
+        class: 'w-6 h-6'
+    },
+    zoominbutton: {
+        class: [
+            'z-20',
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Size
+            'w-12 h-12',
+
+            // Spacing
+            'mr-2',
+
+            // Shape
+            'rounded-full',
+
+            // Color
+            'text-white bg-transparent',
+
+            // States
+            'hover:text-white hover:bg-surface-0/10',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transition
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    zoominicon: {
+        class: 'w-6 h-6'
+    },
+    closebutton: {
+        class: [
+            'z-20',
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Size
+            'w-12 h-12',
+
+            // Spacing
+            'mr-2',
+
+            // Shape
+            'rounded-full',
+
+            // Color
+            'text-white bg-transparent',
+
+            // States
+            'hover:text-white hover:bg-surface-0/10',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transition
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    closeicon: {
+        class: 'w-6 h-6'
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-all duration-150 ease-in-out',
+        leaveActiveClass: 'transition-all duration-150 ease-in',
+        leaveToClass: 'opacity-0 scale-75'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/index.js b/packages/tailwindcss-presets/src/lara/index.js
new file mode 100644
index 000000000..49eb5e796
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/index.js
@@ -0,0 +1,207 @@
+import accordion from './accordion';
+import autocomplete from './autocomplete';
+import avatar from './avatar';
+import avatargroup from './avatargroup';
+import badge from './badge';
+import badgedirective from './badgedirective';
+import blockui from './blockui';
+import breadcrumb from './breadcrumb';
+import button from './button';
+import calendar from './calendar';
+import card from './card';
+import carousel from './carousel';
+import cascadeselect from './cascadeselect';
+import checkbox from './checkbox';
+import chip from './chip';
+import chips from './chips';
+import colorpicker from './colorpicker';
+import confirmpopup from './confirmpopup';
+import contextmenu from './contextmenu';
+import datatable from './datatable';
+import dataview from './dataview';
+import dataviewlayoutoptions from './dataviewlayoutoptions';
+import deferred from './deferred';
+import dialog from './dialog';
+import divider from './divider';
+import dock from './dock';
+import dropdown from './dropdown';
+import fieldset from './fieldset';
+import fileupload from './fileupload';
+import floatlabel from './floatlabel';
+import galleria from './galleria';
+import global from './global';
+import iconfield from './iconfield';
+import image from './image';
+import inlinemessage from './inlinemessage';
+import inplace from './inplace';
+import inputgroup from './inputgroup';
+import inputgroupaddon from './inputgroupaddon';
+import inputmask from './inputmask';
+import inputnumber from './inputnumber';
+import inputotp from './inputotp';
+import inputswitch from './inputswitch';
+import inputtext from './inputtext';
+import knob from './knob';
+import listbox from './listbox';
+import megamenu from './megamenu';
+import menu from './menu';
+import menubar from './menubar';
+import message from './message';
+import metergroup from './metergroup';
+import multiselect from './multiselect';
+import orderlist from './orderlist';
+import organizationchart from './organizationchart';
+import overlaypanel from './overlaypanel';
+import paginator from './paginator';
+import panel from './panel';
+import panelmenu from './panelmenu';
+import password from './password';
+import picklist from './picklist';
+import progressbar from './progressbar';
+import progressspinner from './progressspinner';
+import radiobutton from './radiobutton';
+import rating from './rating';
+import ripple from './ripple';
+import scrollpanel from './scrollpanel';
+import scrolltop from './scrolltop';
+import selectbutton from './selectbutton';
+import sidebar from './sidebar';
+import skeleton from './skeleton';
+import slider from './slider';
+import speeddial from './speeddial';
+import splitbutton from './splitbutton';
+import splitter from './splitter';
+import splitterpanel from './splitterpanel';
+import stepper from './stepper';
+import steps from './steps';
+import tabmenu from './tabmenu';
+import tabview from './tabview';
+import tag from './tag';
+import terminal from './terminal';
+import textarea from './textarea';
+import tieredmenu from './tieredmenu';
+import timeline from './timeline';
+import toast from './toast';
+import togglebutton from './togglebutton';
+import toolbar from './toolbar';
+import tooltip from './tooltip';
+import tree from './tree';
+import treeselect from './treeselect';
+import treetable from './treetable';
+import tristatecheckbox from './tristatecheckbox';
+
+export default {
+    global,
+    directives: {
+        badge: badgedirective,
+        ripple,
+        tooltip
+    },
+
+    //forms
+    autocomplete,
+    dropdown,
+    inputnumber,
+    inputtext,
+    calendar,
+    checkbox,
+    radiobutton,
+    inputswitch,
+    selectbutton,
+    slider,
+    chips,
+    rating,
+    multiselect,
+    togglebutton,
+    cascadeselect,
+    listbox,
+    colorpicker,
+    inputgroup,
+    inputgroupaddon,
+    inputmask,
+    knob,
+    treeselect,
+    tristatecheckbox,
+    textarea,
+    password,
+    iconfield,
+    floatlabel,
+    inputotp,
+
+    //buttons
+    button,
+    splitbutton,
+    speeddial,
+
+    //data
+    paginator,
+    datatable,
+    tree,
+    dataview,
+    dataviewlayoutoptions,
+    organizationchart,
+    orderlist,
+    picklist,
+    treetable,
+    timeline,
+
+    //panels
+    accordion,
+    panel,
+    fieldset,
+    card,
+    tabview,
+    divider,
+    toolbar,
+    scrollpanel,
+    splitter,
+    splitterpanel,
+    stepper,
+    deferred,
+
+    //file
+    fileupload,
+
+    //menu
+    contextmenu,
+    menu,
+    menubar,
+    steps,
+    tieredmenu,
+    breadcrumb,
+    panelmenu,
+    megamenu,
+    dock,
+    tabmenu,
+
+    //overlays
+    dialog,
+    overlaypanel,
+    sidebar,
+    confirmpopup,
+
+    //messages
+    message,
+    inlinemessage,
+    toast,
+
+    //media
+    carousel,
+    galleria,
+    image,
+
+    //misc
+    badge,
+    avatar,
+    avatargroup,
+    tag,
+    chip,
+    progressbar,
+    skeleton,
+    scrolltop,
+    terminal,
+    blockui,
+    metergroup,
+    inplace,
+    progressspinner
+};
diff --git a/packages/tailwindcss-presets/src/lara/inlinemessage/index.js b/packages/tailwindcss-presets/src/lara/inlinemessage/index.js
new file mode 100644
index 000000000..5e0faf7d4
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/inlinemessage/index.js
@@ -0,0 +1,36 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'inline-flex items-center justify-center align-top gap-2',
+            'p-3 m-0 rounded-md dark:border',
+            {
+                'bg-blue-100/70 dark:bg-blue-500/20': props.severity == 'info',
+                'bg-green-100/70 dark:bg-green-500/20': props.severity == 'success',
+                'bg-orange-100/70 dark:bg-orange-500/20': props.severity == 'warn',
+                'bg-red-100/70 dark:bg-red-500/20': props.severity == 'error'
+            },
+            {
+                'dark:border-blue-400': props.severity == 'info',
+                'dark:border-green-400': props.severity == 'success',
+                'dark:border-orange-400': props.severity == 'warn',
+                'dark:border-red-400': props.severity == 'error'
+            },
+            {
+                'text-blue-700 dark:text-blue-300': props.severity == 'info',
+                'text-green-700 dark:text-green-300': props.severity == 'success',
+                'text-orange-700 dark:text-orange-300': props.severity == 'warn',
+                'text-red-700 dark:text-red-300': props.severity == 'error'
+            }
+        ]
+    }),
+    icon: {
+        class: 'text-base'
+    },
+    text: {
+        class: [
+            // Font and Text
+            'text-base leading-none',
+            'font-medium'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/inplace/index.js b/packages/tailwindcss-presets/src/lara/inplace/index.js
new file mode 100644
index 000000000..ef7bf3757
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/inplace/index.js
@@ -0,0 +1,27 @@
+export default {
+    display: {
+        class: [
+            // Display
+            'inline',
+
+            // Spacing
+            'p-3',
+
+            // Shape
+            'rounded-md',
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+
+            // States
+            'hover:bg-surface-100 hover:text-surface-700 dark:hover:bg-surface-700/80 dark:hover:text-white/80',
+
+            // Transitions
+            'transition',
+            'duration-200',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/inputgroup/index.js b/packages/tailwindcss-presets/src/lara/inputgroup/index.js
new file mode 100644
index 000000000..cce711149
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/inputgroup/index.js
@@ -0,0 +1,5 @@
+export default {
+    root: {
+        class: ['flex items-stretch', 'w-full']
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/inputgroupaddon/index.js b/packages/tailwindcss-presets/src/lara/inputgroupaddon/index.js
new file mode 100644
index 000000000..5ed52fbc8
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/inputgroupaddon/index.js
@@ -0,0 +1,28 @@
+export default {
+    root: {
+        class: [
+            // Flex
+            'flex items-center justify-center',
+
+            // Shape
+            'first:rounded-l-md',
+            'last:rounded-r-md',
+            'border-y',
+
+            'last:border-r',
+            'border-l',
+            'border-r-0',
+
+            // Space
+            'p-3',
+
+            // Size
+            'min-w-[3rem]',
+
+            // Color
+            'bg-surface-50 dark:bg-surface-800',
+            'text-surface-600 dark:text-surface-400',
+            'border-surface-300 dark:border-surface-600'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/inputmask/index.js b/packages/tailwindcss-presets/src/lara/inputmask/index.js
new file mode 100644
index 000000000..6885ec5f8
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/inputmask/index.js
@@ -0,0 +1,39 @@
+export default {
+    root: ({ context, props, parent }) => ({
+        class: [
+            // Font
+            'leading-[normal]',
+
+            // Spacing
+            'm-0 p-3',
+
+            // Colors
+            'text-surface-600 dark:text-surface-200',
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+            'bg-surface-0 dark:bg-surface-900',
+
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            'invalid:focus:ring-red-200',
+            'invalid:hover:border-red-500',
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'hover:border-primary': !context.disabled && !props.invalid,
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50': !context.disabled,
+                'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+            },
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },
+
+            // Misc
+            'rounded-md',
+            'appearance-none',
+            'transition-colors duration-200'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/inputnumber/index.js b/packages/tailwindcss-presets/src/lara/inputnumber/index.js
new file mode 100644
index 000000000..1fd5ecd8e
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/inputnumber/index.js
@@ -0,0 +1,165 @@
+export default {
+    root: ({ props, parent }) => ({
+        class: [
+            // Flex
+            'inline-flex',
+            { 'flex-col': props.showButtons && props.buttonLayout == 'vertical' },
+            { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+
+            // Shape
+            { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' && !props.showButtons },
+            { 'border-0 border-y border-l last:border-r border-surface-300 dark:border-surface-600': parent.instance.$name == 'InputGroup' && !props.showButtons },
+            { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
+
+            //Sizing
+            { '!w-16': props.showButtons && props.buttonLayout == 'vertical' }
+        ]
+    }),
+    input: {
+        root: ({ parent, context }) => ({
+            class: [
+                // Display
+                'flex flex-auto',
+
+                // Font
+                'leading-[normal]',
+
+                //Text
+                { 'text-center': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                // Spacing
+                'p-3',
+                'm-0',
+
+                // Shape
+                'rounded-lg',
+                { 'rounded-tr-none rounded-br-none': parent.props.showButtons },
+                { 'rounded-tl-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
+                { 'rounded-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                { 'border-0': parent.instance.$parentInstance?.$name == 'InputGroup' && !parent.props.showButtons },
+
+                // Colors
+                'text-surface-800 dark:text-white/80',
+                'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+                'bg-surface-0 dark:bg-surface-900',
+                'border',
+                { 'border-surface-300 dark:border-surface-600': !parent.props.invalid },
+
+                // Invalid State
+                'invalid:focus:ring-red-200',
+                'invalid:hover:border-red-500',
+                { 'border-red-500 dark:border-red-400': parent.props.invalid },
+
+                // States
+                { 'hover:border-primary': !parent.props.invalid },
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10',
+                { 'opacity-60 select-none pointer-events-none cursor-default': context.disabled },
+
+                // Filled State *for FloatLabel
+                { filled: parent.instance?.$parentInstance?.$name == 'FloatLabel' && parent.state.d_modelValue !== null },
+
+                //Position
+                { 'order-2': parent.props.buttonLayout == 'horizontal' || parent.props.buttonLayout == 'vertical' }
+            ]
+        })
+    },
+    buttongroup: ({ props }) => ({
+        class: [
+            // Flex
+            'flex',
+            'flex-col'
+        ]
+    }),
+
+    incrementbutton: {
+        root: ({ parent }) => ({
+            class: [
+                // Display
+                'flex flex-auto',
+
+                // Alignment
+                'items-center',
+                'justify-center',
+                'text-center align-bottom',
+
+                //Position
+                'relative',
+                { 'order-3': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
+                { 'order-1': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                // Colors
+                'text-primary-inverse',
+                'bg-primary',
+                'border-primary',
+
+                // Sizing
+                'w-[3rem]',
+                { 'px-4 py-3': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' },
+                { 'p-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
+                { 'w-full': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                // Shape
+                'rounded-md',
+                { 'rounded-tl-none rounded-br-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
+                { 'rounded-bl-none rounded-tl-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
+                { 'rounded-bl-none rounded-br-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                //States
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'hover:bg-primary-hover hover:border-primary-hover',
+
+                //Misc
+                'cursor-pointer overflow-hidden select-none'
+            ]
+        }),
+        label: {
+            class: 'h-0 w-0'
+        }
+    },
+    decrementbutton: {
+        root: ({ parent }) => ({
+            class: [
+                // Display
+                'flex flex-auto',
+
+                // Alignment
+                'items-center',
+                'justify-center',
+                'text-center align-bottom',
+
+                //Position
+                'relative',
+                { 'order-1': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
+                { 'order-3': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                // Colors
+                'text-primary-inverse',
+                'bg-primary',
+                'border-primary',
+
+                // Sizing
+                'w-[3rem]',
+                { 'px-4 py-3': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' },
+                { 'p-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
+                { 'w-full': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                // Shape
+                'rounded-md',
+                { 'rounded-tr-none rounded-tl-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
+                { 'rounded-tr-none rounded-br-none ': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
+                { 'rounded-tr-none rounded-tl-none ': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                //States
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'hover:bg-primary-hover hover:border-primary-hover',
+
+                //Misc
+                'cursor-pointer overflow-hidden select-none'
+            ]
+        }),
+        label: {
+            class: 'h-0 w-0'
+        }
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/inputotp/index.js b/packages/tailwindcss-presets/src/lara/inputotp/index.js
new file mode 100644
index 000000000..706f57c51
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/inputotp/index.js
@@ -0,0 +1,62 @@
+export default {
+    root: {
+        class: [
+            // Alignment
+            'flex items-center',
+            'gap-2'
+        ]
+    },
+    input: {
+        root: ({ props, context, parent }) => ({
+            class: [
+                // Font
+                'leading-[normal]',
+
+                // Flex & Alignment
+                { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+                'text-center',
+
+                // Spacing
+                'm-0',
+                {
+                    'p-3': props.size == null
+                },
+
+                // Size
+                'w-10',
+
+                // Shape
+                { 'rounded-md': parent.instance.$name !== 'InputGroup' },
+                { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+                { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
+                { 'first:ml-0 ml-[-1px]': parent.instance.$name == 'InputGroup' && !props.showButtons },
+
+                // Colors
+                'text-surface-800 dark:text-white/80',
+                'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+                'bg-surface-0 dark:bg-surface-900',
+                'border',
+                { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+                // Invalid State
+                'invalid:focus:ring-red-200',
+                'invalid:hover:border-red-500',
+                { 'border-red-500 dark:border-red-400': props.invalid },
+
+                // States
+                {
+                    'hover:border-primary': !context.disabled && !props.invalid,
+                    'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10': !context.disabled,
+                    'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+                },
+
+                // Filled State *for FloatLabel
+                { filled: parent.instance?.$name == 'FloatLabel' && context.filled },
+
+                // Misc
+                'appearance-none',
+                'transition-colors duration-200'
+            ]
+        })
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/inputswitch/index.js b/packages/tailwindcss-presets/src/lara/inputswitch/index.js
new file mode 100644
index 000000000..14003bfd9
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/inputswitch/index.js
@@ -0,0 +1,80 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'inline-block relative',
+            'w-12 h-7',
+            'rounded-2xl',
+            {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            }
+        ]
+    }),
+    slider: ({ props }) => ({
+        class: [
+            // Position
+            'absolute top-0 left-0 right-0 bottom-0',
+            { 'before:transform before:translate-x-5': props.modelValue == props.trueValue },
+
+            // Shape
+            'rounded-2xl',
+
+            // Before:
+            'before:absolute before:top-1/2 before:left-1',
+            'before:-mt-2.5',
+            'before:h-5 before:w-5',
+            'before:rounded-full',
+            'before:duration-200',
+            'before:bg-surface-0 before:dark:bg-surface-900',
+
+            // Colors
+            'border',
+            {
+                'bg-surface-200 dark:bg-surface-700': !(props.modelValue == props.trueValue),
+                'bg-primary': props.modelValue == props.trueValue
+            },
+
+            { 'border-transparent': !props.invalid },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            { 'peer-hover:bg-surface-300 dark:peer-hover:bg-surface-600 ': !(props.modelValue == props.trueValue) && !props.disabled },
+            { 'peer-hover:bg-primary-hover ': props.modelValue == props.trueValue && !props.disabled },
+            'peer-focus-visible:ring peer-focus-visible:ring-primary-400/50 dark:peer-focus-visible:ring-primary-300/50',
+
+            // Transition
+            'transition-colors duration-200',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }),
+    input: {
+        class: [
+            'peer',
+
+            // Size
+            'w-full ',
+            'h-full',
+
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-10',
+
+            // Spacing
+            'p-0',
+            'm-0',
+
+            // Shape
+            'opacity-0',
+            'rounded-[2.5rem]',
+            'outline-none',
+
+            // Misc
+            'appearance-none',
+            'cursor-pointer'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/inputtext/index.js b/packages/tailwindcss-presets/src/lara/inputtext/index.js
new file mode 100644
index 000000000..45f594009
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/inputtext/index.js
@@ -0,0 +1,51 @@
+export default {
+    root: ({ props, context, parent }) => ({
+        class: [
+            // Font
+            'leading-[normal]',
+
+            // Flex
+            { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+
+            // Spacing
+            'm-0',
+            {
+                'px-4 py-4': props.size == 'large',
+                'px-2 py-2': props.size == 'small',
+                'p-3': props.size == null
+            },
+
+            // Shape
+            { 'rounded-md': parent.instance.$name !== 'InputGroup' },
+            { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+            { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
+            { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
+
+            // Colors
+            'text-surface-800 dark:text-white/80',
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+            'bg-surface-0 dark:bg-surface-900',
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            'invalid:focus:ring-red-200',
+            'invalid:hover:border-red-500',
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'hover:border-primary': !context.disabled && !props.invalid,
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10': !context.disabled,
+                'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+            },
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && context.filled },
+
+            // Misc
+            'appearance-none',
+            'transition-colors duration-200'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/knob/index.js b/packages/tailwindcss-presets/src/lara/knob/index.js
new file mode 100644
index 000000000..1d3200228
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/knob/index.js
@@ -0,0 +1,44 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Misc
+            { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    range: {
+        class: [
+            // Stroke
+            'stroke-current',
+
+            // Color
+            'stroke-surface-200 dark:stroke-surface-700',
+
+            // Fill
+            'fill-none',
+
+            // Transition
+            'transition duration-100 ease-in'
+        ]
+    },
+    value: {
+        class: [
+            // Animation
+            'animate-dash-frame',
+
+            // Color
+            'stroke-primary',
+
+            // Fill
+            'fill-none'
+        ]
+    },
+    label: {
+        class: [
+            // Text Style
+            'text-center text-xl',
+
+            // Color
+            'fill-surface-600 dark:fill-surface-200'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/listbox/index.js b/packages/tailwindcss-presets/src/lara/listbox/index.js
new file mode 100644
index 000000000..244a33850
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/listbox/index.js
@@ -0,0 +1,155 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Sizing and Shape
+            'min-w-[12rem]',
+            'rounded-md',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-white/80',
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid }
+        ]
+    }),
+    wrapper: {
+        class: [
+            // Overflow
+            'overflow-auto'
+        ]
+    },
+    list: {
+        class: 'py-3 list-none m-0 outline-none'
+    },
+    item: ({ context }) => ({
+        class: [
+            // Font
+            'font-normal',
+            'leading-none',
+
+            // Position
+            'relative',
+
+            // Shape
+            'border-0',
+            'rounded-none',
+
+            // Spacing
+            'm-0',
+            'py-3 px-5',
+
+            // Colors
+            {
+                'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
+                'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
+                'text-surface-700 dark:text-white/80': context.focused && !context.selected,
+
+                'text-primary-highlight-inverse': context.selected,
+                'bg-primary-highlight': context.selected
+            },
+
+            //States
+            { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected },
+            { 'hover:bg-primary-highlight-hover': context.selected },
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+
+            // Transitions
+            'transition-shadow',
+            'duration-200',
+
+            // Misc
+            'cursor-pointer',
+            'overflow-hidden',
+            'whitespace-nowrap'
+        ]
+    }),
+    itemgroup: {
+        class: [
+            //Font
+            'font-bold',
+
+            // Spacing
+            'm-0',
+            'py-3 px-5',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-600/80',
+
+            // Misc
+            'cursor-auto'
+        ]
+    },
+    header: {
+        class: [
+            // Spacing
+            'py-3 px-5',
+            'm-0',
+
+            //Shape
+            'border-b',
+            'rounded-tl-md',
+            'rounded-tr-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-100 dark:bg-surface-800',
+            'border-surface-300 dark:border-surface-600'
+        ]
+    },
+    filtercontainer: {
+        class: 'relative'
+    },
+    filterinput: {
+        class: [
+            // Font
+            'leading-none',
+
+            // Sizing
+            'pr-7 py-3 px-3',
+            '-mr-7',
+            'w-full',
+
+            //Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-900',
+            'border-surface-200 dark:border-surface-700',
+
+            // Shape
+            'border',
+            'rounded-lg',
+            'appearance-none',
+
+            // Transitions
+            'transition',
+            'duration-200',
+
+            // States
+            'hover:border-primary',
+            'focus:ring focus:outline-none focus:outline-offset-0',
+            'focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Misc
+            'appearance-none'
+        ]
+    },
+    filtericon: {
+        class: ['absolute', 'top-1/2 right-3', '-mt-2']
+    },
+    emptymessage: {
+        class: [
+            // Font
+            'leading-none',
+
+            // Spacing
+            'py-3 px-5',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-transparent'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/megamenu/index.js b/packages/tailwindcss-presets/src/lara/megamenu/index.js
new file mode 100644
index 000000000..2a0d5d0f5
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/megamenu/index.js
@@ -0,0 +1,198 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Flexbox
+            'flex',
+
+            // Shape & Size
+            'rounded-md',
+
+            // Color
+            'bg-surface-50 dark:bg-surface-700',
+            'border border-surface-200 dark:border-surface-700',
+            { 'p-2 items-center': props.orientation == 'horizontal', 'flex-col sm:w-48 p-0 py-1': props.orientation !== 'horizontal' }
+        ]
+    }),
+    menu: ({ props }) => ({
+        class: [
+            // Flexbox
+            'sm:flex',
+            'items-center',
+            'flex-wrap',
+            'flex-col sm:flex-row',
+            { hidden: !props?.mobileActive, flex: props?.mobileActive },
+
+            // Position
+            'absolute sm:relative',
+            'top-full left-0',
+            'sm:top-auto sm:left-auto',
+
+            // Size
+            'w-full sm:w-auto',
+
+            // Spacing
+            'm-0',
+            'py-1 sm:py-0 sm:p-0',
+            'list-none',
+
+            // Shape
+            'shadow-md sm:shadow-none',
+            'border-0',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-700 sm:bg-transparent dark:sm:bg-transparent',
+
+            // Misc
+            'outline-none'
+        ]
+    }),
+    menuitem: ({ props }) => ({
+        class: [
+            'sm:relative static',
+            {
+                'sm:w-auto w-full': props.horizontal,
+                'w-full': !props.horizontal
+            }
+        ]
+    }),
+    content: ({ props, context }) => ({
+        class: [
+            // Shape
+            { 'rounded-md': props.level < 1 && props.horizontal },
+
+            //  Colors
+            {
+                'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+                'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active,
+                'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+            },
+
+            // Hover States
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.active,
+                'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
+            },
+
+            // Transitions
+            'transition-all',
+            'duration-200'
+        ]
+    }),
+    action: {
+        class: [
+            'relative',
+
+            // Flexbox
+            'flex',
+            'items-center',
+
+            // Spacing
+            'py-3',
+            'px-5',
+
+            // Size
+            'py-3 pr-5 pl-9 sm:pl-5',
+            'leading-none',
+
+            // Misc
+            'select-none',
+            'cursor-pointer',
+            'no-underline ',
+            'overflow-hidden'
+        ]
+    },
+    icon: {
+        class: 'mr-2'
+    },
+    submenuicon: ({ props }) => ({
+        class: [
+            {
+                'ml-auto sm:ml-2': props.horizontal,
+                'ml-auto': !props.horizontal
+            }
+        ]
+    }),
+    panel: ({ props }) => ({
+        class: [
+            // Size
+            'w-auto',
+
+            // Spacing
+            'py-1',
+            'm-0',
+
+            // Shape
+            'shadow-none sm:shadow-md',
+            'border-0',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-700',
+
+            // Position
+            'static sm:absolute',
+            'z-10',
+            {
+                'sm:left-full top-0': !props.horizontal
+            }
+        ]
+    }),
+    grid: {
+        class: 'flex flex-wrap sm:flex-nowrap'
+    },
+    column: {
+        class: 'w-full sm:w-1/2'
+    },
+    submenu: {
+        class: ['m-0 list-none', 'py-1 px-2 w-full sm:min-w-[14rem]']
+    },
+    submenuheader: {
+        class: [
+            'font-semibold',
+
+            // Spacing
+            'py-3 px-5',
+            'm-0',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-700'
+        ]
+    },
+    separator: {
+        class: 'border-t border-surface-200 dark:border-surface-600 my-1'
+    },
+    menubutton: {
+        class: [
+            // Flexbox
+            'flex sm:hidden',
+            'items-center justify-center',
+
+            // Size
+            'w-8',
+            'h-8',
+
+            // Shape
+            'rounded-full',
+            // Color
+            'text-surface-500 dark:text-white/80',
+
+            // States
+            'hover:text-surface-600 dark:hover:text-white/60',
+            'hover:bg-surface-100 dark:hover:bg-surface-600/80',
+            'focus:outline-none focus:outline-offset-0',
+            'focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-pointer',
+            'no-underline'
+        ]
+    },
+    end: {
+        class: 'ml-auto self-center'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/menu/index.js b/packages/tailwindcss-presets/src/lara/menu/index.js
new file mode 100644
index 000000000..fc971da9d
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/menu/index.js
@@ -0,0 +1,96 @@
+export default {
+    root: {
+        class: [
+            // Sizing and Shape
+            'min-w-[12rem]',
+            'rounded-md',
+            // Spacing
+            'py-2',
+            // Colors
+            'bg-surface-0 dark:bg-surface-700',
+            'text-surface-700 dark:text-white/80',
+            'border border-surface-200 dark:border-surface-700'
+        ]
+    },
+    menu: {
+        class: [
+            // Spacings and Shape
+            'list-none',
+            'm-0',
+            'p-0',
+            'outline-none'
+        ]
+    },
+    content: ({ context }) => ({
+        class: [
+            //Shape
+            'rounded-none',
+            // Colors
+            'text-surface-700 dark:text-white/80',
+            {
+                'bg-surface-200 text-surface-700 dark:bg-surface-300/10 dark:text-white': context.focused
+            },
+            // Transitions
+            'transition-shadow',
+            'duration-200',
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:bg-surface-700 dark:hover:bg-surface-400/10'
+        ]
+    }),
+    action: {
+        class: [
+            'relative',
+            // Flexbox
+
+            'flex',
+            'items-center',
+
+            // Spacing
+            'py-3',
+            'px-5',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+
+            // Misc
+            'no-underline',
+            'overflow-hidden',
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    icon: {
+        class: [
+            // Spacing
+            'mr-2',
+
+            // Color
+            'text-surface-600 dark:text-white/70'
+        ]
+    },
+    label: {
+        class: ['leading-none']
+    },
+    submenuheader: {
+        class: [
+            // Font
+            'font-bold',
+            // Spacing
+            'm-0',
+            'py-3 px-5',
+            // Shape
+            'rounded-tl-none',
+            'rounded-tr-none',
+            // Colors
+            'bg-surface-0 dark:bg-surface-700',
+            'text-surface-700 dark:text-white'
+        ]
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/menubar/index.js b/packages/tailwindcss-presets/src/lara/menubar/index.js
new file mode 100644
index 000000000..afcffa428
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/menubar/index.js
@@ -0,0 +1,175 @@
+export default {
+    root: {
+        class: [
+            'relative',
+
+            // Flexbox
+            'flex',
+            'items-center',
+
+            // Spacing
+            'p-2',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-50 dark:bg-surface-700',
+            'border border-surface-200 dark:border-surface-700'
+        ]
+    },
+    menu: ({ props }) => ({
+        class: [
+            // Flexbox
+            'sm:flex',
+            'items-center',
+            'flex-wrap',
+            'flex-col sm:flex-row',
+            { hidden: !props?.mobileActive, flex: props?.mobileActive },
+
+            // Position
+            'absolute sm:relative',
+            'top-full left-0',
+            'sm:top-auto sm:left-auto',
+
+            // Size
+            'w-full sm:w-auto',
+
+            // Spacing
+            'm-0',
+            'py-1 sm:py-0 sm:p-0',
+            'list-none',
+
+            // Shape
+            'shadow-md sm:shadow-none',
+            'border-0',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-700 sm:bg-transparent',
+
+            // Misc
+            'outline-none'
+        ]
+    }),
+    menuitem: {
+        class: 'sm:relative sm:w-auto w-full static'
+    },
+    content: ({ props, context }) => ({
+        class: [
+            // Shape
+            { 'rounded-md': props.root },
+
+            //  Colors
+            {
+                'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+                'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active,
+                'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+            },
+
+            // Hover States
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.active,
+                'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
+            },
+
+            // Transitions
+            'transition-all',
+            'duration-200'
+        ]
+    }),
+    action: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flexbox
+            'flex',
+            'items-center',
+
+            // Spacing
+            'py-3',
+            'px-5',
+
+            // Size
+            {
+                'pl-9 sm:pl-5': context.level === 1,
+                'pl-14 sm:pl-5': context.level === 2
+            },
+            'leading-none',
+
+            // Misc
+            'select-none',
+            'cursor-pointer',
+            'no-underline ',
+            'overflow-hidden'
+        ]
+    }),
+    icon: {
+        class: 'mr-2'
+    },
+    submenuicon: ({ props }) => ({
+        class: [
+            {
+                'ml-auto sm:ml-2': props.root,
+                'ml-auto': !props.root
+            }
+        ]
+    }),
+    submenu: ({ props }) => ({
+        class: [
+            // Size
+            'w-full sm:w-48',
+
+            // Spacing
+            'py-1',
+            'm-0',
+            'list-none',
+
+            // Shape
+            'shadow-none sm:shadow-md',
+            'border-0',
+
+            // Position
+            'static sm:absolute',
+            'z-10',
+            { 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
+
+            // Color
+            'bg-surface-0 dark:bg-surface-700'
+        ]
+    }),
+    separator: {
+        class: 'border-t border-surface-200 dark:border-surface-600 my-1'
+    },
+    button: {
+        class: [
+            // Flexbox
+            'flex sm:hidden',
+            'items-center justify-center',
+
+            // Size
+            'w-8',
+            'h-8',
+
+            // Shape
+            'rounded-full',
+            // Color
+            'text-surface-500 dark:text-white/80',
+
+            // States
+            'hover:text-surface-600 dark:hover:text-white/60',
+            'hover:bg-surface-100 dark:hover:bg-surface-600/80',
+            'focus:outline-none focus:outline-offset-0',
+            'focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-pointer',
+            'no-underline'
+        ]
+    },
+    end: {
+        class: 'ml-auto self-center'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/message/index.js b/packages/tailwindcss-presets/src/lara/message/index.js
new file mode 100644
index 000000000..18bef54b5
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/message/index.js
@@ -0,0 +1,87 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Spacing and Shape
+            'my-4 mx-0',
+            'rounded-md',
+            'border-solid border-0 border-l-[6px]',
+
+            // Colors
+            {
+                'bg-blue-100/70 dark:bg-blue-500/20': props.severity == 'info',
+                'bg-green-100/70 dark:bg-green-500/20': props.severity == 'success',
+                'bg-orange-100/70 dark:bg-orange-500/20': props.severity == 'warn',
+                'bg-red-100/70 dark:bg-red-500/20': props.severity == 'error'
+            },
+            {
+                'border-blue-500 dark:border-blue-400': props.severity == 'info',
+                'border-green-500 dark:border-green-400': props.severity == 'success',
+                'border-orange-500 dark:border-orange-400': props.severity == 'warn',
+                'border-red-500 dark:border-red-400': props.severity == 'error'
+            },
+            {
+                'text-blue-700 dark:text-blue-300': props.severity == 'info',
+                'text-green-700 dark:text-green-300': props.severity == 'success',
+                'text-orange-700 dark:text-orange-300': props.severity == 'warn',
+                'text-red-700 dark:text-red-300': props.severity == 'error'
+            }
+        ]
+    }),
+    wrapper: {
+        class: [
+            // Flexbox
+            'flex items-center',
+
+            // Spacing
+            'py-5 px-7'
+        ]
+    },
+    icon: {
+        class: [
+            // Sizing and Spacing
+            'w-6 h-6',
+            'text-lg leading-none mr-2 shrink-0'
+        ]
+    },
+    text: {
+        class: [
+            // Font and Text
+            'text-base leading-none',
+            'font-medium'
+        ]
+    },
+    button: {
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+
+            // Size
+            'w-8 h-8',
+
+            // Spacing and Misc
+            'ml-auto  relative',
+
+            // Shape
+            'rounded-full',
+
+            // Colors
+            'bg-transparent',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // States
+            'hover:bg-surface-0/50 dark:hover:bg-surface-0/10',
+
+            // Misc
+            'overflow-hidden'
+        ]
+    },
+    transition: {
+        enterFromClass: 'opacity-0',
+        enterActiveClass: 'transition-opacity duration-300',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-300 ease-in',
+        leaveToClass: 'max-h-0 opacity-0 !m-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/metergroup/index.js b/packages/tailwindcss-presets/src/lara/metergroup/index.js
new file mode 100644
index 000000000..135c10014
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/metergroup/index.js
@@ -0,0 +1,97 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex gap-4',
+
+            { 'flex-col': props.orientation == 'horizontal', 'flex-row': props.orientation == 'vertical' }
+        ]
+    }),
+    metercontainer: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex',
+
+            { 'flex-col': props.orientation === 'vertical' },
+
+            // Sizing
+            { 'w-2 h-full': props.orientation === 'vertical' },
+            { 'h-2': props.orientation === 'horizontal' },
+
+            // Colors
+            'bg-gray-200 dark:bg-gray-700',
+
+            // Border Radius
+            'rounded-lg'
+        ]
+    }),
+    meter: ({ props }) => ({
+        class: [
+            // Shape
+            'border-0',
+
+            // Rounded Corners - Horizontal
+            {
+                'first:rounded-l-lg last:rounded-r-lg': props.orientation === 'horizontal'
+            },
+
+            // Rounded Corners - Vertical
+            {
+                'first:rounded-t-lg last:rounded-b-lg': props.orientation === 'vertical'
+            },
+
+            // Colors
+            'bg-primary'
+        ]
+    }),
+    labellist: ({ props }) => ({
+        class: [
+            // Display & Flexbox
+            'flex flex-wrap',
+
+            { 'gap-4': props.labelOrientation === 'horizontal' },
+
+            { 'gap-2': props.labelOrientation === 'vertical' },
+
+            { 'flex-col': props.labelOrientation === 'vertical' },
+
+            // Conditional Alignment - Horizontal
+            {
+                'align-end': props.labelOrientation === 'horizontal' && props.labelPosition === 'end',
+                'align-start': props.labelOrientation === 'horizontal' && props.labelPosition === 'start'
+            },
+
+            // Conditional Alignment - Vertical
+            {
+                'justify-end': props.labelOrientation === 'vertical' && props.labelPosition === 'end',
+                'justify-start': props.labelOrientation === 'vertical' && props.labelPosition === 'start'
+            },
+
+            // List Styling
+            'm-0 p-0 list-none'
+        ]
+    }),
+    labellistitem: {
+        class: [
+            // Flexbox
+            'inline-flex',
+            'items-center',
+            'gap-2'
+        ]
+    },
+    labellisttype: {
+        class: [
+            // Display
+            'inline-flex',
+
+            // Background Color
+            'bg-primary',
+
+            // Size
+            'w-2 h-2',
+
+            // Rounded Shape
+            'rounded-full'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/multiselect/index.js b/packages/tailwindcss-presets/src/lara/multiselect/index.js
new file mode 100644
index 000000000..284a04347
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/multiselect/index.js
@@ -0,0 +1,544 @@
+export default {
+    root: ({ props, state }) => ({
+        class: [
+            // Display and Position
+            'inline-flex',
+            'relative',
+
+            // Shape
+            'rounded-md',
+
+            // Color and Background
+            'bg-surface-0 dark:bg-surface-900',
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // Transitions
+            'transition-all',
+            'duration-200',
+
+            // States
+            { 'hover:border-primary': !props.invalid },
+            { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused },
+
+            // Misc
+            'cursor-pointer',
+            'select-none',
+            { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled }
+        ]
+    }),
+    labelContainer: {
+        class: 'overflow-hidden flex flex-auto cursor-pointer '
+    },
+    label: ({ props }) => ({
+        class: [
+            'leading-[normal]',
+            'block ',
+
+            // Spacing
+            {
+                'p-3': props.display !== 'chip',
+                'py-3 px-3': props.display === 'chip' && !props?.modelValue?.length,
+                'py-[0.375rem] px-3': props.display === 'chip' && props?.modelValue?.length > 0
+            },
+
+            // Color
+            { 'text-surface-800 dark:text-white/80': props.modelValue?.length, 'text-surface-400 dark:text-surface-500': !props.modelValue?.length },
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+            // Transitions
+            'transition duration-200',
+
+            // Misc
+            'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis'
+        ]
+    }),
+    token: {
+        class: [
+            // Flex
+            'inline-flex items-center',
+
+            // Spacings
+            'py-1.5 px-3 mr-2',
+
+            // Shape
+            'rounded-[1.14rem]',
+
+            // Colors
+            'bg-surface-200 dark:bg-surface-700',
+            'text-surface-700 dark:text-white/70',
+
+            // Misc
+            'cursor-default'
+        ]
+    },
+    removeTokenIcon: {
+        class: [
+            // Shape
+            'rounded-md leading-6',
+
+            // Spacing
+            'ml-2',
+
+            // Size
+            'w-4 h-4',
+
+            // Transition
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    },
+    trigger: {
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+            'shrink-0',
+
+            // Color and Background
+            'bg-transparent',
+            'text-surface-500',
+
+            // Size
+            'w-12',
+
+            // Shape
+            'rounded-tr-md',
+            'rounded-br-md'
+        ]
+    },
+    panel: {
+        class: [
+            // Position
+            'absolute top-0 left-0',
+
+            // Shape
+            'border-0 dark:border',
+            'rounded-md',
+            'shadow-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-800 dark:text-white/80',
+            'dark:border-surface-700'
+        ]
+    },
+    header: {
+        class: [
+            'flex items-center justify-between',
+            // Spacing
+            'py-3 px-5',
+            'm-0',
+
+            //Shape
+            'border-b',
+            'rounded-tl-md',
+            'rounded-tr-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-100 dark:bg-surface-800',
+            'border-surface-300 dark:border-surface-700'
+        ]
+    },
+    headerCheckboxContainer: {
+        class: [
+            'relative',
+
+            // Alignment
+            'inline-flex',
+            'align-bottom',
+
+            // Size
+            'w-6',
+            'h-6',
+
+            // Misc
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    headerCheckbox: {
+        root: {
+            class: [
+                'relative',
+
+                // Alignment
+                'inline-flex',
+                'align-bottom',
+
+                // Size
+                'w-6',
+                'h-6',
+
+                // Spacing
+                'mr-2',
+
+                // Misc
+                'cursor-pointer',
+                'select-none'
+            ]
+        },
+        box: ({ props, context }) => ({
+            class: [
+                // Alignment
+                'flex',
+                'items-center',
+                'justify-center',
+
+                // Size
+                'w-6',
+                'h-6',
+
+                // Shape
+                'rounded-md',
+                'border-2',
+
+                // Colors
+                {
+                    'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked,
+                    'border-primary bg-primary': context.checked
+                },
+
+                // States
+                {
+                    'peer-hover:border-primary': !props.disabled && !context.checked,
+                    'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                    'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                },
+
+                // Transitions
+                'transition-colors',
+                'duration-200'
+            ]
+        }),
+        input: {
+            class: [
+                'peer',
+
+                // Size
+                'w-full ',
+                'h-full',
+
+                // Position
+                'absolute',
+                'top-0 left-0',
+                'z-10',
+
+                // Spacing
+                'p-0',
+                'm-0',
+
+                // Shape
+                'opacity-0',
+                'rounded-md',
+                'outline-none',
+                'border-2 border-surface-200 dark:border-surface-700',
+
+                // Misc
+                'appearance-none',
+                'cursor-pointer'
+            ]
+        },
+        icon: {
+            class: [
+                // Font
+                'text-base leading-none',
+
+                // Size
+                'w-4',
+                'h-4',
+
+                // Colors
+                'text-white dark:text-surface-900',
+
+                // Transitions
+                'transition-all',
+                'duration-200'
+            ]
+        }
+    },
+    itemCheckbox: {
+        root: {
+            class: [
+                'relative',
+
+                // Alignment
+                'inline-flex',
+                'align-bottom',
+
+                // Size
+                'w-6',
+                'h-6',
+
+                // Spacing
+                'mr-2',
+
+                // Misc
+                'cursor-pointer',
+                'select-none'
+            ]
+        },
+        box: ({ props, context }) => ({
+            class: [
+                // Alignment
+                'flex',
+                'items-center',
+                'justify-center',
+
+                // Size
+                'w-6',
+                'h-6',
+
+                // Shape
+                'rounded-md',
+                'border-2',
+
+                // Colors
+                {
+                    'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked,
+                    'border-primary bg-primary': context.checked
+                },
+
+                // States
+                {
+                    'peer-hover:border-primary': !props.disabled && !context.checked,
+                    'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                    'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                },
+
+                // Transitions
+                'transition-colors',
+                'duration-200'
+            ]
+        }),
+        input: {
+            class: [
+                'peer',
+
+                // Size
+                'w-full ',
+                'h-full',
+
+                // Position
+                'absolute',
+                'top-0 left-0',
+                'z-10',
+
+                // Spacing
+                'p-0',
+                'm-0',
+
+                // Shape
+                'opacity-0',
+                'rounded-md',
+                'outline-none',
+                'border-2 border-surface-200 dark:border-surface-700',
+
+                // Misc
+                'appearance-none',
+                'cursor-pointer'
+            ]
+        },
+        icon: {
+            class: [
+                // Font
+                'text-base leading-none',
+
+                // Size
+                'w-4',
+                'h-4',
+
+                // Colors
+                'text-white dark:text-surface-900',
+
+                // Transitions
+                'transition-all',
+                'duration-200'
+            ]
+        }
+    },
+    closeButton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Size and Spacing
+            'mr-2',
+            'last:mr-0',
+            'w-8 h-8',
+
+            // Shape
+            'border-0',
+            'rounded-full',
+
+            // Colors
+            'text-surface-500',
+            'bg-transparent',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-surface-800/80',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset',
+            'focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Misc
+            'overflow-hidden'
+        ]
+    },
+    closeButtonIcon: {
+        class: 'w-4 h-4 inline-block'
+    },
+    wrapper: {
+        class: [
+            // Sizing
+            'max-h-[200px]',
+
+            // Misc
+            'overflow-auto'
+        ]
+    },
+    list: {
+        class: 'py-3 list-none m-0'
+    },
+    item: ({ context }) => ({
+        class: [
+            // Font
+            'font-normal',
+            'leading-none',
+
+            // Flexbox
+            'flex items-center',
+
+            // Position
+            'relative',
+
+            // Shape
+            'border-0',
+            'rounded-none',
+
+            // Spacing
+            'm-0',
+            'py-3 px-5',
+
+            // Color
+            { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected },
+            { 'bg-surface-200 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected },
+            { 'bg-primary-highlight text-primary-highlight-inverse': context.selected },
+
+            //States
+            { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected },
+            { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected },
+
+            // Transitions
+            'transition-shadow',
+            'duration-200',
+
+            // Misc
+            'cursor-pointer',
+            'overflow-hidden',
+            'whitespace-nowrap'
+        ]
+    }),
+    itemgroup: {
+        class: [
+            //Font
+            'font-bold',
+
+            // Spacing
+            'm-0',
+            'p-3 px-5',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-600/80',
+
+            // Misc
+            'cursor-auto'
+        ]
+    },
+    filtercontainer: {
+        class: 'relative w-full mx-2'
+    },
+    filterinput: {
+        class: [
+            // Font
+            'leading-[normal]',
+
+            // Sizing
+            'pr-7 py-3 px-3',
+            '-mr-7',
+            'w-full',
+
+            //Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-900',
+            'border-surface-200 dark:border-surface-700',
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+            // Shape
+            'border',
+            'rounded-lg',
+            'appearance-none',
+
+            // Transitions
+            'transition',
+            'duration-200',
+
+            // States
+            'hover:border-primary',
+            'focus:ring focus:outline-none focus:outline-offset-0',
+            'focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Misc
+            'appearance-none'
+        ]
+    },
+    filtericon: {
+        class: ['absolute', 'top-1/2 right-3', '-mt-2']
+    },
+    clearicon: {
+        class: [
+            // Color
+            'text-surface-500',
+
+            // Position
+            'absolute',
+            'top-1/2',
+            'right-12',
+
+            // Spacing
+            '-mt-2'
+        ]
+    },
+    emptymessage: {
+        class: [
+            // Font
+            'leading-none',
+
+            // Spacing
+            'py-3 px-5',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-transparent'
+        ]
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/orderlist/index.js b/packages/tailwindcss-presets/src/lara/orderlist/index.js
new file mode 100644
index 000000000..99111d068
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/orderlist/index.js
@@ -0,0 +1,258 @@
+export default {
+    root: {
+        class: [
+            // Flexbox
+            'flex'
+        ]
+    },
+    controls: {
+        class: [
+            // Flexbox & Alignment
+            'flex flex-col justify-center gap-2',
+
+            // Spacing
+            'p-5'
+        ]
+    },
+    moveupbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // Spacing & Size
+                'w-12',
+                'm-0',
+                'px-0 py-3',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary/50',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    movedownbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // Spacing & Size
+                'w-12',
+                'm-0',
+                'px-0 py-3',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary/50',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    movetopbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // Spacing & Size
+                'w-12',
+                'm-0',
+                'px-0 py-3',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary/50',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    movebottombutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // Spacing & Size
+                'w-12',
+                'm-0',
+                'px-0 py-3',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary/50',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    container: {
+        class: ['flex-auto']
+    },
+    header: {
+        class: [
+            'font-bold',
+
+            // Shape
+            'border-b-0 rounded-t-md',
+
+            // Spacing
+            'p-5',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-50 dark:bg-surface-800',
+            'border border-surface-200 dark:border-surface-700'
+        ]
+    },
+    list: {
+        class: [
+            // Spacing
+            'list-none m-0 p-0',
+
+            // Size
+            'min-h-[12rem] max-h-[24rem]',
+
+            // Shape
+            'rounded-b-md',
+
+            // Color
+            'text-surface-600 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-800',
+            'border border-surface-200 dark:border-surface-700',
+
+            // Spacing
+            'py-3 px-0',
+
+            // Focus & Outline
+            'outline-none',
+
+            // Misc
+            'overflow-auto'
+        ]
+    },
+    item: ({ context }) => ({
+        class: [
+            // Position
+            'relative',
+
+            // Spacing
+            'py-3 px-5 m-0',
+
+            // Shape
+            'border-none',
+
+            // Transition
+            'transition duration-200',
+
+            // Color
+            { 'text-surface-700 dark:text-white/80 bg-surface-0 dark:bg-surface-900': !context.active },
+            { 'text-primary-highlight-inverse bg-primary-highlight': context.active },
+
+            // State
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-700': !context.active,
+                'hover:bg-primary-highlight-hover': context.active
+            },
+
+            // Misc
+            'cursor-pointer overflow-hidden'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/organizationchart/index.js b/packages/tailwindcss-presets/src/lara/organizationchart/index.js
new file mode 100644
index 000000000..93368ad99
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/organizationchart/index.js
@@ -0,0 +1,138 @@
+export default {
+    table: {
+        class: [
+            // Spacing & Position
+            'mx-auto my-0',
+
+            // Table Style
+            'border-spacing-0 border-separate'
+        ]
+    },
+    cell: {
+        class: [
+            // Alignment
+            'text-center align-top',
+
+            // Spacing
+            'py-0 px-3'
+        ]
+    },
+    node: ({ props, context }) => ({
+        class: [
+            'relative inline-block',
+
+            // Spacing
+            'p-5',
+
+            // Shape
+            'border',
+
+            // Color
+            {
+                'text-surface-600 dark:text-white/80': !context?.selected,
+                'bg-surface-0 dark:bg-surface-800': !context?.selected,
+                'border-surface-200 dark:border-surface-700': !context?.selected,
+                'text-primary-highlight-inverse': context?.selected,
+                'bg-primary-highlight': context?.selected,
+                'border-primary-200 dark:border-primary-600': context?.selected
+            },
+
+            // States
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-700': context?.selectable && !context?.selected,
+                'hover:bg-primary-highlight-hover': context?.selectable && context?.selected
+            },
+
+            { 'cursor-pointer': context?.selectable }
+        ]
+    }),
+    linecell: {
+        class: [
+            // Alignment
+            'text-center align-top',
+
+            // Spacing
+            'py-0 px-3'
+        ]
+    },
+    linedown: {
+        class: [
+            // Spacing
+            'mx-auto my-0',
+
+            // Size
+            'w-px h-[20px]',
+
+            // Color
+            'bg-surface-200 dark:bg-surface-700'
+        ]
+    },
+    lineleft: ({ context }) => ({
+        class: [
+            // Alignment
+            'text-center align-top',
+
+            // Spacing
+            'py-0 px-3',
+
+            // Shape
+            'rounded-none border-r',
+            { 'border-t': context.lineTop },
+
+            // Color
+            'border-surface-200 dark:border-surface-700'
+        ]
+    }),
+    lineright: ({ context }) => ({
+        class: [
+            // Alignment
+            'text-center align-top',
+
+            // Spacing
+            'py-0 px-3',
+
+            // Shape
+            'rounded-none',
+
+            // Color
+            { 'border-t border-surface-200 dark:border-surface-700': context.lineTop }
+        ]
+    }),
+    nodecell: {
+        class: 'text-center align-top py-0 px-3'
+    },
+    nodetoggler: {
+        class: [
+            // Position
+            'absolute bottom-[-0.75rem] left-2/4 -ml-3',
+            'z-20',
+
+            // Flexbox
+            'flex items-center justify-center',
+
+            // Size
+            'w-6 h-6',
+
+            // Shape
+            'rounded-full',
+
+            // Color
+            'bg-inherit text-inherit',
+
+            // Focus
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Misc
+            'cursor-pointer no-underline select-none'
+        ]
+    },
+    nodetogglericon: {
+        class: [
+            // Position
+            'relative inline-block',
+
+            // Size
+            'w-4 h-4'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/overlaypanel/index.js b/packages/tailwindcss-presets/src/lara/overlaypanel/index.js
new file mode 100644
index 000000000..f67d2ffe3
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/overlaypanel/index.js
@@ -0,0 +1,40 @@
+export default {
+    root: {
+        class: [
+            // Shape
+            'rounded-md shadow-lg',
+            'border-0 dark:border',
+
+            // Position
+            'absolute left-0 top-0 mt-2',
+            'z-40 transform origin-center',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-surface-0/80',
+            'dark:border-surface-700',
+
+            // Before: Triangle
+            'before:absolute before:-top-[9px] before:-ml-[9px] before:left-[calc(var(--overlayArrowLeft,0)+1.25rem)] z-0',
+            'before:w-0 before:h-0',
+            'before:border-transparent before:border-solid',
+            'before:border-x-[8px] before:border-[8px]',
+            'before:border-t-0 before:border-b-surface-300/10 dark:before:border-b-surface-700',
+
+            'after:absolute after:-top-2 after:-ml-[8px] after:left-[calc(var(--overlayArrowLeft,0)+1.25rem)]',
+            'after:w-0 after:h-0',
+            'after:border-transparent after:border-solid',
+            'after:border-x-[0.5rem] after:border-[0.5rem]',
+            'after:border-t-0 after:border-b-surface-0 dark:after:border-b-surface-800'
+        ]
+    },
+    content: {
+        class: 'p-5 items-center flex'
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/paginator/index.js b/packages/tailwindcss-presets/src/lara/paginator/index.js
new file mode 100644
index 000000000..5b5b7908d
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/paginator/index.js
@@ -0,0 +1,528 @@
+export default {
+    root: {
+        class: [
+            // Flex & Alignment
+            'flex items-center justify-center flex-wrap',
+
+            // Spacing
+            'px-4 py-2',
+
+            // Shape
+            'border-0',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-500 dark:text-white/60'
+        ]
+    },
+    firstpagebutton: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full dark:rounded-md',
+
+            // Size
+            'min-w-[3rem] h-12 m-[0.143rem]',
+            'leading-none',
+
+            // Color
+            'text-surface-500 dark:text-white/60',
+
+            // State
+            {
+                'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled,
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled
+            },
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'user-none overflow-hidden',
+            { 'cursor-default pointer-events-none opacity-60': context.disabled }
+        ]
+    }),
+    previouspagebutton: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full dark:rounded-md',
+
+            // Size
+            'min-w-[3rem] h-12 m-[0.143rem]',
+            'leading-none',
+
+            // Color
+            'text-surface-500 dark:text-white/60',
+
+            // State
+            {
+                'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled,
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled
+            },
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'user-none overflow-hidden',
+            { 'cursor-default pointer-events-none opacity-60': context.disabled }
+        ]
+    }),
+    nextpagebutton: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full dark:rounded-md',
+
+            // Size
+            'min-w-[3rem] h-12 m-[0.143rem]',
+            'leading-none',
+
+            // Color
+            'text-surface-500 dark:text-white/60',
+
+            // State
+            {
+                'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled,
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled
+            },
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'user-none overflow-hidden',
+            { 'cursor-default pointer-events-none opacity-60': context.disabled }
+        ]
+    }),
+    lastpagebutton: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full dark:rounded-md',
+
+            // Size
+            'min-w-[3rem] h-12 m-[0.143rem]',
+            'leading-none',
+
+            // Color
+            'text-surface-500 dark:text-white/60',
+
+            // State
+            {
+                'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled,
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled
+            },
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'user-none overflow-hidden',
+            { 'cursor-default pointer-events-none opacity-60': context.disabled }
+        ]
+    }),
+    pagebutton: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full dark:rounded-md',
+
+            // Size
+            'min-w-[3rem] h-12 m-[0.143rem]',
+            'leading-none',
+
+            // Color
+            'text-surface-500 dark:text-white/80',
+            {
+                'bg-primary-highlight border-primary-highlight  text-primary-highlight-inverse': context.active
+            },
+
+            // State
+            {
+                'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled && !context.active,
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled
+            },
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'user-none overflow-hidden',
+            { 'cursor-default pointer-events-none opacity-60': context.disabled }
+        ]
+    }),
+    rowperpagedropdown: {
+        root: ({ props, state }) => ({
+            class: [
+                // Display and Position
+                'inline-flex',
+                'relative',
+
+                // Shape
+                'h-12',
+                'rounded-md',
+
+                // Spacing
+                'mx-2',
+
+                // Color and Background
+                'bg-surface-0 dark:bg-surface-900',
+                'border border-surface-300 dark:border-surface-700',
+
+                // Transitions
+                'transition-all',
+                'duration-200',
+
+                // States
+                'hover:border-primary',
+                { 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !state.focused },
+
+                // Misc
+                'cursor-pointer',
+                'select-none',
+                { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled }
+            ]
+        }),
+        input: {
+            class: [
+                //Font
+                'leading-[normal]',
+
+                // Display
+                'block',
+                'flex-auto',
+
+                // Color and Background
+                'bg-transparent',
+                'border-0',
+                'text-surface-800 dark:text-white/80',
+
+                // Sizing and Spacing
+                'w-[1%]',
+                'p-3 pr-0',
+
+                //Shape
+                'rounded-none',
+
+                // Transitions
+                'transition',
+                'duration-200',
+
+                // States
+                'focus:outline-none focus:shadow-none',
+
+                // Misc
+                'relative',
+                'cursor-pointer',
+                'overflow-hidden overflow-ellipsis',
+                'whitespace-nowrap',
+                'appearance-none'
+            ]
+        },
+        trigger: {
+            class: [
+                // Flexbox
+                'flex items-center justify-center',
+                'shrink-0',
+
+                // Color and Background
+                'bg-transparent',
+                'text-surface-500',
+
+                // Size
+                'w-12',
+
+                // Shape
+                'rounded-tr-md',
+                'rounded-br-md'
+            ]
+        },
+        panel: {
+            class: [
+                // Position
+                'absolute top-0 left-0',
+
+                // Shape
+                'border-0 dark:border',
+                'rounded-md',
+                'shadow-md',
+
+                // Color
+                'bg-surface-0 dark:bg-surface-800',
+                'text-surface-800 dark:text-white/80',
+                'dark:border-surface-700'
+            ]
+        },
+        wrapper: {
+            class: [
+                // Sizing
+                'max-h-[200px]',
+
+                // Misc
+                'overflow-auto'
+            ]
+        },
+        list: {
+            class: 'py-3 list-none m-0'
+        },
+        item: ({ context }) => ({
+            class: [
+                // Font
+                'font-normal',
+                'leading-none',
+
+                // Position
+                'relative',
+
+                // Shape
+                'border-0',
+                'rounded-none',
+
+                // Spacing
+                'm-0',
+                'py-3 px-5',
+
+                // Color
+                { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected },
+                { 'bg-surface-50 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected },
+                { 'bg-primary-highlight text-primary-highlight-inverse': context.selected },
+
+                //States
+                { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected },
+                { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected },
+
+                // Transitions
+                'transition-shadow',
+                'duration-200',
+
+                // Misc
+                'cursor-pointer',
+                'overflow-hidden',
+                'whitespace-nowrap'
+            ]
+        })
+    },
+    jumptopageinput: {
+        root: {
+            class: 'inline-flex mx-2'
+        },
+        input: {
+            root: {
+                class: [
+                    'relative',
+
+                    //Font
+                    'leading-none',
+
+                    // Display
+                    'block',
+                    'flex-auto',
+
+                    // Colors
+                    'text-surface-600 dark:text-surface-200',
+                    'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+                    'bg-surface-0 dark:bg-surface-900',
+                    'border border-surface-300 dark:border-surface-600',
+
+                    // Sizing and Spacing
+                    'w-[1%] max-w-[3rem]',
+                    'p-3 m-0',
+
+                    //Shape
+                    'rounded-md',
+
+                    // Transitions
+                    'transition',
+                    'duration-200',
+
+                    // States
+                    'hover:border-primary',
+                    'focus:outline-none focus:shadow-none',
+                    'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50',
+
+                    // Misc
+                    'cursor-pointer',
+                    'overflow-hidden overflow-ellipsis',
+                    'whitespace-nowrap',
+                    'appearance-none'
+                ]
+            }
+        }
+    },
+    jumptopagedropdown: {
+        root: ({ props, state }) => ({
+            class: [
+                // Display and Position
+                'inline-flex',
+                'relative',
+
+                // Shape
+                'h-12',
+                'rounded-md',
+
+                // Color and Background
+                'bg-surface-0 dark:bg-surface-900',
+                'border border-surface-300 dark:border-surface-700',
+
+                // Transitions
+                'transition-all',
+                'duration-200',
+
+                // States
+                'hover:border-primary',
+                { 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !state.focused },
+
+                // Misc
+                'cursor-pointer',
+                'select-none',
+                { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled }
+            ]
+        }),
+        input: {
+            class: [
+                //Font
+                'leading-none',
+
+                // Display
+                'block',
+                'flex-auto',
+
+                // Color and Background
+                'bg-transparent',
+                'border-0',
+                'text-surface-800 dark:text-white/80',
+
+                // Sizing and Spacing
+                'w-[1%]',
+                'p-3',
+
+                //Shape
+                'rounded-none',
+
+                // Transitions
+                'transition',
+                'duration-200',
+
+                // States
+                'focus:outline-none focus:shadow-none',
+
+                // Misc
+                'relative',
+                'cursor-pointer',
+                'overflow-hidden overflow-ellipsis',
+                'whitespace-nowrap',
+                'appearance-none'
+            ]
+        },
+        trigger: {
+            class: [
+                // Flexbox
+                'flex items-center justify-center',
+                'shrink-0',
+
+                // Color and Background
+                'bg-transparent',
+                'text-surface-500',
+
+                // Size
+                'w-12',
+
+                // Shape
+                'rounded-tr-md',
+                'rounded-br-md'
+            ]
+        },
+        panel: {
+            class: [
+                // Position
+                'absolute top-0 left-0',
+
+                // Shape
+                'border-0 dark:border',
+                'rounded-md',
+                'shadow-md',
+
+                // Color
+                'bg-surface-0 dark:bg-surface-800',
+                'text-surface-800 dark:text-white/80',
+                'dark:border-surface-700'
+            ]
+        },
+        wrapper: {
+            class: [
+                // Sizing
+                'max-h-[200px]',
+
+                // Misc
+                'overflow-auto'
+            ]
+        },
+        list: {
+            class: 'py-3 list-none m-0'
+        },
+        item: ({ context }) => ({
+            class: [
+                // Font
+                'font-normal',
+                'leading-none',
+
+                // Position
+                'relative',
+
+                // Shape
+                'border-0',
+                'rounded-none',
+
+                // Spacing
+                'm-0',
+                'py-3 px-5',
+
+                // Color
+                { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected },
+                { 'bg-surface-50 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected },
+                { 'bg-primary-highlight text-primary-highlight-inverse': context.selected },
+
+                //States
+                { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected },
+                { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected },
+
+                // Transitions
+                'transition-shadow',
+                'duration-200',
+
+                // Misc
+                'cursor-pointer',
+                'overflow-hidden',
+                'whitespace-nowrap'
+            ]
+        })
+    },
+    start: {
+        class: 'mr-auto'
+    },
+    end: {
+        class: 'ml-auto'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/panel/index.js b/packages/tailwindcss-presets/src/lara/panel/index.js
new file mode 100644
index 000000000..d42820bd9
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/panel/index.js
@@ -0,0 +1,91 @@
+export default {
+    header: ({ props }) => ({
+        class: [
+            // Flex
+            'flex items-center justify-between',
+
+            // Colors
+            'text-surface-700 dark:text-surface-0/80',
+            'bg-surface-50 dark:bg-surface-900',
+            'border border-surface-200 dark:border-surface-700',
+
+            //Shape
+            'rounded-tl-lg rounded-tr-lg',
+
+            // Conditional Spacing
+            { 'p-5': !props.toggleable, 'py-3 px-5': props.toggleable }
+        ]
+    }),
+    title: {
+        class: 'leading-none font-bold'
+    },
+    toggler: {
+        class: [
+            // Alignments
+            'inline-flex items-center justify-center',
+            'relative',
+
+            // Sized
+            'w-8 h-8',
+            'm-0 p-0',
+
+            //Shape
+            'border-0 rounded-full',
+
+            //Color
+            'bg-transparent',
+            'text-surface-600 dark:text-surface-0/80',
+
+            // States
+            'hover:text-surface-800 dark:hover:text-surface-0/80',
+            'hover:bg-surface-100 dark:hover:bg-surface-800/80',
+            'focus:outline-none focus:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50 focus-visible:ring-inset dark:focus-visible:ring-primary-300/50',
+
+            // Transitions
+            'transition-all duration-200 ease-in-out',
+
+            // Misc
+            'overflow-hidden no-underline',
+            'cursor-pointer'
+        ]
+    },
+    togglerIcon: {
+        class: 'inline-block'
+    },
+    content: {
+        class: [
+            // Spacing
+            'p-5',
+
+            // Shape
+            'border border-t-0 last:rounded-br-lg last:rounded-bl-lg',
+
+            //Color
+            'border-surface-200 dark:border-surface-700',
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    footer: {
+        class: [
+            // Spacing
+            'py-3 p-5',
+
+            // Shape
+            'border border-t-0 rounded-br-lg rounded-bl-lg',
+
+            //Color
+            'border-surface-200 dark:border-surface-700',
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    transition: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+        enterToClass: 'max-h-[1000px]',
+        leaveFromClass: 'max-h-[1000px]',
+        leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+        leaveToClass: 'max-h-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/panelmenu/index.js b/packages/tailwindcss-presets/src/lara/panelmenu/index.js
new file mode 100644
index 000000000..e6072e899
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/panelmenu/index.js
@@ -0,0 +1,127 @@
+export default {
+    panel: {
+        class: 'mb-1'
+    },
+    header: {
+        class: ['rounded-md', 'outline-none', 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50']
+    },
+    headercontent: ({ context, instance }) => ({
+        class: [
+            // Shape
+            'rounded-t-md',
+            { 'rounded-br-md rounded-bl-md': !context.active || instance.activeItem?.items === undefined, 'rounded-br-0 rounded-bl-0': context.active && instance.activeItem?.items !== undefined },
+
+            // Color
+            'border border-surface-200 dark:border-surface-700',
+            'bg-surface-50 dark:bg-surface-800',
+            'text-surface-600 dark:text-surface-0/80',
+            { 'text-surface-900': context.active },
+
+            // States
+            'hover:bg-surface-100 dark:hover:bg-surface-700/80',
+            'hover:text-surface-900',
+
+            // Transition
+            'transition duration-200 ease-in-out',
+            'transition-shadow duration-200'
+        ]
+    }),
+    headeraction: {
+        class: [
+            'relative',
+
+            // Font
+            'font-bold',
+            'leading-none',
+
+            // Flex & Alignments
+            'flex items-center',
+
+            // Spacing
+            'p-5',
+
+            // Misc
+            'select-none cursor-pointer no-underline'
+        ]
+    },
+    headerlabel: {
+        class: 'leading-none'
+    },
+    headerIcon: {
+        class: 'mr-2'
+    },
+    submenuicon: {
+        class: 'mr-2'
+    },
+    menucontent: {
+        class: [
+            // Spacing
+            'py-2',
+
+            // Shape
+            'border border-t-0',
+            'rounded-t-none rounded-br-md rounded-bl-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-800',
+            'border-surface-200 dark:border-surface-700'
+        ]
+    },
+    menu: {
+        class: ['outline-none', 'm-0 p-0 list-none']
+    },
+    content: {
+        class: [
+            // Shape
+            'border-none rounded-none',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+
+            // Transition
+            'transition-shadow duration-200'
+        ]
+    },
+    action: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Font
+            'leading-none',
+
+            // Flex & Alignments
+            'flex items-center',
+
+            // Spacing
+            'py-3 px-5',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+
+            // States
+            'hover:bg-surface-100 dark:hover:bg-surface-700/80 hover:text-surface-700 dark:hover:text-white/80',
+            {
+                'bg-surface-200 text-surface-700 dark:text-white/80 dark:bg-surface-600/90': context.focused
+            },
+
+            // Misc
+            'cursor-pointer no-underline',
+            'select-none overflow-hidden'
+        ]
+    }),
+    icon: {
+        class: 'mr-2'
+    },
+    submenu: {
+        class: 'p-0 pl-4 m-0 list-none'
+    },
+    transition: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+        enterToClass: 'max-h-[1000px]',
+        leaveFromClass: 'max-h-[1000px]',
+        leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+        leaveToClass: 'max-h-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/password/index.js b/packages/tailwindcss-presets/src/lara/password/index.js
new file mode 100644
index 000000000..e294b872d
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/password/index.js
@@ -0,0 +1,121 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'inline-flex relative',
+            {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            },
+            { '[&>input]:pr-10': props.toggleMask }
+        ]
+    }),
+    panel: {
+        class: [
+            // Spacing
+            'p-5',
+
+            // Shape
+            'border-0 dark:border',
+            'shadow-md rounded-md',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-white/80',
+            'dark:border-surface-700'
+        ]
+    },
+    meter: {
+        class: [
+            // Position and Overflow
+            'overflow-hidden',
+            'relative',
+
+            // Shape and Size
+            'border-0',
+            'h-3',
+
+            // Spacing
+            'mb-2',
+
+            // Colors
+            'bg-surface-100 dark:bg-surface-700'
+        ]
+    },
+    meterlabel: ({ instance }) => ({
+        class: [
+            // Size
+            'h-full',
+
+            // Colors
+            {
+                'bg-red-500 dark:bg-red-400/50': instance?.meter?.strength == 'weak',
+                'bg-orange-500 dark:bg-orange-400/50': instance?.meter?.strength == 'medium',
+                'bg-green-500 dark:bg-green-400/50': instance?.meter?.strength == 'strong'
+            },
+
+            // Transitions
+            'transition-all duration-1000 ease-in-out'
+        ]
+    }),
+    showicon: {
+        class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70']
+    },
+    hideicon: {
+        class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70']
+    },
+    input: {
+        root: ({ props, context, parent }) => ({
+            class: [
+                // Font
+                'leading-[normal]',
+
+                // Flex
+                { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+
+                // Spacing
+                'm-0',
+                {
+                    'px-4 py-4': props.size == 'large',
+                    'px-2 py-2': props.size == 'small',
+                    'p-3': props.size == null
+                },
+                'w-full',
+
+                // Shape
+                { 'rounded-md': parent.instance.$name !== 'InputGroup' },
+                { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+                { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
+                { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
+
+                // Colors
+                'text-surface-600 dark:text-surface-200',
+                'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+                'bg-surface-0 dark:bg-surface-900',
+                'border',
+                { 'border-surface-300 dark:border-surface-600': !parent.props.invalid },
+
+                // Invalid State
+                { 'border-red-500 dark:border-red-400': parent.props.invalid },
+
+                // States
+                {
+                    'hover:border-primary': !context.disabled && !parent.props.invalid,
+                    'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10': !context.disabled,
+                    'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+                },
+
+                // Filled State *for FloatLabel
+                { filled: parent.instance?.$parentInstance?.$name == 'FloatLabel' && parent.props.modelValue !== null && parent.props.modelValue?.length !== 0 },
+
+                // Misc
+                'appearance-none',
+                'transition-colors duration-200'
+            ]
+        })
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/picklist/index.js b/packages/tailwindcss-presets/src/lara/picklist/index.js
new file mode 100644
index 000000000..c5cd1fe5c
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/picklist/index.js
@@ -0,0 +1,651 @@
+export default {
+    root: {
+        class: [
+            // Flexbox
+            'flex lg:flex-row flex-col'
+        ]
+    },
+    sourcecontrols: {
+        class: [
+            // Flexbox & Alignment
+            'flex lg:flex-col justify-center gap-2',
+
+            // Spacing
+            'p-5'
+        ]
+    },
+    sourcemoveupbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // Spacing & Size
+                'w-12',
+                'm-0',
+                'px-0 py-3',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary/50',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    sourcemovetopbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // Spacing & Size
+                'w-12',
+                'm-0',
+                'px-0 py-3',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary/50',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    sourcemovedownbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // Spacing & Size
+                'w-12',
+                'm-0',
+                'px-0 py-3',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary/50',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    sourcemovebottombutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // Spacing & Size
+                'w-12',
+                'm-0',
+                'px-0 py-3',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary/50',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    sourcewrapper: {
+        class: 'grow shrink basis-2/4'
+    },
+    sourceheader: {
+        class: [
+            'font-bold',
+
+            // Shape
+            'border-b-0 rounded-t-md',
+
+            // Spacing
+            'p-5',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-50 dark:bg-surface-800',
+            'border border-surface-200 dark:border-surface-700'
+        ]
+    },
+    sourcelist: {
+        class: [
+            // Spacing
+            'list-none m-0 p-0',
+
+            // Size
+            'min-h-[12rem] max-h-[24rem]',
+
+            // Shape
+            'rounded-b-md',
+
+            // Color
+            'text-surface-600 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-800',
+            'border border-surface-200 dark:border-surface-700',
+
+            // Spacing
+            'py-3 px-0',
+
+            // Focus & Outline
+            'outline-none',
+
+            // Misc
+            'overflow-auto'
+        ]
+    },
+    item: ({ context }) => ({
+        class: [
+            // Position
+            'relative',
+
+            // Spacing
+            'py-3 px-5 m-0',
+
+            // Shape
+            'border-none',
+
+            // Transition
+            'transition duration-200',
+
+            // Color
+            { 'text-surface-700 dark:text-white/80 bg-surface-0 dark:bg-surface-900': !context.active },
+            { 'text-primary-highlight-inverse bg-primary-highlight': context.active },
+
+            // State
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-700': !context.active,
+                'hover:bg-primary-highlight-hover': context.active
+            },
+
+            // Misc
+            'cursor-pointer overflow-hidden'
+        ]
+    }),
+    buttons: {
+        class: 'flex lg:flex-col justify-center gap-2 p-5'
+    },
+    movetotargetbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // Spacing & Size
+                'w-12',
+                'm-0',
+                'px-0 py-3',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary/50',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    movealltotargetbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // Spacing & Size
+                'w-12',
+                'm-0',
+                'px-0 py-3',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary/50',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    movetosourcebutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // Spacing & Size
+                'w-12',
+                'm-0',
+                'px-0 py-3',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary/50',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    movealltosourcebutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // Spacing & Size
+                'w-12',
+                'm-0',
+                'px-0 py-3',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary/50',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    targetcontrols: {
+        class: 'flex lg:flex-col justify-center gap-2 p-5'
+    },
+    targetmoveupbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // Spacing & Size
+                'w-12',
+                'm-0',
+                'px-0 py-3',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary/50',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    targetmovetopbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // Spacing & Size
+                'w-12',
+                'm-0',
+                'px-0 py-3',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary/50',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    targetmovedownbutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // Spacing & Size
+                'w-12',
+                'm-0',
+                'px-0 py-3',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary/50',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    targetmovebottombutton: {
+        root: ({ context }) => ({
+            class: [
+                // Flexbox & Alignment
+                'relative inline-flex items-center justify-center',
+
+                // Shape
+                'rounded-md',
+
+                // Color
+                'text-primary-inverse',
+                'bg-primary',
+                'border border-primary',
+
+                // Spacing & Size
+                'w-12',
+                'm-0',
+                'px-0 py-3',
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // State
+                'hover:bg-primary-hover hover:border-primary-hover',
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'focus:ring-primary/50',
+                { 'cursor-default pointer-events-none opacity-60': context.disabled },
+
+                // Interactivity
+                'cursor-pointer user-select-none'
+            ]
+        }),
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+
+                // Size
+                'w-0'
+            ]
+        }
+    },
+    targetwrapper: {
+        class: 'grow shrink basis-2/4'
+    },
+    targetheader: {
+        class: [
+            'font-bold',
+
+            // Shape
+            'border-b-0 rounded-t-md',
+
+            // Spacing
+            'p-5',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-50 dark:bg-surface-800',
+            'border border-surface-200 dark:border-surface-700'
+        ]
+    },
+    targetlist: {
+        class: [
+            // Spacing
+            'list-none m-0 p-0',
+
+            // Size
+            'min-h-[12rem] max-h-[24rem]',
+
+            // Shape
+            'rounded-b-md',
+
+            // Color
+            'text-surface-600 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-800',
+            'border border-surface-200 dark:border-surface-700',
+
+            // Spacing
+            'py-3 px-0',
+
+            // Focus & Outline
+            'outline-none',
+
+            // Misc
+            'overflow-auto'
+        ]
+    },
+    transition: {
+        enterFromClass: '!transition-none',
+        enterActiveClass: '!transition-none',
+        leaveActiveClass: '!transition-none',
+        leaveToClass: '!transition-none'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/progressbar/index.js b/packages/tailwindcss-presets/src/lara/progressbar/index.js
new file mode 100644
index 000000000..fe251b956
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/progressbar/index.js
@@ -0,0 +1,55 @@
+export default {
+    root: {
+        class: [
+            // Position and Overflow
+            'overflow-hidden',
+            'relative',
+
+            // Shape and Size
+            'border-0',
+            'h-6',
+            'rounded-md',
+
+            // Colors
+            'bg-surface-100 dark:bg-surface-700'
+        ]
+    },
+    value: ({ props }) => ({
+        class: [
+            // Flexbox & Overflow & Position
+            { 'absolute flex items-center justify-center overflow-hidden': props.mode !== 'indeterminate' },
+
+            // Colors
+            'bg-primary',
+
+            // Spacing & Sizing
+            'm-0',
+            { 'h-full w-0': props.mode !== 'indeterminate' },
+
+            // Shape
+            'border-0',
+
+            // Transitions
+            {
+                'transition-width duration-1000 ease-in-out': props.mode !== 'indeterminate',
+                'progressbar-value-animate': props.mode == 'indeterminate'
+            },
+
+            // Before & After (indeterminate)
+            {
+                'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit ': props.mode == 'indeterminate',
+                'after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': props.mode == 'indeterminate'
+            }
+        ]
+    }),
+    label: {
+        class: [
+            // Flexbox
+            'inline-flex',
+
+            // Font and Text
+            'text-white dark:text-surface-900',
+            'leading-6'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/progressspinner/index.js b/packages/tailwindcss-presets/src/lara/progressspinner/index.js
new file mode 100644
index 000000000..4e1faec86
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/progressspinner/index.js
@@ -0,0 +1,51 @@
+export default {
+    root: {
+        class: [
+            // Position
+            'relative',
+            'mx-auto',
+
+            // Sizing
+            'w-28',
+            'h-28',
+
+            // Flexbox
+            'inline-block',
+
+            // Pseudo-Elements
+            'before:block',
+            'before:pt-full'
+        ]
+    },
+    spinner: {
+        class: [
+            // Position
+            'absolute',
+            'top-0',
+            'bottom-0',
+            'left-0',
+            'right-0',
+            'm-auto',
+
+            // Sizing
+            'w-full',
+            'h-full',
+
+            // Transformations
+            'transform',
+            'origin-center',
+
+            // Animations
+            'animate-spin'
+        ]
+    },
+    circle: {
+        class: [
+            // Colors
+            'text-red-500',
+
+            // Misc
+            'progress-spinner-circle'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/radiobutton/index.js b/packages/tailwindcss-presets/src/lara/radiobutton/index.js
new file mode 100644
index 000000000..06cbd8f8c
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/radiobutton/index.js
@@ -0,0 +1,104 @@
+export default {
+    root: {
+        class: [
+            'relative',
+
+            // Flexbox & Alignment
+            'inline-flex',
+            'align-bottom',
+
+            // Size
+            'w-[1.571rem] h-[1.571rem]',
+
+            // Misc
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    box: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex justify-center items-center',
+
+            // Size
+            'w-[1.571rem] h-[1.571rem]',
+
+            // Shape
+            'border-2',
+            'rounded-full',
+
+            // Transition
+            'transition duration-200 ease-in-out',
+
+            // Colors
+            {
+                'text-surface-700 dark:text-white/80': props.value !== props.modelValue && props.value !== undefined,
+                'bg-surface-0 dark:bg-surface-900': props.value !== props.modelValue && props.value !== undefined,
+                'border-surface-300 dark:border-surface-700': props.value !== props.modelValue && props.value !== undefined && !props.invalid,
+                'border-primary': props.value == props.modelValue && props.value !== undefined,
+                'bg-primary': props.value == props.modelValue && props.value !== undefined
+            },
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'peer-hover:border-primary dark:peer-hover:border-primary': !props.disabled && !props.invalid,
+                'peer-hover:border-primary-hover peer-hover:bg-primary-hover': !props.disabled && props.value == props.modelValue && props.value !== undefined,
+                'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled,
+                'opacity-60 cursor-default': props.disabled
+            }
+        ]
+    }),
+    input: {
+        class: [
+            'peer',
+
+            // Size
+            'w-full ',
+            'h-full',
+
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-10',
+
+            // Spacing
+            'p-0',
+            'm-0',
+
+            // Shape
+            'opacity-0',
+            'rounded-md',
+            'outline-none',
+            'border-2 border-surface-200 dark:border-surface-700',
+
+            // Misc
+            'appearance-none',
+            'cursor-pointer'
+        ]
+    },
+    icon: ({ props }) => ({
+        class: [
+            'block',
+
+            // Shape
+            'rounded-full',
+
+            // Size
+            'w-[0.857rem] h-[0.857rem]',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+
+            // Conditions
+            {
+                'backface-hidden scale-10 invisible': props.value !== props.modelValue,
+                'transform visible scale-[1.1]': props.value == props.modelValue
+            },
+
+            // Transition
+            'transition duration-200'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/rating/index.js b/packages/tailwindcss-presets/src/lara/rating/index.js
new file mode 100644
index 000000000..371f7e295
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/rating/index.js
@@ -0,0 +1,92 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'flex items-center',
+            'gap-2',
+
+            // Misc
+            {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            }
+        ]
+    }),
+    cancelitem: ({ context }) => ({
+        class: [
+            // Flex & Alignment
+            'inline-flex items-center',
+
+            //State
+            {
+                'outline-none ring ring-primary-500/50 dark:ring-primary-400/50': context.focused
+            },
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }),
+    cancelicon: {
+        class: [
+            // Size
+            'w-5 h-5',
+
+            // Color
+            'text-red-500 dark:text-red-400',
+
+            // State
+            'hover:text-red-600 dark:hover:text-red-300',
+
+            // Transition
+            'transition duration-200 ease-in'
+        ]
+    },
+    item: ({ props, context }) => ({
+        class: [
+            // Flex & Alignment
+            'inline-flex items-center',
+
+            // State
+            {
+                'outline-none ring ring-primary-500/50 dark:ring-primary-400/50': context.focused
+            },
+
+            // Misc
+            {
+                'cursor-pointer': !props.readonly,
+                'cursor-default': props.readonly
+            }
+        ]
+    }),
+    officon: ({ props }) => ({
+        class: [
+            // Size
+            'w-5 h-5',
+
+            // Color
+            'text-surface-700 dark:text-surface-0/80',
+
+            // State
+            { 'hover:text-primary-500 dark:hover:text-primary-400': !props.readonly },
+
+            // Transition
+            'transition duration-200 ease-in'
+        ]
+    }),
+    onicon: ({ props }) => ({
+        class: [
+            // Size
+            'w-5 h-5',
+
+            // Color
+            'text-primary',
+
+            // State
+            { 'hover:text-primary-600 dark:hover:text-primary-300': !props.readonly },
+
+            // Transition
+            'transition duration-200 ease-in'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/ripple/index.js b/packages/tailwindcss-presets/src/lara/ripple/index.js
new file mode 100644
index 000000000..429c249e8
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/ripple/index.js
@@ -0,0 +1,6 @@
+export default {
+    root: {
+        class: ['block absolute bg-surface-0/50 rounded-full pointer-events-none'],
+        style: 'transform: scale(0)'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/scrollpanel/index.js b/packages/tailwindcss-presets/src/lara/scrollpanel/index.js
new file mode 100644
index 000000000..d41e690c3
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/scrollpanel/index.js
@@ -0,0 +1,77 @@
+export default {
+    wrapper: {
+        class: [
+            // Size & Position
+            'h-full w-full',
+
+            // Layering
+            'z-[1]',
+
+            // Spacing
+            'overflow-hidden',
+
+            // Misc
+            'relative float-left'
+        ]
+    },
+    content: {
+        class: [
+            // Size & Spacing
+            'h-[calc(100%+18px)] w-[calc(100%+18px)] pr-[18px] pb-[18px] pl-0 pt-0',
+
+            // Overflow & Scrollbar
+            'overflow-scroll scrollbar-none',
+
+            // Box Model
+            'box-border',
+
+            // Position
+            'relative',
+
+            // Webkit Specific
+            '[&::-webkit-scrollbar]:hidden'
+        ]
+    },
+    barX: {
+        class: [
+            // Size & Position
+            'h-[9px] bottom-0',
+
+            // Appearance
+            'bg-surface-50 dark:bg-surface-700 rounded',
+
+            // Interactivity
+            'cursor-pointer',
+
+            // Visibility & Layering
+            'invisible z-20',
+
+            // Transition
+            'transition duration-[250ms] ease-linear',
+
+            // Misc
+            'relative'
+        ]
+    },
+    barY: {
+        class: [
+            // Size & Position
+            'w-[9px] top-0',
+
+            // Appearance
+            'bg-surface-50 dark:bg-surface-700 rounded',
+
+            // Interactivity
+            'cursor-pointer',
+
+            // Visibility & Layering
+            'z-20',
+
+            // Transition
+            'transition duration-[250ms] ease-linear',
+
+            // Misc
+            'relative'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/scrolltop/index.js b/packages/tailwindcss-presets/src/lara/scrolltop/index.js
new file mode 100644
index 000000000..c091419a7
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/scrolltop/index.js
@@ -0,0 +1,40 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Flex & Alignment
+            'flex items-center justify-center',
+
+            // Positioning
+            {
+                sticky: props.target === 'parent',
+                fixed: props.target === 'window'
+            },
+            'bottom-[20px] right-[20px]',
+            'ml-auto',
+
+            // Shape & Size
+            {
+                'rounded-md h-8 w-8': props.target === 'parent',
+                'h-12 w-12 rounded-full shadow-md': props.target === 'window'
+            },
+
+            // Color
+            {
+                'text-primary-inverse bg-primary': props.target === 'parent',
+                'text-white dark:text-surface-900 bg-surface-500 dark:bg-surface-400': props.target === 'window'
+            },
+
+            // States
+            {
+                'hover:bg-primary-hover': props.target === 'parent',
+                'hover:bg-surface-600 dark:hover:bg-surface-300': props.target === 'window'
+            }
+        ]
+    }),
+    transition: {
+        enterFromClass: 'opacity-0',
+        enterActiveClass: 'transition-opacity duration-150',
+        leaveActiveClass: 'transition-opacity duration-150',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/selectbutton/index.js b/packages/tailwindcss-presets/src/lara/selectbutton/index.js
new file mode 100644
index 000000000..2a62c9bac
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/selectbutton/index.js
@@ -0,0 +1,49 @@
+export default {
+    root: ({ props }) => ({
+        class: [{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+    }),
+    button: ({ context, props }) => ({
+        class: [
+            'relative',
+            // Font
+            'leading-none',
+
+            // Flex Alignment
+            'inline-flex items-center align-bottom text-center',
+
+            // Spacing
+            'px-4 py-3',
+
+            // Shape
+            'border border-r-0',
+            'first:rounded-l-md first:rounded-tr-none first:rounded-br-none',
+            'last:border-r last:rounded-tl-none last:rounded-bl-none last:rounded-r-md',
+
+            // Color
+            {
+                'bg-surface-0 dark:bg-surface-900': !context.active,
+                'text-surface-700 dark:text-white/80': !context.active,
+                'border-surface-200 dark:border-surface-700': !context.active && !props.invalid,
+                'bg-primary border-primary text-primary-inverse': context.active
+            },
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50 focus:z-10',
+            {
+                'hover:bg-surface-50 dark:hover:bg-surface-800/80': !context.active && !props.invalid,
+                'hover:bg-primary-hover': context.active
+            },
+            { 'opacity-60 select-none pointer-events-none cursor-default': context.disabled },
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'cursor-pointer select-none overflow-hidden'
+        ]
+    }),
+    label: {
+        class: 'font-bold'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/sidebar/index.js b/packages/tailwindcss-presets/src/lara/sidebar/index.js
new file mode 100644
index 000000000..27b4160d2
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/sidebar/index.js
@@ -0,0 +1,149 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex flex-col',
+
+            // Position
+            'relative',
+            { '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': props.position == 'full' },
+
+            // Size
+            {
+                'h-full w-80': props.position == 'left' || props.position == 'right',
+                'h-auto w-full': props.position == 'top' || props.position == 'bottom'
+            },
+
+            // Shape
+            'border-0 dark:border',
+            'shadow-lg',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-white/80',
+            'dark:border-surface-700',
+
+            // Transitions
+            'transition-transform',
+            'duration-300',
+
+            // Misc
+            'pointer-events-auto'
+        ]
+    }),
+    header: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-between',
+            'shrink-0',
+
+            // Spacing
+            'p-5',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    title: {
+        class: ['font-bold text-lg']
+    },
+    icons: {
+        class: ['flex items-center']
+    },
+    closeButton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Size and Spacing
+            'mr-2',
+            'last:mr-0',
+            'w-8 h-8',
+
+            // Shape
+            'border-0',
+            'rounded-full',
+
+            // Colors
+            'text-surface-500',
+            'bg-transparent',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-surface-800/80',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset',
+            'focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Misc
+            'overflow-hidden'
+        ]
+    },
+    closeButtonIcon: {
+        class: [
+            // Display
+            'inline-block',
+
+            // Size
+            'w-4',
+            'h-4'
+        ]
+    },
+    content: {
+        class: [
+            // Spacing and Size
+            'p-5',
+            'pt-0',
+            'h-full',
+            'w-full',
+
+            // Growth and Overflow
+            'grow',
+            'overflow-y-auto'
+        ]
+    },
+    mask: ({ props }) => ({
+        class: [
+            // Transitions
+            'transition-all',
+            'duration-300',
+            { 'p-5': !props.position == 'full' },
+
+            // Background and Effects
+            { 'has-[.mask-active]:bg-transparent bg-black/40': props.modal, 'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': props.modal }
+        ]
+    }),
+    transition: ({ props }) => {
+        return props.position === 'top'
+            ? {
+                  enterFromClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active',
+                  leaveToClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active'
+              }
+            : props.position === 'bottom'
+            ? {
+                  enterFromClass: 'translate-x-0 translate-y-full translate-z-0 mask-active',
+                  leaveToClass: 'translate-x-0 translate-y-full translate-z-0 mask-active'
+              }
+            : props.position === 'left'
+            ? {
+                  enterFromClass: '-translate-x-full translate-y-0 translate-z-0 mask-active',
+                  leaveToClass: '-translate-x-full translate-y-0 translate-z-0 mask-active'
+              }
+            : props.position === 'right'
+            ? {
+                  enterFromClass: 'translate-x-full translate-y-0 translate-z-0 mask-active',
+                  leaveToClass: 'translate-x-full translate-y-0 translate-z-0 mask-active'
+              }
+            : {
+                  enterFromClass: 'opacity-0 mask-active',
+                  enterActiveClass: 'transition-opacity duration-400 ease-in',
+                  leaveActiveClass: 'transition-opacity duration-400 ease-in',
+                  leaveToClass: 'opacity-0 mask-active'
+              };
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/skeleton/index.js b/packages/tailwindcss-presets/src/lara/skeleton/index.js
new file mode 100644
index 000000000..d459aaac9
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/skeleton/index.js
@@ -0,0 +1,16 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'overflow-hidden',
+            {
+                'animate-pulse': props.animation !== 'none'
+            },
+
+            // Round
+            { 'rounded-full': props.shape === 'circle', 'rounded-md': props.shape !== 'circle' },
+
+            // Colors
+            'bg-surface-200 dark:bg-surface-700'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/slider/index.js b/packages/tailwindcss-presets/src/lara/slider/index.js
new file mode 100644
index 000000000..00105c994
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/slider/index.js
@@ -0,0 +1,137 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Size
+            { 'h-1 w-60': props.orientation == 'horizontal', 'w-1 h-56': props.orientation == 'vertical' },
+
+            // Shape
+            'border-0',
+
+            // Colors
+            'bg-surface-100 dark:bg-surface-700',
+
+            // States
+            { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    range: ({ props }) => ({
+        class: [
+            // Position
+            'block absolute',
+            {
+                'top-0 left-0': props.orientation == 'horizontal',
+                'bottom-0 left-0': props.orientation == 'vertical'
+            },
+
+            //Size
+            {
+                'h-full': props.orientation == 'horizontal',
+                'w-full': props.orientation == 'vertical'
+            },
+
+            // Colors
+            'bg-primary'
+        ]
+    }),
+    handle: ({ props }) => ({
+        class: [
+            'block',
+
+            // Size
+            'h-[1.143rem]',
+            'w-[1.143rem]',
+            {
+                'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
+                'left-[50%] mb-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'vertical'
+            },
+
+            // Shape
+            'rounded-full',
+            'border-2',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-600',
+            'border-primary',
+
+            // States
+            'hover:bg-primary-hover',
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring',
+            'ring-primary-400/50 dark:ring-primary-300/50',
+
+            // Transitions
+            'transition duration-200',
+
+            // Misc
+            'cursor-grab',
+            'touch-action-none'
+        ]
+    }),
+    starthandler: ({ props }) => ({
+        class: [
+            'block',
+
+            // Size
+            'h-[1.143rem]',
+            'w-[1.143rem]',
+            {
+                'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
+                'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical'
+            },
+
+            // Shape
+            'rounded-full',
+            'border-2',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-600',
+            'border-primary',
+
+            // States
+            'hover:bg-primary-hover',
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring',
+            'focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+
+            // Transitions
+            'transition duration-200',
+
+            // Misc
+            'cursor-grab',
+            'touch-action-none'
+        ]
+    }),
+    endhandler: ({ props }) => ({
+        class: [
+            'block',
+
+            // Size
+            'h-[1.143rem]',
+            'w-[1.143rem]',
+            {
+                'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
+                'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical'
+            },
+
+            // Shape
+            'rounded-full',
+            'border-2',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-600',
+            'border-primary',
+
+            // States
+            'hover:bg-primary-hover',
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring',
+            'focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+
+            // Transitions
+            'transition duration-200',
+
+            // Misc
+            'cursor-grab',
+            'touch-action-none'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/speeddial/index.js b/packages/tailwindcss-presets/src/lara/speeddial/index.js
new file mode 100644
index 000000000..43680e0b8
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/speeddial/index.js
@@ -0,0 +1,297 @@
+export default {
+    root: {
+        class: 'absolute flex'
+    },
+    button: {
+        root: ({ props, context, parent }) => ({
+            class: [
+                'relative',
+                'z-20',
+
+                // Alignments
+                'items-center inline-flex text-center align-bottom justify-center',
+
+                // Sizes & Spacing
+                'leading-[normal]',
+                'w-16 h-16 p-0 py-3',
+
+                // Shapes
+                'rounded-full',
+                'shadow-md',
+
+                // Link Button
+                { 'text-primary-600 bg-transparent border-transparent': props.link },
+
+                // Plain Button
+                { 'text-white bg-gray-500 border border-gray-500': props.plain && !props.outlined && !props.text },
+                // Plain Text Button
+                { 'text-surface-500': props.plain && props.text },
+                // Plain Outlined Button
+                { 'text-surface-500 border border-gray-500': props.plain && props.outlined },
+
+                // Text Button
+                { 'bg-transparent border-transparent': props.text && !props.plain },
+
+                // Outlined Button
+                { 'bg-transparent border': props.outlined && !props.plain },
+
+                // --- Severity Buttons ---
+
+                // Primary Button
+                {
+                    'text-primary-inverse': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
+                    'bg-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
+                    'border border-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain
+                },
+                // Primary Text Button
+                { 'text-primary': props.text && props.severity === null && !props.plain },
+                // Primary Outlined Button
+                { 'text-primary border border-primary': props.outlined && props.severity === null && !props.plain },
+
+                // Secondary Button
+                {
+                    'text-white dark:text-surface-900': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
+                    'bg-surface-500 dark:bg-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
+                    'border border-surface-500 dark:border-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain
+                },
+                // Secondary Text Button
+                { 'text-surface-500 dark:text-surface-300': props.text && props.severity === 'secondary' && !props.plain },
+                // Secondary Outlined Button
+                { 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/20': props.outlined && props.severity === 'secondary' && !props.plain },
+
+                // Success Button
+                {
+                    'text-white dark:text-green-900': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
+                    'bg-green-500 dark:bg-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
+                    'border border-green-500 dark:border-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain
+                },
+                // Success Text Button
+                { 'text-green-500 dark:text-green-400': props.text && props.severity === 'success' && !props.plain },
+                // Success Outlined Button
+                { 'text-green-500 border border-green-500 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain },
+
+                // Info Button
+                {
+                    'text-white dark:text-surface-900': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
+                    'bg-blue-500 dark:bg-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
+                    'border border-blue-500 dark:border-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain
+                },
+                // Info Text Button
+                { 'text-blue-500 dark:text-blue-400': props.text && props.severity === 'info' && !props.plain },
+                // Info Outlined Button
+                { 'text-blue-500 border border-blue-500 hover:bg-blue-300/20 ': props.outlined && props.severity === 'info' && !props.plain },
+
+                // Warning Button
+                {
+                    'text-white dark:text-surface-900': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
+                    'bg-orange-500 dark:bg-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
+                    'border border-orange-500 dark:border-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain
+                },
+                // Warning Text Button
+                { 'text-orange-500 dark:text-orange-400': props.text && props.severity === 'warning' && !props.plain },
+                // Warning Outlined Button
+                { 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain },
+
+                // Help Button
+                {
+                    'text-white dark:text-surface-900': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
+                    'bg-purple-500 dark:bg-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
+                    'border border-purple-500 dark:border-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain
+                },
+                // Help Text Button
+                { 'text-purple-500 dark:text-purple-400': props.text && props.severity === 'help' && !props.plain },
+                // Help Outlined Button
+                { 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain },
+
+                // Danger Button
+                {
+                    'text-white dark:text-surface-900': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
+                    'bg-red-500 dark:bg-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
+                    'border border-red-500 dark:border-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain
+                },
+                // Danger Text Button
+                { 'text-red-500 dark:text-red-400': props.text && props.severity === 'danger' && !props.plain },
+                // Danger Outlined Button
+                { 'text-red-500 border border-red-500 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain },
+                // Contrast Button
+                {
+                    'text-white dark:text-surface-900': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
+                    'bg-surface-900 dark:bg-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
+                    'border border-surface-900 dark:border-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain
+                },
+                // Contrast Text Button
+                { 'text-surface-900 dark:text-surface-0': props.text && props.severity === 'contrast' && !props.plain },
+                // Contrast Outlined Button
+                { 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': props.outlined && props.severity === 'contrast' && !props.plain },
+
+                // --- Severity Button States ---
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+
+                // Link
+                { 'focus:ring-primary': props.link },
+
+                // Plain
+                { 'hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text },
+                // Text & Outlined Button
+                { 'hover:bg-surface-300/20': props.plain && (props.text || props.outlined) },
+
+                // Primary
+                { 'hover:bg-primary-hover hover:border-primary-hover': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain },
+                { 'focus:ring-primary': props.severity === null },
+                // Text & Outlined Button
+                { 'hover:bg-primary-300/20': (props.text || props.outlined) && props.severity === null && !props.plain },
+
+                // Secondary
+                { 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain },
+                { 'focus:ring-surface-400/50 dark:focus:ring-surface-300/50': props.severity === 'secondary' },
+                // Text & Outlined Button
+                { 'hover:bg-surface-300/20': (props.text || props.outlined) && props.severity === 'secondary' && !props.plain },
+
+                // Success
+                { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': props.severity === 'success' && !props.text && !props.outlined && !props.plain },
+                { 'focus:ring-green-400/50 dark:focus:ring-green-300/50': props.severity === 'success' },
+                // Text & Outlined Button
+                { 'hover:bg-green-300/20': (props.text || props.outlined) && props.severity === 'success' && !props.plain },
+
+                // Info
+                { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': props.severity === 'info' && !props.text && !props.outlined && !props.plain },
+                { 'focus:ring-blue-400/50 dark:focus:ring-blue-300/50': props.severity === 'info' },
+                // Text & Outlined Button
+                { 'hover:bg-blue-300/20': (props.text || props.outlined) && props.severity === 'info' && !props.plain },
+
+                // Warning
+                { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': props.severity === 'warning' && !props.text && !props.outlined && !props.plain },
+                { 'focus:ring-orange-400/50 dark:focus:ring-orange-300/50': props.severity === 'warning' },
+                // Text & Outlined Button
+                { 'hover:bg-orange-300/20': (props.text || props.outlined) && props.severity === 'warning' && !props.plain },
+
+                // Help
+                { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': props.severity === 'help' && !props.text && !props.outlined && !props.plain },
+                { 'focus:ring-purple-400/50 dark:focus:ring-purple-300/50': props.severity === 'help' },
+                // Text & Outlined Button
+                { 'hover:bg-purple-300/20': (props.text || props.outlined) && props.severity === 'help' && !props.plain },
+
+                // Danger
+                { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': props.severity === 'danger' && !props.text && !props.outlined && !props.plain },
+                { 'focus:ring-red-400/50 dark:focus:ring-red-300/50': props.severity === 'danger' },
+                // Text & Outlined Button
+                { 'hover:bg-red-300/20': (props.text || props.outlined) && props.severity === 'danger' && !props.plain },
+                // Contrast
+                { 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain },
+                { 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'contrast' },
+                // Text & Outlined Button
+                { 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (props.text || props.outlined) && props.severity === 'contrast' && !props.plain },
+                // Disabled
+                { 'opacity-60 pointer-events-none cursor-default': context.disabled },
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+                parent.state.d_visible ? 'rotate-45' : 'rotate-0',
+
+                // Misc
+                'cursor-pointer overflow-hidden select-none'
+            ]
+        }),
+        label: ({ props }) => ({
+            class: [
+                'duration-200',
+                'font-bold',
+                {
+                    'hover:underline': props.link
+                },
+                { 'flex-1': props.label !== null, 'invisible w-0': props.label == null }
+            ]
+        }),
+        icon: ({ props }) => ({
+            class: [
+                'mx-0',
+                {
+                    'mr-2': props.iconPos == 'left' && props.label != null,
+                    'ml-2 order-1': props.iconPos == 'right' && props.label != null,
+                    'mb-2': props.iconPos == 'top' && props.label != null,
+                    'mt-2': props.iconPos == 'bottom' && props.label != null
+                }
+            ]
+        }),
+        loadingicon: ({ props }) => ({
+            class: [
+                'h-4 w-4',
+                'mx-0',
+                {
+                    'mr-2': props.iconPos == 'left' && props.label != null,
+                    'ml-2 order-1': props.iconPos == 'right' && props.label != null,
+                    'mb-2': props.iconPos == 'top' && props.label != null,
+                    'mt-2': props.iconPos == 'bottom' && props.label != null
+                },
+                'animate-spin'
+            ]
+        }),
+        badge: ({ props }) => ({
+            class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }]
+        })
+    },
+    menu: {
+        class: [
+            // Spacing
+            'm-0 p-0',
+
+            // Layout & Flexbox
+            'list-none flex items-center justify-center',
+
+            // Transitions
+            'transition delay-200',
+
+            // Z-Index (Positioning)
+            'z-20'
+        ]
+    },
+    menuitem: ({ props, context }) => ({
+        class: [
+            'transform transition-transform duration-200 ease-out transition-opacity duration-800',
+
+            // Conditional Appearance
+            context.hidden ? 'opacity-0 scale-0' : 'opacity-100 scale-100',
+
+            // Conditional Spacing
+            {
+                'my-1 first:mb-2': props.direction == 'up' && props.type == 'linear',
+                'my-1 first:mt-2': props.direction == 'down' && props.type == 'linear',
+                'mx-1 first:mr-2': props.direction == 'left' && props.type == 'linear',
+                'mx-1 first:ml-2': props.direction == 'right' && props.type == 'linear'
+            },
+
+            // Conditional Positioning
+            { absolute: props.type !== 'linear' }
+        ]
+    }),
+    action: {
+        class: [
+            // Flexbox & Alignment
+            'flex items-center justify-center',
+
+            // Size
+            'w-12 h-12',
+
+            // Shape
+            'rounded-full relative overflow-hidden',
+
+            // Appearance
+            'bg-surface-600 dark:bg-surface-0/80 text-white dark:text-surface-900/80',
+
+            // Hover Effects
+            'hover:bg-surface-700 dark:hover:bg-surface-200/80'
+        ]
+    },
+    mask: ({ state }) => ({
+        class: [
+            // Base Styles
+            'absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-black/40 z-0',
+
+            // Conditional Appearance
+            {
+                'opacity-0 pointer-events-none': !state.d_visible,
+                'opacity-100 transition-opacity duration-400 ease-in-out': state.d_visible
+            }
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/splitbutton/index.js b/packages/tailwindcss-presets/src/lara/splitbutton/index.js
new file mode 100644
index 000000000..c8df46280
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/splitbutton/index.js
@@ -0,0 +1,530 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Flexbox and Position
+            'inline-flex',
+            'relative',
+
+            // Shape
+            'rounded-md',
+            { 'shadow-lg': props.raised }
+        ]
+    }),
+    button: {
+        root: ({ parent, props }) => ({
+            class: [
+                'relative',
+
+                // Alignments
+                'items-center inline-flex text-center align-bottom justify-center',
+
+                // Sizes & Spacing
+                'leading-[normal]',
+                {
+                    'px-4 py-3': parent.props.size === null,
+                    'text-sm py-2 px-3': parent.props.size === 'small',
+                    'text-xl py-3 px-4': parent.props.size === 'large'
+                },
+                {
+                    'min-w-12 p-0 py-3': parent.props.label == null && parent.props.icon !== null
+                },
+
+                // Shape
+                'rounded-r-none',
+                'border-r-0',
+                { 'rounded-l-full': parent.props.rounded },
+                { 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded },
+
+                // Link Button
+                { 'text-primary-600 bg-transparent border-transparent': parent.props.link },
+
+                // Plain Button
+                { 'text-white bg-gray-500 border border-gray-500': parent.props.plain && !parent.props.outlined && !parent.props.text },
+                // Plain Text Button
+                { 'text-surface-500': parent.props.plain && parent.props.text },
+                // Plain Outlined Button
+                { 'text-surface-500 border border-gray-500': parent.props.plain && parent.props.outlined },
+
+                // Text Button
+                { 'bg-transparent border-transparent': parent.props.text && !parent.props.plain },
+
+                // Outlined Button
+                { 'bg-transparent border': parent.props.outlined && !parent.props.plain },
+
+                // --- Severity Buttons ---
+
+                // Primary Button
+                {
+                    'text-primary-inverse': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-primary': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-primary': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Primary Text Button
+                { 'text-primary': props.text && props.severity === null && !props.plain },
+                // Primary Outlined Button
+                { 'text-primary border border-primary': props.outlined && props.severity === null && !props.plain },
+
+                // Secondary Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-surface-500 dark:bg-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-surface-500 dark:border-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Secondary Text Button
+                { 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain },
+                // Secondary Outlined Button
+                { 'text-surface-500 border border-surface-500 hover:bg-surface-300/20': parent.props.outlined && parent.props.severity === 'secondary' && !parent.props.plain },
+
+                // Success Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-green-500 dark:bg-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-green-500 dark:border-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Success Text Button
+                { 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain },
+                // Success Outlined Button
+                { 'text-green-500 border border-green-500 hover:bg-green-300/20': parent.props.outlined && parent.props.severity === 'success' && !parent.props.plain },
+
+                // Info Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-blue-500 dark:bg-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-blue-500 dark:border-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Info Text Button
+                { 'text-blue-500 dark:text-blue-400': parent.props.text && parent.props.severity === 'info' && !parent.props.plain },
+                // Info Outlined Button
+                { 'text-blue-500 border border-blue-500 hover:bg-blue-300/20 ': parent.props.outlined && parent.props.severity === 'info' && !parent.props.plain },
+
+                // Warning Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-orange-500 dark:bg-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-orange-500 dark:border-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Warning Text Button
+                { 'text-orange-500 dark:text-orange-400': parent.props.text && parent.props.severity === 'warning' && !parent.props.plain },
+                // Warning Outlined Button
+                { 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': parent.props.outlined && parent.props.severity === 'warning' && !parent.props.plain },
+
+                // Help Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-purple-500 dark:bg-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-purple-500 dark:border-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Help Text Button
+                { 'text-purple-500 dark:text-purple-400': parent.props.text && parent.props.severity === 'help' && !parent.props.plain },
+                // Help Outlined Button
+                { 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': parent.props.outlined && parent.props.severity === 'help' && !parent.props.plain },
+
+                // Danger Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-red-500 dark:bg-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-red-500 dark:border-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Danger Text Button
+                { 'text-red-500 dark:text-red-400': parent.props.text && parent.props.severity === 'danger' && !parent.props.plain },
+                // Danger Outlined Button
+                { 'text-red-500 border border-red-500 hover:bg-red-300/20': parent.props.outlined && parent.props.severity === 'danger' && !parent.props.plain },
+                // Contrast Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-surface-900 dark:bg-surface-0': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-surface-900 dark:border-surface-0': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Contrast Text Button
+                { 'text-surface-900 dark:text-surface-0': props.text && props.severity === 'contrast' && !props.plain },
+                // Contrast Outlined Button
+                { 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': props.outlined && props.severity === 'contrast' && !props.plain },
+                // --- Severity Button States ---
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+
+                // Link
+                { 'focus:ring-primary/50': parent.props.link },
+
+                // Plain
+                { 'hover:bg-gray-600 hover:border-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text },
+                // Text & Outlined Button
+                { 'hover:bg-surface-300/20': parent.props.plain && (parent.props.text || parent.props.outlined) },
+
+                // Primary
+                { 'hover:bg-primary-hover hover:border-primary-hover': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-primary/50': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                // Text & Outlined Button
+                { 'hover:bg-primary-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain },
+
+                // Secondary
+                { 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-surface-400/50 dark:focus:ring-surface-300/50': parent.props.severity === 'secondary' },
+                // Text & Outlined Button
+                { 'hover:bg-surface-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'secondary' && !parent.props.plain },
+
+                // Success
+                { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-green-400/50 dark:focus:ring-green-300/50': parent.props.severity === 'success' },
+                // Text & Outlined Button
+                { 'hover:bg-green-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'success' && !parent.props.plain },
+
+                // Info
+                { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-blue-400/50 dark:focus:ring-blue-300/50': parent.props.severity === 'info' },
+                // Text & Outlined Button
+                { 'hover:bg-blue-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'info' && !parent.props.plain },
+
+                // Warning
+                { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-orange-400/50 dark:focus:ring-orange-300/50': parent.props.severity === 'warning' },
+                // Text & Outlined Button
+                { 'hover:bg-orange-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'warning' && !parent.props.plain },
+
+                // Help
+                { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-purple-400/50 dark:focus:ring-purple-300/50': parent.props.severity === 'help' },
+                // Text & Outlined Button
+                { 'hover:bg-purple-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'help' && !parent.props.plain },
+
+                // Danger
+                { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-red-400/50 dark:focus:ring-red-300/50': parent.props.severity === 'danger' },
+                // Text & Outlined Button
+                { 'hover:bg-red-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'danger' && !parent.props.plain },
+
+                // Contrast
+                { 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-surface-500 dark:focus:ring-surface-400': parent.props.severity === 'contrast' },
+                // Text & Outlined Button
+                { 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (parent.props.text || parent.props.outlined) && parent.props.severity === 'contrast' && !parent.props.plain },
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // Misc
+                'cursor-pointer overflow-hidden select-none'
+            ]
+        }),
+        icon: {
+            class: [
+                // Margins
+                'mr-2'
+            ]
+        }
+    },
+    menubutton: {
+        root: ({ parent, props }) => ({
+            class: [
+                'relative',
+                // Alignments
+                'items-center inline-flex text-center align-bottom justify-center',
+
+                // Sizes & Spacing
+                'leading-[normal]',
+                {
+                    'px-4 py-3': parent.props.size === null,
+                    'text-sm py-2 px-3': parent.props.size === 'small',
+                    'text-xl py-3 px-4': parent.props.size === 'large'
+                },
+                {
+                    'min-w-12 p-0 py-3': parent.props.label == null && parent.props.icon !== null
+                },
+
+                // Shape
+                'rounded-l-none',
+                { 'rounded-l-full': parent.props.rounded },
+                { 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded },
+
+                // Link Button
+                { 'text-primary-600 bg-transparent border-transparent': parent.props.link },
+
+                // Plain Button
+                { 'text-white bg-gray-500 border border-gray-500': parent.props.plain && !parent.props.outlined && !parent.props.text },
+                // Plain Text Button
+                { 'text-surface-500': parent.props.plain && parent.props.text },
+                // Plain Outlined Button
+                { 'text-surface-500 border border-gray-500': parent.props.plain && parent.props.outlined },
+
+                // Text Button
+                { 'bg-transparent border-transparent': parent.props.text && !parent.props.plain },
+
+                // Outlined Button
+                { 'bg-transparent border': parent.props.outlined && !parent.props.plain },
+
+                // --- Severity Buttons ---
+
+                // Primary Button
+                {
+                    'text-primary-inverse': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-primary': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-primary': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Primary Text Button
+                { 'text-primary': props.text && props.severity === null && !props.plain },
+                // Primary Outlined Button
+                { 'text-primary border border-primary': props.outlined && props.severity === null && !props.plain },
+
+                // Secondary Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-surface-500 dark:bg-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-surface-500 dark:border-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Secondary Text Button
+                { 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain },
+                // Secondary Outlined Button
+                { 'text-surface-500 border border-surface-500 hover:bg-surface-300/20': parent.props.outlined && parent.props.severity === 'secondary' && !parent.props.plain },
+
+                // Success Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-green-500 dark:bg-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-green-500 dark:border-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Success Text Button
+                { 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain },
+                // Success Outlined Button
+                { 'text-green-500 border border-green-500 hover:bg-green-300/20': parent.props.outlined && parent.props.severity === 'success' && !parent.props.plain },
+
+                // Info Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-blue-500 dark:bg-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-blue-500 dark:border-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Info Text Button
+                { 'text-blue-500 dark:text-blue-400': parent.props.text && parent.props.severity === 'info' && !parent.props.plain },
+                // Info Outlined Button
+                { 'text-blue-500 border border-blue-500 hover:bg-blue-300/20 ': parent.props.outlined && parent.props.severity === 'info' && !parent.props.plain },
+
+                // Warning Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-orange-500 dark:bg-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-orange-500 dark:border-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Warning Text Button
+                { 'text-orange-500 dark:text-orange-400': parent.props.text && parent.props.severity === 'warning' && !parent.props.plain },
+                // Warning Outlined Button
+                { 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': parent.props.outlined && parent.props.severity === 'warning' && !parent.props.plain },
+
+                // Help Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-purple-500 dark:bg-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-purple-500 dark:border-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Help Text Button
+                { 'text-purple-500 dark:text-purple-400': parent.props.text && parent.props.severity === 'help' && !parent.props.plain },
+                // Help Outlined Button
+                { 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': parent.props.outlined && parent.props.severity === 'help' && !parent.props.plain },
+
+                // Danger Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-red-500 dark:bg-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-red-500 dark:border-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Danger Text Button
+                { 'text-red-500 dark:text-red-400': parent.props.text && parent.props.severity === 'danger' && !parent.props.plain },
+                // Danger Outlined Button
+                { 'text-red-500 border border-red-500 hover:bg-red-300/20': parent.props.outlined && parent.props.severity === 'danger' && !parent.props.plain },
+                // Contrast Button
+                {
+                    'text-white dark:text-surface-900': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'bg-surface-900 dark:bg-surface-0': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                    'border border-surface-900 dark:border-surface-0': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain
+                },
+                // Contrast Text Button
+                { 'text-surface-900 dark:text-surface-0': props.text && props.severity === 'contrast' && !props.plain },
+                // Contrast Outlined Button
+                { 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': props.outlined && props.severity === 'contrast' && !props.plain },
+                // --- Severity Button States ---
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+
+                // Link
+                { 'focus:ring-primary/50': parent.props.link },
+
+                // Plain
+                { 'hover:bg-gray-600 hover:border-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text },
+                // Text & Outlined Button
+                { 'hover:bg-surface-300/20': parent.props.plain && (parent.props.text || parent.props.outlined) },
+
+                // Primary
+                { 'hover:bg-primary-hover hover:border-primary-hover': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-primary/50': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                // Text & Outlined Button
+                { 'hover:bg-primary-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain },
+
+                // Secondary
+                { 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-surface-400/50 dark:focus:ring-surface-300/50': parent.props.severity === 'secondary' },
+                // Text & Outlined Button
+                { 'hover:bg-surface-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'secondary' && !parent.props.plain },
+
+                // Success
+                { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-green-400/50 dark:focus:ring-green-300/50': parent.props.severity === 'success' },
+                // Text & Outlined Button
+                { 'hover:bg-green-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'success' && !parent.props.plain },
+
+                // Info
+                { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-blue-400/50 dark:focus:ring-blue-300/50': parent.props.severity === 'info' },
+                // Text & Outlined Button
+                { 'hover:bg-blue-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'info' && !parent.props.plain },
+
+                // Warning
+                { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-orange-400/50 dark:focus:ring-orange-300/50': parent.props.severity === 'warning' },
+                // Text & Outlined Button
+                { 'hover:bg-orange-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'warning' && !parent.props.plain },
+
+                // Help
+                { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-purple-400/50 dark:focus:ring-purple-300/50': parent.props.severity === 'help' },
+                // Text & Outlined Button
+                { 'hover:bg-purple-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'help' && !parent.props.plain },
+
+                // Danger
+                { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-red-400/50 dark:focus:ring-red-300/50': parent.props.severity === 'danger' },
+                // Text & Outlined Button
+                { 'hover:bg-red-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'danger' && !parent.props.plain },
+
+                // Contrast
+                { 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
+                { 'focus:ring-surface-500 dark:focus:ring-surface-400': parent.props.severity === 'contrast' },
+                // Text & Outlined Button
+                { 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (parent.props.text || parent.props.outlined) && parent.props.severity === 'contrast' && !parent.props.plain },
+
+                // Transitions
+                'transition duration-200 ease-in-out',
+
+                // Misc
+                'cursor-pointer overflow-hidden select-none'
+            ]
+        }),
+        label: {
+            class: ['hidden']
+        }
+    },
+    menu: {
+        root: {
+            class: [
+                // Shape
+                'rounded-md',
+
+                // Size
+                'min-w-[12rem]',
+                'py-1',
+
+                // Colors
+                'bg-surface-0 dark:bg-surface-700',
+                'border border-surface-200 dark:border-surface-700'
+            ]
+        },
+        menu: {
+            class: [
+                // Spacings and Shape
+                'list-none',
+                'm-0',
+                'p-0',
+                'outline-none'
+            ]
+        },
+        menuitem: {
+            class: [
+                // Position
+                'relative'
+            ]
+        },
+        content: ({ context }) => ({
+            class: [
+                //Shape
+                'rounded-none',
+
+                //  Colors
+                {
+                    'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+                    'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active,
+                    'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+                },
+
+                // Hover States
+                {
+                    'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.active,
+                    'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
+                },
+
+                // Transitions
+                'transition-shadow',
+                'duration-200'
+            ]
+        }),
+        action: {
+            class: [
+                'relative',
+                // Flexbox
+
+                'flex',
+                'items-center',
+
+                // Spacing
+                'py-3',
+                'px-5',
+
+                // Color
+                'text-surface-700 dark:text-white/80',
+
+                // Misc
+                'no-underline',
+                'overflow-hidden',
+                'cursor-pointer',
+                'select-none'
+            ]
+        },
+        icon: {
+            class: [
+                // Spacing
+                'mr-2',
+
+                // Color
+                'text-surface-600 dark:text-white/70'
+            ]
+        },
+        label: {
+            class: ['leading-none']
+        },
+        submenuicon: {
+            class: [
+                // Position
+                'ml-auto'
+            ]
+        },
+        submenu: {
+            class: [
+                // Size
+                'w-full sm:w-48',
+
+                // Spacing
+                'py-1',
+                'm-0',
+                'list-none',
+
+                // Shape
+                'shadow-none sm:shadow-md',
+                'border-0',
+
+                // Position
+                'static sm:absolute',
+                'z-10',
+
+                // Color
+                'bg-surface-0 dark:bg-surface-700'
+            ]
+        },
+        separator: {
+            class: 'border-t border-surface-200 dark:border-surface-600 my-1'
+        }
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/splitter/index.js b/packages/tailwindcss-presets/src/lara/splitter/index.js
new file mode 100644
index 000000000..877c80555
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/splitter/index.js
@@ -0,0 +1,61 @@
+export default {
+    root: ({ context }) => ({
+        class: [
+            // Colors
+            'bg-surface-0',
+            'dark:bg-surface-900',
+            'text-surface-700',
+            'dark:text-surface-0/80',
+
+            // Shape
+            'rounded-lg',
+
+            // Borders (Conditional)
+            { 'border border-solid border-surface-50 dark:border-surface-700': !context.nested },
+
+            // Nested
+            { 'flex grow border-0': context.nested }
+        ]
+    }),
+
+    gutter: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex',
+            'items-center',
+            'justify-center',
+            'shrink-0',
+
+            // Colors
+            'bg-surface-50',
+            'dark:bg-surface-800',
+
+            // Transitions
+            'transition-all',
+            'duration-200',
+
+            // Misc
+            {
+                'cursor-col-resize': props.layout == 'horizontal',
+                'cursor-row-resize': props.layout !== 'horizontal'
+            }
+        ]
+    }),
+    gutterhandler: ({ props }) => ({
+        class: [
+            // Colors
+            'bg-surface-100',
+            'dark:bg-surface-600',
+
+            // Transitions
+            'transition-all',
+            'duration-200',
+
+            // Sizing (Conditional)
+            {
+                'h-7': props.layout == 'horizontal',
+                'w-7 h-2': props.layout !== 'horizontal'
+            }
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/splitterpanel/index.js b/packages/tailwindcss-presets/src/lara/splitterpanel/index.js
new file mode 100644
index 000000000..6a21cd3a0
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/splitterpanel/index.js
@@ -0,0 +1,5 @@
+export default {
+    root: ({ context }) => ({
+        class: ['grow', { flex: context.nested }]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/stepper/index.js b/packages/tailwindcss-presets/src/lara/stepper/index.js
new file mode 100644
index 000000000..6bbd54e3e
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/stepper/index.js
@@ -0,0 +1,161 @@
+export default {
+    root: ({ props }) => ({
+        class: ['flex-1', props.orientation === 'vertical' ? 'flex-col' : 'flex-row']
+    }),
+    nav: {
+        class: [
+            // Flexbox
+            'flex',
+            'justify-between',
+            'items-center',
+
+            // Spacing
+            'm-0',
+            'p-0',
+
+            // Positioning
+            'relative',
+
+            // Lists
+            'list-none',
+
+            // Overflow
+            'overflow-x-auto'
+        ]
+    },
+    stepperpanel: {
+        panel: ({ context, parent }) => ({
+            class: [context.active ? 'flex-1' : '', parent.props.orientation === 'vertical' ? 'flex flex-col flex-initial' : '']
+        }),
+        header: ({ parent, context }) => ({
+            class: [
+                // Position
+                'relative',
+
+                // Flexbox
+                'flex',
+                'items-center',
+                context.last ? 'flex-initial' : 'flex-1',
+                parent.props.orientation === 'vertical' ? 'flex-initial' : '',
+
+                // Spacing
+                'p-2'
+            ]
+        }),
+        action: {
+            class: [
+                // Borders
+                'border-0',
+                'border-none',
+
+                // Flexbox
+                'inline-flex',
+                'items-center',
+
+                // Text
+                'text-decoration-none',
+
+                // Transitions
+                'transition',
+                'transition-shadow',
+                'duration-200',
+
+                // Shape
+                'rounded-md',
+
+                // Backgrounds
+                'bg-transparent',
+
+                // Focus
+                'outline-none'
+            ]
+        },
+        number: ({ context }) => ({
+            class: [
+                // Flexbox
+                'flex',
+                'items-center',
+                'justify-center',
+
+                // Colors (Conditional)
+                context.active ? 'bg-primary text-primary-inverse' : 'border border-surface-200 dark:border-surface-700 text-surface-900 dark:text-surface-0', // Adjust colors as needed
+
+                // Size and Shape
+                'min-w-[2rem]',
+                'h-[2rem]',
+                'line-height-[2rem]',
+                'rounded-full',
+
+                // Text
+                'text-lg',
+
+                // Borders
+                context.active ? 'border-0 border-none' : 'border-solid border-2',
+
+                // Transitions
+                'transition',
+                'transition-colors',
+                'transition-shadow',
+                'duration-200'
+            ]
+        }),
+        title: ({ context }) => ({
+            class: [
+                // Layout
+                'block',
+                'whitespace-nowrap',
+                'overflow-hidden',
+                'text-ellipsis',
+                'max-w-full',
+
+                // Spacing
+                'ml-2',
+
+                // Text
+                context.active ? 'text-surface-900 dark:text-surface-0' : 'text-surface-700 dark:text-surface-0/80',
+                'font-bold',
+
+                // Transitions
+                'transition',
+                'transition-colors',
+                'transition-shadow',
+                'duration-200'
+            ]
+        }),
+        separator: ({ context, state, parent }) => ({
+            class: [
+                // Colors (Conditional for active step)
+                state.d_activeStep <= context.index ? 'bg-surface-200 dark:bg-surface-700' : 'bg-primary',
+
+                // Conditional for Vertical Orientation
+                parent.props.orientation === 'vertical' ? ['flex-none', 'w-[2px]', 'h-auto', 'ml-[calc(1.29rem+2px)]'] : ['flex-1', 'w-full', 'h-[2px]', 'ml-4'],
+
+                // Transitions
+                'transition-shadow',
+                'duration-200'
+            ]
+        }),
+        transition: {
+            class: ['flex flex-1', 'bg-surface-0 dark:bg-surface-800', 'text-surface-900 dark:text-surface-0'],
+            enterFromClass: 'max-h-0',
+            enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+            enterToClass: 'max-h-[1000px]',
+            leaveFromClass: 'max-h-[1000px]',
+            leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+            leaveToClass: 'max-h-0'
+        },
+        content: ({ parent }) => ({
+            class: [parent.props.orientation === 'vertical' ? 'w-full pl-4' : '']
+        })
+    },
+    panelcontainer: {
+        class: [
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-900 dark:text-surface-0',
+
+            // Spacing
+            'p-4'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/steps/index.js b/packages/tailwindcss-presets/src/lara/steps/index.js
new file mode 100644
index 000000000..7cf6221af
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/steps/index.js
@@ -0,0 +1,111 @@
+export default {
+    root: {
+        class: 'relative'
+    },
+    menu: {
+        class: 'p-0 m-0 list-none flex'
+    },
+    menuitem: {
+        class: [
+            // Flexbox and Position
+            'relative',
+            'flex',
+            'justify-center',
+            'flex-1',
+            'overflow-hidden',
+
+            // Before
+            'before:border-t',
+            'before:border-surface-200',
+            'before:dark:border-surface-700',
+            'before:w-full',
+            'before:absolute',
+            'before:top-1/2',
+            'before:left-0',
+            'before:transform',
+            'before:-mt-4'
+        ]
+    },
+    action: ({ props }) => ({
+        class: [
+            // Flexbox
+            'inline-flex items-center',
+            'flex-col',
+
+            // Transitions and Shape
+            'transition-shadow',
+            'rounded-md',
+
+            // Colors
+            'bg-surface-0',
+            'dark:bg-transparent',
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring',
+            'focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Misc
+            'overflow-hidden',
+            { 'cursor-pointer': !props.readonly }
+        ]
+    }),
+    step: ({ context, props }) => ({
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+
+            // Position
+            'z-20',
+
+            // Shape
+            'rounded-full',
+            'border',
+
+            // Size
+            'w-[2rem]',
+            'h-[2rem]',
+            'text-sm',
+            'leading-[2rem]',
+
+            // Colors
+            {
+                'text-surface-400 dark:text-white/60': !context.active,
+                'border-surface-100 dark:border-surface-700': !context.active,
+                'bg-surface-0 dark:bg-surface-800': !context.active,
+                'bg-primary': context.active,
+                'border-primary': context.active,
+                'text-primary-inverse': context.active
+            },
+
+            // States
+            {
+                'hover:border-surface-300 dark:hover:border-surface-500': !context.active && !props.readonly
+            },
+
+            // Transition
+            'transition-colors duration-200 ease-in-out'
+        ]
+    }),
+    label: ({ context }) => ({
+        class: [
+            // Font
+            'leading-[normal]',
+            { 'font-bold': context.active },
+
+            // Display
+            'block',
+
+            // Spacing
+            'mt-2',
+
+            // Colors
+            { 'text-surface-400 dark:text-white/60': !context.active, 'text-surface-800 dark:text-white/80': context.active },
+
+            // Text and Overflow
+            'whitespace-nowrap',
+            'overflow-hidden',
+            'overflow-ellipsis',
+            'max-w-full'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/tabmenu/index.js b/packages/tailwindcss-presets/src/lara/tabmenu/index.js
new file mode 100644
index 000000000..e3b8bb350
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/tabmenu/index.js
@@ -0,0 +1,73 @@
+export default {
+    root: {
+        class: 'overflow-x-auto'
+    },
+    menu: {
+        class: [
+            // Flexbox
+            'flex flex-1',
+
+            // Spacing
+            'list-none',
+            'p-0 m-0',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'border-b-2 border-surface-200 dark:border-surface-700',
+            'text-surface-900 dark:text-surface-0/80'
+        ]
+    },
+    menuitem: {
+        class: 'mr-0'
+    },
+    action: ({ context, state }) => ({
+        class: [
+            'relative',
+
+            // Font
+            'font-bold',
+
+            // Flexbox and Alignment
+            'flex items-center',
+
+            // Spacing
+            'p-5',
+            '-mb-[2px]',
+
+            // Shape
+            'border-b-2',
+            'rounded-t-md',
+
+            // Colors and Conditions
+            {
+                'border-surface-200 dark:border-surface-700': state.d_activeIndex !== context.index,
+                'bg-surface-0 dark:bg-surface-800': state.d_activeIndex !== context.index,
+                'text-surface-700 dark:text-surface-0/80': state.d_activeIndex !== context.index,
+
+                'bg-surface-0 dark:bg-surface-800': state.d_activeIndex === context.index,
+                'border-primary': state.d_activeIndex === context.index,
+                'text-primary': state.d_activeIndex === context.index
+            },
+
+            // States
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset',
+            'focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+            {
+                'hover:bg-surface-0 dark:hover:bg-surface-800/80': state.d_activeIndex !== context.index,
+                'hover:border-surface-400 dark:hover:border-primary-400': state.d_activeIndex !== context.index,
+                'hover:text-surface-900 dark:hover:text-surface-0': state.d_activeIndex !== context.index
+            },
+
+            // Transitions
+            'transition-all duration-200',
+
+            // Misc
+            'cursor-pointer select-none text-decoration-none',
+            'overflow-hidden',
+            'user-select-none'
+        ]
+    }),
+    icon: {
+        class: 'mr-2'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/tabview/index.js b/packages/tailwindcss-presets/src/lara/tabview/index.js
new file mode 100644
index 000000000..1f06544f2
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/tabview/index.js
@@ -0,0 +1,156 @@
+export default {
+    navContainer: ({ props }) => ({
+        class: [
+            // Position
+            'relative',
+
+            // Misc
+            { 'overflow-hidden': props.scrollable }
+        ]
+    }),
+    navContent: {
+        class: [
+            // Overflow and Scrolling
+            'overflow-y-hidden overscroll-contain',
+            'overscroll-auto',
+            'scroll-smooth',
+            '[&::-webkit-scrollbar]:hidden'
+        ]
+    },
+    previousButton: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Position
+            '!absolute',
+            'top-0 left-0',
+            'z-20',
+
+            // Size and Shape
+            'h-full w-12',
+            'rounded-none',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-primary',
+            'shadow-md'
+        ]
+    },
+    nextButton: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Position
+            '!absolute',
+            'top-0 right-0',
+            'z-20',
+
+            // Size and Shape
+            'h-full w-12',
+            'rounded-none',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-primary',
+            'shadow-md'
+        ]
+    },
+    nav: {
+        class: [
+            // Flexbox
+            'flex flex-1',
+
+            // Spacing
+            'list-none',
+            'p-0 m-0',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'border-b-2 border-surface-200 dark:border-surface-700',
+            'text-surface-900 dark:text-surface-0/80'
+        ]
+    },
+    tabpanel: {
+        header: ({ props }) => ({
+            class: [
+                // Spacing
+                'mr-0',
+
+                // Misc
+                {
+                    'opacity-60 cursor-default user-select-none select-none pointer-events-none': props?.disabled
+                }
+            ]
+        }),
+        headerAction: ({ parent, context }) => ({
+            class: [
+                'relative',
+
+                // Font
+                'font-bold',
+
+                // Flexbox and Alignment
+                'flex items-center',
+
+                // Spacing
+                'p-5',
+                '-mb-[2px]',
+
+                // Shape
+                'border-b-2',
+                'rounded-t-md',
+
+                // Colors and Conditions
+                {
+                    'border-surface-200 dark:border-surface-700': parent.state.d_activeIndex !== context.index,
+                    'bg-surface-0 dark:bg-surface-800': parent.state.d_activeIndex !== context.index,
+                    'text-surface-700 dark:text-surface-0/80': parent.state.d_activeIndex !== context.index,
+
+                    'bg-surface-0 dark:bg-surface-800': parent.state.d_activeIndex === context.index,
+                    'border-primary': parent.state.d_activeIndex === context.index,
+                    'text-primary': parent.state.d_activeIndex === context.index
+                },
+
+                // States
+                'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset',
+                'focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+                {
+                    'hover:bg-surface-0 dark:hover:bg-surface-800/80': parent.state.d_activeIndex !== context.index,
+                    'hover:border-surface-400 dark:hover:border-primary-400': parent.state.d_activeIndex !== context.index,
+                    'hover:text-surface-900 dark:hover:text-surface-0': parent.state.d_activeIndex !== context.index
+                },
+
+                // Transitions
+                'transition-all duration-200',
+
+                // Misc
+                'cursor-pointer select-none text-decoration-none',
+                'overflow-hidden',
+                'user-select-none'
+            ]
+        }),
+        headerTitle: {
+            class: [
+                // Text
+                'leading-none',
+                'whitespace-nowrap'
+            ]
+        },
+        content: {
+            class: [
+                // Spacing
+                'p-5',
+
+                // Shape
+                'rounded-b-md',
+
+                // Colors
+                'bg-surface-0 dark:bg-surface-800',
+                'text-surface-700 dark:text-surface-0/80',
+                'border-0'
+            ]
+        }
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/tag/index.js b/packages/tailwindcss-presets/src/lara/tag/index.js
new file mode 100644
index 000000000..cbb5bc702
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/tag/index.js
@@ -0,0 +1,36 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            //Font
+            'text-xs font-bold',
+
+            //Alignments
+            'inline-flex items-center justify-center',
+
+            //Spacing
+            'px-2 py-1',
+
+            //Shape
+            {
+                'rounded-md': !props.rounded,
+                'rounded-full': props.rounded
+            },
+
+            //Colors
+            'text-primary-inverse',
+            {
+                'bg-primary dark:bg-primary': props.severity == null || props.severity == 'primary',
+                'bg-green-500 dark:bg-green-400': props.severity == 'success',
+                'bg-blue-500 dark:bg-blue-400': props.severity == 'info',
+                'bg-orange-500 dark:bg-orange-400': props.severity == 'warning',
+                'bg-red-500 dark:bg-red-400': props.severity == 'danger'
+            }
+        ]
+    }),
+    value: {
+        class: 'leading-normal'
+    },
+    icon: {
+        class: 'mr-1 text-sm'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/terminal/index.js b/packages/tailwindcss-presets/src/lara/terminal/index.js
new file mode 100644
index 000000000..3fbd652b5
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/terminal/index.js
@@ -0,0 +1,60 @@
+export default {
+    root: {
+        class: [
+            // Spacing
+            'p-5',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-900 text-white',
+            'border border-surface-700',
+
+            // Sizing & Overflow
+            'h-72 overflow-auto'
+        ]
+    },
+    container: {
+        class: [
+            // Flexbox
+            'flex items-center'
+        ]
+    },
+    prompt: {
+        class: [
+            // Color
+            'text-surface-400'
+        ]
+    },
+    response: {
+        class: [
+            // Color
+            'text-primary-400'
+        ]
+    },
+    command: {
+        class: [
+            // Color
+            'text-primary-400'
+        ]
+    },
+    commandtext: {
+        class: [
+            // Flexbox
+            'flex-1 shrink grow-0',
+
+            // Shape
+            'border-0',
+
+            // Spacing
+            'p-0',
+
+            // Color
+            'bg-transparent text-inherit',
+
+            // Outline
+            'outline-none'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/textarea/index.js b/packages/tailwindcss-presets/src/lara/textarea/index.js
new file mode 100644
index 000000000..c449cc2ae
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/textarea/index.js
@@ -0,0 +1,39 @@
+export default {
+    root: ({ context, props, parent }) => ({
+        class: [
+            // Font
+            'leading-[normal]',
+
+            // Spacing
+            'm-0',
+            'p-3',
+
+            // Shape
+            'rounded-md',
+
+            // Colors
+            'text-surface-600 dark:text-surface-200',
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+            'bg-surface-0 dark:bg-surface-900',
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'hover:border-primary': !context.disabled && !props.invalid,
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50': !context.disabled,
+                'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+            },
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },
+
+            // Misc
+            'appearance-none',
+            'transition-colors duration-200'
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/tieredmenu/index.js b/packages/tailwindcss-presets/src/lara/tieredmenu/index.js
new file mode 100644
index 000000000..17fb00b26
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/tieredmenu/index.js
@@ -0,0 +1,119 @@
+export default {
+    root: {
+        class: [
+            // Shape
+            'rounded-md',
+
+            // Size
+            'min-w-[12rem]',
+            'py-1',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-700',
+            'border border-surface-200 dark:border-surface-700'
+        ]
+    },
+    menu: {
+        class: [
+            // Spacings and Shape
+            'list-none',
+            'm-0',
+            'p-0',
+            'outline-none'
+        ]
+    },
+    menuitem: {
+        class: [
+            // Position
+            'relative'
+        ]
+    },
+    content: ({ context }) => ({
+        class: [
+            //Shape
+            'rounded-none',
+
+            //  Colors
+            {
+                'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+                'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active,
+                'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+            },
+
+            // Hover States
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.active,
+                'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
+            },
+
+            // Transitions
+            'transition-shadow',
+            'duration-200'
+        ]
+    }),
+    action: {
+        class: [
+            'relative',
+            // Flexbox
+
+            'flex',
+            'items-center',
+
+            // Spacing
+            'py-3',
+            'px-5',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+
+            // Misc
+            'no-underline',
+            'overflow-hidden',
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    icon: {
+        class: [
+            // Spacing
+            'mr-2',
+
+            // Color
+            'text-surface-600 dark:text-white/70'
+        ]
+    },
+    label: {
+        class: ['leading-none']
+    },
+    submenuicon: {
+        class: [
+            // Position
+            'ml-auto'
+        ]
+    },
+    submenu: {
+        class: [
+            // Size
+            'w-full sm:w-48',
+
+            // Spacing
+            'py-1',
+            'm-0',
+            'list-none',
+
+            // Shape
+            'shadow-none sm:shadow-md',
+            'border-0',
+
+            // Position
+            'static sm:absolute',
+            'z-10',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-700'
+        ]
+    },
+    separator: {
+        class: 'border-t border-surface-200 dark:border-surface-600 my-1'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/timeline/index.js b/packages/tailwindcss-presets/src/lara/timeline/index.js
new file mode 100644
index 000000000..6fde2a59a
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/timeline/index.js
@@ -0,0 +1,81 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'flex grow',
+            {
+                'flex-col': props.layout === 'vertical',
+                'flex-row flex-1': props.layout === 'horizontal'
+            }
+        ]
+    }),
+    event: ({ props, context }) => ({
+        class: [
+            'flex relative min-h-[70px]',
+            {
+                'flex-row-reverse': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1),
+                'flex-col flex-1': props.layout === 'horizontal',
+                'flex-col-reverse ': props.align === 'bottom' || (props.layout === 'horizontal' && props.align === 'alternate' && context.index % 2 === 1)
+            }
+        ]
+    }),
+    opposite: ({ props, context }) => ({
+        class: [
+            'flex-1',
+            {
+                'px-4': props.layout === 'vertical',
+                'py-4': props.layout === 'horizontal'
+            },
+            {
+                'text-right': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
+                'text-left': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
+            }
+        ]
+    }),
+    separator: ({ props }) => ({
+        class: [
+            'flex items-center flex-initial',
+            {
+                'flex-col': props.layout === 'vertical',
+                'flex-row': props.layout === 'horizontal'
+            }
+        ]
+    }),
+    marker: {
+        class: [
+            // Display & Flexbox
+            'flex self-baseline',
+
+            // Size
+            'w-4 h-4',
+
+            // Appearance
+            'rounded-full border-2 border-primary bg-surface-0 dark:bg-surface-900/40'
+        ]
+    },
+    connector: ({ props }) => ({
+        class: [
+            'grow bg-surface-300 dark:bg-surface-700',
+            {
+                'w-[2px]': props.layout === 'vertical',
+                'w-full h-[2px]': props.layout === 'horizontal'
+            }
+        ]
+    }),
+    content: ({ props, context }) => ({
+        class: [
+            'flex-1',
+            {
+                'px-4': props.layout === 'vertical',
+                'py-4': props.layout === 'horizontal'
+            },
+            {
+                'text-left': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
+                'text-right': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
+            },
+            {
+                'min-h-0': props.layout === 'vertical' && context.index === context.count - 1,
+                'grow-0': props.layout === 'horizontal' && context.index === context.count - 1
+            }
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/toast/index.js b/packages/tailwindcss-presets/src/lara/toast/index.js
new file mode 100644
index 000000000..01a4e07b4
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/toast/index.js
@@ -0,0 +1,102 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            //Size and Shape
+            'w-96 rounded-md',
+
+            // Positioning
+            { '-translate-x-2/4': props.position == 'top-center' || props.position == 'bottom-center' }
+        ]
+    }),
+    container: ({ props }) => ({
+        class: [
+            'my-4 rounded-md w-full',
+            'border-solid border-0 border-l-[6px]',
+            'backdrop-blur-[10px] shadow-md',
+
+            // Colors
+            {
+                'bg-blue-100/70 dark:bg-blue-500/20': props.message.severity == 'info',
+                'bg-green-100/70 dark:bg-green-500/20': props.message.severity == 'success',
+                'bg-orange-100/70 dark:bg-orange-500/20': props.message.severity == 'warn',
+                'bg-red-100/70 dark:bg-red-500/20': props.message.severity == 'error'
+            },
+            {
+                'border-blue-500 dark:border-blue-400': props.message.severity == 'info',
+                'border-green-500 dark:border-green-400': props.message.severity == 'success',
+                'border-orange-500 dark:border-orange-400': props.message.severity == 'warn',
+                'border-red-500 dark:border-red-400': props.message.severity == 'error'
+            },
+            {
+                'text-blue-700 dark:text-blue-300': props.message.severity == 'info',
+                'text-green-700 dark:text-green-300': props.message.severity == 'success',
+                'text-orange-700 dark:text-orange-300': props.message.severity == 'warn',
+                'text-red-700 dark:text-red-300': props.message.severity == 'error'
+            }
+        ]
+    }),
+    content: ({ props }) => ({
+        class: [
+          'flex p-4',
+          {
+            'items-start': props.message.summary,
+            'items-center': !props.message.summary,
+          },
+        ],
+    }),
+    icon: {
+        class: [
+            // Sizing and Spacing
+            'w-6 h-6',
+            'text-lg leading-none mr-2 shrink-0'
+        ]
+    },
+    text: {
+        class: [
+            // Font and Text
+            'text-base leading-none',
+            'ml-2',
+            'flex-1'
+        ]
+    },
+    summary: {
+        class: 'font-bold block'
+    },
+    detail: ({ props }) => ({
+        class: ['block', { 'mt-2': props.message.summary }],
+    }),
+    closebutton: {
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+
+            // Size
+            'w-8 h-8',
+
+            // Spacing and Misc
+            'ml-auto  relative',
+
+            // Shape
+            'rounded-full',
+
+            // Colors
+            'bg-transparent',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // States
+            'hover:bg-surface-0/50 dark:hover:bg-surface-0/10',
+
+            // Misc
+            'overflow-hidden'
+        ]
+    },
+    transition: {
+        enterFromClass: 'opacity-0 translate-y-2/4',
+        enterActiveClass: 'transition-[transform,opacity] duration-300',
+        leaveFromClass: 'max-h-[1000px]',
+        leaveActiveClass: '!transition-[max-height_.45s_cubic-bezier(0,1,0,1),opacity_.3s,margin-bottom_.3s] overflow-hidden',
+        leaveToClass: 'max-h-0 opacity-0 mb-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/togglebutton/index.js b/packages/tailwindcss-presets/src/lara/togglebutton/index.js
new file mode 100644
index 000000000..25277f5e6
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/togglebutton/index.js
@@ -0,0 +1,91 @@
+export default {
+    root: {
+        class: [
+            'relative',
+
+            // Alignment
+            'inline-flex',
+            'align-bottom',
+
+            // Misc
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    box: ({ props }) => ({
+        class: [
+            // Alignments
+            'items-center inline-flex flex-1 text-center align-bottom justify-center',
+
+            // Sizes & Spacing
+            'px-4 py-3 leading-none',
+
+            // Shapes
+            'rounded-md border',
+
+            // Colors
+            {
+                'bg-surface-0 dark:bg-surface-900 ': !props.modelValue,
+                'border-surface-200 dark:border-surface-700 ': !props.modelValue && !props.invalid,
+                'text-surface-700 dark:text-white/80': !props.modelValue,
+                'bg-primary border-primary text-primary-inverse': props.modelValue
+            },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'peer-hover:bg-surface-50 dark:peer-hover:bg-surface-800/80 peer-hover:border-surface-200 dark:peer-hover:bg-surface-700 peer-hover:text-surface-700 dark:peer-hover:text-white/80': !props.modelValue && !props.invalid,
+                'peer-hover:bg-primary-hover peer-hover:border-primary-hover': props.modelValue,
+                'peer-focus-visible:ring peer-focus-visible:ring-primary-400/50 dark:peer-focus-visible:ring-primary-300/50': !props.disabled
+            },
+
+            // Transitions
+            'transition-all duration-200',
+
+            // Misc
+            { 'cursor-pointer': !props.disabled, 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    label: {
+        class: 'font-bold text-center w-full'
+    },
+    input: {
+        class: [
+            'peer',
+
+            // Size
+            'w-full ',
+            'h-full',
+
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-10',
+
+            // Spacing
+            'p-0',
+            'm-0',
+
+            // Shape
+            'opacity-0',
+            'rounded-md',
+            'outline-none',
+            'border border-surface-200 dark:border-surface-700',
+
+            // Misc
+            'appearance-none',
+            'cursor-pointer'
+        ]
+    },
+    icon: ({ props }) => ({
+        class: [
+            ' mr-2',
+            {
+                'text-surface-600 dark:text-white/70': !props.modelValue,
+                'text-white dark:text-surface-900': props.modelValue
+            }
+        ]
+    })
+};
diff --git a/packages/tailwindcss-presets/src/lara/toolbar/index.js b/packages/tailwindcss-presets/src/lara/toolbar/index.js
new file mode 100644
index 000000000..4232baad4
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/toolbar/index.js
@@ -0,0 +1,28 @@
+export default {
+    root: {
+        class: [
+            // Flex & Alignment
+            'flex items-center justify-between flex-wrap',
+            'gap-2',
+
+            // Spacing
+            'p-5',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-50 dark:bg-surface-800',
+            'border border-surface-200 dark:border-surface-700'
+        ]
+    },
+    start: {
+        class: 'flex items-center'
+    },
+    center: {
+        class: 'flex items-center'
+    },
+    end: {
+        class: 'flex items-center'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/tooltip/index.js b/packages/tailwindcss-presets/src/lara/tooltip/index.js
new file mode 100644
index 000000000..2856bf3b6
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/tooltip/index.js
@@ -0,0 +1,46 @@
+export default {
+    root: ({ context, props }) => ({
+        class: [
+            // Position and Shadows
+            'absolute',
+            'shadow-md',
+            'p-fadein',
+            // Spacing
+            {
+                'py-0 px-1': context?.right || context?.left || (!context?.right && !context?.left && !context?.top && !context?.bottom),
+                'py-1 px-0': context?.top || context?.bottom
+            }
+        ]
+    }),
+    arrow: ({ context, props }) => ({
+        class: [
+            // Position
+
+            'absolute',
+
+            // Size
+            'w-0',
+            'h-0',
+
+            // Shape
+            'border-transparent',
+            'border-solid',
+            {
+                'border-y-[0.25rem] border-r-[0.25rem] border-l-0 border-r-surface-600': context?.right || (!context?.right && !context?.left && !context?.top && !context?.bottom),
+                'border-y-[0.25rem] border-l-[0.25rem] border-r-0 border-l-surface-600': context?.left,
+                'border-x-[0.25rem] border-t-[0.25rem] border-b-0 border-t-surface-600': context?.top,
+                'border-x-[0.25rem] border-b-[0.25rem] border-t-0 border-b-surface-600': context?.bottom
+            },
+
+            // Spacing
+            {
+                '-mt-1 ': context?.right || (!context?.right && !context?.left && !context?.top && !context?.bottom),
+                '-mt-1': context?.left,
+                '-ml-1': context?.top || context?.bottom
+            }
+        ]
+    }),
+    text: {
+        class: ['p-3', 'bg-surface-600 dark:bg-surface-700', 'text-white', 'leading-none', 'rounded-md', 'whitespace-pre-line', 'break-words']
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/tree/index.js b/packages/tailwindcss-presets/src/lara/tree/index.js
new file mode 100644
index 000000000..75ff42942
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/tree/index.js
@@ -0,0 +1,258 @@
+export default {
+    root: {
+        class: [
+            // Space
+            'p-5',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-white/80',
+            'border border-solid border-surface-200 dark:border-surface-700'
+        ]
+    },
+    wrapper: {
+        class: ['overflow-auto']
+    },
+    container: {
+        class: [
+            // Spacing
+            'm-0 p-0',
+
+            // Misc
+            'list-none overflow-auto'
+        ]
+    },
+    node: {
+        class: ['p-1', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset focus:ring-primary-400/50 dark:focus:ring-primary-300/50']
+    },
+    content: ({ context, props }) => ({
+        class: [
+            // Flex and Alignment
+            'flex items-center',
+
+            // Shape
+            'rounded-md',
+
+            // Spacing
+            'p-2',
+
+            // Colors
+            'text-surface-600 dark:text-white/70',
+            { 'bg-primary-highlight text-primary-highlight-inverse': context.selected },
+
+            // States
+            { 'hover:bg-surface-50 dark:hover:bg-surface-700/40': (props.selectionMode == 'single' || props.selectionMode == 'multiple') && !context.selected },
+
+            // Transition
+            'transition-shadow duration-200',
+
+            { 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' }
+        ]
+    }),
+    toggler: ({ context }) => ({
+        class: [
+            // Flex and Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full',
+
+            // Size
+            'w-8 h-8',
+
+            // Spacing
+            'mr-2',
+
+            // Colors
+            'bg-transparent',
+            {
+                'text-surface-500 dark:text-white': !context.selected,
+                'text-primary-600 dark:text-white': context.selected,
+                invisible: context.leaf
+            },
+
+            // States
+            'hover:bg-surface-200/20 dark:hover:bg-surface-500/20',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'cursor-pointer select-none'
+        ]
+    }),
+    nodeCheckbox: ({ props, context, instance }) => ({
+        root: {
+            class: [
+                'relative',
+
+                // Alignment
+                'inline-flex',
+                'align-bottom',
+
+                // Size
+                'w-6',
+                'h-6',
+
+                // Spacing
+                'mr-2',
+
+                // Misc
+                'cursor-pointer',
+                'select-none'
+            ]
+        },
+        box: {
+            class: [
+                // Alignment
+                'flex',
+                'items-center',
+                'justify-center',
+
+                // Size
+                'w-6',
+                'h-6',
+
+                // Shape
+                'rounded-md',
+                'border-2',
+
+                // Colors
+                {
+                    'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked,
+                    'border-primary bg-primary': context.checked
+                },
+
+                // States
+                {
+                    'peer-hover:border-primary': !props.disabled && !context.checked,
+                    'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                    'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                },
+
+                // Transitions
+                'transition-colors',
+                'duration-200'
+            ]
+        },
+        input: {
+            class: [
+                'peer',
+
+                // Size
+                'w-full ',
+                'h-full',
+
+                // Position
+                'absolute',
+                'top-0 left-0',
+                'z-10',
+
+                // Spacing
+                'p-0',
+                'm-0',
+
+                // Shape
+                'opacity-0',
+                'rounded-md',
+                'outline-none',
+                'border-2 border-surface-200 dark:border-surface-700',
+
+                // Misc
+                'appearance-none',
+                'cursor-pointer'
+            ]
+        },
+        icon: {
+            class: [
+                // Font
+                'text-base leading-none',
+
+                // Size
+                'w-4',
+                'h-4',
+
+                // Colors
+                {
+                    'text-white dark:text-surface-900': !instance.partialChecked,
+                    'text-gray dark:text-white': instance.partialChecked
+                },
+
+                // Transitions
+                'transition-all',
+                'duration-200'
+            ]
+        }
+    }),
+    nodeicon: {
+        class: [
+            // Space
+            'mr-2',
+
+            // Color
+            'text-surface-600 dark:text-white/70'
+        ]
+    },
+    subgroup: {
+        class: ['m-0 list-none p-0 pl-2 mt-1']
+    },
+    filtercontainer: {
+        class: [
+            'relative block',
+
+            // Space
+            'mb-2',
+
+            // Size
+            'w-full'
+        ]
+    },
+    input: {
+        class: [
+            'relative',
+            // Font
+            'leading-none',
+
+            // Spacing
+            'm-0',
+            'p-3 pr-10',
+
+            // Size
+            'w-full',
+
+            // Shape
+            'rounded-md',
+
+            // Colors
+            'text-surface-600 dark:text-surface-200',
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+            'bg-surface-0 dark:bg-surface-900',
+            'border border-surface-300 dark:border-surface-600',
+
+            // States
+            'hover:border-primary',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50',
+
+            // Transition & Misc
+            'appearance-none',
+            'transition-colors duration-200'
+        ]
+    },
+    loadingicon: {
+        class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin']
+    },
+    searchicon: {
+        class: [
+            // Position
+            'absolute top-1/2 -mt-2 right-3',
+
+            // Color
+            'text-surface-600 dark:hover:text-white/70'
+        ]
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/treeselect/index.js b/packages/tailwindcss-presets/src/lara/treeselect/index.js
new file mode 100644
index 000000000..fb5e9748e
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/treeselect/index.js
@@ -0,0 +1,352 @@
+export default {
+    root: ({ props, state }) => ({
+        class: [
+            // Display and Position
+            'inline-flex',
+            'relative',
+
+            // Shape
+            'rounded-md',
+
+            // Color and Background
+            'bg-surface-0 dark:bg-surface-900',
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // Transitions
+            'transition-all',
+            'duration-200',
+
+            // States
+            { 'hover:border-primary': !props.invalid },
+            { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused },
+
+            // Misc
+            'cursor-pointer',
+            'select-none',
+            { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled }
+        ]
+    }),
+    labelContainer: {
+        class: ['overflow-hidden flex flex-auto cursor-pointer']
+    },
+    label: {
+        class: [
+            'block leading-[normal]',
+
+            // Space
+            'p-3',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis'
+        ]
+    },
+    trigger: {
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+            'shrink-0',
+
+            // Color and Background
+            'bg-transparent',
+            'text-surface-500',
+
+            // Size
+            'w-12',
+
+            // Shape
+            'rounded-tr-md',
+            'rounded-br-md'
+        ]
+    },
+    panel: {
+        class: [
+            // Position
+            'absolute top-0 left-0',
+
+            // Shape
+            'border-0 dark:border',
+            'rounded-md',
+            'shadow-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-800 dark:text-white/80',
+            'dark:border-surface-700'
+        ]
+    },
+    wrapper: {
+        class: [
+            // Sizing
+            'max-h-[200px]',
+
+            // Misc
+            'overflow-auto'
+        ]
+    },
+    tree: {
+        root: {
+            class: [
+                // Space
+                'p-5'
+            ]
+        },
+        wrapper: {
+            class: ['overflow-auto']
+        },
+        container: {
+            class: [
+                // Spacing
+                'm-0 p-0',
+
+                // Misc
+                'list-none overflow-auto'
+            ]
+        },
+        node: {
+            class: ['p-1', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset focus:ring-primary-400/50 dark:focus:ring-primary-300/50']
+        },
+        content: ({ context, props }) => ({
+            class: [
+                // Flex and Alignment
+                'flex items-center',
+
+                // Shape
+                'rounded-md',
+
+                // Spacing
+                'p-2',
+
+                // Colors
+                'text-surface-600 dark:text-white/70',
+                { 'bg-primary-highlight text-primary-highlight-inverse': context.selected },
+
+                // States
+                { 'hover:bg-surface-50 dark:hover:bg-surface-700/40': (props.selectionMode == 'single' || props.selectionMode == 'multiple') && !context.selected },
+
+                // Transition
+                'transition-shadow duration-200',
+
+                { 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' }
+            ]
+        }),
+        toggler: ({ context }) => ({
+            class: [
+                // Flex and Alignment
+                'inline-flex items-center justify-center',
+
+                // Shape
+                'border-0 rounded-full',
+
+                // Size
+                'w-8 h-8',
+
+                // Spacing
+                'mr-2',
+
+                // Colors
+                'bg-transparent',
+                {
+                    'text-surface-500 dark:text-white': !context.selected,
+                    'text-primary-600 dark:text-white': context.selected,
+                    invisible: context.leaf
+                },
+
+                // States
+                'hover:bg-surface-200/20 dark:hover:bg-surface-500/20',
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+                // Transition
+                'transition duration-200',
+
+                // Misc
+                'cursor-pointer select-none'
+            ]
+        }),
+        nodeCheckbox: ({ props, context, instance }) => ({
+            root: {
+                class: [
+                    'relative',
+
+                    // Alignment
+                    'inline-flex',
+                    'align-bottom',
+
+                    // Size
+                    'w-6',
+                    'h-6',
+
+                    // Spacing
+                    'mr-2',
+
+                    // Misc
+                    'cursor-pointer',
+                    'select-none'
+                ]
+            },
+            box: {
+                class: [
+                    // Alignment
+                    'flex',
+                    'items-center',
+                    'justify-center',
+
+                    // Size
+                    'w-6',
+                    'h-6',
+
+                    // Shape
+                    'rounded-md',
+                    'border-2',
+
+                    // Colors
+                    {
+                        'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked,
+                        'border-primary bg-primary': context.checked
+                    },
+
+                    // States
+                    {
+                        'peer-hover:border-primary': !props.disabled && !context.checked,
+                        'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                        'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled,
+                        'cursor-default opacity-60': props.disabled
+                    },
+
+                    // Transitions
+                    'transition-colors',
+                    'duration-200'
+                ]
+            },
+            input: {
+                class: [
+                    'peer',
+
+                    // Size
+                    'w-full ',
+                    'h-full',
+
+                    // Position
+                    'absolute',
+                    'top-0 left-0',
+                    'z-10',
+
+                    // Spacing
+                    'p-0',
+                    'm-0',
+
+                    // Shape
+                    'opacity-0',
+                    'rounded-md',
+                    'outline-none',
+                    'border-2 border-surface-200 dark:border-surface-700',
+
+                    // Misc
+                    'appearance-none',
+                    'cursor-pointer'
+                ]
+            },
+            icon: {
+                class: [
+                    // Font
+                    'text-base leading-none',
+
+                    // Size
+                    'w-4',
+                    'h-4',
+
+                    // Colors
+                    {
+                        'text-white dark:text-surface-900': !instance.partialChecked,
+                        'text-gray dark:text-white': instance.partialChecked
+                    },
+
+                    // Transitions
+                    'transition-all',
+                    'duration-200'
+                ]
+            }
+        }),
+        nodeicon: {
+            class: [
+                // Space
+                'mr-2',
+
+                // Color
+                'text-surface-600 dark:text-white/70'
+            ]
+        },
+        subgroup: {
+            class: ['m-0 list-none p-0 pl-2 mt-1']
+        },
+        filtercontainer: {
+            class: [
+                'relative block',
+
+                // Space
+                'mb-2',
+
+                // Size
+                'w-full'
+            ]
+        },
+        input: {
+            class: [
+                'relative',
+                // Font
+                'leading-none',
+
+                // Spacing
+                'm-0',
+                'p-3 pr-10',
+
+                // Size
+                'w-full',
+
+                // Shape
+                'rounded-md',
+
+                // Colors
+                'text-surface-600 dark:text-surface-200',
+                'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+                'bg-surface-0 dark:bg-surface-900',
+                'border border-surface-300 dark:border-surface-600',
+
+                // States
+                'hover:border-primary',
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50',
+
+                // Transition & Misc
+                'appearance-none',
+                'transition-colors duration-200'
+            ]
+        },
+        loadingicon: {
+            class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin']
+        },
+        searchicon: {
+            class: [
+                // Position
+                'absolute top-1/2 -mt-2 right-3',
+
+                // Color
+                'text-surface-600 dark:hover:text-white/70'
+            ]
+        }
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/treetable/index.js b/packages/tailwindcss-presets/src/lara/treetable/index.js
new file mode 100644
index 000000000..9098dd34c
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/treetable/index.js
@@ -0,0 +1,427 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+            {
+                'flex flex-col h-full': props.scrollHeight === 'flex'
+            }
+        ]
+    }),
+    loadingoverlay: {
+        class: [
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-20',
+
+            // Flex & Alignment
+            'flex items-center justify-center',
+
+            // Size
+            'w-full h-full',
+
+            // Color
+            'bg-surface-100/40 dark:bg-surface-800/40',
+
+            // Transition
+            'transition duration-200'
+        ]
+    },
+    loadingicon: {
+        class: 'w-8 h-8 animate-spin'
+    },
+    wrapper: ({ props }) => ({
+        class: [
+            // Overflow
+            {
+                'relative overflow-auto': props.scrollable,
+                'overflow-x-auto': props.resizableColumns
+            }
+        ]
+    }),
+    header: ({ props }) => ({
+        class: [
+            'font-bold',
+
+            // Shape
+            props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0',
+
+            // Spacing
+            'p-4',
+
+            // Color
+            'bg-surface-50 dark:bg-surface-800',
+            'border-surface-200 dark:border-surface-700',
+            'text-surface-700 dark:text-white/80'
+        ]
+    }),
+    footer: {
+        class: [
+            // Background, Border & Text
+            'bg-slate-50 text-slate-700',
+            'border border-x-0 border-t-0 border-surface-50',
+            // Padding & Font
+            'p-4 font-bold',
+            // Dark Mode
+            'dark:bg-surface-900 dark:text-white/70 dark:border-surface-700'
+        ]
+    },
+    table: {
+        class: [
+            // Table & Width
+            'border-collapse table-fixed w-full '
+        ]
+    },
+    thead: ({ props }) => ({
+        class: [
+            // Position & Z-index
+            {
+                'top-0 z-40 sticky': props.scrollable
+            }
+        ]
+    }),
+    tbody: ({ props }) => ({
+        class: [
+            // Block Display
+            {
+                block: props.scrollable
+            }
+        ]
+    }),
+    tfoot: ({ props }) => ({
+        class: [
+            // Block Display
+            {
+                block: props.scrollable
+            }
+        ]
+    }),
+    headerrow: ({ props }) => ({
+        class: [
+            // Flexbox & Width
+            {
+                'flex flex-nowrap w-full': props.scrollable
+            }
+        ]
+    }),
+    row: ({ context, props }) => ({
+        class: [
+            // Flex
+            { 'flex flex-nowrap w-full': context.scrollable },
+
+            // Color
+            'dark:text-white/80',
+            { 'bg-primary-highlight text-primary-highlight-inverse': context.selected },
+            { 'bg-surface-0 text-surface-600 dark:bg-surface-800': !context.selected },
+
+            // Hover & Flexbox
+            {
+                'hover:bg-surface-300/20 hover:text-surface-600': context.selectable && !context.selected
+            },
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 ring-inset dark:focus:ring-primary-300/50',
+
+            // Transition
+            { 'transition duration-200': (props.selectionMode && !context.selected) || props.rowHover }
+        ]
+    }),
+    headercell: ({ context, props }) => ({
+        class: [
+            'font-bold',
+
+            // Position
+            { 'sticky z-40': context.scrollable && context.scrollDirection === 'both' && context.frozen },
+
+            // Flex & Alignment
+            {
+                'flex flex-1 items-center': context.scrollable,
+                'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
+            },
+            'text-left',
+
+            // Shape
+            { 'first:border-l border-y border-r': context?.showGridlines },
+            'border-0 border-b border-solid',
+
+            // Spacing
+            context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4',
+
+            // Color
+            (props.sortable === '' || props.sortable) && context.sorted ? 'bg-primary-highlight text-primary-highlight-inverse' : 'bg-surface-50 text-surface-700 dark:text-white/80 dark:bg-surface-800',
+            'border-surface-200 dark:border-surface-700',
+
+            // States
+            { 'hover:bg-surface-100 dark:hover:bg-surface-400/30': (props.sortable === '' || props.sortable) && !context?.sorted },
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+
+            // Transition
+            { 'transition duration-200': props.sortable === '' || props.sortable },
+
+            // Misc
+            {
+                'overflow-hidden relative bg-clip-padding': context.resizable && !context.frozen
+            }
+        ]
+    }),
+    column: {
+        headercell: ({ context, props }) => ({
+            class: [
+                'font-bold',
+
+                // Position
+                { 'sticky z-40': context.scrollable && context.scrollDirection === 'both' && context.frozen },
+
+                // Flex & Alignment
+                {
+                    'flex flex-1 items-center': context.scrollable,
+                    'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
+                },
+                'text-left',
+
+                // Shape
+                { 'first:border-l border-y border-r': context?.showGridlines },
+                'border-0 border-b border-solid',
+
+                // Spacing
+                context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4',
+
+                // Color
+                (props.sortable === '' || props.sortable) && context.sorted ? 'bg-primary-highlight text-primary-highlight-inverse' : 'bg-surface-50 text-surface-700 dark:text-white/80 dark:bg-surface-800',
+                'border-surface-200 dark:border-surface-700',
+
+                // States
+                { 'hover:bg-surface-100 dark:hover:bg-surface-400/30': (props.sortable === '' || props.sortable) && !context?.sorted },
+                'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+
+                // Transition
+                { 'transition duration-200': props.sortable === '' || props.sortable },
+
+                // Misc
+                {
+                    'overflow-hidden relative bg-clip-padding': context.resizable && !context.frozen
+                }
+            ]
+        }),
+        bodycell: ({ context }) => ({
+            class: [
+                // Position
+                {
+                    sticky: context.scrollable && context.scrollDirection === 'both' && context.frozen
+                },
+
+                // Flex & Alignment
+                {
+                    'flex flex-1 items-center': context.scrollable,
+                    'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
+                },
+                'text-left',
+
+                // Shape
+                'border-0 border-b border-solid',
+                'border-surface-200 dark:border-surface-700',
+                {
+                    'border-x-0 border-l-0': !context.showGridlines
+                },
+                { 'first:border-l border-r border-b': context?.showGridlines },
+
+                // Spacing
+                context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4',
+
+                // Misc
+                {
+                    'cursor-pointer': context.selectable,
+                    sticky: context.scrollable && context.scrollDirection === 'both' && context.frozen,
+                    'border-x-0 border-l-0': !context.showGridlines
+                }
+            ]
+        }),
+        rowtoggler: {
+            class: [
+                'relative',
+
+                // Flex & Alignment
+                'inline-flex items-center justify-center',
+                'text-left align-middle',
+
+                // Spacing
+                'm-0 mr-2 p-0',
+
+                // Size
+                'w-8 h-8',
+
+                // Shape
+                'border-0 rounded-full',
+
+                // Color
+                'text-surface-500 dark:text-white/70',
+                'bg-transparent',
+
+                // States
+                'hover:bg-surface-50 dark:hover:bg-surface-700',
+                'focus-visible:outline-none focus-visible:outline-offset-0',
+                'focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+
+                // Transition
+                'transition duration-200',
+
+                // Misc
+                'overflow-hidden',
+                'cursor-pointer select-none'
+            ]
+        },
+        sorticon: ({ context }) => ({
+            class: ['ml-2 inline-block', context.sorted ? 'fill-primary-highlight-inverse' : 'fill-surface-700 dark:fill-white/70']
+        }),
+        sortbadge: {
+            class: [
+                // Flex & Alignment
+                'inline-flex items-center justify-center align-middle',
+
+                // Shape
+                'rounded-full',
+
+                // Size
+                'w-[1.143rem] leading-[1.143rem]',
+
+                // Spacing
+                'ml-2',
+
+                // Color
+                'text-primary-highlight-inverse bg-primary-highlight'
+            ]
+        },
+        columnresizer: {
+            class: [
+                'block',
+
+                // Position
+                'absolute top-0 right-0',
+
+                // Sizing
+                'w-2 h-full',
+
+                // Spacing
+                'm-0 p-0',
+
+                // Color
+                'border border-transparent',
+
+                // Misc
+                'cursor-col-resize'
+            ]
+        },
+        rowCheckbox: ({ props, context, instance }) => ({
+            root: {
+                class: [
+                    'relative',
+
+                    // Alignment
+                    'inline-flex',
+                    'align-middle',
+
+                    // Size
+                    'w-6',
+                    'h-6',
+
+                    // Spacing
+                    'mr-2',
+
+                    // Misc
+                    'cursor-pointer',
+                    'select-none'
+                ]
+            },
+            box: {
+                class: [
+                    // Alignment
+                    'flex',
+                    'items-center',
+                    'justify-center',
+
+                    // Size
+                    'w-6',
+                    'h-6',
+
+                    // Shape
+                    'rounded-md',
+                    'border-2',
+
+                    // Colors
+                    {
+                        'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked,
+                        'border-primary bg-primary': context.checked
+                    },
+
+                    // States
+                    {
+                        'peer-hover:border-primary': !props.disabled && !context.checked,
+                        'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                        'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled,
+                        'cursor-default opacity-60': props.disabled
+                    },
+
+                    // Transitions
+                    'transition-colors',
+                    'duration-200'
+                ]
+            },
+            input: {
+                class: [
+                    'peer',
+
+                    // Size
+                    'w-full ',
+                    'h-full',
+
+                    // Position
+                    'absolute',
+                    'top-0 left-0',
+                    'z-10',
+
+                    // Spacing
+                    'p-0',
+                    'm-0',
+
+                    // Shape
+                    'opacity-0',
+                    'rounded-md',
+                    'outline-none',
+                    'border-2 border-surface-200 dark:border-surface-700',
+
+                    // Misc
+                    'appearance-none',
+                    'cursor-pointer'
+                ]
+            },
+            icon: {
+                class: [
+                    // Font
+                    'text-base leading-none',
+
+                    // Size
+                    'w-4',
+                    'h-4',
+
+                    // Colors
+                    {
+                        'text-white dark:text-surface-900': !instance.partialChecked,
+                        'text-gray dark:text-white': instance.partialChecked
+                    },
+
+                    // Transitions
+                    'transition-all',
+                    'duration-200'
+                ]
+            }
+        }),
+
+        transition: {
+            enterFromClass: 'opacity-0 scale-y-[0.8]',
+            enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+            leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+            leaveToClass: 'opacity-0'
+        }
+    },
+    resizehelper: {
+        class: 'absolute hidden w-[2px] z-20 bg-primary'
+    }
+};
diff --git a/packages/tailwindcss-presets/src/lara/tristatecheckbox/index.js b/packages/tailwindcss-presets/src/lara/tristatecheckbox/index.js
new file mode 100644
index 000000000..cbc3e6837
--- /dev/null
+++ b/packages/tailwindcss-presets/src/lara/tristatecheckbox/index.js
@@ -0,0 +1,104 @@
+export default {
+    root: {
+        class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
+    },
+    input: {
+        class: [
+            'peer',
+
+            // Size
+            'w-full ',
+            'h-full',
+
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-10',
+
+            // Spacing
+            'p-0',
+            'm-0',
+
+            // Shape
+            'opacity-0',
+            'rounded-md',
+            'outline-none',
+            'border-2 border-surface-200 dark:border-surface-700',
+
+            // Misc
+            'appearance-none',
+            'cursor-pointer'
+        ]
+    },
+    box: ({ props, context }) => ({
+        class: [
+            // Alignment
+            'flex',
+            'items-center',
+            'justify-center',
+
+            // Size
+            'w-6',
+            'h-6',
+
+            // Shape
+            'rounded-md',
+            'border-2',
+
+            // Colors
+            {
+                'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked,
+                'border-primary bg-primary': context.checked
+            },
+
+            // States
+            {
+                'peer-hover:border-primary': !props.disabled && !context.checked,
+                'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
+                'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled,
+                'cursor-default opacity-60': props.disabled
+            },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // Transitions
+            'transition-colors',
+            'duration-200'
+        ]
+    }),
+    checkicon: {
+        class: [
+            // Font
+            'text-base leading-none',
+
+            // Size
+            'w-4',
+            'h-4',
+
+            // Colors
+            'text-white dark:text-surface-900',
+
+            // Transitions
+            'transition-all',
+            'duration-200'
+        ]
+    },
+    uncheckicon: {
+        class: [
+            // Font
+            'text-base leading-none',
+
+            // Size
+            'w-4',
+            'h-4',
+
+            // Colors
+            'text-white dark:text-surface-900',
+
+            // Transitions
+            'transition-all',
+            'duration-200'
+        ]
+    }
+};