From bade8c70748514167e3a3aa1807c0edc1fd0fa1e Mon Sep 17 00:00:00 2001
From: Alexandru Paduraru <axelut@yahoo.com>
Date: Wed, 23 Jul 2025 16:31:51 +0300
Subject: [PATCH 01/22] update to tw4 - react / html / site

---
 apps/site/package.json                        |  6 +-
 apps/site/postcss.config.js                   |  3 +-
 apps/site/src/app/docs/[...slug]/page.tsx     |  2 +-
 .../src/app/docs/content/html/accordion.mdx   |  6 +-
 apps/site/src/app/docs/content/html/alert.mdx |  8 +--
 .../app/docs/content/html/button-group.mdx    | 30 ++++----
 .../site/src/app/docs/content/html/button.mdx | 12 ++--
 apps/site/src/app/docs/content/html/card.mdx  | 52 +++++++-------
 apps/site/src/app/docs/content/html/chip.mdx  |  4 +-
 .../src/app/docs/content/html/gallery.mdx     | 12 ++--
 .../src/app/docs/content/html/icon-button.mdx |  6 +-
 apps/site/src/app/docs/content/html/input.mdx | 42 +++++------
 .../site/src/app/docs/content/html/navbar.mdx | 24 +++----
 .../site/src/app/docs/content/html/switch.mdx |  2 +-
 apps/site/src/app/docs/content/html/table.mdx | 52 +++++++-------
 .../src/app/docs/content/html/textarea.mdx    | 34 ++++-----
 .../src/app/docs/content/react/accordion.mdx  |  6 +-
 .../site/src/app/docs/content/react/alert.mdx |  2 +-
 .../app/docs/content/react/button-group.mdx   |  2 +-
 .../src/app/docs/content/react/button.mdx     |  2 +-
 apps/site/src/app/docs/content/react/card.mdx | 24 +++----
 apps/site/src/app/docs/content/react/chip.mdx |  2 +-
 .../src/app/docs/content/react/dialog.mdx     |  2 +-
 .../src/app/docs/content/react/dropdown.mdx   |  6 +-
 .../app/docs/content/react/guide/astro.mdx    | 71 +++++++++++++++++--
 .../src/app/docs/content/react/guide/cra.mdx  | 64 +++++++++++++----
 .../app/docs/content/react/guide/gatsby.mdx   | 48 +++++++++++++
 .../src/app/docs/content/react/guide/next.mdx | 62 ++++++++++++++++
 .../app/docs/content/react/guide/remix.mdx    | 48 +++++++++++++
 .../src/app/docs/content/react/guide/vite.mdx | 64 ++++++++++++++---
 .../app/docs/content/react/icon-button.mdx    |  2 +-
 .../site/src/app/docs/content/react/image.mdx |  2 +-
 .../site/src/app/docs/content/react/input.mdx |  2 +-
 apps/site/src/app/docs/content/react/menu.mdx |  6 +-
 .../site/src/app/docs/content/react/modal.mdx |  2 +-
 .../src/app/docs/content/react/navbar.mdx     | 22 +++---
 .../docs/content/react/plugins/carousel.mdx   |  8 +--
 .../content/react/plugins/text-editor.mdx     |  4 +-
 .../src/app/docs/content/react/popover.mdx    |  2 +-
 .../src/app/docs/content/react/timeline.mdx   |  6 +-
 apps/site/src/app/globals.css                 | 11 +--
 apps/site/src/components/code-preview.tsx     |  2 +-
 .../site/src/components/component-preview.tsx |  2 +-
 .../docs-html/alert/alert-dismissible.tsx     |  2 +-
 .../docs-html/alert/alert-variants.tsx        |  2 +-
 .../docs-html/alert/alert-with-content.tsx    |  2 +-
 .../docs-html/alert/alert-with-list.tsx       |  2 +-
 .../button-group/block-level-button-group.tsx |  6 +-
 .../button-group/button-group-variants.tsx    |  6 +-
 .../button-group/button-group-with-icon.tsx   |  6 +-
 .../button-group/pill-button-group.tsx        |  6 +-
 .../docs-html/button/block-level-button.tsx   |  2 +-
 .../docs-html/button/button-as-link.tsx       |  2 +-
 .../docs-html/button/button-loading.tsx       |  2 +-
 .../docs-html/button/button-variants.tsx      |  2 +-
 .../docs-html/button/button-with-icon.tsx     |  2 +-
 .../docs-html/button/pill-button.tsx          |  2 +-
 .../docs-html/card/background-blog-card.tsx   |  4 +-
 .../components/docs-html/card/blog-card.tsx   |  4 +-
 .../docs-html/card/booking-card.tsx           | 28 ++++----
 .../docs-html/card/horizontal-card.tsx        |  2 +-
 .../components/docs-html/card/login-card.tsx  |  4 +-
 .../docs-html/card/profile-card.tsx           |  6 +-
 .../docs-html/card/testimonial-card.tsx       |  2 +-
 .../components/docs-html/chip/chip-icon.tsx   |  2 +-
 .../docs-html/chip/chip-variants.tsx          |  2 +-
 .../docs-html/gallery/gallery-with-tab.tsx    | 12 ++--
 .../icon-button/icon-button-as-link.tsx       |  2 +-
 .../icon-button/icon-button-variants.tsx      |  2 +-
 .../icon-button/rounded-icon-button.tsx       |  2 +-
 .../docs-html/input/input-colors.tsx          | 12 ++--
 .../docs-html/input/input-custom-styles.tsx   |  2 +-
 .../components/docs-html/input/input-demo.tsx |  2 +-
 .../docs-html/input/input-disabled.tsx        |  2 +-
 .../docs-html/input/input-sizes.tsx           |  6 +-
 .../docs-html/input/input-with-button.tsx     |  2 +-
 .../docs-html/input/input-with-dropdown.tsx   |  4 +-
 .../input/input-with-helper-text.tsx          |  2 +-
 .../docs-html/input/input-with-icon.tsx       |  4 +-
 .../docs-html/input/input-with-label.tsx      |  2 +-
 .../docs-html/input/input-with-validation.tsx |  4 +-
 .../docs-html/navbar/complex-navbar.tsx       |  6 +-
 .../docs-html/navbar/dark-navbar.tsx          |  2 +-
 .../docs-html/navbar/navbar-demo.tsx          |  2 +-
 .../navbar/navbar-with-mega-menu.tsx          |  6 +-
 .../docs-html/navbar/navbar-with-search.tsx   |  4 +-
 .../docs-html/navbar/simple-navbar.tsx        |  2 +-
 .../docs-html/navbar/sticky-navbar.tsx        |  2 +-
 .../docs-html/switch/custom-switch.tsx        |  2 +-
 .../docs-html/table/members-table.tsx         | 20 +++---
 .../docs-html/table/sortable-table.tsx        | 20 +++---
 .../docs-html/table/transactions-table.tsx    | 12 ++--
 .../textarea/chatbox-with-textarea.tsx        |  2 +-
 .../textarea/comment-box-with-textarea.tsx    |  2 +-
 .../docs-html/textarea/textarea-colors.tsx    | 12 ++--
 .../docs-html/textarea/textarea-demo.tsx      |  2 +-
 .../docs-html/textarea/textarea-disabled.tsx  |  2 +-
 .../docs-html/textarea/textarea-sizes.tsx     |  6 +-
 .../textarea/textarea-with-helper-text.tsx    |  2 +-
 .../textarea/textarea-with-label.tsx          |  2 +-
 .../textarea/textarea-with-validation.tsx     |  4 +-
 .../docs/card/background-blog-card.tsx        |  4 +-
 .../src/components/docs/card/booking-card.tsx | 16 ++---
 .../components/docs/card/horizontal-card.tsx  |  2 +-
 .../components/docs/card/testimonial-card.tsx |  2 +-
 .../docs/dialog/dialog-with-image.tsx         |  2 +-
 .../docs/input/input-custom-styles.tsx        |  2 +-
 .../docs/menu/menu-with-divider.tsx           |  2 +-
 .../src/components/docs/menu/nav-menu.tsx     |  2 +-
 .../src/components/docs/menu/profile-menu.tsx |  2 +-
 .../components/docs/navbar/complex-navbar.tsx |  6 +-
 .../components/docs/navbar/dark-navbar.tsx    |  2 +-
 .../components/docs/navbar/navbar-demo.tsx    |  2 +-
 .../docs/navbar/navbar-with-mega-menu.tsx     |  6 +-
 .../docs/navbar/navbar-with-search.tsx        |  2 +-
 .../components/docs/navbar/simple-navbar.tsx  |  2 +-
 .../components/docs/navbar/sticky-navbar.tsx  |  2 +-
 .../docs/plugins/carousel/carousel-demo.tsx   |  8 +--
 .../plugins/text-editor/text-editor-demo.tsx  |  4 +-
 .../docs/popover/popover-with-image.tsx       |  2 +-
 .../docs/timeline/activities-timeline.tsx     |  6 +-
 apps/site/src/components/layout/navbar.tsx    | 12 ++--
 apps/site/src/components/layout/sidenav.tsx   |  4 +-
 apps/site/src/components/layout/toc.tsx       |  4 +-
 apps/site/src/components/theme-toggle.tsx     |  4 +-
 packages/html/package.json                    |  6 +-
 packages/react/package.json                   |  6 +-
 packages/react/src/theme/alert.ts             | 14 ++--
 packages/react/src/theme/button-group.ts      |  2 +-
 packages/react/src/theme/button.ts            | 22 +++---
 packages/react/src/theme/card.ts              | 14 ++--
 packages/react/src/theme/checkbox.ts          |  2 +-
 packages/react/src/theme/chip.ts              | 18 ++---
 packages/react/src/theme/dialog.ts            |  8 +--
 packages/react/src/theme/drawer.ts            |  8 +--
 packages/react/src/theme/icon-button.ts       | 10 +--
 packages/react/src/theme/input.ts             |  8 +--
 packages/react/src/theme/menu.ts              |  6 +-
 packages/react/src/theme/navbar.ts            | 12 ++--
 packages/react/src/theme/popover.ts           |  6 +-
 packages/react/src/theme/radio.ts             |  2 +-
 packages/react/src/theme/select.tsx           | 12 ++--
 packages/react/src/theme/slider.ts            |  2 +-
 packages/react/src/theme/tabs.ts              |  4 +-
 packages/react/src/theme/textarea.ts          |  8 +--
 packages/react/src/theme/tooltip.ts           |  6 +-
 146 files changed, 809 insertions(+), 506 deletions(-)

diff --git a/apps/site/package.json b/apps/site/package.json
index 8ef33c2f4..4b801b0c5 100644
--- a/apps/site/package.json
+++ b/apps/site/package.json
@@ -3,7 +3,7 @@
   "version": "2.0.0",
   "description": "Material Tailwind is an easy-to-use components library for Tailwind CSS inspired by Material Design.",
   "scripts": {
-    "dev": "next dev --port 3001",
+    "dev": "next dev --port 3000",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -57,16 +57,16 @@
     "zod": "3.22.4"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "4.1.11",
     "@types/node": "20.11.24",
     "@types/react": "18.2.61",
     "@types/react-dom": "18.2.19",
-    "autoprefixer": "10.4.13",
     "eslint-config-custom": "workspace:*",
     "next-sitemap": "3.1.44",
     "postcss": "8.4.8",
     "prettier": "3.1.1",
     "prompts": "2.4.2",
-    "tailwindcss": "3.4.13",
+    "tailwindcss": "4.1.11",
     "tailwindcss-animate": "1.0.7",
     "tsconfig": "workspace:*",
     "typescript": "5.2.2"
diff --git a/apps/site/postcss.config.js b/apps/site/postcss.config.js
index 33ad091d2..52b9b4baf 100644
--- a/apps/site/postcss.config.js
+++ b/apps/site/postcss.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }
diff --git a/apps/site/src/app/docs/[...slug]/page.tsx b/apps/site/src/app/docs/[...slug]/page.tsx
index 7b701f797..3297e9965 100644
--- a/apps/site/src/app/docs/[...slug]/page.tsx
+++ b/apps/site/src/app/docs/[...slug]/page.tsx
@@ -167,7 +167,7 @@ const highlight = {
   name: "highlight",
   MultilineAnnotation: ({ children }) => {
     return (
-      <span className="block border-l-2 border-[#1fff7c] bg-[#1fff7c]/[0.15] bg-opacity-50 text-[#1fff7c]">
+      <span className="block border-l-2 border-[#1fff7c] bg-[#1fff7c]/15 bg-opacity-50 text-[#1fff7c]">
         {children}
       </span>
     );
diff --git a/apps/site/src/app/docs/content/html/accordion.mdx b/apps/site/src/app/docs/content/html/accordion.mdx
index 176fb7fe2..7e2f1073f 100644
--- a/apps/site/src/app/docs/content/html/accordion.mdx
+++ b/apps/site/src/app/docs/content/html/accordion.mdx
@@ -208,21 +208,21 @@ export function ControlledAccordion() {
       <div className="mb-4 flex gap-2">
         <Button
           isFullWidth
-          variant={open === "react" ? "solid" : "outline"}
+          variant={open === "react" ? "solid" : "outline-solid"}
           onClick={() => setOpen("react")}
         >
           React Version
         </Button>
         <Button
           isFullWidth
-          variant={open === "html" ? "solid" : "outline"}
+          variant={open === "html" ? "solid" : "outline-solid"}
           onClick={() => setOpen("html")}
         >
           HTML Version
         </Button>
         <Button
           isFullWidth
-          variant={open === "vue" ? "solid" : "outline"}
+          variant={open === "vue" ? "solid" : "outline-solid"}
           onClick={() => setOpen("vue")}
         >
           Vue Version
diff --git a/apps/site/src/app/docs/content/html/alert.mdx b/apps/site/src/app/docs/content/html/alert.mdx
index 532ec1571..9ea2cb85b 100644
--- a/apps/site/src/app/docs/content/html/alert.mdx
+++ b/apps/site/src/app/docs/content/html/alert.mdx
@@ -69,7 +69,7 @@ The alert component comes with 3 different variants that you can change using th
   </div>
   <div
     role="alert"
-    class="relative flex items-start w-full p-2 border rounded-md border-primary bg-gradient-to-tr from-primary-dark to-primary-light text-primary-foreground"
+    class="relative flex items-start w-full p-2 border rounded-md border-primary bg-linear-to-tr from-primary-dark to-primary-light text-primary-foreground"
   >
     <div class="m-1.5 w-full font-sans text-base leading-none">
       A simple alert for showing message. with variant="gradient"
@@ -357,7 +357,7 @@ You can add any element you want for the Alert component, below you can see an e
   </div>
   <div
     role="alert"
-    class="relative flex items-start w-full p-2 border rounded-md border-primary bg-gradient-to-tr from-primary-dark to-primary-light text-primary-foreground"
+    class="relative flex items-start w-full p-2 border rounded-md border-primary bg-linear-to-tr from-primary-dark to-primary-light text-primary-foreground"
   >
     <span class="grid p-1 shrink-0 place-items-center">
       <svg
@@ -457,7 +457,7 @@ You can add any element you want for the Alert component, below you can see an e
   <div class="m-1.5 w-full font-sans text-base leading-none">
     A simple alert for showing message.
   </div>
-  <button id="alert-dismiss-trigger" class="outline-none">
+  <button id="alert-dismiss-trigger" class="outline-hidden">
     <svg
       viewBox="0 0 24 24"
       fill="none"
@@ -593,7 +593,7 @@ Use the example below to use an alert component with content elements like title
   </div>
   <button
     id="content-close-trigger"
-    class="outline-none"
+    class="outline-hidden"
   >
     <svg
       viewBox="0 0 24 24"
diff --git a/apps/site/src/app/docs/content/html/button-group.mdx b/apps/site/src/app/docs/content/html/button-group.mdx
index 72ef4bbb6..d309bfe8d 100644
--- a/apps/site/src/app/docs/content/html/button-group.mdx
+++ b/apps/site/src/app/docs/content/html/button-group.mdx
@@ -119,19 +119,19 @@ Get inspired by this series of button groups, each with different styling, arran
   <div className="inline-flex flex-row">
     <button
       data-ripple-light="true"
-      className="inline-flex select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       React
     </button>
     <button
       data-ripple-light="true"
-      className="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       Vue
     </button>
     <button
       data-ripple-light="true"
-      className="inline-flex select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       Svelte
     </button>
@@ -149,7 +149,7 @@ This button group component example shows you how to create responsive and scala
 <ComponentPreview demo={<HTMLButtonGroup.ButtonGroupSizes />}>
 ```html
 <div class="flex flex-col gap-4">
-  <div class="inline-flex flex-row [&:first-child:not([data-variant=ghost])]:[&_*]:rounded-r-none [&:last-child:not([data-variant=ghost])]:[&_*]:rounded-l-none [&:last-child:not([data-variant=ghost])]:[&_*]:border-l-0 [&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:rounded-none [&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:border-l-0">
+  <div class="inline-flex flex-row **:[&:first-child:not([data-variant=ghost])]:rounded-r-none **:[&:last-child:not([data-variant=ghost])]:rounded-l-none **:[&:last-child:not([data-variant=ghost])]:border-l-0 **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:rounded-none **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:border-l-0">
     <button
       data-ripple-light="true"
       class="inline-flex select-none items-center justify-center rounded-md border border-primary bg-primary px-2.5 py-1.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:border-primary-light hover:bg-primary-light disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
@@ -169,7 +169,7 @@ This button group component example shows you how to create responsive and scala
       Svelte
     </button>
   </div>
-  <div class="inline-flex flex-row [&:first-child:not([data-variant=ghost])]:[&_*]:rounded-r-none [&:last-child:not([data-variant=ghost])]:[&_*]:rounded-l-none [&:last-child:not([data-variant=ghost])]:[&_*]:border-l-0 [&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:rounded-none [&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:border-l-0">
+  <div class="inline-flex flex-row **:[&:first-child:not([data-variant=ghost])]:rounded-r-none **:[&:last-child:not([data-variant=ghost])]:rounded-l-none **:[&:last-child:not([data-variant=ghost])]:border-l-0 **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:rounded-none **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:border-l-0">
     <button
       data-ripple-light="true"
       class="inline-flex select-none items-center justify-center rounded-md border border-primary bg-primary px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:border-primary-light hover:bg-primary-light disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
@@ -189,7 +189,7 @@ This button group component example shows you how to create responsive and scala
       Svelte
     </button>
   </div>
-  <div class="inline-flex flex-row [&:first-child:not([data-variant=ghost])]:[&_*]:rounded-r-none [&:last-child:not([data-variant=ghost])]:[&_*]:rounded-l-none [&:last-child:not([data-variant=ghost])]:[&_*]:border-l-0 [&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:rounded-none [&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:border-l-0 ">
+  <div class="inline-flex flex-row **:[&:first-child:not([data-variant=ghost])]:rounded-r-none **:[&:last-child:not([data-variant=ghost])]:rounded-l-none **:[&:last-child:not([data-variant=ghost])]:border-l-0 **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:rounded-none **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:border-l-0 ">
     <button
       data-ripple-light="true"
       class="inline-flex select-none items-center justify-center rounded-lg border border-primary bg-primary px-5 py-3.5 text-center align-middle font-sans text-base font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:border-primary-light hover:bg-primary-light disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
@@ -583,7 +583,7 @@ Use this example to create button groups with icons, you can use any type of ico
   <div className="inline-flex flex-row">
     <button
       data-ripple-light="true"
-      className="inline-flex select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       <svg
         width="1.5em"
@@ -604,7 +604,7 @@ Use this example to create button groups with icons, you can use any type of ico
     </button>
     <button
       data-ripple-light="true"
-      className="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       <svg
         width="1.5em"
@@ -627,7 +627,7 @@ Use this example to create button groups with icons, you can use any type of ico
     </button>
     <button
       data-ripple-light="true"
-      className="inline-flex select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       <svg
         width="1.5em"
@@ -731,19 +731,19 @@ This example illustrates a single row of three buttons optimized for a full-widt
   <div className="inline-flex w-full flex-row">
     <button
       data-ripple-light="true"
-      className="inline-flex w-full select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex w-full select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       React
     </button>
     <button
       data-ripple-light="true"
-      className="inline-flex w-full select-none items-center justify-center rounded-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex w-full select-none items-center justify-center rounded-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       Vue
     </button>
     <button
       data-ripple-light="true"
-      className="inline-flex w-full select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex w-full select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       Svelte
     </button>
@@ -824,19 +824,19 @@ This example illustrates pill button groups in different styles like ghost, outl
   <div class="inline-flex flex-row">
     <button
       data-ripple-light="true"
-      class="inline-flex select-none items-center justify-center rounded-full rounded-r-none border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      class="inline-flex select-none items-center justify-center rounded-full rounded-r-none border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       React
     </button>
     <button
       data-ripple-light="true"
-      class="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      class="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       Vue
     </button>
     <button
       data-ripple-light="true"
-      class="inline-flex select-none items-center justify-center rounded-full rounded-l-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      class="inline-flex select-none items-center justify-center rounded-full rounded-l-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       Svelte
     </button>
diff --git a/apps/site/src/app/docs/content/html/button.mdx b/apps/site/src/app/docs/content/html/button.mdx
index f8a08f9c1..d9781a3de 100644
--- a/apps/site/src/app/docs/content/html/button.mdx
+++ b/apps/site/src/app/docs/content/html/button.mdx
@@ -59,7 +59,7 @@ See our button examples below. They come in different styles like ghost, outline
   </button>
   <button
     data-ripple-light="true"
-    class="inline-flex select-none items-center justify-center rounded-md border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+    class="inline-flex select-none items-center justify-center rounded-md border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
   >
     Gradient
   </button>
@@ -251,7 +251,7 @@ Use this example to create buttons with icons, you can use any type of icons ins
   </button>
   <button
     data-ripple-light="true"
-    class="inline-flex select-none items-center justify-center rounded-md border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+    class="inline-flex select-none items-center justify-center rounded-md border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
   >
     Give Us Star
     <svg
@@ -355,7 +355,7 @@ Use this example to create block-level buttons in different styles like ghost, o
   </button>
   <button
     data-ripple-light="true"
-    class="inline-flex w-full select-none items-center justify-center rounded-md border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+    class="inline-flex w-full select-none items-center justify-center rounded-md border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
   >
     Gradient Block Level Button
   </button>
@@ -392,7 +392,7 @@ Use this example to create pill buttons in different styles like ghost, outline,
   </button>
   <button
     data-ripple-light="true"
-    class="inline-flex select-none items-center justify-center rounded-full border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+    class="inline-flex select-none items-center justify-center rounded-full border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
   >
     Gradient
   </button>
@@ -429,7 +429,7 @@ You can use the `a` tag instead of the button tag to create a button that works
   </a>
   <a
     href="#"
-    class="inline-flex select-none items-center justify-center rounded-md border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+    class="inline-flex select-none items-center justify-center rounded-md border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
   >
     Gradient
   </a>
@@ -532,7 +532,7 @@ Use this example to create buttons with a loading state. You can use the `animat
   </button>
   <button
     data-ripple-light="true"
-    class="inline-flex select-none items-center justify-center gap-2 rounded-md border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+    class="inline-flex select-none items-center justify-center gap-2 rounded-md border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
   >
     <svg
       fill="none"
diff --git a/apps/site/src/app/docs/content/html/card.mdx b/apps/site/src/app/docs/content/html/card.mdx
index 55e19dae1..5afde03e9 100644
--- a/apps/site/src/app/docs/content/html/card.mdx
+++ b/apps/site/src/app/docs/content/html/card.mdx
@@ -216,7 +216,7 @@ This card example is ideal for introducing individuals, such as team members, em
     </p>
   </div>
   <div class="flex w-full items-center justify-center gap-1 rounded px-3 pb-3 pt-1.5">
-    <button class="group inline-grid min-h-[28px] min-w-[28px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-primary outline-none transition-all duration-300 ease-in hover:border-primary/5 hover:bg-primary/5 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+    <button class="group inline-grid min-h-[28px] min-w-[28px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-primary outline-hidden transition-all duration-300 ease-in hover:border-primary/5 hover:bg-primary/5 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
       <svg
         width="1.5em"
         height="1.5em"
@@ -238,7 +238,7 @@ This card example is ideal for introducing individuals, such as team members, em
         ></path>
       </svg>
     </button>
-    <button class="group inline-grid min-h-[28px] min-w-[28px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-primary outline-none transition-all duration-300 ease-in hover:border-primary/5 hover:bg-primary/5 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+    <button class="group inline-grid min-h-[28px] min-w-[28px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-primary outline-hidden transition-all duration-300 ease-in hover:border-primary/5 hover:bg-primary/5 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
       <svg
         width="1.5em"
         height="1.5em"
@@ -257,7 +257,7 @@ This card example is ideal for introducing individuals, such as team members, em
         ></path>
       </svg>
     </button>
-    <button class="group inline-grid min-h-[28px] min-w-[28px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-primary outline-none transition-all duration-300 ease-in hover:border-primary/5 hover:bg-primary/5 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+    <button class="group inline-grid min-h-[28px] min-w-[28px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-primary outline-hidden transition-all duration-300 ease-in hover:border-primary/5 hover:bg-primary/5 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
       <svg
         width="1.5em"
         height="1.5em"
@@ -320,7 +320,7 @@ Use this card example for building login pages where users need to enter their c
       <input
         id="email"
         placeholder="someone@example.com"
-        class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+        class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
         type="email"
       />
     </div>
@@ -334,7 +334,7 @@ Use this card example for building login pages where users need to enter their c
       <input
         id="password"
         placeholder="************"
-        class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+        class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
         type="password"
       />
     </div>
@@ -563,14 +563,14 @@ This card example is ideal for highlighting recent or featured posts on a blog.
   </div>
   <div class="mt-4 flex w-full items-center justify-between rounded px-3 pb-3 pt-1.5">
     <div class="flex items-center -space-x-3">
-      <button class="outline-none group">
+      <button class="outline-hidden group">
         <img
           src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1061&amp;q=80"
           alt="natali craig"
           class="inline-block object-cover object-center w-8 h-8 border-2 rounded-full border-secondary hover:z-10"
         />
       </button>
-      <button class="outline-none group">
+      <button class="outline-hidden group">
         <img
           src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
           alt="tania andrew"
@@ -594,10 +594,10 @@ This card example works perfectly for showcasing featured articles, editor's pic
 
 <ComponentPreview demo={<HTMLCard.BackgroundBlogCard />}>
 ```html
-<div class="relative flex h-[40rem] w-full max-w-[28rem] flex-col items-end justify-center overflow-hidden rounded-lg border border-surface bg-background text-center shadow-lg shadow-black/5">
+<div class="relative flex h-160 w-full max-w-md flex-col items-end justify-center overflow-hidden rounded-lg border border-surface bg-background text-center shadow-lg shadow-black/5">
   <div class="m-1.5 h-max w-[calc(100%-12px)] rounded-[5px]">
     <div class="absolute inset-0 m-0 h-full w-full rounded-none bg-[url('https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80')] bg-cover bg-center">
-      <div class="absolute inset-0 h-full w-full bg-gradient-to-t from-black/80 via-black/50 to-black/10 dark:from-black/90 dark:via-black/60 dark:to-black/20"></div>
+      <div class="absolute inset-0 h-full w-full bg-linear-to-t from-black/80 via-black/50 to-black/10 dark:from-black/90 dark:via-black/60 dark:to-black/20"></div>
     </div>
   </div>
   <div class="relative bottom-0 flex h-full w-full flex-col items-center justify-end rounded px-6 py-14 md:px-12">
@@ -630,14 +630,14 @@ Use this card example if you want to showcase properties or accommodations, such
 
 <ComponentPreview demo={<HTMLCard.BookingCard />}>
 ```html
-<div class="w-full max-w-[26rem] overflow-hidden rounded-lg border border-surface bg-background shadow-lg shadow-black/5">
+<div class="w-full max-w-104 overflow-hidden rounded-lg border border-surface bg-background shadow-lg shadow-black/5">
   <div class="relative m-1.5 h-max w-[calc(100%-12px)] overflow-hidden rounded-[5px] p-0">
     <img
       src="https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1470&amp;q=80"
       alt="ui/ux review check"
     />
-    <div class="absolute inset-0 w-full h-full to-bg-black-10 bg-gradient-to-tr from-transparent via-transparent to-black/60 "></div>
-    <button class="!absolute right-2 top-2 inline-grid min-h-[28px] min-w-[28px] select-none place-items-center rounded-full border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-error transition-all duration-300 ease-in hover:border-error/10 hover:bg-error/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+    <div class="absolute inset-0 w-full h-full to-bg-black-10 bg-linear-to-tr from-transparent via-transparent to-black/60 "></div>
+    <button class="absolute! right-2 top-2 inline-grid min-h-[28px] min-w-[28px] select-none place-items-center rounded-full border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-error transition-all duration-300 ease-in hover:border-error/10 hover:bg-error/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
       <svg
         width="1.5em"
         height="1.5em"
@@ -687,8 +687,8 @@ Use this card example if you want to showcase properties or accommodations, such
       surrounded by ancient trees, stone walls, and open meadows.
     </p>
     <div class="inline-flex flex-wrap items-center gap-3 mt-6 group">
-      <button class="outline-none group">
-        <button class="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:!opacity-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
+      <button class="outline-hidden group">
+        <button class="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:opacity-100! disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
           <svg
             width="1.5em"
             height="1.5em"
@@ -726,8 +726,8 @@ Use this card example if you want to showcase properties or accommodations, such
           </svg>
         </button>
       </button>
-      <button class="outline-none group">
-        <button class="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:!opacity-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
+      <button class="outline-hidden group">
+        <button class="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:opacity-100! disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
           <svg
             width="1.5em"
             height="1.5em"
@@ -765,8 +765,8 @@ Use this card example if you want to showcase properties or accommodations, such
           </svg>
         </button>
       </button>
-      <button class="outline-none group">
-        <button class="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:!opacity-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
+      <button class="outline-hidden group">
+        <button class="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:opacity-100! disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
           <svg
             width="1.5em"
             height="1.5em"
@@ -792,8 +792,8 @@ Use this card example if you want to showcase properties or accommodations, such
           </svg>
         </button>
       </button>
-      <button class="outline-none group">
-        <button class="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:!opacity-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
+      <button class="outline-hidden group">
+        <button class="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:opacity-100! disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
           <svg
             width="1.5em"
             height="1.5em"
@@ -817,8 +817,8 @@ Use this card example if you want to showcase properties or accommodations, such
           </svg>
         </button>
       </button>
-      <button class="outline-none group">
-        <button class="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:!opacity-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
+      <button class="outline-hidden group">
+        <button class="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:opacity-100! disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
           <svg
             width="1.5em"
             stroke-width="1.5"
@@ -844,8 +844,8 @@ Use this card example if you want to showcase properties or accommodations, such
           </svg>
         </button>
       </button>
-      <button class="outline-none group">
-        <button class="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:!opacity-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
+      <button class="outline-hidden group">
+        <button class="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:opacity-100! disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
           +20
         </button>
       </button>
@@ -873,7 +873,7 @@ Use this example if you want to display client testimonials or customer feedback
 
 <ComponentPreview demo={<HTMLCard.TestimonialCard />}>
 ```html
-<div class="w-full max-w-[26rem] overflow-hidden rounded-lg border border-none border-surface bg-background shadow-none shadow-black/5">
+<div class="w-full max-w-104 overflow-hidden rounded-lg border border-none border-surface bg-background shadow-none shadow-black/5">
   <div class="m-1.5 mx-0 flex h-max w-[calc(100%-12px)] items-center gap-4 rounded-[5px] pb-4 pt-0">
     <img
       src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
@@ -982,7 +982,7 @@ This example contains a modern, wide-format card UI component designed for featu
 
 <ComponentPreview demo={<HTMLCard.HorizontalCard />}>
 ```html
-<div class="flex h-full w-full max-w-[48rem] flex-row overflow-hidden rounded-lg border border-surface bg-background shadow-lg shadow-black/5">
+<div class="flex h-full w-full max-w-3xl flex-row overflow-hidden rounded-lg border border-surface bg-background shadow-lg shadow-black/5">
   <div class="m-0 h-full w-2/5 shrink-0 rounded-[5px] rounded-r-none">
     <img
       src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1471&amp;q=80"
diff --git a/apps/site/src/app/docs/content/html/chip.mdx b/apps/site/src/app/docs/content/html/chip.mdx
index ee19a0c54..aa3354546 100644
--- a/apps/site/src/app/docs/content/html/chip.mdx
+++ b/apps/site/src/app/docs/content/html/chip.mdx
@@ -84,7 +84,7 @@ This example presents 4 different styles of chip components styled with Tailwind
       Solid
     </span>
   </div>
-  <div class="relative inline-flex select-none items-center rounded-full border border-primary bg-gradient-to-tr from-primary-dark to-primary-light p-[3px] font-sans text-[13px] font-medium leading-none text-primary-foreground">
+  <div class="relative inline-flex select-none items-center rounded-full border border-primary bg-linear-to-tr from-primary-dark to-primary-light p-[3px] font-sans text-[13px] font-medium leading-none text-primary-foreground">
     <span class="font-inherit mx-2 my-[3.5px] leading-none text-inherit">
       Gradient
     </span>
@@ -255,7 +255,7 @@ The icons, in this example, add a visual element that can improve user understan
       Solid
     </span>
   </div>
-  <div class="relative inline-flex select-none items-center rounded-full border border-primary bg-gradient-to-tr from-primary-dark to-primary-light p-[3px] font-sans text-[13px] font-medium leading-none text-primary-foreground">
+  <div class="relative inline-flex select-none items-center rounded-full border border-primary bg-linear-to-tr from-primary-dark to-primary-light p-[3px] font-sans text-[13px] font-medium leading-none text-primary-foreground">
     <span class="grid h-4 w-4 shrink-0 translate-x-0.5 place-items-center rounded-full">
       <svg
         width="1.5em"
diff --git a/apps/site/src/app/docs/content/html/gallery.mdx b/apps/site/src/app/docs/content/html/gallery.mdx
index 4da102b29..506d65258 100644
--- a/apps/site/src/app/docs/content/html/gallery.mdx
+++ b/apps/site/src/app/docs/content/html/gallery.mdx
@@ -317,35 +317,35 @@ Use this example of gallery component if you want to allow users to switch betwe
   >
     <button
       role="tab"
-      class="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
+      class="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
     >
       HTML
     </button>
     <button
       role="tab"
-      class="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
+      class="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
     >
       React
     </button>
     <button
       role="tab"
-      class="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
+      class="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
     >
       Vue
     </button>
     <button
       role="tab"
-      class="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
+      class="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
     >
       Angular
     </button>
     <button
       role="tab"
-      class="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
+      class="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
     >
       Svelte
     </button>
-    <span class="transition-all duration-300 ease-in rounded shadow-sm bg-background shadow-black/10"></span>
+    <span class="transition-all duration-300 ease-in rounded shadow-xs bg-background shadow-black/10"></span>
   </div>
   <div
     role="tabpanel"
diff --git a/apps/site/src/app/docs/content/html/icon-button.mdx b/apps/site/src/app/docs/content/html/icon-button.mdx
index 0061f031a..482d281e1 100644
--- a/apps/site/src/app/docs/content/html/icon-button.mdx
+++ b/apps/site/src/app/docs/content/html/icon-button.mdx
@@ -302,7 +302,7 @@ Check out how to implement different visual styles and interaction states for yo
       ></path>
     </svg>
   </button>
-  <button class="inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-primary bg-gradient-to-tr from-primary-dark to-primary-light text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+  <button class="inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-primary bg-linear-to-tr from-primary-dark to-primary-light text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
     <svg
       width="1.5em"
       height="1.5em"
@@ -1212,7 +1212,7 @@ Use this example to create a rounded icon button element for your Tailwind CSS p
       ></path>
     </svg>
   </button>
-  <button class="inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-full border border-primary bg-gradient-to-tr from-primary-dark to-primary-light text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+  <button class="inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-full border border-primary bg-linear-to-tr from-primary-dark to-primary-light text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
     <svg
       width="1.5em"
       height="1.5em"
@@ -1504,7 +1504,7 @@ Use this example to create icon buttons with link element. These buttons are des
   </a>
   <a
     href="#"
-    class="inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-primary bg-gradient-to-tr from-primary-dark to-primary-light text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
+    class="inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-primary bg-linear-to-tr from-primary-dark to-primary-light text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
   >
     <svg
       width="1.5em"
diff --git a/apps/site/src/app/docs/content/html/input.mdx b/apps/site/src/app/docs/content/html/input.mdx
index b7569a4b9..4eb0f19a2 100644
--- a/apps/site/src/app/docs/content/html/input.mdx
+++ b/apps/site/src/app/docs/content/html/input.mdx
@@ -26,7 +26,7 @@ Use our input example to get started easily. It is perfect for forms requiring t
 ```html
 <input
   placeholder="Input"
-  className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+  className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
   type="text"
 />
 ```
@@ -43,17 +43,17 @@ Check out this code snippet to see how you can implement inputs with different s
  <div className="flex flex-col gap-4">
   <input
     placeholder="Input Small"
-    className="w-72 select-none rounded-md border border-surface bg-transparent px-1.5 py-[4.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+    className="w-72 select-none rounded-md border border-surface bg-transparent px-1.5 py-[4.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
     type="text"
   />
   <input
     placeholder="Input Medium"
-    className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+    className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
     type="text"
   />
   <input
     placeholder="Input Large"
-    className="w-72 select-none rounded-md border border-surface bg-transparent px-3.5 py-[12.25px] text-base leading-none text-black outline-none ring-4 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+    className="w-72 select-none rounded-md border border-surface bg-transparent px-3.5 py-[12.25px] text-base leading-none text-black outline-hidden ring-4 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
     type="text"
   />
 </div>
@@ -71,32 +71,32 @@ The 6 examples of input components showcased below are HTML snippets styled with
 <div className="flex flex-col gap-4">
   <input
     placeholder="Input Primary"
-    className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+    className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
     type="text"
   />
   <input
     placeholder="Input Secondary"
-    className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-secondary hover:ring-secondary/10 focus:border-secondary focus:outline-none focus:ring-secondary/10 dark:text-white"
+    className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-secondary hover:ring-secondary/10 focus:border-secondary focus:outline-hidden focus:ring-secondary/10 dark:text-white"
     type="text"
   />
   <input
     placeholder="Input Info"
-    className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-info hover:ring-info/10 focus:border-info focus:outline-none focus:ring-info/10 dark:text-white"
+    className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-info hover:ring-info/10 focus:border-info focus:outline-hidden focus:ring-info/10 dark:text-white"
     type="text"
   />
   <input
     placeholder="Input Success"
-    className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-success hover:ring-success/10 focus:border-success focus:outline-none focus:ring-success/10 dark:text-white"
+    className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-success hover:ring-success/10 focus:border-success focus:outline-hidden focus:ring-success/10 dark:text-white"
     type="text"
   />
   <input
     placeholder="Input Warning"
-    className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-warning hover:ring-warning/10 focus:border-warning focus:outline-none focus:ring-warning/10 dark:text-white"
+    className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-warning hover:ring-warning/10 focus:border-warning focus:outline-hidden focus:ring-warning/10 dark:text-white"
     type="text"
   />
   <input
     placeholder="Input Error"
-    className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-error hover:ring-error/10 focus:border-error focus:outline-none focus:ring-error/10 dark:text-white"
+    className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-error hover:ring-error/10 focus:border-error focus:outline-hidden focus:ring-error/10 dark:text-white"
     type="text"
   />
 </div>
@@ -115,7 +115,7 @@ These input examples styled with Tailwind CSS are structured to visually communi
   <div class="relative w-full text-sm leading-none rounded-md">
     <input
       placeholder="Input Error"
-      class="peer h-full w-full select-none rounded-[inherit] border border-error bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-error hover:ring-error/10 focus:border-error focus:outline-none focus:ring-error/10 dark:text-white"
+      class="peer h-full w-full select-none rounded-[inherit] border border-error bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-error hover:ring-error/10 focus:border-error focus:outline-hidden focus:ring-error/10 dark:text-white"
       type="text"
     />
     <small class="block mt-1 font-sans text-sm antialiased text-error">
@@ -125,7 +125,7 @@ These input examples styled with Tailwind CSS are structured to visually communi
   <div class="relative w-full text-sm leading-none rounded-md">
     <input
       placeholder="Input Success"
-      class="peer h-full w-full select-none rounded-[inherit] border border-success bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-success hover:ring-success/10 focus:border-success focus:outline-none focus:ring-success/10 dark:text-white"
+      class="peer h-full w-full select-none rounded-[inherit] border border-success bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-success hover:ring-success/10 focus:border-success focus:outline-hidden focus:ring-success/10 dark:text-white"
       type="text"
     />
     <small class="block mt-1 font-sans text-sm antialiased text-success">
@@ -148,7 +148,7 @@ Use this example of input with icon element if you want to add a friendly touch
   <div class="relative w-full rounded-md text-sm leading-none aria-disabled:cursor-not-allowed data-[shape=pill]:rounded-full">
     <input
       placeholder="Username"
-      class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] ps-8 leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+      class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] ps-8 leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
       type="text"
     />
     <span class="pointer-events-none absolute left-[7px] top-1/2 h-5 w-5 -translate-y-1/2 overflow-hidden text-foreground/70 transition-all duration-300 ease-in peer-hover:text-black peer-focus:text-black dark:peer-hover:text-white dark:peer-focus:text-white">
@@ -186,7 +186,7 @@ Use this example of input with icon element if you want to add a friendly touch
   <div class="relative w-full rounded-md text-sm leading-none aria-disabled:cursor-not-allowed data-[shape=pill]:rounded-full">
     <input
       placeholder="Password"
-      class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] pe-8 leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+      class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] pe-8 leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
       type="password"
     />
     <span class="pointer-events-none absolute right-[7px] top-1/2 h-5 w-5 -translate-y-1/2 overflow-hidden text-foreground/70 transition-all duration-300 ease-in peer-hover:text-black peer-focus:text-black dark:peer-hover:text-white dark:peer-focus:text-white">
@@ -229,7 +229,7 @@ Use this example of input with icon element if you want to add a friendly touch
   <input
     id="email"
     placeholder="someone@example.com"
-    class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+    class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
     type="email"
   />
 </div>
@@ -247,7 +247,7 @@ Use this example of password input field designed with a focus on security and u
 <div class="relative space-y-2 text-sm leading-none rounded-md w-72">
   <input
     placeholder="Password"
-    class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+    class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
     type="password"
   />
   <div class="flex gap-1.5 text-foreground">
@@ -304,7 +304,7 @@ Use the example below for an input containing a button inside. It is useful for
   <div class="relative w-full text-sm leading-none rounded-md">
     <input
       placeholder="someone@example.com"
-      class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+      class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
       type="email"
     />
   </div>
@@ -328,7 +328,7 @@ Use the example below for an input containing a button inside. It is useful for
 <div class="relative flex w-full max-w-[24rem]">
   <button
     id=":rk:"
-    class="group flex h-10 select-none items-center justify-center gap-2 rounded-md rounded-r-none border border-r-0 border-surface bg-secondary px-3.5 py-2.5 pl-3 text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+    class="group flex h-10 select-none items-center justify-center gap-2 rounded-md rounded-r-none border border-r-0 border-surface bg-secondary px-3.5 py-2.5 pl-3 text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
   >
     <img
       src="https://flagcdn.com/ke.svg"
@@ -340,7 +340,7 @@ Use the example below for an input containing a button inside. It is useful for
   <div class="relative text-sm leading-none rounded-md w-72 aria-disabled:cursor-not-allowed">
     <input
       placeholder="Mobile Number"
-      class="peer h-full w-full select-none rounded-[inherit] rounded-l-none border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+      class="peer h-full w-full select-none rounded-[inherit] rounded-l-none border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
       type="text"
     />
   </div>
@@ -362,7 +362,7 @@ Use this example if you want to clearly indicate to users that the input field i
 >
   <input
     placeholder="Input"
-    class="peer pointer-events-none h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black opacity-50 outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+    class="peer pointer-events-none h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black opacity-50 outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
     disabled=""
     type="text"
   />
@@ -384,7 +384,7 @@ Check out this example to learn how you can implement custom styles for your inp
 <div class="relative text-sm leading-none rounded-md w-72">
   <input
     placeholder="Username"
-    class="peer h-full w-full select-none rounded-none border-0 border-b border-gray-400 bg-transparent px-2.5 py-[8.5px] pl-[26px] pr-0.5 ps-8 leading-[inherit] text-black outline-none ring-0 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-gray-900 hover:ring-primary/10 focus:border-gray-900 focus:outline-none focus:ring-primary/10 dark:border-gray-600 dark:text-white dark:hover:border-gray-50 dark:focus:border-gray-50"
+    class="peer h-full w-full select-none rounded-none border-0 border-b border-gray-400 bg-transparent px-2.5 py-[8.5px] pl-[26px] pr-0.5 ps-8 leading-[inherit] text-black outline-hidden ring-0 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-gray-900 hover:ring-primary/10 focus:border-gray-900 focus:outline-hidden focus:ring-primary/10 dark:border-gray-600 dark:text-white dark:hover:border-gray-50 dark:focus:border-gray-50"
     type="text"
   />
   <span class="absolute w-5 h-5 overflow-hidden transition-all duration-300 ease-in -translate-y-1/2 pointer-events-none left-px top-1/2 text-foreground/70 peer-hover:text-black peer-focus:text-black dark:peer-hover:text-white dark:peer-focus:text-white">
diff --git a/apps/site/src/app/docs/content/html/navbar.mdx b/apps/site/src/app/docs/content/html/navbar.mdx
index 743efcf18..48d57e037 100644
--- a/apps/site/src/app/docs/content/html/navbar.mdx
+++ b/apps/site/src/app/docs/content/html/navbar.mdx
@@ -22,7 +22,7 @@ Use this simple navbar example with navigational links and buttons that get the
 
 <ComponentPreview demo={<HTMLNavbar.NavbarDemo />}>
 ```html
-<nav class="w-full max-w-screen-xl p-2 mx-auto overflow-hidden border rounded-lg shadow-lg border-surface bg-background shadow-black/5">
+<nav class="w-full max-w-(--breakpoint-xl) p-2 mx-auto overflow-hidden border rounded-lg shadow-lg border-surface bg-background shadow-black/5">
   <div class="flex items-center">
     <a
       href="#"
@@ -267,7 +267,7 @@ This component example presents a cleaner design navbar styled with `sticky top-
 <ComponentPreview demo={<HTMLNavbar.StickyNavbar />}>
 ```html
 <div class="w-full overflow-scroll h-96">
-  <nav class="sticky top-0 w-full max-w-screen-xl p-2 mx-auto overflow-hidden border rounded-lg shadow-lg border-surface bg-background shadow-black/5">
+  <nav class="sticky top-0 w-full max-w-(--breakpoint-xl) p-2 mx-auto overflow-hidden border rounded-lg shadow-lg border-surface bg-background shadow-black/5">
     <div class="flex items-center">
       <a
         href="#"
@@ -579,7 +579,7 @@ This component example presents a cleaner design navbar styled with `sticky top-
 
 <ComponentPreview demo={<HTMLNavbar.ComplexNavbar />}>
 ```html
-<nav class="w-full max-w-screen-xl p-2 mx-auto overflow-hidden border rounded-lg shadow-lg border-surface bg-background shadow-black/5">
+<nav class="w-full max-w-(--breakpoint-xl) p-2 mx-auto overflow-hidden border rounded-lg shadow-lg border-surface bg-background shadow-black/5">
   <div class="flex items-center">
     <a
       href="#"
@@ -590,7 +590,7 @@ This component example presents a cleaner design navbar styled with `sticky top-
     <hr class="hidden w-px h-5 mx-1 border-t-0 border-l border-secondary-dark lg:block" />
     <div class="hidden lg:block">
       <ul class="mt-4 flex min-w-[240px] flex-col gap-1 lg:mt-0 lg:flex-row lg:items-center">
-        <button data-open="false" class="outline-none group">
+        <button data-open="false" class="outline-hidden group">
           <li class="flex select-none items-center rounded-md bg-transparent px-2.5 py-1.5 align-middle font-sans text-foreground transition-all duration-300 ease-in hover:bg-surface hover:text-black focus:bg-surface focus:text-black dark:bg-opacity-70 dark:hover:text-white dark:focus:text-white">
             <span class="me-2.5 grid shrink-0 place-items-center">
               <svg
@@ -829,7 +829,7 @@ This component example presents a cleaner design navbar styled with `sticky top-
       id=":r3j:"
       src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/ct-assets/team-4.jpg"
       alt="profile-picture"
-      class="group inline-block h-8 w-8 rounded-full border border-primary object-cover object-center p-0.5 outline-none lg:ml-auto"
+      class="group inline-block h-8 w-8 rounded-full border border-primary object-cover object-center p-0.5 outline-hidden lg:ml-auto"
     />
   </div>
 </nav>
@@ -844,7 +844,7 @@ This navbar component example includes an interactive search input field and a c
 
 <ComponentPreview demo={<HTMLNavbar.NavbarWithSearch />}>
 ```html
-<nav class="w-full max-w-screen-xl p-2 mx-auto overflow-hidden border rounded-lg shadow-lg border-surface bg-background shadow-black/5">
+<nav class="w-full max-w-(--breakpoint-xl) p-2 mx-auto overflow-hidden border rounded-lg shadow-lg border-surface bg-background shadow-black/5">
   <div class="flex items-center">
     <a
       href="#"
@@ -1061,7 +1061,7 @@ This navbar component example includes an interactive search input field and a c
       </span>
       <input
         placeholder="Search here..."
-        class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-1.5 py-[4.5px] ps-6 leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+        class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-1.5 py-[4.5px] ps-6 leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
         type="search"
       />
     </div>
@@ -1109,7 +1109,7 @@ In this example, the navbar uses a black background styled with Tailwind CSS (`b
 
 <ComponentPreview demo={<HTMLNavbar.DarkNavbar />}>
 ```html
-<nav class="w-full max-w-screen-xl p-2 mx-auto overflow-hidden bg-black border rounded-lg shadow-lg border-surface shadow-black/5 dark:bg-surface-dark">
+<nav class="w-full max-w-(--breakpoint-xl) p-2 mx-auto overflow-hidden bg-black border rounded-lg shadow-lg border-surface shadow-black/5 dark:bg-surface-dark">
   <div class="flex items-center text-white">
     <a
       href="#"
@@ -1345,7 +1345,7 @@ Use this minimalist navbar that can be used across a wide range of websites and
 
 <ComponentPreview demo={<HTMLNavbar.SimpleNavbar />}>
 ```html
-<nav class="w-full max-w-screen-xl p-2 mx-auto overflow-hidden border rounded-lg shadow-lg border-surface bg-background shadow-black/5">
+<nav class="w-full max-w-(--breakpoint-xl) p-2 mx-auto overflow-hidden border rounded-lg shadow-lg border-surface bg-background shadow-black/5">
   <div class="flex items-center">
     <a
       href="#"
@@ -1434,7 +1434,7 @@ Use this minimalist navbar that can be used across a wide range of websites and
 
 <ComponentPreview demo={<HTMLNavbar.NavbarWithMegaMenu />}>
 ```html
-<nav class="w-full max-w-screen-xl p-2 mx-auto overflow-hidden border rounded-lg shadow-lg border-surface bg-background shadow-black/5">
+<nav class="w-full max-w-(--breakpoint-xl) p-2 mx-auto overflow-hidden border rounded-lg shadow-lg border-surface bg-background shadow-black/5">
   <div class="flex items-center">
     <a
       href="#"
@@ -1445,7 +1445,7 @@ Use this minimalist navbar that can be used across a wide range of websites and
     <hr class="hidden w-px h-5 mx-1 border-t-0 border-l border-secondary-dark lg:block" />
     <div class="hidden lg:block">
       <ul class="mt-4 flex min-w-[240px] flex-col gap-1 lg:mt-0 lg:flex-row lg:items-center">
-        <button data-open="false" class="outline-none group">
+        <button data-open="false" class="outline-hidden group">
           <li class="flex select-none items-center rounded-md bg-transparent px-2.5 py-1.5 align-middle font-sans text-foreground transition-all duration-300 ease-in hover:bg-surface hover:text-black focus:bg-surface focus:text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:bg-opacity-70 dark:hover:text-white dark:focus:text-white">
             <span class="me-2.5 grid shrink-0 place-items-center">
               <svg
@@ -1684,7 +1684,7 @@ Use this minimalist navbar that can be used across a wide range of websites and
       id=":r7a:"
       src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/ct-assets/team-4.jpg"
       alt="profile-picture"
-      class="group inline-block h-8 w-8 rounded-full border border-primary object-cover object-center p-0.5 outline-none lg:ml-auto"
+      class="group inline-block h-8 w-8 rounded-full border border-primary object-cover object-center p-0.5 outline-hidden lg:ml-auto"
     />
   </div>
 </nav>
diff --git a/apps/site/src/app/docs/content/html/switch.mdx b/apps/site/src/app/docs/content/html/switch.mdx
index ccc4c42d1..6f92b86e4 100644
--- a/apps/site/src/app/docs/content/html/switch.mdx
+++ b/apps/site/src/app/docs/content/html/switch.mdx
@@ -182,7 +182,7 @@ Check out this example to see how you can implement custom styles to your switch
 <ComponentPreview demo={<HTMLSwitch.CustomSwitch />}>
 ```html
 <input
-  class="relative inline-block h-6 w-10 appearance-none rounded-full before:absolute before:left-0 before:top-0 before:inline-block before:h-full before:w-full before:rounded-full before:bg-surface before:transition-colors before:duration-200 before:ease-in after:absolute after:left-0.5 after:top-2/4 after:h-5 after:w-5 after:-translate-y-2/4 after:rounded-full after:bg-background after:shadow-sm after:shadow-black/10 after:transition-transform after:duration-200 after:ease-in checked:before:bg-[#2ec946] checked:after:translate-x-[calc(100%-4px)] dark:after:bg-white"
+  class="relative inline-block h-6 w-10 appearance-none rounded-full before:absolute before:left-0 before:top-0 before:inline-block before:h-full before:w-full before:rounded-full before:bg-surface before:transition-colors before:duration-200 before:ease-in after:absolute after:left-0.5 after:top-2/4 after:h-5 after:w-5 after:-translate-y-2/4 after:rounded-full after:bg-background after:shadow-xs after:shadow-black/10 after:transition-transform after:duration-200 after:ease-in checked:before:bg-[#2ec946] checked:after:translate-x-[calc(100%-4px)] dark:after:bg-white"
   type="checkbox"
 />
 ```
diff --git a/apps/site/src/app/docs/content/html/table.mdx b/apps/site/src/app/docs/content/html/table.mdx
index 6b83fc9b3..faf304b4b 100644
--- a/apps/site/src/app/docs/content/html/table.mdx
+++ b/apps/site/src/app/docs/content/html/table.mdx
@@ -311,7 +311,7 @@ This example showcases a more complex and feature-rich approach to presenting an
         <div class="relative w-full text-sm leading-none rounded-md aria-disabled:cursor-not-allowed">
           <input
             placeholder="Search"
-            class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] pe-8 leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+            class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] pe-8 leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
             type="text"
           />
           <span class="pointer-events-none absolute right-[7px] top-1/2 h-5 w-5 -translate-y-1/2 overflow-hidden text-foreground/70 transition-all duration-300 ease-in peer-hover:text-black peer-focus:text-black dark:peer-hover:text-white dark:peer-focus:text-white">
@@ -439,7 +439,7 @@ This example showcases a more complex and feature-rich approach to presenting an
             </div>
           </td>
           <td class="p-4 border-b border-surface-light">
-            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
               <svg
                 width="1.5em"
                 height="1.5em"
@@ -512,7 +512,7 @@ This example showcases a more complex and feature-rich approach to presenting an
             </div>
           </td>
           <td class="p-4 border-b border-surface-light">
-            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
               <svg
                 width="1.5em"
                 height="1.5em"
@@ -585,7 +585,7 @@ This example showcases a more complex and feature-rich approach to presenting an
             </div>
           </td>
           <td class="p-4 border-b border-surface-light">
-            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
               <svg
                 width="1.5em"
                 height="1.5em"
@@ -658,7 +658,7 @@ This example showcases a more complex and feature-rich approach to presenting an
             </div>
           </td>
           <td class="p-4 border-b border-surface-light">
-            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
               <svg
                 width="1.5em"
                 height="1.5em"
@@ -734,7 +734,7 @@ This example showcases a more complex and feature-rich approach to presenting an
             </div>
           </td>
           <td class="p-4">
-            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
               <svg
                 width="1.5em"
                 height="1.5em"
@@ -857,24 +857,24 @@ In this example, the combination of filtering tabs, detailed member information,
       >
         <button
           role="tab"
-          class="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
+          class="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
         >
           All
         </button>
         <button
           role="tab"
-          class="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
+          class="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
         >
           Monitored
         </button>
         <button
           role="tab"
-          class="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
+          class="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
         >
           Unmonitored
         </button>
         <span
-          class="transition-all duration-300 ease-in rounded shadow-sm bg-background shadow-black/10"
+          class="transition-all duration-300 ease-in rounded shadow-xs bg-background shadow-black/10"
           style="width: 51px; height: 36px; left: 516px; top: 4117px; position: absolute; z-index: 1;"
         ></span>
       </div>
@@ -883,7 +883,7 @@ In this example, the combination of filtering tabs, detailed member information,
       <div class="relative w-full rounded-md text-sm leading-none aria-disabled:cursor-not-allowed data-[shape=pill]:rounded-full">
         <input
           placeholder="Search"
-          class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] pe-8 leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+          class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] pe-8 leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
           type="text"
         />
         <span class="pointer-events-none absolute right-[7px] top-1/2 h-5 w-5 -translate-y-1/2 overflow-hidden text-foreground/70 transition-all duration-300 ease-in peer-hover:text-black peer-focus:text-black dark:peer-hover:text-white dark:peer-focus:text-white">
@@ -971,7 +971,7 @@ In this example, the combination of filtering tabs, detailed member information,
           <td class="p-3">
             <button
               data-open="false"
-              class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full"
+              class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full"
               data-shape="default"
             >
               <svg
@@ -1040,7 +1040,7 @@ In this example, the combination of filtering tabs, detailed member information,
             </small>
           </td>
           <td class="p-3">
-            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
               <svg
                 width="1.5em"
                 height="1.5em"
@@ -1104,7 +1104,7 @@ In this example, the combination of filtering tabs, detailed member information,
             </small>
           </td>
           <td class="p-3">
-            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
               <svg
                 width="1.5em"
                 height="1.5em"
@@ -1168,7 +1168,7 @@ In this example, the combination of filtering tabs, detailed member information,
             </small>
           </td>
           <td class="p-3">
-            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
               <svg
                 width="1.5em"
                 height="1.5em"
@@ -1234,7 +1234,7 @@ In this example, the combination of filtering tabs, detailed member information,
           <td class="p-3">
             <button
               data-open="false"
-              class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full"
+              class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full"
               data-shape="default"
             >
               <svg
@@ -1341,30 +1341,30 @@ In this example. the table headers are interactive and sortable, as indicated by
       >
         <button
           role="tab"
-          class="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
+          class="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
         >
           All
         </button>
         <button
           role="tab"
-          class="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
+          class="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
         >
           Monitored
         </button>
         <button
           role="tab"
-          class="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
+          class="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
         >
           Unmonitored
         </button>
-        <span class="transition-all duration-300 ease-in rounded shadow-sm bg-background shadow-black/10"></span>
+        <span class="transition-all duration-300 ease-in rounded shadow-xs bg-background shadow-black/10"></span>
       </div>
     </div>
     <div class="w-full md:w-72">
       <div class="relative w-full rounded-md text-sm leading-none aria-disabled:cursor-not-allowed data-[shape=pill]:rounded-full">
         <input
           placeholder="Search"
-          class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] pe-8 leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+          class="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] pe-8 leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
           type="text"
         />
         <span class="pointer-events-none absolute right-[7px] top-1/2 h-5 w-5 -translate-y-1/2 overflow-hidden text-foreground/70 transition-all duration-300 ease-in peer-hover:text-black peer-focus:text-black dark:peer-hover:text-white dark:peer-focus:text-white">
@@ -1562,7 +1562,7 @@ In this example. the table headers are interactive and sortable, as indicated by
             </small>
           </td>
           <td class="p-3">
-            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
               <svg
                 width="1.5em"
                 height="1.5em"
@@ -1629,7 +1629,7 @@ In this example. the table headers are interactive and sortable, as indicated by
             </small>
           </td>
           <td class="p-3">
-            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full">
+            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full">
               <svg
                 width="1.5em"
                 height="1.5em"
@@ -1693,7 +1693,7 @@ In this example. the table headers are interactive and sortable, as indicated by
             </small>
           </td>
           <td class="p-3">
-            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
               <svg
                 width="1.5em"
                 height="1.5em"
@@ -1760,7 +1760,7 @@ In this example. the table headers are interactive and sortable, as indicated by
             </small>
           </td>
           <td class="p-3">
-            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full">
+            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full">
               <svg
                 width="1.5em"
                 height="1.5em"
@@ -1828,7 +1828,7 @@ In this example. the table headers are interactive and sortable, as indicated by
             </small>
           </td>
           <td class="p-3">
-            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full">
+            <button class="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full">
               <svg
                 width="1.5em"
                 height="1.5em"
diff --git a/apps/site/src/app/docs/content/html/textarea.mdx b/apps/site/src/app/docs/content/html/textarea.mdx
index 8df5fb51a..426b0d11f 100644
--- a/apps/site/src/app/docs/content/html/textarea.mdx
+++ b/apps/site/src/app/docs/content/html/textarea.mdx
@@ -27,7 +27,7 @@ Get started with a simple textarea that comes with rounded corners, border style
 <textarea
   rows="8"
   placeholder="Message here..."
-  class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+  class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
 ></textarea>
 ```
 </ComponentPreview>
@@ -44,20 +44,20 @@ Check this coded example to see how you can implement textarea components for di
   <textarea
     rows="8"
     placeholder="Textarea Small"
-    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-1.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-1.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
 
   ></textarea>
   <textarea
     rows="8"
     placeholder="Textarea Medium"
-    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
 
 
   ></textarea>
   <textarea
     rows="8"
     placeholder="Textarea Large"
-    class="peer block w-full resize-none rounded-lg border border-surface bg-transparent p-3.5 text-base leading-none text-black outline-none ring-4 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+    class="peer block w-full resize-none rounded-lg border border-surface bg-transparent p-3.5 text-base leading-none text-black outline-hidden ring-4 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
 
   ></textarea>
 </div>
@@ -79,32 +79,32 @@ Our component comes with various color styling options. The examples below inclu
   <textarea
     rows="8"
     placeholder="Textarea Primary"
-    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
   ></textarea>
   <textarea
     rows="8"
     placeholder="Textarea Secondary"
-    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-secondary hover:ring-secondary/10 focus:border-secondary focus:outline-none focus:ring-secondary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-secondary hover:ring-secondary/10 focus:border-secondary focus:outline-hidden focus:ring-secondary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
   ></textarea>
   <textarea
     rows="8"
     placeholder="Textarea Info"
-    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-info hover:ring-info/10 focus:border-info focus:outline-none focus:ring-info/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-info hover:ring-info/10 focus:border-info focus:outline-hidden focus:ring-info/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
   ></textarea>
   <textarea
     rows="8"
     placeholder="Textarea Success"
-    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-success hover:ring-success/10 focus:border-success focus:outline-none focus:ring-success/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-success hover:ring-success/10 focus:border-success focus:outline-hidden focus:ring-success/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
   ></textarea>
   <textarea
     rows="8"
     placeholder="Textarea Warning"
-    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-warning hover:ring-warning/10 focus:border-warning focus:outline-none focus:ring-warning/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-warning hover:ring-warning/10 focus:border-warning focus:outline-hidden focus:ring-warning/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
   ></textarea>
   <textarea
     rows="8"
     placeholder="Textarea Error"
-    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-error hover:ring-error/10 focus:border-error focus:outline-none focus:ring-error/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-error hover:ring-error/10 focus:border-error focus:outline-hidden focus:ring-error/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
   ></textarea>
 </div>
 ```
@@ -123,7 +123,7 @@ Use this textareas with error and success themes, contrasting border colors (red
     <textarea
       rows="8"
       placeholder="Textarea Error"
-      class="peer block w-full resize-none rounded-md border border-error bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-error hover:ring-error/10 focus:border-error focus:outline-none focus:ring-error/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+      class="peer block w-full resize-none rounded-md border border-error bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-error hover:ring-error/10 focus:border-error focus:outline-hidden focus:ring-error/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
     ></textarea>
     <small class="font-sans text-sm antialiased text-error">
       Something went wrong!
@@ -133,7 +133,7 @@ Use this textareas with error and success themes, contrasting border colors (red
     <textarea
       rows="8"
       placeholder="Textarea Success"
-      class="peer block w-full resize-none rounded-md border border-success bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-success hover:ring-success/10 focus:border-success focus:outline-none focus:ring-success/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+      class="peer block w-full resize-none rounded-md border border-success bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-success hover:ring-success/10 focus:border-success focus:outline-hidden focus:ring-success/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
     ></textarea>
     <small class="font-sans text-sm antialiased text-success">
       Congratulations 🎉
@@ -160,7 +160,7 @@ Use this textareas with error and success themes, contrasting border colors (red
     rows="8"
     id="message"
     placeholder="Your message..."
-    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
   ></textarea>
 </div>
 ```
@@ -176,7 +176,7 @@ Use this textareas with error and success themes, contrasting border colors (red
   <textarea
     rows="8"
     placeholder="Your message..."
-    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
   ></textarea>
   <div class="flex gap-1.5 text-foreground">
     <svg
@@ -228,7 +228,7 @@ Use this example if you want to display information to users without allowing th
   rows="8"
   disabled=""
   placeholder="Message here..."
-  class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 pointer-events-none opacity-50 dark:text-white"
+  class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 pointer-events-none opacity-50 dark:text-white"
 ></textarea>
 ```
 </ComponentPreview>
@@ -246,7 +246,7 @@ Use this component that contains a textarea with submitting and canceling button
     rows="8"
     type="email"
     placeholder="someone@example.com"
-    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
   ></textarea>
   <div class="flex justify-between w-full py-3">
     <button class="inline-grid min-h-[28px] min-w-[28px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
@@ -416,7 +416,7 @@ The component is flexible and responsive, with attention to details like hover s
   <textarea
     rows="1"
     placeholder="Send a new message"
-    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+    class="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
   ></textarea>
   <button class="inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-primary transition-all duration-300 ease-in hover:border-primary/5 hover:bg-primary/5 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
     <svg
diff --git a/apps/site/src/app/docs/content/react/accordion.mdx b/apps/site/src/app/docs/content/react/accordion.mdx
index f832dffa7..3c3faabc2 100644
--- a/apps/site/src/app/docs/content/react/accordion.mdx
+++ b/apps/site/src/app/docs/content/react/accordion.mdx
@@ -144,21 +144,21 @@ export function ControlledAccordion() {
       <div className="mb-4 flex gap-2">
         <Button
           isFullWidth
-          variant={open === "react" ? "solid" : "outline"}
+          variant={open === "react" ? "solid" : "outline-solid"}
           onClick={() => setOpen("react")}
         >
           React Version
         </Button>
         <Button
           isFullWidth
-          variant={open === "html" ? "solid" : "outline"}
+          variant={open === "html" ? "solid" : "outline-solid"}
           onClick={() => setOpen("html")}
         >
           HTML Version
         </Button>
         <Button
           isFullWidth
-          variant={open === "vue" ? "solid" : "outline"}
+          variant={open === "vue" ? "solid" : "outline-solid"}
           onClick={() => setOpen("vue")}
         >
           Vue Version
diff --git a/apps/site/src/app/docs/content/react/alert.mdx b/apps/site/src/app/docs/content/react/alert.mdx
index 24b0ada91..80f0a0833 100644
--- a/apps/site/src/app/docs/content/react/alert.mdx
+++ b/apps/site/src/app/docs/content/react/alert.mdx
@@ -40,7 +40,7 @@ export function AlertDemo() {
 
 ## Alert Variants
 
-We provides different alert variants like `ghost`, `outline`, `solid`, and `gradient` so you can adapt it easily to your needs. You can simply use the `variant` prop to change the alert variant.
+We provides different alert variants like `ghost`, `outline-solid`, `solid`, and `gradient` so you can adapt it easily to your needs. You can simply use the `variant` prop to change the alert variant.
 
 In the example below, we've showcased the different alert variants that you can use in your project.
 
diff --git a/apps/site/src/app/docs/content/react/button-group.mdx b/apps/site/src/app/docs/content/react/button-group.mdx
index 4a83cb635..6b8ab0b46 100644
--- a/apps/site/src/app/docs/content/react/button-group.mdx
+++ b/apps/site/src/app/docs/content/react/button-group.mdx
@@ -42,7 +42,7 @@ export function ButtonGroupDemo() {
 
 ## Button Group Variants
 
-We provides different variants like `ghost`, `outline`, `solid`, and `gradient` so you can adapt it easily to your needs. You can simply use the `variant` prop to change the buttons variant inside the `ButtonGroup` component.
+We provides different variants like `ghost`, `outline-solid`, `solid`, and `gradient` so you can adapt it easily to your needs. You can simply use the `variant` prop to change the buttons variant inside the `ButtonGroup` component.
 
 In the example below, we've showcased the different `ButtonGroup` variants that you can use in your project.
 
diff --git a/apps/site/src/app/docs/content/react/button.mdx b/apps/site/src/app/docs/content/react/button.mdx
index 36647129e..40596e82e 100644
--- a/apps/site/src/app/docs/content/react/button.mdx
+++ b/apps/site/src/app/docs/content/react/button.mdx
@@ -36,7 +36,7 @@ export function ButtonDemo() {
 
 ## Button Variants
 
-We provides different button variants like `ghost`, `outline`, `solid`, and `gradient` so you can adapt it easily to your needs. You can simply use the `variant` prop to change the button variant.
+We provides different button variants like `ghost`, `outline-solid`, `solid`, and `gradient` so you can adapt it easily to your needs. You can simply use the `variant` prop to change the button variant.
 
 In the example below, we've showcased the different button variants that you can use in your project.
 
diff --git a/apps/site/src/app/docs/content/react/card.mdx b/apps/site/src/app/docs/content/react/card.mdx
index b19e83bca..249f418de 100644
--- a/apps/site/src/app/docs/content/react/card.mdx
+++ b/apps/site/src/app/docs/content/react/card.mdx
@@ -419,10 +419,10 @@ import { Card, Typography, Avatar } from "@material-tailwind/react";
 
 export function BackgroundBlogCard() {
   return (
-    <Card className="relative flex h-[40rem] w-full max-w-[28rem] flex-col items-end justify-center overflow-hidden text-center">
+    <Card className="relative flex h-160 w-full max-w-md flex-col items-end justify-center overflow-hidden text-center">
       <Card.Header>
         <div className="absolute inset-0 m-0 h-full w-full rounded-none bg-[url('https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80')] bg-cover bg-center">
-          <div className="absolute inset-0 h-full w-full bg-gradient-to-t from-black/80 via-black/50 to-black/10 dark:from-black/90 dark:via-black/60 dark:to-black/20" />
+          <div className="absolute inset-0 h-full w-full bg-linear-to-t from-black/80 via-black/50 to-black/10 dark:from-black/90 dark:via-black/60 dark:to-black/20" />
         </div>
       </Card.Header>
       <Card.Body className="relative bottom-0 flex h-full flex-col items-center justify-end px-6 py-14 md:px-12">
@@ -476,13 +476,13 @@ import {
 
 export function BookingCard() {
   return (
-    <Card className="w-full max-w-[26rem] shadow-lg">
+    <Card className="w-full max-w-104 shadow-lg">
       <Card.Header className="relative overflow-hidden p-0">
         <img
           src="https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
           alt="ui/ux review check"
         />
-        <div className="to-bg-black-10 absolute inset-0 h-full w-full bg-gradient-to-tr from-transparent via-transparent to-black/60 " />
+        <div className="to-bg-black-10 absolute inset-0 h-full w-full bg-linear-to-tr from-transparent via-transparent to-black/60 " />
         <IconButton
           size="sm"
           color="error"
@@ -511,7 +511,7 @@ export function BookingCard() {
                 isCircular
                 size="lg"
                 color="secondary"
-                className="cursor-pointer border border-surface bg-surface-light transition-all hover:!opacity-100 group-hover:opacity-70"
+                className="cursor-pointer border border-surface bg-surface-light transition-all hover:opacity-100! group-hover:opacity-70"
               >
                 <Cash className="h-5 w-5" />
               </IconButton>
@@ -527,7 +527,7 @@ export function BookingCard() {
                 isCircular
                 size="lg"
                 color="secondary"
-                className="cursor-pointer border border-surface bg-surface-light transition-all hover:!opacity-100 group-hover:opacity-70"
+                className="cursor-pointer border border-surface bg-surface-light transition-all hover:opacity-100! group-hover:opacity-70"
               >
                 <Wifi className="h-5 w-5" />
               </IconButton>
@@ -543,7 +543,7 @@ export function BookingCard() {
                 isCircular
                 size="lg"
                 color="secondary"
-                className="cursor-pointer border border-surface bg-surface-light transition-all hover:!opacity-100 group-hover:opacity-70"
+                className="cursor-pointer border border-surface bg-surface-light transition-all hover:opacity-100! group-hover:opacity-70"
               >
                 <HomeSimple className="h-5 w-5" />
               </IconButton>
@@ -558,7 +558,7 @@ export function BookingCard() {
                 isCircular
                 size="lg"
                 color="secondary"
-                className="cursor-pointer border border-surface bg-surface-light transition-all hover:!opacity-100 group-hover:opacity-70"
+                className="cursor-pointer border border-surface bg-surface-light transition-all hover:opacity-100! group-hover:opacity-70"
               >
                 <ModernTv className="h-5 w-5" />
               </IconButton>
@@ -574,7 +574,7 @@ export function BookingCard() {
                 isCircular
                 size="lg"
                 color="secondary"
-                className="cursor-pointer border border-surface bg-surface-light transition-all hover:!opacity-100 group-hover:opacity-70"
+                className="cursor-pointer border border-surface bg-surface-light transition-all hover:opacity-100! group-hover:opacity-70"
               >
                 <FireFlame className="h-5 w-5" />
               </IconButton>
@@ -589,7 +589,7 @@ export function BookingCard() {
                 isCircular
                 size="lg"
                 color="secondary"
-                className="cursor-pointer border border-surface bg-surface-light transition-all hover:!opacity-100 group-hover:opacity-70"
+                className="cursor-pointer border border-surface bg-surface-light transition-all hover:opacity-100! group-hover:opacity-70"
               >
                 +20
               </IconButton>
@@ -630,7 +630,7 @@ import {
 
 export function TestimonialCard() {
   return (
-    <Card className="w-full max-w-[26rem] border-none shadow-none">
+    <Card className="w-full max-w-104 border-none shadow-none">
       <Card.Header className="mx-0 flex items-center gap-4 pb-4 pt-0">
         <Avatar
           size="lg"
@@ -673,7 +673,7 @@ import { Card, Typography, Button } from "@material-tailwind/react";
 
 export function HorizontalCard() {
   return (
-    <Card className="flex h-full w-full max-w-[48rem] flex-row">
+    <Card className="flex h-full w-full max-w-3xl flex-row">
       <Card.Header className="m-0 h-full w-2/5 shrink-0 rounded-r-none">
         <img
           src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80"
diff --git a/apps/site/src/app/docs/content/react/chip.mdx b/apps/site/src/app/docs/content/react/chip.mdx
index dacb6bf0c..d20b361ca 100644
--- a/apps/site/src/app/docs/content/react/chip.mdx
+++ b/apps/site/src/app/docs/content/react/chip.mdx
@@ -75,7 +75,7 @@ export function ChipSizes() {
 
 ## Chip Variants
 
-We provides different chip variants like `ghost`, `outline`, `solid`, and `gradient` so you can adapt it easily to your needs. You can simply use the `variant` prop to change the chip variant.
+We provides different chip variants like `ghost`, `outline-solid`, `solid`, and `gradient` so you can adapt it easily to your needs. You can simply use the `variant` prop to change the chip variant.
 
 In the example below, we've showcased the different chip variants that you can use in your project.
 
diff --git a/apps/site/src/app/docs/content/react/dialog.mdx b/apps/site/src/app/docs/content/react/dialog.mdx
index 952d044d7..90bad8368 100644
--- a/apps/site/src/app/docs/content/react/dialog.mdx
+++ b/apps/site/src/app/docs/content/react/dialog.mdx
@@ -502,7 +502,7 @@ export function DialogWithImage() {
             <img
               alt="nature"
               src="https://dub.sh/xxo2Jek"
-              className="h-[48rem] w-full rounded-lg object-cover object-center"
+              className="h-192 w-full rounded-lg object-cover object-center"
             />
           </div>
           <div className="flex items-end justify-between">
diff --git a/apps/site/src/app/docs/content/react/dropdown.mdx b/apps/site/src/app/docs/content/react/dropdown.mdx
index ff5c65db7..b8936ae4f 100644
--- a/apps/site/src/app/docs/content/react/dropdown.mdx
+++ b/apps/site/src/app/docs/content/react/dropdown.mdx
@@ -263,7 +263,7 @@ export function NavMenu() {
             </Typography>
           </div>
         </Card>
-        <ul className="col-span-3 !m-0">
+        <ul className="col-span-3 m-0!">
           <NavItem
             title="@material-tailwind/html"
             description="Learn how to use @material-tailwind/html, packed with rich components and widgets."
@@ -304,7 +304,7 @@ export function MenuWithDivider() {
         <Menu.Item>Add Team</Menu.Item>
         <Menu.Item>Add Project</Menu.Item>
         <Menu.Item>My Profile</Menu.Item>
-        <hr className="!my-1 -mx-1 border-surface" />
+        <hr className="my-1! -mx-1 border-surface" />
         <Menu.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error dark:hover:text-error dark:focus:text-error">
           Logout
         </Menu.Item>
@@ -549,7 +549,7 @@ export function ProfileMenu() {
         <Menu.Item>
           <HeadsetHelp className="mr-2 h-[18px] w-[18px]" /> Support
         </Menu.Item>
-        <hr className="!my-1 -mx-1 border-surface" />
+        <hr className="my-1! -mx-1 border-surface" />
         <Menu.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error dark:hover:text-error dark:focus:text-error">
           <LogOut className="mr-2 h-[18px] w-[18px]" />
           Logout
diff --git a/apps/site/src/app/docs/content/react/guide/astro.mdx b/apps/site/src/app/docs/content/react/guide/astro.mdx
index e3ade9818..4d99c05d6 100644
--- a/apps/site/src/app/docs/content/react/guide/astro.mdx
+++ b/apps/site/src/app/docs/content/react/guide/astro.mdx
@@ -38,9 +38,66 @@ npx astro add react
 
 ---
 
-## Add Tailwind CSS to Astro
+## Install Tailwind CSS
 
-Next, you need to install and configure Tailwind CSS by running the following command:
+### Option 1: Tailwind CSS v4 with Vite Plugin (Recommended)
+
+Install Tailwind CSS v4 using the official Vite plugin for seamless integration with Astro:
+
+<CodePreview>
+```bash
+npm install tailwindcss @tailwindcss/vite
+```
+</CodePreview>
+
+#### Configure the Vite Plugin
+
+Add the `@tailwindcss/vite` plugin to your `astro.config.mjs` file:
+
+<CodePreview>
+```js
+// @ts-check
+import { defineConfig } from "astro/config";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://astro.build/config
+export default defineConfig({
+  vite: {
+    plugins: [tailwindcss()],
+  },
+});
+```
+</CodePreview>
+
+#### Create CSS File
+
+Create a `./src/styles/global.css` file and add the Tailwind import:
+
+<CodePreview>
+```css
+@import "tailwindcss";
+```
+</CodePreview>
+
+#### Import CSS in your layout
+
+Import the CSS file in your Astro layout or pages:
+
+<CodePreview>
+```astro
+---
+import "../styles/global.css";
+---
+
+<h1 class="text-3xl font-bold underline">
+  Hello world!
+</h1>
+```
+</CodePreview>
+
+### Option 2: Tailwind CSS v3 (Legacy)
+
+For projects that need to use Tailwind CSS v3, you can use the Astro integration:
 
 <CodePreview>
 ```bash
@@ -62,9 +119,15 @@ npm i @material-tailwind/react@beta
 
 ---
 
-## Add Plugin and Template Path
+## Configure Material Tailwind
+
+### For Tailwind CSS v4 (Vite Plugin)
+
+With the Vite plugin approach, Material Tailwind works automatically! No additional configuration is needed since Tailwind CSS v4 automatically detects and includes the component styles.
+
+### For Tailwind CSS v3 (Legacy)
 
-Once you installed `@material-tailwind/react` you need to add `mtConfig` and the template path to your `tailwind.config.mjs` file.
+If you're using Tailwind CSS v3 with the Astro integration, you need to add `mtConfig` and the template path to your `tailwind.config.mjs` file:
 
 <CodePreview>
 ```ts
diff --git a/apps/site/src/app/docs/content/react/guide/cra.mdx b/apps/site/src/app/docs/content/react/guide/cra.mdx
index bc6830c57..a05be47dd 100644
--- a/apps/site/src/app/docs/content/react/guide/cra.mdx
+++ b/apps/site/src/app/docs/content/react/guide/cra.mdx
@@ -28,6 +28,42 @@ npx create-react-app my-project
 
 ## Install Tailwind CSS
 
+### Option 1: Tailwind CSS v4 (Recommended)
+
+Install and configure the latest Tailwind CSS v4:
+
+<CodePreview>
+```bash
+npm install -D tailwindcss@next @tailwindcss/postcss@next && npx tailwindcss init
+```
+</CodePreview>
+
+#### Configure PostCSS for v4
+
+Create a `postcss.config.js` file in your project root:
+
+<CodePreview>
+```js
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+```
+</CodePreview>
+
+#### Add Tailwind CSS to your CSS
+
+Replace the content of your `./src/index.css` file with:
+
+<CodePreview>
+```css
+@import 'tailwindcss';
+```
+</CodePreview>
+
+### Option 2: Tailwind CSS v3 (Legacy)
+
 Once you have created your Create React App project, you need to install and configure Tailwind CSS by running the following command:
 
 <CodePreview>
@@ -36,11 +72,23 @@ npm install -D tailwindcss && npx tailwindcss init
 ```
 </CodePreview>
 
+#### Add Tailwind CSS Directives to CSS (v3 only)
+
+Create a `./src/index.css` file and add the `@tailwind` directives for each of Tailwind's layers:
+
+<CodePreview>
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+</CodePreview>
+
 ---
 
-### Configure Your Template Paths
+## Configure Your Template Paths
 
-Once you have installed Tailwind CSS, you need to configure your template paths in your `tailwind.config.js` file.
+Once you have installed Tailwind CSS, you need to configure your template paths in your `tailwind.config.js` file:
 
 <CodePreview>
 ```ts
@@ -56,18 +104,6 @@ module.exports = {
 ```
 </CodePreview>
 
-### Add Tailwind CSS Directives to CSS
-
-Next, you need to add the Tailwind CSS directives to your CSS file. Create a `./src/index.css` file and add the `@tailwind` directives for each of Tailwind's layers.
-
-<CodePreview>
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-</CodePreview>
-
 ---
 
 ## Install Material Tailwind
diff --git a/apps/site/src/app/docs/content/react/guide/gatsby.mdx b/apps/site/src/app/docs/content/react/guide/gatsby.mdx
index dcee68cea..f2ce700f0 100644
--- a/apps/site/src/app/docs/content/react/guide/gatsby.mdx
+++ b/apps/site/src/app/docs/content/react/guide/gatsby.mdx
@@ -28,6 +28,42 @@ npx gatsby new my-new-project
 
 ## Install Tailwind CSS
 
+### Option 1: Tailwind CSS v4 (Recommended)
+
+Install and configure the latest Tailwind CSS v4:
+
+<CodePreview>
+```bash
+npm install -D tailwindcss@next @tailwindcss/postcss@next gatsby-plugin-postcss && npx tailwindcss init
+```
+</CodePreview>
+
+#### Configure PostCSS for v4
+
+Create a `postcss.config.js` file:
+
+<CodePreview>
+```js
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+```
+</CodePreview>
+
+#### Add Tailwind CSS to your CSS
+
+Create a `./src/styles/global.css` file with:
+
+<CodePreview>
+```css
+@import 'tailwindcss';
+```
+</CodePreview>
+
+### Option 2: Tailwind CSS v3 (Legacy)
+
 Once you have created your Gatsby project, you need to install and configure Tailwind CSS by running the following command:
 
 <CodePreview>
@@ -36,6 +72,18 @@ npm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcss && npx tai
 ```
 </CodePreview>
 
+#### Add Tailwind CSS Directives to CSS (v3 only)
+
+Create a `./src/styles/global.css` file and add the `@tailwind` directives for each of Tailwind's layers:
+
+<CodePreview>
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+</CodePreview>
+
 ---
 
 ### Enable the Gatsby PostCSS Plugin
diff --git a/apps/site/src/app/docs/content/react/guide/next.mdx b/apps/site/src/app/docs/content/react/guide/next.mdx
index 29b5d017c..f116937a1 100644
--- a/apps/site/src/app/docs/content/react/guide/next.mdx
+++ b/apps/site/src/app/docs/content/react/guide/next.mdx
@@ -26,6 +26,44 @@ npx create-next-app@latest --tailwind
 
 ---
 
+## Setup Tailwind CSS v4 (Recommended)
+
+If you want to use the latest Tailwind CSS v4 with improved performance and new features, you can set it up manually:
+
+### Install Tailwind CSS v4
+
+<CodePreview>
+```bash
+npm install -D tailwindcss@next @tailwindcss/postcss@next
+```
+</CodePreview>
+
+### Configure PostCSS
+
+Update your `postcss.config.js` file to use the new Tailwind CSS v4 PostCSS plugin:
+
+<CodePreview>
+```js
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+```
+</CodePreview>
+
+### Update your CSS
+
+Replace the Tailwind directives in your `./app/globals.css` file with the new v4 import:
+
+<CodePreview>
+```css
+@import 'tailwindcss';
+```
+</CodePreview>
+
+---
+
 ## Install Material Tailwind
 
 Once you have created your Next.js project, you need to install `@material-tailwind/react` by running the following command:
@@ -42,6 +80,30 @@ npm i @material-tailwind/react@beta
 
 Once you installed `@material-tailwind/react` you need to add `mtConfig` and the template path to your `tailwind.config.ts` file.
 
+### For Tailwind CSS v4:
+
+<CodePreview>
+```ts
+import type { Config } from "tailwindcss";
+import { mtConfig } from "@material-tailwind/react";
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./node_modules/@material-tailwind/react/**/*.{js,ts,jsx,tsx}"
+  ],
+  theme: {...},
+  plugins: [mtConfig],
+};
+
+export default config;
+```
+</CodePreview>
+
+### For Tailwind CSS v3 (Legacy):
+
 <CodePreview>
 ```ts
 import type { Config } from "tailwindcss";
diff --git a/apps/site/src/app/docs/content/react/guide/remix.mdx b/apps/site/src/app/docs/content/react/guide/remix.mdx
index 03d383269..1f7fdd44c 100644
--- a/apps/site/src/app/docs/content/react/guide/remix.mdx
+++ b/apps/site/src/app/docs/content/react/guide/remix.mdx
@@ -28,6 +28,42 @@ npx create-remix@latest
 
 ## Install Tailwind CSS
 
+### Option 1: Tailwind CSS v4 (Recommended)
+
+Install and configure the latest Tailwind CSS v4:
+
+<CodePreview>
+```bash
+npm install -D tailwindcss@next @tailwindcss/postcss@next && npx tailwindcss init --ts
+```
+</CodePreview>
+
+#### Configure PostCSS for v4
+
+Create a `postcss.config.js` file:
+
+<CodePreview>
+```js
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+```
+</CodePreview>
+
+#### Add Tailwind CSS to your CSS
+
+Create a `./app/tailwind.css` file with:
+
+<CodePreview>
+```css
+@import 'tailwindcss';
+```
+</CodePreview>
+
+### Option 2: Tailwind CSS v3 (Legacy)
+
 Once you have created your Remix project, you need to install and configure Tailwind CSS by running the following command:
 
 <CodePreview>
@@ -36,6 +72,18 @@ npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init --ts -p
 ```
 </CodePreview>
 
+#### Add Tailwind CSS Directives to CSS (v3 only)
+
+Create a `./app/tailwind.css` file and add the `@tailwind` directives for each of Tailwind's layers:
+
+<CodePreview>
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+</CodePreview>
+
 ### Configure Your Template Paths
 
 Once you have installed Tailwind CSS, you need to configure your template paths in your `tailwind.config.ts` file.
diff --git a/apps/site/src/app/docs/content/react/guide/vite.mdx b/apps/site/src/app/docs/content/react/guide/vite.mdx
index c78cf9362..b58d6530c 100644
--- a/apps/site/src/app/docs/content/react/guide/vite.mdx
+++ b/apps/site/src/app/docs/content/react/guide/vite.mdx
@@ -28,21 +28,61 @@ npm create vite@latest my-project -- --template react
 
 ## Install Tailwind CSS
 
-Once you have created your Vite project, you need to install and configure Tailwind CSS by running the following command:
+### Option 1: Tailwind CSS v4 with Vite Plugin (Recommended)
+
+Install Tailwind CSS v4 using the official Vite plugin for the most seamless integration:
 
 <CodePreview>
 ```bash
-npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p
+npm install tailwindcss @tailwindcss/vite
 ```
 </CodePreview>
 
-### Configure Your Template Paths
+#### Configure the Vite Plugin
 
-Once you have installed Tailwind CSS, you need to configure your template paths in your `tailwind.config.js` file.
+Add the `@tailwindcss/vite` plugin to your `vite.config.ts` or `vite.config.js` file:
 
 <CodePreview>
 ```ts
-// highlight(3,4,5,6)
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
+})
+```
+</CodePreview>
+
+#### Add Tailwind CSS to your CSS
+
+Replace the content of your `./src/index.css` file with:
+
+<CodePreview>
+```css
+@import 'tailwindcss';
+```
+</CodePreview>
+
+### Option 2: Tailwind CSS v3 (Legacy)
+
+For projects that need to use Tailwind CSS v3:
+
+<CodePreview>
+```bash
+npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p
+```
+</CodePreview>
+
+#### Configure Your Template Paths (v3 only)
+
+Configure your template paths in your `tailwind.config.js` file:
+
+<CodePreview>
+```js
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
@@ -57,9 +97,9 @@ export default {
 ```
 </CodePreview>
 
-### Add Tailwind CSS Directives to CSS
+#### Add Tailwind CSS Directives to CSS (v3 only)
 
-Next, you need to add the Tailwind CSS directives to your CSS file. Add the `@tailwind` directives for each of Tailwind's layers to your `./src/index.css` file.
+Add the `@tailwind` directives for each of Tailwind's layers to your `./src/index.css` file:
 
 <CodePreview>
 ```css
@@ -83,9 +123,15 @@ npm i @material-tailwind/react@beta
 
 ---
 
-## Add Plugin and Template Path
+## Configure Material Tailwind
+
+### For Tailwind CSS v4 (Vite Plugin)
+
+With the Vite plugin approach, Material Tailwind works out of the box! No additional configuration is needed since Tailwind CSS v4 automatically detects and includes the component styles.
+
+### For Tailwind CSS v3 (Legacy)
 
-Once you installed `@material-tailwind/react` you need to add `mtConfig` and the template path to your `tailwind.config.js` file.
+If you're using Tailwind CSS v3, you need to add `mtConfig` and the template path to your `tailwind.config.js` file:
 
 <CodePreview>
 ```ts
diff --git a/apps/site/src/app/docs/content/react/icon-button.mdx b/apps/site/src/app/docs/content/react/icon-button.mdx
index d2e2a6b86..779a0f8ac 100644
--- a/apps/site/src/app/docs/content/react/icon-button.mdx
+++ b/apps/site/src/app/docs/content/react/icon-button.mdx
@@ -41,7 +41,7 @@ export function IconButtonDemo() {
 
 ## Icon Button Variants
 
-We provides different `IconButton` variants like `ghost`, `outline`, `solid`, and `gradient` so you can adapt it easily to your needs. You can simply use the `variant` prop to change the `IconButton` variant.
+We provides different `IconButton` variants like `ghost`, `outline-solid`, `solid`, and `gradient` so you can adapt it easily to your needs. You can simply use the `variant` prop to change the `IconButton` variant.
 
 In the example below, we've showcased the different `IconButton` variants that you can use in your project.
 
diff --git a/apps/site/src/app/docs/content/react/image.mdx b/apps/site/src/app/docs/content/react/image.mdx
index 0d2eaa0f1..9f47cfc3b 100644
--- a/apps/site/src/app/docs/content/react/image.mdx
+++ b/apps/site/src/app/docs/content/react/image.mdx
@@ -82,7 +82,7 @@ export function CircularImage() {
 
 ## Image with Shadow
 
-Here's how to implement an img with a shadow using the `shadow-lg` and `shadow-black/25` classnames.
+Here's how to implement an img with a shadow-sm using the `shadow-lg` and `shadow-black/25` classnames.
 
 <ComponentPreview demo={<Image.ImageWithShadow />}>
 ```tsx
diff --git a/apps/site/src/app/docs/content/react/input.mdx b/apps/site/src/app/docs/content/react/input.mdx
index 2ce3afc67..e8d74c3a0 100644
--- a/apps/site/src/app/docs/content/react/input.mdx
+++ b/apps/site/src/app/docs/content/react/input.mdx
@@ -359,7 +359,7 @@ export function InputCustomStyles() {
     <div className="w-72">
       <Input
         placeholder="Username"
-        className="rounded-none border-0 border-b border-gray-400 pr-0.5 shadow-none ring-0 hover:border-gray-900 focus:border-gray-900 data-[icon-placement=start]:!pl-[26px] dark:border-gray-600 dark:hover:border-gray-50 dark:focus:border-gray-50"
+        className="rounded-none border-0 border-b border-gray-400 pr-0.5 shadow-none ring-0 hover:border-gray-900 focus:border-gray-900 data-[icon-placement=start]:pl-[26px]! dark:border-gray-600 dark:hover:border-gray-50 dark:focus:border-gray-50"
       >
         <Input.Icon className="data-[placement=start]:left-px">
           <ProfileCircle className="h-full w-full" />
diff --git a/apps/site/src/app/docs/content/react/menu.mdx b/apps/site/src/app/docs/content/react/menu.mdx
index 4aff0d78d..06d952b5b 100644
--- a/apps/site/src/app/docs/content/react/menu.mdx
+++ b/apps/site/src/app/docs/content/react/menu.mdx
@@ -263,7 +263,7 @@ export function NavMenu() {
             </Typography>
           </div>
         </Card>
-        <ul className="col-span-3 !m-0">
+        <ul className="col-span-3 m-0!">
           <NavItem
             title="@material-tailwind/html"
             description="Learn how to use @material-tailwind/html, packed with rich components and widgets."
@@ -304,7 +304,7 @@ export function MenuWithDivider() {
         <Menu.Item>Add Team</Menu.Item>
         <Menu.Item>Add Project</Menu.Item>
         <Menu.Item>My Profile</Menu.Item>
-        <hr className="!my-1 -mx-1 border-surface" />
+        <hr className="my-1! -mx-1 border-surface" />
         <Menu.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error dark:hover:text-error dark:focus:text-error">
           Logout
         </Menu.Item>
@@ -549,7 +549,7 @@ export function ProfileMenu() {
         <Menu.Item>
           <HeadsetHelp className="mr-2 h-[18px] w-[18px]" /> Support
         </Menu.Item>
-        <hr className="!my-1 -mx-1 border-surface" />
+        <hr className="my-1! -mx-1 border-surface" />
         <Menu.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error dark:hover:text-error dark:focus:text-error">
           <LogOut className="mr-2 h-[18px] w-[18px]" />
           Logout
diff --git a/apps/site/src/app/docs/content/react/modal.mdx b/apps/site/src/app/docs/content/react/modal.mdx
index f829adeee..66a8d08e3 100644
--- a/apps/site/src/app/docs/content/react/modal.mdx
+++ b/apps/site/src/app/docs/content/react/modal.mdx
@@ -502,7 +502,7 @@ export function DialogWithImage() {
             <img
               alt="nature"
               src="https://dub.sh/xxo2Jek"
-              className="h-[48rem] w-full rounded-lg object-cover object-center"
+              className="h-192 w-full rounded-lg object-cover object-center"
             />
           </div>
           <div className="flex items-end justify-between">
diff --git a/apps/site/src/app/docs/content/react/navbar.mdx b/apps/site/src/app/docs/content/react/navbar.mdx
index 10c521354..a83d030e1 100644
--- a/apps/site/src/app/docs/content/react/navbar.mdx
+++ b/apps/site/src/app/docs/content/react/navbar.mdx
@@ -93,7 +93,7 @@ export function NavbarDemo() {
   }, []);
 
   return (
-    <Navbar className="mx-auto w-full max-w-screen-xl">
+    <Navbar className="mx-auto w-full max-w-(--breakpoint-xl)">
       <div className="flex items-center">
         <Typography
           as="a"
@@ -221,7 +221,7 @@ export function StickyNavbar() {
 
   return (
     <div className="h-96 w-full overflow-scroll">
-      <Navbar className="sticky top-0 mx-auto w-full max-w-screen-xl">
+      <Navbar className="sticky top-0 mx-auto w-full max-w-(--breakpoint-xl)">
         <div className="flex items-center">
           <Typography
             as="a"
@@ -407,7 +407,7 @@ function ProfileMenu() {
         <Menu.Item>
           <HeadsetHelp className="mr-2 h-[18px] w-[18px]" /> Support
         </Menu.Item>
-        <hr className="!my-1 -mx-1 border-surface" />
+        <hr className="my-1! -mx-1 border-surface" />
         <Menu.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error">
           <LogOut className="mr-2 h-[18px] w-[18px]" />
           Logout
@@ -447,7 +447,7 @@ export function ComplexNavbar() {
   }, []);
 
   return (
-    <Navbar className="mx-auto w-full max-w-screen-xl">
+    <Navbar className="mx-auto w-full max-w-(--breakpoint-xl)">
       <div className="flex items-center">
         <Typography
           as="a"
@@ -487,7 +487,7 @@ export function ComplexNavbar() {
                     </Typography>
                   </div>
                 </Card>
-                <ul className="col-span-3 !m-0">
+                <ul className="col-span-3 m-0!">
                   <MenuItem
                     title="@material-tailwind/html"
                     description="Learn how to use @material-tailwind/html, packed with rich components and widgets."
@@ -644,7 +644,7 @@ export function NavbarWithSearch() {
   }, []);
 
   return (
-    <Navbar className="mx-auto w-full max-w-screen-xl">
+    <Navbar className="mx-auto w-full max-w-(--breakpoint-xl)">
       <div className="flex items-center">
         <Typography
           as="a"
@@ -770,7 +770,7 @@ export function DarkNavbar() {
   }, []);
 
   return (
-    <Navbar className="mx-auto w-full max-w-screen-xl bg-black dark:bg-surface-dark">
+    <Navbar className="mx-auto w-full max-w-(--breakpoint-xl) bg-black dark:bg-surface-dark">
       <div className="flex items-center text-white">
         <Typography
           as="a"
@@ -887,7 +887,7 @@ export function SimpleNavbar() {
   }, []);
 
   return (
-    <Navbar className="mx-auto w-full max-w-screen-xl">
+    <Navbar className="mx-auto w-full max-w-(--breakpoint-xl)">
       <div className="flex items-center">
         <Typography
           as="a"
@@ -1070,7 +1070,7 @@ function ProfileMenu() {
         <Menu.Item>
           <HeadsetHelp className="mr-2 h-[18px] w-[18px]" /> Support
         </Menu.Item>
-        <hr className="!my-1 -mx-1 border-secondary-dark" />
+        <hr className="my-1! -mx-1 border-secondary-dark" />
         <Menu.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error dark:hover:text-error dark:focus:text-error">
           <LogOut className="mr-2 h-[18px] w-[18px]" />
           Logout
@@ -1126,7 +1126,7 @@ export function NavbarWithMegaMenu() {
   }, []);
 
   return (
-    <Navbar className="mx-auto w-full max-w-screen-xl">
+    <Navbar className="mx-auto w-full max-w-(--breakpoint-xl)">
       <div className="flex items-center">
         <Typography
           as="a"
@@ -1151,7 +1151,7 @@ export function NavbarWithMegaMenu() {
                   </List.ItemEnd>
                 </List.Item>
               </Tooltip.Trigger>
-              <Tooltip.Content className="z-[100000] grid max-w-screen-xl rounded-lg border border-surface bg-background p-2 shadow-xl shadow-surface/10 dark:border-surface dark:bg-background">
+              <Tooltip.Content className="z-100000 grid max-w-(--breakpoint-xl) rounded-lg border border-surface bg-background p-2 shadow-xl shadow-surface/10 dark:border-surface dark:bg-background">
                 <ul className="grid grid-cols-3 gap-y-2">{renderItems}</ul>
                 <Tooltip.Arrow />
               </Tooltip.Content>
diff --git a/apps/site/src/app/docs/content/react/plugins/carousel.mdx b/apps/site/src/app/docs/content/react/plugins/carousel.mdx
index 516ebe1db..feb43972c 100644
--- a/apps/site/src/app/docs/content/react/plugins/carousel.mdx
+++ b/apps/site/src/app/docs/content/react/plugins/carousel.mdx
@@ -53,7 +53,7 @@ function CustomNavigation() {
         variant="ghost"
         color="secondary"
         onClick={() => swiper.slidePrev()}
-        className="dark !absolute left-2 top-1/2 z-10 -translate-y-1/2"
+        className="dark absolute! left-2 top-1/2 z-10 -translate-y-1/2"
       >
         <NavArrowLeft className="h-7 w-7 -translate-x-0.5 stroke-2" />
       </IconButton>
@@ -63,7 +63,7 @@ function CustomNavigation() {
         variant="ghost"
         color="secondary"
         onClick={() => swiper.slideNext()}
-        className="dark !absolute right-2 top-1/2 z-10 -translate-y-1/2"
+        className="dark absolute! right-2 top-1/2 z-10 -translate-y-1/2"
       >
         <NavArrowRight className="h-7 w-7 translate-x-px stroke-2" />
       </IconButton>
@@ -72,7 +72,7 @@ function CustomNavigation() {
 }
 
 function customPagination(_, className) {
-  return `<span class="${className} w-4 h-4 [&.swiper-pagination-bullet-active]:!opacity-100 [&.swiper-pagination-bullet-active]:[background:rgb(var(--color-background))] !opacity-50 ![background:rgb(var(--color-background))]"></span>`;
+  return `<span class="${className} w-4 h-4 [&.swiper-pagination-bullet-active]:opacity-100! [&.swiper-pagination-bullet-active]:[background:rgb(var(--color-background))] opacity-50! [background:rgb(var(--color-background))]!"></span>`;
 }
 
 export function CarouselDemo() {
@@ -99,7 +99,7 @@ export function CarouselDemo() {
             <img
               src={img}
               alt={`image-${index}`}
-              className="h-[28rem] w-full object-cover"
+              className="h-112 w-full object-cover"
             />
           </SwiperSlide>
         ))}
diff --git a/apps/site/src/app/docs/content/react/plugins/text-editor.mdx b/apps/site/src/app/docs/content/react/plugins/text-editor.mdx
index 44187b099..0d4b18a96 100644
--- a/apps/site/src/app/docs/content/react/plugins/text-editor.mdx
+++ b/apps/site/src/app/docs/content/react/plugins/text-editor.mdx
@@ -244,7 +244,7 @@ function FloatingLinkEditor({ editor }) {
   return (
     <Card
       ref={editorRef}
-      className="absolute -left-[10000px] -top-[10000px] z-[100] -mt-1.5 w-full max-w-xs rounded-[10px] p-1 opacity-0 transition-opacity duration-300"
+      className="absolute -left-[10000px] -top-[10000px] z-100 -mt-1.5 w-full max-w-xs rounded-[10px] p-1 opacity-0 transition-opacity duration-300"
     >
       {isEditMode ? (
         <Input
@@ -517,7 +517,7 @@ export function TextEditorDemo() {
         <div className="relative rounded-b-lg border-t border-surface">
           <RichTextPlugin
             contentEditable={
-              <ContentEditable className="lexical min-h-[280px] resize-none px-3 py-2 text-base caret-primary outline-none" />
+              <ContentEditable className="lexical min-h-[280px] resize-none px-3 py-2 text-base caret-primary outline-hidden" />
             }
             placeholder={<Placeholder />}
             ErrorBoundary={null as any}
diff --git a/apps/site/src/app/docs/content/react/popover.mdx b/apps/site/src/app/docs/content/react/popover.mdx
index 13d913bd4..947d00766 100644
--- a/apps/site/src/app/docs/content/react/popover.mdx
+++ b/apps/site/src/app/docs/content/react/popover.mdx
@@ -304,7 +304,7 @@ export function PopoverWithImage() {
   return (
     <Popover>
       <Popover.Trigger as={Button}>More Info</Popover.Trigger>
-      <Popover.Content className="grid w-[30rem] grid-cols-2 gap-4">
+      <Popover.Content className="grid w-120 grid-cols-2 gap-4">
         <div className="pl-1">
           <Typography color="default" className="mb-1 font-semibold">
             Material Tailwind
diff --git a/apps/site/src/app/docs/content/react/timeline.mdx b/apps/site/src/app/docs/content/react/timeline.mdx
index d42b26615..064aca9a4 100644
--- a/apps/site/src/app/docs/content/react/timeline.mdx
+++ b/apps/site/src/app/docs/content/react/timeline.mdx
@@ -275,7 +275,7 @@ export function ActivitiesTimeline() {
               <Bell className="h-4 w-4" />
             </Timeline.Icon>
           </Timeline.Header>
-          <Timeline.Body className="!pb-0">
+          <Timeline.Body className="pb-0!">
             <Typography color="default" className="font-bold">
               $2400, Design changes
             </Typography>
@@ -292,7 +292,7 @@ export function ActivitiesTimeline() {
               <CreditCard className="h-4 w-4" />
             </Timeline.Icon>
           </Timeline.Header>
-          <Timeline.Body className="!pb-0">
+          <Timeline.Body className="pb-0!">
             <Typography color="default" className="font-bold">
               New order #1832412
             </Typography>
@@ -309,7 +309,7 @@ export function ActivitiesTimeline() {
               <DollarCircle className="h-4 w-4" />
             </Timeline.Icon>
           </Timeline.Header>
-          <Timeline.Body className="!pb-0">
+          <Timeline.Body className="pb-0!">
             <Typography color="default" className="font-bold">
               Payment completed for order #4395133
             </Typography>
diff --git a/apps/site/src/app/globals.css b/apps/site/src/app/globals.css
index 31ac3192f..4470f9b87 100644
--- a/apps/site/src/app/globals.css
+++ b/apps/site/src/app/globals.css
@@ -1,8 +1,9 @@
-@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap')
+layer(base);
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../../tailwind.config.js';
 
 html {
   scrollbar-width: thin;
@@ -147,5 +148,5 @@ html {
 }
 
 .code-preview div[data-bright-theme] {
-  @apply !my-0 !max-h-[32rem] !overflow-scroll;
+  @apply !my-0 !max-h-128 !overflow-scroll;
 }
diff --git a/apps/site/src/components/code-preview.tsx b/apps/site/src/components/code-preview.tsx
index 2e950a4bd..30fb5ca9f 100644
--- a/apps/site/src/components/code-preview.tsx
+++ b/apps/site/src/components/code-preview.tsx
@@ -122,7 +122,7 @@ export function CodePreview({ children, className }: CodePreview) {
           {children}
         </div>
         {codeHeight > MIN_CODE_HEIGHT && (
-          <div className="absolute bottom-0 left-1/2 grid h-16 w-full -translate-x-1/2 items-end justify-center rounded-b-lg bg-gradient-to-t from-background via-background/75 to-transparent pb-2">
+          <div className="absolute bottom-0 left-1/2 grid h-16 w-full -translate-x-1/2 items-end justify-center rounded-b-lg bg-linear-to-t from-background via-background/75 to-transparent pb-2">
             <Button
               size="xs"
               color="secondary"
diff --git a/apps/site/src/components/component-preview.tsx b/apps/site/src/components/component-preview.tsx
index a922395f7..4f484c740 100644
--- a/apps/site/src/components/component-preview.tsx
+++ b/apps/site/src/components/component-preview.tsx
@@ -135,7 +135,7 @@ export function ComponentPreview({
           {children}
         </div>
         {codeHeight > MIN_CODE_HEIGHT && (
-          <div className="absolute bottom-0 left-1/2 grid h-16 w-full -translate-x-1/2 items-end justify-center rounded-b-lg bg-gradient-to-t from-background via-background/75 to-transparent pb-2">
+          <div className="absolute bottom-0 left-1/2 grid h-16 w-full -translate-x-1/2 items-end justify-center rounded-b-lg bg-linear-to-t from-background via-background/75 to-transparent pb-2">
             <Button
               size="sm"
               color="secondary"
diff --git a/apps/site/src/components/docs-html/alert/alert-dismissible.tsx b/apps/site/src/components/docs-html/alert/alert-dismissible.tsx
index 21760a2a8..af148b0ff 100644
--- a/apps/site/src/components/docs-html/alert/alert-dismissible.tsx
+++ b/apps/site/src/components/docs-html/alert/alert-dismissible.tsx
@@ -56,7 +56,7 @@ export function AlertDismissible() {
       <div className="m-1.5 w-full font-sans text-base leading-none">
         A simple alert for showing message.
       </div>
-      <button id="alert-dismiss-trigger" className="outline-none">
+      <button id="alert-dismiss-trigger" className="outline-hidden">
         <svg
           viewBox="0 0 24 24"
           fill="none"
diff --git a/apps/site/src/components/docs-html/alert/alert-variants.tsx b/apps/site/src/components/docs-html/alert/alert-variants.tsx
index 0a0e57582..d951736ff 100644
--- a/apps/site/src/components/docs-html/alert/alert-variants.tsx
+++ b/apps/site/src/components/docs-html/alert/alert-variants.tsx
@@ -27,7 +27,7 @@ export function AlertVariants() {
       </div>
       <div
         role="alert"
-        className="relative flex w-full items-start rounded-md border border-primary bg-gradient-to-tr from-primary-dark to-primary-light p-2 text-primary-foreground"
+        className="relative flex w-full items-start rounded-md border border-primary bg-linear-to-tr from-primary-dark to-primary-light p-2 text-primary-foreground"
       >
         <div className="m-1.5 w-full font-sans text-base leading-none">
           A simple alert for showing message. with variant="gradient"
diff --git a/apps/site/src/components/docs-html/alert/alert-with-content.tsx b/apps/site/src/components/docs-html/alert/alert-with-content.tsx
index 7e28bd8f6..7db4190d1 100644
--- a/apps/site/src/components/docs-html/alert/alert-with-content.tsx
+++ b/apps/site/src/components/docs-html/alert/alert-with-content.tsx
@@ -50,7 +50,7 @@ export function AlertWithContent() {
           inner peace. That's a good day for me.
         </p>
       </div>
-      <button id="content-close-trigger" className="outline-none">
+      <button id="content-close-trigger" className="outline-hidden">
         <svg
           viewBox="0 0 24 24"
           fill="none"
diff --git a/apps/site/src/components/docs-html/alert/alert-with-list.tsx b/apps/site/src/components/docs-html/alert/alert-with-list.tsx
index 6e056c00a..05efdbc7e 100644
--- a/apps/site/src/components/docs-html/alert/alert-with-list.tsx
+++ b/apps/site/src/components/docs-html/alert/alert-with-list.tsx
@@ -159,7 +159,7 @@ export function AlertWithList() {
       </div>
       <div
         role="alert"
-        className="relative flex w-full items-start rounded-md border border-primary bg-gradient-to-tr from-primary-dark to-primary-light p-2 text-primary-foreground"
+        className="relative flex w-full items-start rounded-md border border-primary bg-linear-to-tr from-primary-dark to-primary-light p-2 text-primary-foreground"
       >
         <span className="grid shrink-0 place-items-center p-1">
           <svg
diff --git a/apps/site/src/components/docs-html/button-group/block-level-button-group.tsx b/apps/site/src/components/docs-html/button-group/block-level-button-group.tsx
index ee738b581..3769905b0 100644
--- a/apps/site/src/components/docs-html/button-group/block-level-button-group.tsx
+++ b/apps/site/src/components/docs-html/button-group/block-level-button-group.tsx
@@ -64,19 +64,19 @@ export function BlockLevelButtonGroup() {
       <div className="inline-flex w-full flex-row">
         <button
           data-ripple-light="true"
-          className="inline-flex w-full select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+          className="inline-flex w-full select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
         >
           React
         </button>
         <button
           data-ripple-light="true"
-          className="inline-flex w-full select-none items-center justify-center rounded-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+          className="inline-flex w-full select-none items-center justify-center rounded-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
         >
           Vue
         </button>
         <button
           data-ripple-light="true"
-          className="inline-flex w-full select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+          className="inline-flex w-full select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
         >
           Svelte
         </button>
diff --git a/apps/site/src/components/docs-html/button-group/button-group-variants.tsx b/apps/site/src/components/docs-html/button-group/button-group-variants.tsx
index 26279c143..63f215120 100644
--- a/apps/site/src/components/docs-html/button-group/button-group-variants.tsx
+++ b/apps/site/src/components/docs-html/button-group/button-group-variants.tsx
@@ -64,19 +64,19 @@ export function ButtonGroupVariants() {
       <div className="inline-flex flex-row">
         <button
           data-ripple-light="true"
-          className="inline-flex select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+          className="inline-flex select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
         >
           React
         </button>
         <button
           data-ripple-light="true"
-          className="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+          className="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
         >
           Vue
         </button>
         <button
           data-ripple-light="true"
-          className="inline-flex select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+          className="inline-flex select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
         >
           Svelte
         </button>
diff --git a/apps/site/src/components/docs-html/button-group/button-group-with-icon.tsx b/apps/site/src/components/docs-html/button-group/button-group-with-icon.tsx
index 33ec6d573..74182db68 100644
--- a/apps/site/src/components/docs-html/button-group/button-group-with-icon.tsx
+++ b/apps/site/src/components/docs-html/button-group/button-group-with-icon.tsx
@@ -229,7 +229,7 @@ export function ButtonGroupWithIcon() {
       <div className="inline-flex flex-row">
         <button
           data-ripple-light="true"
-          className="inline-flex select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+          className="inline-flex select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
         >
           <svg
             width="1.5em"
@@ -250,7 +250,7 @@ export function ButtonGroupWithIcon() {
         </button>
         <button
           data-ripple-light="true"
-          className="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+          className="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
         >
           <svg
             width="1.5em"
@@ -273,7 +273,7 @@ export function ButtonGroupWithIcon() {
         </button>
         <button
           data-ripple-light="true"
-          className="inline-flex select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+          className="inline-flex select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
         >
           <svg
             width="1.5em"
diff --git a/apps/site/src/components/docs-html/button-group/pill-button-group.tsx b/apps/site/src/components/docs-html/button-group/pill-button-group.tsx
index c99b70eeb..4c864008a 100644
--- a/apps/site/src/components/docs-html/button-group/pill-button-group.tsx
+++ b/apps/site/src/components/docs-html/button-group/pill-button-group.tsx
@@ -64,19 +64,19 @@ export function PillButtonGroup() {
       <div className="inline-flex flex-row">
         <button
           data-ripple-light="true"
-          className="inline-flex select-none items-center justify-center rounded-full rounded-r-none border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+          className="inline-flex select-none items-center justify-center rounded-full rounded-r-none border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
         >
           React
         </button>
         <button
           data-ripple-light="true"
-          className="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+          className="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
         >
           Vue
         </button>
         <button
           data-ripple-light="true"
-          className="inline-flex select-none items-center justify-center rounded-full rounded-l-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+          className="inline-flex select-none items-center justify-center rounded-full rounded-l-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
         >
           Svelte
         </button>
diff --git a/apps/site/src/components/docs-html/button/block-level-button.tsx b/apps/site/src/components/docs-html/button/block-level-button.tsx
index d4c7487db..4b6b230de 100644
--- a/apps/site/src/components/docs-html/button/block-level-button.tsx
+++ b/apps/site/src/components/docs-html/button/block-level-button.tsx
@@ -21,7 +21,7 @@ export function BlockLevelButton() {
       </button>
       <button
         data-ripple-light="true"
-        className="inline-flex w-full select-none items-center justify-center rounded-md border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+        className="inline-flex w-full select-none items-center justify-center rounded-md border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
       >
         Gradient Block Level Button
       </button>
diff --git a/apps/site/src/components/docs-html/button/button-as-link.tsx b/apps/site/src/components/docs-html/button/button-as-link.tsx
index f787f57af..28f95f888 100644
--- a/apps/site/src/components/docs-html/button/button-as-link.tsx
+++ b/apps/site/src/components/docs-html/button/button-as-link.tsx
@@ -21,7 +21,7 @@ export function ButtonAsLink() {
       </a>
       <a
         href="#"
-        className="inline-flex select-none items-center justify-center rounded-md border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+        className="inline-flex select-none items-center justify-center rounded-md border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
       >
         Gradient
       </a>
diff --git a/apps/site/src/components/docs-html/button/button-loading.tsx b/apps/site/src/components/docs-html/button/button-loading.tsx
index 0d061897f..9a75a3ba5 100644
--- a/apps/site/src/components/docs-html/button/button-loading.tsx
+++ b/apps/site/src/components/docs-html/button/button-loading.tsx
@@ -87,7 +87,7 @@ export function ButtonLoading() {
       </button>
       <button
         data-ripple-light="true"
-        className="inline-flex select-none items-center justify-center gap-2 rounded-md border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+        className="inline-flex select-none items-center justify-center gap-2 rounded-md border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
       >
         <svg
           fill="none"
diff --git a/apps/site/src/components/docs-html/button/button-variants.tsx b/apps/site/src/components/docs-html/button/button-variants.tsx
index 2606de848..e71a853d0 100644
--- a/apps/site/src/components/docs-html/button/button-variants.tsx
+++ b/apps/site/src/components/docs-html/button/button-variants.tsx
@@ -21,7 +21,7 @@ export function ButtonVariants() {
       </button>
       <button
         data-ripple-light="true"
-        className="inline-flex select-none items-center justify-center rounded-md border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+        className="inline-flex select-none items-center justify-center rounded-md border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
       >
         Gradient
       </button>
diff --git a/apps/site/src/components/docs-html/button/button-with-icon.tsx b/apps/site/src/components/docs-html/button/button-with-icon.tsx
index a8452e8dd..1cdf5baaf 100644
--- a/apps/site/src/components/docs-html/button/button-with-icon.tsx
+++ b/apps/site/src/components/docs-html/button/button-with-icon.tsx
@@ -96,7 +96,7 @@ export function ButtonWithIcon() {
       </button>
       <button
         data-ripple-light="true"
-        className="inline-flex select-none items-center justify-center rounded-md border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+        className="inline-flex select-none items-center justify-center rounded-md border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
       >
         Give Us Star
         <svg
diff --git a/apps/site/src/components/docs-html/button/pill-button.tsx b/apps/site/src/components/docs-html/button/pill-button.tsx
index 163dde1c5..318f176eb 100644
--- a/apps/site/src/components/docs-html/button/pill-button.tsx
+++ b/apps/site/src/components/docs-html/button/pill-button.tsx
@@ -21,7 +21,7 @@ export function PillButton() {
       </button>
       <button
         data-ripple-light="true"
-        className="inline-flex select-none items-center justify-center rounded-full border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+        className="inline-flex select-none items-center justify-center rounded-full border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
       >
         Gradient
       </button>
diff --git a/apps/site/src/components/docs-html/card/background-blog-card.tsx b/apps/site/src/components/docs-html/card/background-blog-card.tsx
index cbdbc7b63..99aa4369f 100644
--- a/apps/site/src/components/docs-html/card/background-blog-card.tsx
+++ b/apps/site/src/components/docs-html/card/background-blog-card.tsx
@@ -1,9 +1,9 @@
 export function BackgroundBlogCard() {
   return (
-    <div className="relative flex h-[40rem] w-full max-w-[28rem] flex-col items-end justify-center overflow-hidden rounded-lg border border-surface bg-background text-center shadow-lg shadow-black/5">
+    <div className="relative flex h-160 w-full max-w-md flex-col items-end justify-center overflow-hidden rounded-lg border border-surface bg-background text-center shadow-lg shadow-black/5">
       <div className="m-1.5 h-max w-[calc(100%-12px)] rounded-[5px]">
         <div className="absolute inset-0 m-0 h-full w-full rounded-none bg-[url('https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80')] bg-cover bg-center">
-          <div className="absolute inset-0 h-full w-full bg-gradient-to-t from-black/80 via-black/50 to-black/10 dark:from-black/90 dark:via-black/60 dark:to-black/20"></div>
+          <div className="absolute inset-0 h-full w-full bg-linear-to-t from-black/80 via-black/50 to-black/10 dark:from-black/90 dark:via-black/60 dark:to-black/20"></div>
         </div>
       </div>
       <div className="relative bottom-0 flex h-full w-full flex-col items-center justify-end rounded px-6 py-14 md:px-12">
diff --git a/apps/site/src/components/docs-html/card/blog-card.tsx b/apps/site/src/components/docs-html/card/blog-card.tsx
index 0ce055e6d..741dc610a 100644
--- a/apps/site/src/components/docs-html/card/blog-card.tsx
+++ b/apps/site/src/components/docs-html/card/blog-card.tsx
@@ -17,14 +17,14 @@ export function BlogCard() {
       </div>
       <div className="mt-4 flex w-full items-center justify-between rounded px-3 pb-3 pt-1.5">
         <div className="flex items-center -space-x-3">
-          <button className="group outline-none">
+          <button className="group outline-hidden">
             <img
               src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1061&amp;q=80"
               alt="natali craig"
               className="inline-block h-8 w-8 rounded-full border-2 border-secondary object-cover object-center hover:z-10"
             />
           </button>
-          <button className="group outline-none">
+          <button className="group outline-hidden">
             <img
               src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
               alt="tania andrew"
diff --git a/apps/site/src/components/docs-html/card/booking-card.tsx b/apps/site/src/components/docs-html/card/booking-card.tsx
index 1364ade82..23d317e8d 100644
--- a/apps/site/src/components/docs-html/card/booking-card.tsx
+++ b/apps/site/src/components/docs-html/card/booking-card.tsx
@@ -1,12 +1,12 @@
 export function BookingCard() {
   return (
-    <div className="w-full max-w-[26rem] overflow-hidden rounded-lg border border-surface bg-background shadow-lg shadow-black/5">
+    <div className="w-full max-w-104 overflow-hidden rounded-lg border border-surface bg-background shadow-lg shadow-black/5">
       <div className="relative m-1.5 h-max w-[calc(100%-12px)] overflow-hidden rounded-[5px] p-0">
         <img
           src="https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1470&amp;q=80"
           alt="ui/ux review check"
         />
-        <div className="to-bg-black-10 absolute inset-0 h-full w-full bg-gradient-to-tr from-transparent via-transparent to-black/60 "></div>
+        <div className="to-bg-black-10 absolute inset-0 h-full w-full bg-linear-to-tr from-transparent via-transparent to-black/60 "></div>
         <button className="!absolute right-2 top-2 inline-grid min-h-[28px] min-w-[28px] select-none place-items-center rounded-full border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-error transition-all duration-300 ease-in hover:border-error/10 hover:bg-error/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
           <svg
             width="1.5em"
@@ -57,8 +57,8 @@ export function BookingCard() {
           surrounded by ancient trees, stone walls, and open meadows.
         </p>
         <div className="group mt-6 inline-flex flex-wrap items-center gap-3">
-          <button className="group outline-none">
-            <button className="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:!opacity-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
+          <button className="group outline-hidden">
+            <button className="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:opacity-100! disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
               <svg
                 width="1.5em"
                 height="1.5em"
@@ -96,8 +96,8 @@ export function BookingCard() {
               </svg>
             </button>
           </button>
-          <button className="group outline-none">
-            <button className="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:!opacity-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
+          <button className="group outline-hidden">
+            <button className="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:opacity-100! disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
               <svg
                 width="1.5em"
                 height="1.5em"
@@ -135,8 +135,8 @@ export function BookingCard() {
               </svg>
             </button>
           </button>
-          <button className="group outline-none">
-            <button className="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:!opacity-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
+          <button className="group outline-hidden">
+            <button className="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:opacity-100! disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
               <svg
                 width="1.5em"
                 height="1.5em"
@@ -162,8 +162,8 @@ export function BookingCard() {
               </svg>
             </button>
           </button>
-          <button className="group outline-none">
-            <button className="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:!opacity-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
+          <button className="group outline-hidden">
+            <button className="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:opacity-100! disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
               <svg
                 width="1.5em"
                 height="1.5em"
@@ -187,8 +187,8 @@ export function BookingCard() {
               </svg>
             </button>
           </button>
-          <button className="group outline-none">
-            <button className="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:!opacity-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
+          <button className="group outline-hidden">
+            <button className="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:opacity-100! disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
               <svg
                 width="1.5em"
                 stroke-width="1.5"
@@ -214,8 +214,8 @@ export function BookingCard() {
               </svg>
             </button>
           </button>
-          <button className="group outline-none">
-            <button className="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:!opacity-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
+          <button className="group outline-hidden">
+            <button className="inline-grid min-h-[46px] min-w-[46px] cursor-pointer select-none place-items-center rounded-full border border-surface bg-surface-light text-center align-middle font-sans text-base font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light hover:opacity-100! disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none group-hover:opacity-70">
               +20
             </button>
           </button>
diff --git a/apps/site/src/components/docs-html/card/horizontal-card.tsx b/apps/site/src/components/docs-html/card/horizontal-card.tsx
index 810405afe..68f3503bb 100644
--- a/apps/site/src/components/docs-html/card/horizontal-card.tsx
+++ b/apps/site/src/components/docs-html/card/horizontal-card.tsx
@@ -1,6 +1,6 @@
 export function HorizontalCard() {
   return (
-    <div className="flex h-full w-full max-w-[48rem] flex-row overflow-hidden rounded-lg border border-surface bg-background shadow-lg shadow-black/5">
+    <div className="flex h-full w-full max-w-3xl flex-row overflow-hidden rounded-lg border border-surface bg-background shadow-lg shadow-black/5">
       <div className="m-0 h-full w-2/5 shrink-0 rounded-[5px] rounded-r-none">
         <img
           src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1471&amp;q=80"
diff --git a/apps/site/src/components/docs-html/card/login-card.tsx b/apps/site/src/components/docs-html/card/login-card.tsx
index 7f0298e6b..4723702d8 100644
--- a/apps/site/src/components/docs-html/card/login-card.tsx
+++ b/apps/site/src/components/docs-html/card/login-card.tsx
@@ -17,7 +17,7 @@ export function LoginCard() {
           <input
             id="email"
             placeholder="someone@example.com"
-            className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+            className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
             type="email"
           />
         </div>
@@ -31,7 +31,7 @@ export function LoginCard() {
           <input
             id="password"
             placeholder="************"
-            className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+            className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
             type="password"
           />
         </div>
diff --git a/apps/site/src/components/docs-html/card/profile-card.tsx b/apps/site/src/components/docs-html/card/profile-card.tsx
index d8b5ae194..31f34bccc 100644
--- a/apps/site/src/components/docs-html/card/profile-card.tsx
+++ b/apps/site/src/components/docs-html/card/profile-card.tsx
@@ -15,7 +15,7 @@ export function ProfileCard() {
         </p>
       </div>
       <div className="flex w-full items-center justify-center gap-1 rounded px-3 pb-3 pt-1.5">
-        <button className="group inline-grid min-h-[28px] min-w-[28px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-primary outline-none transition-all duration-300 ease-in hover:border-primary/5 hover:bg-primary/5 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+        <button className="group inline-grid min-h-[28px] min-w-[28px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-primary outline-hidden transition-all duration-300 ease-in hover:border-primary/5 hover:bg-primary/5 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
           <svg
             width="1.5em"
             height="1.5em"
@@ -37,7 +37,7 @@ export function ProfileCard() {
             ></path>
           </svg>
         </button>
-        <button className="group inline-grid min-h-[28px] min-w-[28px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-primary outline-none transition-all duration-300 ease-in hover:border-primary/5 hover:bg-primary/5 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+        <button className="group inline-grid min-h-[28px] min-w-[28px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-primary outline-hidden transition-all duration-300 ease-in hover:border-primary/5 hover:bg-primary/5 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
           <svg
             width="1.5em"
             height="1.5em"
@@ -56,7 +56,7 @@ export function ProfileCard() {
             ></path>
           </svg>
         </button>
-        <button className="group inline-grid min-h-[28px] min-w-[28px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-primary outline-none transition-all duration-300 ease-in hover:border-primary/5 hover:bg-primary/5 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+        <button className="group inline-grid min-h-[28px] min-w-[28px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-primary outline-hidden transition-all duration-300 ease-in hover:border-primary/5 hover:bg-primary/5 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
           <svg
             width="1.5em"
             height="1.5em"
diff --git a/apps/site/src/components/docs-html/card/testimonial-card.tsx b/apps/site/src/components/docs-html/card/testimonial-card.tsx
index c361a9611..f185e353e 100644
--- a/apps/site/src/components/docs-html/card/testimonial-card.tsx
+++ b/apps/site/src/components/docs-html/card/testimonial-card.tsx
@@ -1,6 +1,6 @@
 export function TestimonialCard() {
   return (
-    <div className="w-full max-w-[26rem] overflow-hidden rounded-lg border border-none border-surface bg-background shadow-none shadow-black/5">
+    <div className="w-full max-w-104 overflow-hidden rounded-lg border border-none border-surface bg-background shadow-none shadow-black/5">
       <div className="m-1.5 mx-0 flex h-max w-[calc(100%-12px)] items-center gap-4 rounded-[5px] pb-4 pt-0">
         <img
           src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
diff --git a/apps/site/src/components/docs-html/chip/chip-icon.tsx b/apps/site/src/components/docs-html/chip/chip-icon.tsx
index be2848796..510cf2c7a 100644
--- a/apps/site/src/components/docs-html/chip/chip-icon.tsx
+++ b/apps/site/src/components/docs-html/chip/chip-icon.tsx
@@ -109,7 +109,7 @@ export function ChipIcon() {
           Solid
         </span>
       </div>
-      <div className="relative inline-flex select-none items-center rounded-full border border-primary bg-gradient-to-tr from-primary-dark to-primary-light p-[3px] font-sans text-[13px] font-medium leading-none text-primary-foreground">
+      <div className="relative inline-flex select-none items-center rounded-full border border-primary bg-linear-to-tr from-primary-dark to-primary-light p-[3px] font-sans text-[13px] font-medium leading-none text-primary-foreground">
         <span className="grid h-4 w-4 shrink-0 translate-x-0.5 place-items-center rounded-full">
           <svg
             width="1.5em"
diff --git a/apps/site/src/components/docs-html/chip/chip-variants.tsx b/apps/site/src/components/docs-html/chip/chip-variants.tsx
index 4d970945c..d2b68a109 100644
--- a/apps/site/src/components/docs-html/chip/chip-variants.tsx
+++ b/apps/site/src/components/docs-html/chip/chip-variants.tsx
@@ -16,7 +16,7 @@ export function ChipVariants() {
           Solid
         </span>
       </div>
-      <div className="relative inline-flex select-none items-center rounded-full border border-primary bg-gradient-to-tr from-primary-dark to-primary-light p-[3px] font-sans text-[13px] font-medium leading-none text-primary-foreground">
+      <div className="relative inline-flex select-none items-center rounded-full border border-primary bg-linear-to-tr from-primary-dark to-primary-light p-[3px] font-sans text-[13px] font-medium leading-none text-primary-foreground">
         <span className="font-inherit mx-2 my-[3.5px] leading-none text-inherit">
           Gradient
         </span>
diff --git a/apps/site/src/components/docs-html/gallery/gallery-with-tab.tsx b/apps/site/src/components/docs-html/gallery/gallery-with-tab.tsx
index e665b5513..676772ad7 100644
--- a/apps/site/src/components/docs-html/gallery/gallery-with-tab.tsx
+++ b/apps/site/src/components/docs-html/gallery/gallery-with-tab.tsx
@@ -7,35 +7,35 @@ export function GalleryWithTab() {
       >
         <button
           role="tab"
-          className="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
+          className="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
         >
           HTML
         </button>
         <button
           role="tab"
-          className="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
+          className="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
         >
           React
         </button>
         <button
           role="tab"
-          className="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
+          className="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
         >
           Vue
         </button>
         <button
           role="tab"
-          className="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
+          className="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
         >
           Angular
         </button>
         <button
           role="tab"
-          className="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
+          className="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-white"
         >
           Svelte
         </button>
-        <span className="rounded bg-background shadow-sm shadow-black/10 transition-all duration-300 ease-in"></span>
+        <span className="rounded bg-background shadow-xs shadow-black/10 transition-all duration-300 ease-in"></span>
       </div>
       <div
         role="tabpanel"
diff --git a/apps/site/src/components/docs-html/icon-button/icon-button-as-link.tsx b/apps/site/src/components/docs-html/icon-button/icon-button-as-link.tsx
index 9c734dfa3..a9f3f66c5 100644
--- a/apps/site/src/components/docs-html/icon-button/icon-button-as-link.tsx
+++ b/apps/site/src/components/docs-html/icon-button/icon-button-as-link.tsx
@@ -213,7 +213,7 @@ export function IconButtonAsLink() {
       </a>
       <a
         href="#"
-        className="inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-primary bg-gradient-to-tr from-primary-dark to-primary-light text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
+        className="inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-primary bg-linear-to-tr from-primary-dark to-primary-light text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
       >
         <svg
           width="1.5em"
diff --git a/apps/site/src/components/docs-html/icon-button/icon-button-variants.tsx b/apps/site/src/components/docs-html/icon-button/icon-button-variants.tsx
index 1451060aa..5b5ec7398 100644
--- a/apps/site/src/components/docs-html/icon-button/icon-button-variants.tsx
+++ b/apps/site/src/components/docs-html/icon-button/icon-button-variants.tsx
@@ -202,7 +202,7 @@ export function IconButtonVariants() {
           ></path>
         </svg>
       </button>
-      <button className="inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-primary bg-gradient-to-tr from-primary-dark to-primary-light text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+      <button className="inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-primary bg-linear-to-tr from-primary-dark to-primary-light text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
         <svg
           width="1.5em"
           height="1.5em"
diff --git a/apps/site/src/components/docs-html/icon-button/rounded-icon-button.tsx b/apps/site/src/components/docs-html/icon-button/rounded-icon-button.tsx
index 032b59d7c..96202e03b 100644
--- a/apps/site/src/components/docs-html/icon-button/rounded-icon-button.tsx
+++ b/apps/site/src/components/docs-html/icon-button/rounded-icon-button.tsx
@@ -202,7 +202,7 @@ export function RoundedIconButton() {
           ></path>
         </svg>
       </button>
-      <button className="inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-full border border-primary bg-gradient-to-tr from-primary-dark to-primary-light text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+      <button className="inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-full border border-primary bg-linear-to-tr from-primary-dark to-primary-light text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
         <svg
           width="1.5em"
           height="1.5em"
diff --git a/apps/site/src/components/docs-html/input/input-colors.tsx b/apps/site/src/components/docs-html/input/input-colors.tsx
index 4740958bb..07cbb4bcf 100644
--- a/apps/site/src/components/docs-html/input/input-colors.tsx
+++ b/apps/site/src/components/docs-html/input/input-colors.tsx
@@ -3,32 +3,32 @@ export function InputColors() {
     <div className="flex flex-col gap-4">
       <input
         placeholder="Input Primary"
-        className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+        className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
         type="text"
       />
       <input
         placeholder="Input Secondary"
-        className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-secondary hover:ring-secondary/10 focus:border-secondary focus:outline-none focus:ring-secondary/10 dark:text-white"
+        className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-secondary hover:ring-secondary/10 focus:border-secondary focus:outline-hidden focus:ring-secondary/10 dark:text-white"
         type="text"
       />
       <input
         placeholder="Input Info"
-        className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-info hover:ring-info/10 focus:border-info focus:outline-none focus:ring-info/10 dark:text-white"
+        className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-info hover:ring-info/10 focus:border-info focus:outline-hidden focus:ring-info/10 dark:text-white"
         type="text"
       />
       <input
         placeholder="Input Success"
-        className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-success hover:ring-success/10 focus:border-success focus:outline-none focus:ring-success/10 dark:text-white"
+        className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-success hover:ring-success/10 focus:border-success focus:outline-hidden focus:ring-success/10 dark:text-white"
         type="text"
       />
       <input
         placeholder="Input Warning"
-        className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-warning hover:ring-warning/10 focus:border-warning focus:outline-none focus:ring-warning/10 dark:text-white"
+        className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-warning hover:ring-warning/10 focus:border-warning focus:outline-hidden focus:ring-warning/10 dark:text-white"
         type="text"
       />
       <input
         placeholder="Input Error"
-        className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-error hover:ring-error/10 focus:border-error focus:outline-none focus:ring-error/10 dark:text-white"
+        className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-error hover:ring-error/10 focus:border-error focus:outline-hidden focus:ring-error/10 dark:text-white"
         type="text"
       />
     </div>
diff --git a/apps/site/src/components/docs-html/input/input-custom-styles.tsx b/apps/site/src/components/docs-html/input/input-custom-styles.tsx
index 2f943b7a4..282acd670 100644
--- a/apps/site/src/components/docs-html/input/input-custom-styles.tsx
+++ b/apps/site/src/components/docs-html/input/input-custom-styles.tsx
@@ -3,7 +3,7 @@ export function InputCustomStyles() {
     <div className="relative w-72 rounded-md text-sm leading-none">
       <input
         placeholder="Username"
-        className="peer h-full w-full select-none rounded-none border-0 border-b border-gray-400 bg-transparent px-2.5 py-[8.5px] pl-[26px] pr-0.5 ps-8 leading-[inherit] text-black outline-none ring-0 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-gray-900 hover:ring-primary/10 focus:border-gray-900 focus:outline-none focus:ring-primary/10 dark:border-gray-600 dark:text-white dark:hover:border-gray-50 dark:focus:border-gray-50"
+        className="peer h-full w-full select-none rounded-none border-0 border-b border-gray-400 bg-transparent px-2.5 py-[8.5px] pl-[26px] pr-0.5 ps-8 leading-[inherit] text-black outline-hidden ring-0 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-gray-900 hover:ring-primary/10 focus:border-gray-900 focus:outline-hidden focus:ring-primary/10 dark:border-gray-600 dark:text-white dark:hover:border-gray-50 dark:focus:border-gray-50"
         type="text"
       />
       <span className="pointer-events-none absolute left-px top-1/2 h-5 w-5 -translate-y-1/2 overflow-hidden text-foreground/70 transition-all duration-300 ease-in peer-hover:text-black peer-focus:text-black dark:peer-hover:text-white dark:peer-focus:text-white">
diff --git a/apps/site/src/components/docs-html/input/input-demo.tsx b/apps/site/src/components/docs-html/input/input-demo.tsx
index 34115315b..b959fa53d 100644
--- a/apps/site/src/components/docs-html/input/input-demo.tsx
+++ b/apps/site/src/components/docs-html/input/input-demo.tsx
@@ -2,7 +2,7 @@ export function InputDemo() {
   return (
     <input
       placeholder="Input"
-      className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+      className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
       type="text"
     />
   );
diff --git a/apps/site/src/components/docs-html/input/input-disabled.tsx b/apps/site/src/components/docs-html/input/input-disabled.tsx
index eafeba41f..99363b53a 100644
--- a/apps/site/src/components/docs-html/input/input-disabled.tsx
+++ b/apps/site/src/components/docs-html/input/input-disabled.tsx
@@ -6,7 +6,7 @@ export function InputDisabled() {
     >
       <input
         placeholder="Input"
-        className="peer pointer-events-none h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black opacity-50 outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+        className="peer pointer-events-none h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black opacity-50 outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
         disabled
         type="text"
       />
diff --git a/apps/site/src/components/docs-html/input/input-sizes.tsx b/apps/site/src/components/docs-html/input/input-sizes.tsx
index 284a1957a..65dd5035d 100644
--- a/apps/site/src/components/docs-html/input/input-sizes.tsx
+++ b/apps/site/src/components/docs-html/input/input-sizes.tsx
@@ -3,17 +3,17 @@ export function InputSizes() {
     <div className="flex flex-col gap-4">
       <input
         placeholder="Input Small"
-        className="w-72 select-none rounded-md border border-surface bg-transparent px-1.5 py-[4.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+        className="w-72 select-none rounded-md border border-surface bg-transparent px-1.5 py-[4.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
         type="text"
       />
       <input
         placeholder="Input Medium"
-        className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+        className="w-72 select-none rounded-md border border-surface bg-transparent px-2.5 py-[8.5px] text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
         type="text"
       />
       <input
         placeholder="Input Large"
-        className="w-72 select-none rounded-lg border border-surface bg-transparent px-3.5 py-[12.25px] text-base leading-none text-black outline-none ring-4 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+        className="w-72 select-none rounded-lg border border-surface bg-transparent px-3.5 py-[12.25px] text-base leading-none text-black outline-hidden ring-4 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
         type="text"
       />
     </div>
diff --git a/apps/site/src/components/docs-html/input/input-with-button.tsx b/apps/site/src/components/docs-html/input/input-with-button.tsx
index 3b8bec2ff..d3b18ae4f 100644
--- a/apps/site/src/components/docs-html/input/input-with-button.tsx
+++ b/apps/site/src/components/docs-html/input/input-with-button.tsx
@@ -7,7 +7,7 @@ export function InputWithButton() {
       <div className="relative w-full rounded-md text-sm leading-none">
         <input
           placeholder="someone@example.com"
-          className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+          className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
           type="email"
         />
       </div>
diff --git a/apps/site/src/components/docs-html/input/input-with-dropdown.tsx b/apps/site/src/components/docs-html/input/input-with-dropdown.tsx
index 76e4be867..87e5024d6 100644
--- a/apps/site/src/components/docs-html/input/input-with-dropdown.tsx
+++ b/apps/site/src/components/docs-html/input/input-with-dropdown.tsx
@@ -3,7 +3,7 @@ export function InputWithDropdown() {
     <div className="relative flex w-full max-w-[24rem]">
       <button
         id=":rk:"
-        className="group flex h-10 select-none items-center justify-center gap-2 rounded-md rounded-r-none border border-r-0 border-surface bg-secondary px-3.5 py-2.5 pl-3 text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+        className="group flex h-10 select-none items-center justify-center gap-2 rounded-md rounded-r-none border border-r-0 border-surface bg-secondary px-3.5 py-2.5 pl-3 text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary-light hover:bg-secondary-light disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
       >
         <img
           src="https://flagcdn.com/ke.svg"
@@ -15,7 +15,7 @@ export function InputWithDropdown() {
       <div className="relative w-72 rounded-md text-sm leading-none aria-disabled:cursor-not-allowed">
         <input
           placeholder="Mobile Number"
-          className="peer h-full w-full select-none rounded-[inherit] rounded-l-none border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+          className="peer h-full w-full select-none rounded-[inherit] rounded-l-none border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
           type="text"
         />
       </div>
diff --git a/apps/site/src/components/docs-html/input/input-with-helper-text.tsx b/apps/site/src/components/docs-html/input/input-with-helper-text.tsx
index aff766ab2..c25dcd98a 100644
--- a/apps/site/src/components/docs-html/input/input-with-helper-text.tsx
+++ b/apps/site/src/components/docs-html/input/input-with-helper-text.tsx
@@ -3,7 +3,7 @@ export function InputWithHelperText() {
     <div className="relative w-72 space-y-2 rounded-md text-sm leading-none">
       <input
         placeholder="Password"
-        className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+        className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
         type="password"
       />
       <div className="flex gap-1.5 text-foreground">
diff --git a/apps/site/src/components/docs-html/input/input-with-icon.tsx b/apps/site/src/components/docs-html/input/input-with-icon.tsx
index 1955d0ab2..5c0ce7077 100644
--- a/apps/site/src/components/docs-html/input/input-with-icon.tsx
+++ b/apps/site/src/components/docs-html/input/input-with-icon.tsx
@@ -4,7 +4,7 @@ export function InputWithIcon() {
       <div className="relative w-full rounded-md text-sm leading-none aria-disabled:cursor-not-allowed data-[shape=pill]:rounded-full">
         <input
           placeholder="Username"
-          className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] ps-8 leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+          className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] ps-8 leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
           type="text"
         />
         <span className="pointer-events-none absolute left-[7px] top-1/2 h-5 w-5 -translate-y-1/2 overflow-hidden text-foreground/70 transition-all duration-300 ease-in peer-hover:text-black peer-focus:text-black dark:peer-hover:text-white dark:peer-focus:text-white">
@@ -42,7 +42,7 @@ export function InputWithIcon() {
       <div className="relative w-full rounded-md text-sm leading-none aria-disabled:cursor-not-allowed data-[shape=pill]:rounded-full">
         <input
           placeholder="Password"
-          className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] pe-8 leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+          className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] pe-8 leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
           type="password"
         />
         <span className="pointer-events-none absolute right-[7px] top-1/2 h-5 w-5 -translate-y-1/2 overflow-hidden text-foreground/70 transition-all duration-300 ease-in peer-hover:text-black peer-focus:text-black dark:peer-hover:text-white dark:peer-focus:text-white">
diff --git a/apps/site/src/components/docs-html/input/input-with-label.tsx b/apps/site/src/components/docs-html/input/input-with-label.tsx
index 9d01222fd..6adf453b1 100644
--- a/apps/site/src/components/docs-html/input/input-with-label.tsx
+++ b/apps/site/src/components/docs-html/input/input-with-label.tsx
@@ -10,7 +10,7 @@ export function InputWithLabel() {
       <input
         id="email"
         placeholder="someone@example.com"
-        className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+        className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
         type="email"
       />
     </div>
diff --git a/apps/site/src/components/docs-html/input/input-with-validation.tsx b/apps/site/src/components/docs-html/input/input-with-validation.tsx
index af37a2000..da341bc3d 100644
--- a/apps/site/src/components/docs-html/input/input-with-validation.tsx
+++ b/apps/site/src/components/docs-html/input/input-with-validation.tsx
@@ -4,7 +4,7 @@ export function InputWithValidation() {
       <div className="relative w-full rounded-md text-sm leading-none">
         <input
           placeholder="Input Error"
-          className="peer h-full w-full select-none rounded-[inherit] border border-error bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-error hover:ring-error/10 focus:border-error focus:outline-none focus:ring-error/10 dark:text-white"
+          className="peer h-full w-full select-none rounded-[inherit] border border-error bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-error hover:ring-error/10 focus:border-error focus:outline-hidden focus:ring-error/10 dark:text-white"
           type="text"
         />
         <small className="mt-1 block font-sans text-sm text-error antialiased">
@@ -14,7 +14,7 @@ export function InputWithValidation() {
       <div className="relative w-full rounded-md text-sm leading-none">
         <input
           placeholder="Input Success"
-          className="peer h-full w-full select-none rounded-[inherit] border border-success bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-success hover:ring-success/10 focus:border-success focus:outline-none focus:ring-success/10 dark:text-white"
+          className="peer h-full w-full select-none rounded-[inherit] border border-success bg-transparent px-2.5 py-[8.5px] leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-success hover:ring-success/10 focus:border-success focus:outline-hidden focus:ring-success/10 dark:text-white"
           type="text"
         />
         <small className="mt-1 block font-sans text-sm text-success antialiased">
diff --git a/apps/site/src/components/docs-html/navbar/complex-navbar.tsx b/apps/site/src/components/docs-html/navbar/complex-navbar.tsx
index 1d74b3b20..465ef9118 100644
--- a/apps/site/src/components/docs-html/navbar/complex-navbar.tsx
+++ b/apps/site/src/components/docs-html/navbar/complex-navbar.tsx
@@ -1,6 +1,6 @@
 export function ComplexNavbar() {
   return (
-    <nav className="mx-auto w-full max-w-screen-xl overflow-hidden rounded-lg border border-surface bg-background p-2 shadow-lg shadow-black/5">
+    <nav className="mx-auto w-full max-w-(--breakpoint-xl) overflow-hidden rounded-lg border border-surface bg-background p-2 shadow-lg shadow-black/5">
       <div className="flex items-center">
         <a
           href="#"
@@ -11,7 +11,7 @@ export function ComplexNavbar() {
         <hr className="mx-1 hidden h-5 w-px border-l border-t-0 border-secondary-dark lg:block" />
         <div className="hidden lg:block">
           <ul className="mt-4 flex min-w-[240px] flex-col gap-1 lg:mt-0 lg:flex-row lg:items-center">
-            <button data-open="false" className="group outline-none">
+            <button data-open="false" className="group outline-hidden">
               <li className="flex select-none items-center rounded-md bg-transparent px-2.5 py-1.5 align-middle font-sans text-foreground transition-all duration-300 ease-in hover:bg-surface hover:text-black focus:bg-surface focus:text-black dark:bg-opacity-70 dark:hover:text-white dark:focus:text-white">
                 <span className="me-2.5 grid shrink-0 place-items-center">
                   <svg
@@ -250,7 +250,7 @@ export function ComplexNavbar() {
           id=":r3j:"
           src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/ct-assets/team-4.jpg"
           alt="profile-picture"
-          className="group inline-block h-8 w-8 rounded-full border border-primary object-cover object-center p-0.5 outline-none lg:ml-auto"
+          className="group inline-block h-8 w-8 rounded-full border border-primary object-cover object-center p-0.5 outline-hidden lg:ml-auto"
         />
       </div>
     </nav>
diff --git a/apps/site/src/components/docs-html/navbar/dark-navbar.tsx b/apps/site/src/components/docs-html/navbar/dark-navbar.tsx
index 4df1579e0..3706766e5 100644
--- a/apps/site/src/components/docs-html/navbar/dark-navbar.tsx
+++ b/apps/site/src/components/docs-html/navbar/dark-navbar.tsx
@@ -1,6 +1,6 @@
 export function DarkNavbar() {
   return (
-    <nav className="mx-auto w-full max-w-screen-xl overflow-hidden rounded-lg border border-surface bg-black p-2 shadow-lg shadow-black/5 dark:bg-surface-dark">
+    <nav className="mx-auto w-full max-w-(--breakpoint-xl) overflow-hidden rounded-lg border border-surface bg-black p-2 shadow-lg shadow-black/5 dark:bg-surface-dark">
       <div className="flex items-center text-white">
         <a
           href="#"
diff --git a/apps/site/src/components/docs-html/navbar/navbar-demo.tsx b/apps/site/src/components/docs-html/navbar/navbar-demo.tsx
index bb4eb7aed..adf7bb1c5 100644
--- a/apps/site/src/components/docs-html/navbar/navbar-demo.tsx
+++ b/apps/site/src/components/docs-html/navbar/navbar-demo.tsx
@@ -1,6 +1,6 @@
 export function NavbarDemo() {
   return (
-    <nav className="mx-auto w-full max-w-screen-xl overflow-hidden rounded-lg border border-surface bg-background p-2 shadow-lg shadow-black/5">
+    <nav className="mx-auto w-full max-w-(--breakpoint-xl) overflow-hidden rounded-lg border border-surface bg-background p-2 shadow-lg shadow-black/5">
       <div className="flex items-center">
         <a
           href="#"
diff --git a/apps/site/src/components/docs-html/navbar/navbar-with-mega-menu.tsx b/apps/site/src/components/docs-html/navbar/navbar-with-mega-menu.tsx
index 6a7b53e7c..b4d0192ff 100644
--- a/apps/site/src/components/docs-html/navbar/navbar-with-mega-menu.tsx
+++ b/apps/site/src/components/docs-html/navbar/navbar-with-mega-menu.tsx
@@ -1,6 +1,6 @@
 export function NavbarWithMegaMenu() {
   return (
-    <nav className="mx-auto w-full max-w-screen-xl overflow-hidden rounded-lg border border-surface bg-background p-2 shadow-lg shadow-black/5">
+    <nav className="mx-auto w-full max-w-(--breakpoint-xl) overflow-hidden rounded-lg border border-surface bg-background p-2 shadow-lg shadow-black/5">
       <div className="flex items-center">
         <a
           href="#"
@@ -11,7 +11,7 @@ export function NavbarWithMegaMenu() {
         <hr className="mx-1 hidden h-5 w-px border-l border-t-0 border-secondary-dark lg:block" />
         <div className="hidden lg:block">
           <ul className="mt-4 flex min-w-[240px] flex-col gap-1 lg:mt-0 lg:flex-row lg:items-center">
-            <button data-open="false" className="group outline-none">
+            <button data-open="false" className="group outline-hidden">
               <li className="flex select-none items-center rounded-md bg-transparent px-2.5 py-1.5 align-middle font-sans text-foreground transition-all duration-300 ease-in hover:bg-surface hover:text-black focus:bg-surface focus:text-black aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:bg-opacity-70 dark:hover:text-white dark:focus:text-white">
                 <span className="me-2.5 grid shrink-0 place-items-center">
                   <svg
@@ -250,7 +250,7 @@ export function NavbarWithMegaMenu() {
           id=":r7a:"
           src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/ct-assets/team-4.jpg"
           alt="profile-picture"
-          className="group inline-block h-8 w-8 rounded-full border border-primary object-cover object-center p-0.5 outline-none lg:ml-auto"
+          className="group inline-block h-8 w-8 rounded-full border border-primary object-cover object-center p-0.5 outline-hidden lg:ml-auto"
         />
       </div>
     </nav>
diff --git a/apps/site/src/components/docs-html/navbar/navbar-with-search.tsx b/apps/site/src/components/docs-html/navbar/navbar-with-search.tsx
index 5da13fe36..706b0381c 100644
--- a/apps/site/src/components/docs-html/navbar/navbar-with-search.tsx
+++ b/apps/site/src/components/docs-html/navbar/navbar-with-search.tsx
@@ -1,6 +1,6 @@
 export function NavbarWithSearch() {
   return (
-    <nav className="mx-auto w-full max-w-screen-xl overflow-hidden rounded-lg border border-surface bg-background p-2 shadow-lg shadow-black/5">
+    <nav className="mx-auto w-full max-w-(--breakpoint-xl) overflow-hidden rounded-lg border border-surface bg-background p-2 shadow-lg shadow-black/5">
       <div className="flex items-center">
         <a
           href="#"
@@ -217,7 +217,7 @@ export function NavbarWithSearch() {
           </span>
           <input
             placeholder="Search here..."
-            className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-1.5 py-[4.5px] ps-6 leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+            className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-1.5 py-[4.5px] ps-6 leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
             type="search"
           />
         </div>
diff --git a/apps/site/src/components/docs-html/navbar/simple-navbar.tsx b/apps/site/src/components/docs-html/navbar/simple-navbar.tsx
index 5f6e3b164..099e4f2dd 100644
--- a/apps/site/src/components/docs-html/navbar/simple-navbar.tsx
+++ b/apps/site/src/components/docs-html/navbar/simple-navbar.tsx
@@ -1,6 +1,6 @@
 export function SimpleNavbar() {
   return (
-    <nav className="mx-auto w-full max-w-screen-xl overflow-hidden rounded-lg border border-surface bg-background p-2 shadow-lg shadow-black/5">
+    <nav className="mx-auto w-full max-w-(--breakpoint-xl) overflow-hidden rounded-lg border border-surface bg-background p-2 shadow-lg shadow-black/5">
       <div className="flex items-center">
         <a
           href="#"
diff --git a/apps/site/src/components/docs-html/navbar/sticky-navbar.tsx b/apps/site/src/components/docs-html/navbar/sticky-navbar.tsx
index 2a5421d57..2d6634896 100644
--- a/apps/site/src/components/docs-html/navbar/sticky-navbar.tsx
+++ b/apps/site/src/components/docs-html/navbar/sticky-navbar.tsx
@@ -1,7 +1,7 @@
 export function StickyNavbar() {
   return (
     <div className="h-96 w-full overflow-scroll">
-      <nav className="sticky top-0 mx-auto w-full max-w-screen-xl overflow-hidden rounded-lg border border-surface bg-background p-2 shadow-lg shadow-black/5">
+      <nav className="sticky top-0 mx-auto w-full max-w-(--breakpoint-xl) overflow-hidden rounded-lg border border-surface bg-background p-2 shadow-lg shadow-black/5">
         <div className="flex items-center">
           <a
             href="#"
diff --git a/apps/site/src/components/docs-html/switch/custom-switch.tsx b/apps/site/src/components/docs-html/switch/custom-switch.tsx
index 818639c8e..3ede44ab8 100644
--- a/apps/site/src/components/docs-html/switch/custom-switch.tsx
+++ b/apps/site/src/components/docs-html/switch/custom-switch.tsx
@@ -1,7 +1,7 @@
 export function CustomSwitch() {
   return (
     <input
-      className="relative inline-block h-6 w-10 appearance-none rounded-full before:absolute before:left-0 before:top-0 before:inline-block before:h-full before:w-full before:rounded-full before:bg-surface before:transition-colors before:duration-200 before:ease-in after:absolute after:left-0.5 after:top-2/4 after:h-5 after:w-5 after:-translate-y-2/4 after:rounded-full after:bg-background after:shadow-sm after:shadow-black/10 after:transition-transform after:duration-200 after:ease-in checked:before:bg-[#2ec946] checked:after:translate-x-[calc(100%-4px)] dark:after:bg-white"
+      className="relative inline-block h-6 w-10 appearance-none rounded-full before:absolute before:left-0 before:top-0 before:inline-block before:h-full before:w-full before:rounded-full before:bg-surface before:transition-colors before:duration-200 before:ease-in after:absolute after:left-0.5 after:top-2/4 after:h-5 after:w-5 after:-translate-y-2/4 after:rounded-full after:bg-background after:shadow-xs after:shadow-black/10 after:transition-transform after:duration-200 after:ease-in checked:before:bg-[#2ec946] checked:after:translate-x-[calc(100%-4px)] dark:after:bg-white"
       type="checkbox"
     />
   );
diff --git a/apps/site/src/components/docs-html/table/members-table.tsx b/apps/site/src/components/docs-html/table/members-table.tsx
index 2d3bc7542..e12218866 100644
--- a/apps/site/src/components/docs-html/table/members-table.tsx
+++ b/apps/site/src/components/docs-html/table/members-table.tsx
@@ -56,30 +56,30 @@ export function MembersTable() {
           >
             <button
               role="tab"
-              className="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
+              className="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
             >
               All
             </button>
             <button
               role="tab"
-              className="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
+              className="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
             >
               Monitored
             </button>
             <button
               role="tab"
-              className="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
+              className="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
             >
               Unmonitored
             </button>
-            <span className="rounded bg-background shadow-sm shadow-black/10 transition-all duration-300 ease-in"></span>
+            <span className="rounded bg-background shadow-xs shadow-black/10 transition-all duration-300 ease-in"></span>
           </div>
         </div>
         <div className="w-full md:w-72">
           <div className="relative w-full rounded-md text-sm leading-none aria-disabled:cursor-not-allowed data-[shape=pill]:rounded-full">
             <input
               placeholder="Search"
-              className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] pe-8 leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+              className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] pe-8 leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
               type="text"
             />
             <span className="pointer-events-none absolute right-[7px] top-1/2 h-5 w-5 -translate-y-1/2 overflow-hidden text-foreground/70 transition-all duration-300 ease-in peer-hover:text-black peer-focus:text-black dark:peer-hover:text-white dark:peer-focus:text-white">
@@ -167,7 +167,7 @@ export function MembersTable() {
               <td className="p-3">
                 <button
                   data-open="false"
-                  className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full"
+                  className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full"
                   data-shape="default"
                 >
                   <svg
@@ -236,7 +236,7 @@ export function MembersTable() {
                 </small>
               </td>
               <td className="p-3">
-                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
                   <svg
                     width="1.5em"
                     height="1.5em"
@@ -300,7 +300,7 @@ export function MembersTable() {
                 </small>
               </td>
               <td className="p-3">
-                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
                   <svg
                     width="1.5em"
                     height="1.5em"
@@ -364,7 +364,7 @@ export function MembersTable() {
                 </small>
               </td>
               <td className="p-3">
-                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
                   <svg
                     width="1.5em"
                     height="1.5em"
@@ -430,7 +430,7 @@ export function MembersTable() {
               <td className="p-3">
                 <button
                   data-open="false"
-                  className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full"
+                  className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full"
                   data-shape="default"
                 >
                   <svg
diff --git a/apps/site/src/components/docs-html/table/sortable-table.tsx b/apps/site/src/components/docs-html/table/sortable-table.tsx
index 430f95650..a77450e51 100644
--- a/apps/site/src/components/docs-html/table/sortable-table.tsx
+++ b/apps/site/src/components/docs-html/table/sortable-table.tsx
@@ -56,30 +56,30 @@ export function SortableTable() {
           >
             <button
               role="tab"
-              className="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
+              className="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
             >
               All
             </button>
             <button
               role="tab"
-              className="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
+              className="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
             >
               Monitored
             </button>
             <button
               role="tab"
-              className="relative z-[2] inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
+              className="relative z-2 inline-flex w-full select-none items-center justify-center px-4 py-1.5 text-center align-middle font-sans font-medium text-black dark:text-white"
             >
               Unmonitored
             </button>
-            <span className="rounded bg-background shadow-sm shadow-black/10 transition-all duration-300 ease-in"></span>
+            <span className="rounded bg-background shadow-xs shadow-black/10 transition-all duration-300 ease-in"></span>
           </div>
         </div>
         <div className="w-full md:w-72">
           <div className="relative w-full rounded-md text-sm leading-none aria-disabled:cursor-not-allowed data-[shape=pill]:rounded-full">
             <input
               placeholder="Search"
-              className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] pe-8 leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+              className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] pe-8 leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
               type="text"
             />
             <span className="pointer-events-none absolute right-[7px] top-1/2 h-5 w-5 -translate-y-1/2 overflow-hidden text-foreground/70 transition-all duration-300 ease-in peer-hover:text-black peer-focus:text-black dark:peer-hover:text-white dark:peer-focus:text-white">
@@ -277,7 +277,7 @@ export function SortableTable() {
                 </small>
               </td>
               <td className="p-3">
-                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
                   <svg
                     width="1.5em"
                     height="1.5em"
@@ -344,7 +344,7 @@ export function SortableTable() {
                 </small>
               </td>
               <td className="p-3">
-                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full">
+                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full">
                   <svg
                     width="1.5em"
                     height="1.5em"
@@ -408,7 +408,7 @@ export function SortableTable() {
                 </small>
               </td>
               <td className="p-3">
-                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
                   <svg
                     width="1.5em"
                     height="1.5em"
@@ -475,7 +475,7 @@ export function SortableTable() {
                 </small>
               </td>
               <td className="p-3">
-                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full">
+                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full">
                   <svg
                     width="1.5em"
                     height="1.5em"
@@ -543,7 +543,7 @@ export function SortableTable() {
                 </small>
               </td>
               <td className="p-3">
-                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full">
+                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none data-[shape=circular]:rounded-full">
                   <svg
                     width="1.5em"
                     height="1.5em"
diff --git a/apps/site/src/components/docs-html/table/transactions-table.tsx b/apps/site/src/components/docs-html/table/transactions-table.tsx
index 3829eb531..dcc494ef4 100644
--- a/apps/site/src/components/docs-html/table/transactions-table.tsx
+++ b/apps/site/src/components/docs-html/table/transactions-table.tsx
@@ -15,7 +15,7 @@ export function TransactionsTable() {
             <div className="relative w-full rounded-md text-sm leading-none aria-disabled:cursor-not-allowed">
               <input
                 placeholder="Search"
-                className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] pe-8 leading-[inherit] text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+                className="peer h-full w-full select-none rounded-[inherit] border border-surface bg-transparent px-2.5 py-[8.5px] pe-8 leading-[inherit] text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
                 type="text"
               />
               <span className="pointer-events-none absolute right-[7px] top-1/2 h-5 w-5 -translate-y-1/2 overflow-hidden text-foreground/70 transition-all duration-300 ease-in peer-hover:text-black peer-focus:text-black dark:peer-hover:text-white dark:peer-focus:text-white">
@@ -143,7 +143,7 @@ export function TransactionsTable() {
                 </div>
               </td>
               <td className="border-b border-surface-light p-4">
-                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
                   <svg
                     width="1.5em"
                     height="1.5em"
@@ -216,7 +216,7 @@ export function TransactionsTable() {
                 </div>
               </td>
               <td className="border-b border-surface-light p-4">
-                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
                   <svg
                     width="1.5em"
                     height="1.5em"
@@ -289,7 +289,7 @@ export function TransactionsTable() {
                 </div>
               </td>
               <td className="border-b border-surface-light p-4">
-                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
                   <svg
                     width="1.5em"
                     height="1.5em"
@@ -362,7 +362,7 @@ export function TransactionsTable() {
                 </div>
               </td>
               <td className="border-b border-surface-light p-4">
-                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
                   <svg
                     width="1.5em"
                     height="1.5em"
@@ -438,7 +438,7 @@ export function TransactionsTable() {
                 </div>
               </td>
               <td className="p-4">
-                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-none transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+                <button className="group inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground outline-hidden transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
                   <svg
                     width="1.5em"
                     height="1.5em"
diff --git a/apps/site/src/components/docs-html/textarea/chatbox-with-textarea.tsx b/apps/site/src/components/docs-html/textarea/chatbox-with-textarea.tsx
index cedbf4261..44ce466ba 100644
--- a/apps/site/src/components/docs-html/textarea/chatbox-with-textarea.tsx
+++ b/apps/site/src/components/docs-html/textarea/chatbox-with-textarea.tsx
@@ -123,7 +123,7 @@ export function ChatboxWithTextarea() {
       <textarea
         rows={1}
         placeholder="Send a new message"
-        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
       ></textarea>
       <button className="inline-grid min-h-[36px] min-w-[36px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-primary transition-all duration-300 ease-in hover:border-primary/5 hover:bg-primary/5 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
         <svg
diff --git a/apps/site/src/components/docs-html/textarea/comment-box-with-textarea.tsx b/apps/site/src/components/docs-html/textarea/comment-box-with-textarea.tsx
index 03b31493a..df132ad0a 100644
--- a/apps/site/src/components/docs-html/textarea/comment-box-with-textarea.tsx
+++ b/apps/site/src/components/docs-html/textarea/comment-box-with-textarea.tsx
@@ -5,7 +5,7 @@ export function CommentBoxWithTextarea() {
         rows={8}
         type="email"
         placeholder="someone@example.com"
-        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
       ></textarea>
       <div className="flex w-full justify-between py-3">
         <button className="inline-grid min-h-[28px] min-w-[28px] select-none place-items-center rounded-md border border-transparent bg-transparent text-center align-middle font-sans text-sm font-medium leading-none text-secondary-foreground transition-all duration-300 ease-in hover:border-secondary/10 hover:bg-secondary/10 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
diff --git a/apps/site/src/components/docs-html/textarea/textarea-colors.tsx b/apps/site/src/components/docs-html/textarea/textarea-colors.tsx
index d21ba58ff..1dd2d22af 100644
--- a/apps/site/src/components/docs-html/textarea/textarea-colors.tsx
+++ b/apps/site/src/components/docs-html/textarea/textarea-colors.tsx
@@ -4,32 +4,32 @@ export function TextareaColors() {
       <textarea
         rows={8}
         placeholder="Textarea Primary"
-        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
       ></textarea>
       <textarea
         rows={8}
         placeholder="Textarea Secondary"
-        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-secondary hover:ring-secondary/10 focus:border-secondary focus:outline-none focus:ring-secondary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-secondary hover:ring-secondary/10 focus:border-secondary focus:outline-hidden focus:ring-secondary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
       ></textarea>
       <textarea
         rows={8}
         placeholder="Textarea Info"
-        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-info hover:ring-info/10 focus:border-info focus:outline-none focus:ring-info/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-info hover:ring-info/10 focus:border-info focus:outline-hidden focus:ring-info/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
       ></textarea>
       <textarea
         rows={8}
         placeholder="Textarea Success"
-        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-success hover:ring-success/10 focus:border-success focus:outline-none focus:ring-success/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-success hover:ring-success/10 focus:border-success focus:outline-hidden focus:ring-success/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
       ></textarea>
       <textarea
         rows={8}
         placeholder="Textarea Warning"
-        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-warning hover:ring-warning/10 focus:border-warning focus:outline-none focus:ring-warning/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-warning hover:ring-warning/10 focus:border-warning focus:outline-hidden focus:ring-warning/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
       ></textarea>
       <textarea
         rows={8}
         placeholder="Textarea Error"
-        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-error hover:ring-error/10 focus:border-error focus:outline-none focus:ring-error/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-error hover:ring-error/10 focus:border-error focus:outline-hidden focus:ring-error/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
       ></textarea>
     </div>
   );
diff --git a/apps/site/src/components/docs-html/textarea/textarea-demo.tsx b/apps/site/src/components/docs-html/textarea/textarea-demo.tsx
index 1cb482099..f20aa2dcf 100644
--- a/apps/site/src/components/docs-html/textarea/textarea-demo.tsx
+++ b/apps/site/src/components/docs-html/textarea/textarea-demo.tsx
@@ -3,7 +3,7 @@ export function TextareaDemo() {
     <textarea
       rows={8}
       placeholder="Message here..."
-      className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+      className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
     ></textarea>
   );
 }
diff --git a/apps/site/src/components/docs-html/textarea/textarea-disabled.tsx b/apps/site/src/components/docs-html/textarea/textarea-disabled.tsx
index feec7f7a6..2c4d17803 100644
--- a/apps/site/src/components/docs-html/textarea/textarea-disabled.tsx
+++ b/apps/site/src/components/docs-html/textarea/textarea-disabled.tsx
@@ -4,7 +4,7 @@ export function TextareaDisabled() {
       rows={8}
       disabled
       placeholder="Message here..."
-      className="peer pointer-events-none block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black opacity-50 outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 dark:text-white"
+      className="peer pointer-events-none block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black opacity-50 outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 dark:text-white"
     ></textarea>
   );
 }
diff --git a/apps/site/src/components/docs-html/textarea/textarea-sizes.tsx b/apps/site/src/components/docs-html/textarea/textarea-sizes.tsx
index ddf6a5f6b..fbb5f733b 100644
--- a/apps/site/src/components/docs-html/textarea/textarea-sizes.tsx
+++ b/apps/site/src/components/docs-html/textarea/textarea-sizes.tsx
@@ -4,17 +4,17 @@ export function TextareaSizes() {
       <textarea
         rows={8}
         placeholder="Textarea Small"
-        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-1.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-1.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
       ></textarea>
       <textarea
         rows={8}
         placeholder="Textarea Medium"
-        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
       ></textarea>
       <textarea
         rows={8}
         placeholder="Textarea Large"
-        className="peer block w-full resize-none rounded-lg border border-surface bg-transparent p-3.5 text-base leading-none text-black outline-none ring-4 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+        className="peer block w-full resize-none rounded-lg border border-surface bg-transparent p-3.5 text-base leading-none text-black outline-hidden ring-4 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
       ></textarea>
     </div>
   );
diff --git a/apps/site/src/components/docs-html/textarea/textarea-with-helper-text.tsx b/apps/site/src/components/docs-html/textarea/textarea-with-helper-text.tsx
index 432a7974b..04b554e98 100644
--- a/apps/site/src/components/docs-html/textarea/textarea-with-helper-text.tsx
+++ b/apps/site/src/components/docs-html/textarea/textarea-with-helper-text.tsx
@@ -4,7 +4,7 @@ export function TextareaWithHelperText() {
       <textarea
         rows={8}
         placeholder="Your message..."
-        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
       ></textarea>
       <div className="flex gap-1.5 text-foreground">
         <svg
diff --git a/apps/site/src/components/docs-html/textarea/textarea-with-label.tsx b/apps/site/src/components/docs-html/textarea/textarea-with-label.tsx
index 2e3ae17b1..bb7e3719d 100644
--- a/apps/site/src/components/docs-html/textarea/textarea-with-label.tsx
+++ b/apps/site/src/components/docs-html/textarea/textarea-with-label.tsx
@@ -11,7 +11,7 @@ export function TextareaWithLabel() {
         rows={8}
         id="message"
         placeholder="Your message..."
-        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-none focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+        className="peer block w-full resize-none rounded-md border border-surface bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-primary hover:ring-primary/10 focus:border-primary focus:outline-hidden focus:ring-primary/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
       ></textarea>
     </div>
   );
diff --git a/apps/site/src/components/docs-html/textarea/textarea-with-validation.tsx b/apps/site/src/components/docs-html/textarea/textarea-with-validation.tsx
index 0ac4f043f..79dcf7471 100644
--- a/apps/site/src/components/docs-html/textarea/textarea-with-validation.tsx
+++ b/apps/site/src/components/docs-html/textarea/textarea-with-validation.tsx
@@ -5,7 +5,7 @@ export function TextareaWithValidation() {
         <textarea
           rows={8}
           placeholder="Textarea Error"
-          className="peer block w-full resize-none rounded-md border border-error bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-error hover:ring-error/10 focus:border-error focus:outline-none focus:ring-error/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+          className="peer block w-full resize-none rounded-md border border-error bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-error hover:ring-error/10 focus:border-error focus:outline-hidden focus:ring-error/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
         ></textarea>
         <small className="font-sans text-sm text-error antialiased">
           Something went wrong!
@@ -15,7 +15,7 @@ export function TextareaWithValidation() {
         <textarea
           rows={8}
           placeholder="Textarea Success"
-          className="peer block w-full resize-none rounded-md border border-success bg-transparent p-2.5 text-sm leading-none text-black outline-none ring ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-success hover:ring-success/10 focus:border-success focus:outline-none focus:ring-success/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
+          className="peer block w-full resize-none rounded-md border border-success bg-transparent p-2.5 text-sm leading-none text-black outline-hidden ring-3 ring-transparent transition-all duration-300 ease-in placeholder:text-foreground/60 hover:border-success hover:ring-success/10 focus:border-success focus:outline-hidden focus:ring-success/10 disabled:pointer-events-none disabled:opacity-50 dark:text-white"
         ></textarea>
         <small className="font-sans text-sm text-success antialiased">
           Congratulations 🎉
diff --git a/apps/site/src/components/docs/card/background-blog-card.tsx b/apps/site/src/components/docs/card/background-blog-card.tsx
index e9198340e..7d9848892 100644
--- a/apps/site/src/components/docs/card/background-blog-card.tsx
+++ b/apps/site/src/components/docs/card/background-blog-card.tsx
@@ -3,10 +3,10 @@ import { Card, Typography, Avatar } from "@material-tailwind/react";
 
 export function BackgroundBlogCard() {
   return (
-    <Card className="relative flex h-[40rem] w-full max-w-[28rem] flex-col items-end justify-center overflow-hidden text-center">
+    <Card className="relative flex h-160 w-full max-w-md flex-col items-end justify-center overflow-hidden text-center">
       <Card.Header>
         <div className="absolute inset-0 m-0 h-full w-full rounded-none bg-[url('https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80')] bg-cover bg-center">
-          <div className="absolute inset-0 h-full w-full bg-gradient-to-t from-black/80 via-black/50 to-black/10 dark:from-black/90 dark:via-black/60 dark:to-black/20" />
+          <div className="absolute inset-0 h-full w-full bg-linear-to-t from-black/80 via-black/50 to-black/10 dark:from-black/90 dark:via-black/60 dark:to-black/20" />
         </div>
       </Card.Header>
       <Card.Body className="relative bottom-0 flex h-full flex-col items-center justify-end px-6 py-14 md:px-12">
diff --git a/apps/site/src/components/docs/card/booking-card.tsx b/apps/site/src/components/docs/card/booking-card.tsx
index 3151d80ef..c169d1efd 100644
--- a/apps/site/src/components/docs/card/booking-card.tsx
+++ b/apps/site/src/components/docs/card/booking-card.tsx
@@ -18,13 +18,13 @@ import {
 
 export function BookingCard() {
   return (
-    <Card className="w-full max-w-[26rem] shadow-lg">
+    <Card className="w-full max-w-104 shadow-lg">
       <Card.Header className="relative overflow-hidden p-0">
         <img
           src="https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
           alt="ui/ux review check"
         />
-        <div className="to-bg-black-10 absolute inset-0 h-full w-full bg-gradient-to-tr from-transparent via-transparent to-black/60 " />
+        <div className="to-bg-black-10 absolute inset-0 h-full w-full bg-linear-to-tr from-transparent via-transparent to-black/60 " />
         <IconButton
           size="sm"
           color="error"
@@ -53,7 +53,7 @@ export function BookingCard() {
                 isCircular
                 size="lg"
                 color="secondary"
-                className="cursor-pointer border border-surface bg-surface-light transition-all hover:!opacity-100 group-hover:opacity-70"
+                className="cursor-pointer border border-surface bg-surface-light transition-all hover:opacity-100! group-hover:opacity-70"
               >
                 <Cash className="h-5 w-5" />
               </IconButton>
@@ -69,7 +69,7 @@ export function BookingCard() {
                 isCircular
                 size="lg"
                 color="secondary"
-                className="cursor-pointer border border-surface bg-surface-light transition-all hover:!opacity-100 group-hover:opacity-70"
+                className="cursor-pointer border border-surface bg-surface-light transition-all hover:opacity-100! group-hover:opacity-70"
               >
                 <Wifi className="h-5 w-5" />
               </IconButton>
@@ -85,7 +85,7 @@ export function BookingCard() {
                 isCircular
                 size="lg"
                 color="secondary"
-                className="cursor-pointer border border-surface bg-surface-light transition-all hover:!opacity-100 group-hover:opacity-70"
+                className="cursor-pointer border border-surface bg-surface-light transition-all hover:opacity-100! group-hover:opacity-70"
               >
                 <HomeSimple className="h-5 w-5" />
               </IconButton>
@@ -100,7 +100,7 @@ export function BookingCard() {
                 isCircular
                 size="lg"
                 color="secondary"
-                className="cursor-pointer border border-surface bg-surface-light transition-all hover:!opacity-100 group-hover:opacity-70"
+                className="cursor-pointer border border-surface bg-surface-light transition-all hover:opacity-100! group-hover:opacity-70"
               >
                 <ModernTv className="h-5 w-5" />
               </IconButton>
@@ -116,7 +116,7 @@ export function BookingCard() {
                 isCircular
                 size="lg"
                 color="secondary"
-                className="cursor-pointer border border-surface bg-surface-light transition-all hover:!opacity-100 group-hover:opacity-70"
+                className="cursor-pointer border border-surface bg-surface-light transition-all hover:opacity-100! group-hover:opacity-70"
               >
                 <FireFlame className="h-5 w-5" />
               </IconButton>
@@ -131,7 +131,7 @@ export function BookingCard() {
                 isCircular
                 size="lg"
                 color="secondary"
-                className="cursor-pointer border border-surface bg-surface-light transition-all hover:!opacity-100 group-hover:opacity-70"
+                className="cursor-pointer border border-surface bg-surface-light transition-all hover:opacity-100! group-hover:opacity-70"
               >
                 +20
               </IconButton>
diff --git a/apps/site/src/components/docs/card/horizontal-card.tsx b/apps/site/src/components/docs/card/horizontal-card.tsx
index d8a5e7ace..c8e8f3370 100644
--- a/apps/site/src/components/docs/card/horizontal-card.tsx
+++ b/apps/site/src/components/docs/card/horizontal-card.tsx
@@ -2,7 +2,7 @@ import { Card, Typography, Button } from "@material-tailwind/react";
 
 export function HorizontalCard() {
   return (
-    <Card className="flex h-full w-full max-w-[48rem] flex-row">
+    <Card className="flex h-full w-full max-w-3xl flex-row">
       <Card.Header className="m-0 h-full w-2/5 shrink-0 rounded-r-none">
         <img
           src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80"
diff --git a/apps/site/src/components/docs/card/testimonial-card.tsx b/apps/site/src/components/docs/card/testimonial-card.tsx
index 411fbd99a..3d0993382 100644
--- a/apps/site/src/components/docs/card/testimonial-card.tsx
+++ b/apps/site/src/components/docs/card/testimonial-card.tsx
@@ -8,7 +8,7 @@ import {
 
 export function TestimonialCard() {
   return (
-    <Card className="w-full max-w-[26rem] border-none shadow-none">
+    <Card className="w-full max-w-104 border-none shadow-none">
       <Card.Header className="mx-0 flex items-center gap-4 pb-4 pt-0">
         <Avatar
           size="lg"
diff --git a/apps/site/src/components/docs/dialog/dialog-with-image.tsx b/apps/site/src/components/docs/dialog/dialog-with-image.tsx
index f831c728d..ff7e09949 100644
--- a/apps/site/src/components/docs/dialog/dialog-with-image.tsx
+++ b/apps/site/src/components/docs/dialog/dialog-with-image.tsx
@@ -44,7 +44,7 @@ export function DialogWithImage() {
             <img
               alt="nature"
               src="https://dub.sh/xxo2Jek"
-              className="h-[48rem] w-full rounded-lg object-cover object-center"
+              className="h-192 w-full rounded-lg object-cover object-center"
             />
           </div>
           <div className="flex items-end justify-between">
diff --git a/apps/site/src/components/docs/input/input-custom-styles.tsx b/apps/site/src/components/docs/input/input-custom-styles.tsx
index 35918e3fc..56db377cc 100644
--- a/apps/site/src/components/docs/input/input-custom-styles.tsx
+++ b/apps/site/src/components/docs/input/input-custom-styles.tsx
@@ -6,7 +6,7 @@ export function InputCustomStyles() {
     <div className="w-72">
       <Input
         placeholder="Username"
-        className="rounded-none border-0 border-b border-gray-400 pr-0.5 shadow-none ring-0 hover:border-gray-900 focus:border-gray-900 data-[icon-placement=start]:!pl-[26px] dark:border-gray-600 dark:hover:border-gray-50 dark:focus:border-gray-50"
+        className="rounded-none border-0 border-b border-gray-400 pr-0.5 shadow-none ring-0 hover:border-gray-900 focus:border-gray-900 data-[icon-placement=start]:pl-[26px]! dark:border-gray-600 dark:hover:border-gray-50 dark:focus:border-gray-50"
       >
         <Input.Icon className="data-[placement=start]:left-px">
           <ProfileCircle className="h-full w-full" />
diff --git a/apps/site/src/components/docs/menu/menu-with-divider.tsx b/apps/site/src/components/docs/menu/menu-with-divider.tsx
index 6f601dc86..2bc233a3b 100644
--- a/apps/site/src/components/docs/menu/menu-with-divider.tsx
+++ b/apps/site/src/components/docs/menu/menu-with-divider.tsx
@@ -8,7 +8,7 @@ export function MenuWithDivider() {
         <Menu.Item>Add Team</Menu.Item>
         <Menu.Item>Add Project</Menu.Item>
         <Menu.Item>My Profile</Menu.Item>
-        <hr className="!my-1 -mx-1 border-surface" />
+        <hr className="my-1! -mx-1 border-surface" />
         <Menu.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error dark:hover:text-error dark:focus:text-error">
           Logout
         </Menu.Item>
diff --git a/apps/site/src/components/docs/menu/nav-menu.tsx b/apps/site/src/components/docs/menu/nav-menu.tsx
index 46ca78164..d0c20ccc7 100644
--- a/apps/site/src/components/docs/menu/nav-menu.tsx
+++ b/apps/site/src/components/docs/menu/nav-menu.tsx
@@ -45,7 +45,7 @@ export function NavMenu() {
             </Typography>
           </div>
         </Card>
-        <ul className="col-span-3 !m-0">
+        <ul className="col-span-3 m-0!">
           <NavItem
             title="@material-tailwind/html"
             description="Learn how to use @material-tailwind/html, packed with rich components and widgets."
diff --git a/apps/site/src/components/docs/menu/profile-menu.tsx b/apps/site/src/components/docs/menu/profile-menu.tsx
index adc9bb2c9..d2f70ee6d 100644
--- a/apps/site/src/components/docs/menu/profile-menu.tsx
+++ b/apps/site/src/components/docs/menu/profile-menu.tsx
@@ -19,7 +19,7 @@ export function ProfileMenu() {
         <Menu.Item>
           <HeadsetHelp className="mr-2 h-[18px] w-[18px]" /> Support
         </Menu.Item>
-        <hr className="!my-1 -mx-1 border-surface" />
+        <hr className="my-1! -mx-1 border-surface" />
         <Menu.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error dark:hover:text-error dark:focus:text-error">
           <LogOut className="mr-2 h-[18px] w-[18px]" />
           Logout
diff --git a/apps/site/src/components/docs/navbar/complex-navbar.tsx b/apps/site/src/components/docs/navbar/complex-navbar.tsx
index 934dd9550..1bfbdcca4 100644
--- a/apps/site/src/components/docs/navbar/complex-navbar.tsx
+++ b/apps/site/src/components/docs/navbar/complex-navbar.tsx
@@ -79,7 +79,7 @@ function ProfileMenu() {
         <Menu.Item>
           <HeadsetHelp className="mr-2 h-[18px] w-[18px]" /> Support
         </Menu.Item>
-        <hr className="!my-1 -mx-1 border-surface" />
+        <hr className="my-1! -mx-1 border-surface" />
         <Menu.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error">
           <LogOut className="mr-2 h-[18px] w-[18px]" />
           Logout
@@ -119,7 +119,7 @@ export function ComplexNavbar() {
   }, []);
 
   return (
-    <Navbar className="mx-auto w-full max-w-screen-xl">
+    <Navbar className="mx-auto w-full max-w-(--breakpoint-xl)">
       <div className="flex items-center">
         <Typography
           as="a"
@@ -159,7 +159,7 @@ export function ComplexNavbar() {
                     </Typography>
                   </div>
                 </Card>
-                <ul className="col-span-3 !m-0">
+                <ul className="col-span-3 m-0!">
                   <MenuItem
                     title="@material-tailwind/html"
                     description="Learn how to use @material-tailwind/html, packed with rich components and widgets."
diff --git a/apps/site/src/components/docs/navbar/dark-navbar.tsx b/apps/site/src/components/docs/navbar/dark-navbar.tsx
index feb535843..d236ca8f3 100644
--- a/apps/site/src/components/docs/navbar/dark-navbar.tsx
+++ b/apps/site/src/components/docs/navbar/dark-navbar.tsx
@@ -69,7 +69,7 @@ export function DarkNavbar() {
   }, []);
 
   return (
-    <Navbar className="mx-auto w-full max-w-screen-xl bg-black dark:bg-surface-dark">
+    <Navbar className="mx-auto w-full max-w-(--breakpoint-xl) bg-black dark:bg-surface-dark">
       <div className="flex items-center text-white">
         <Typography
           as="a"
diff --git a/apps/site/src/components/docs/navbar/navbar-demo.tsx b/apps/site/src/components/docs/navbar/navbar-demo.tsx
index cd32d3c1f..6508cbe4c 100644
--- a/apps/site/src/components/docs/navbar/navbar-demo.tsx
+++ b/apps/site/src/components/docs/navbar/navbar-demo.tsx
@@ -69,7 +69,7 @@ export function NavbarDemo() {
   }, []);
 
   return (
-    <Navbar className="mx-auto w-full max-w-screen-xl">
+    <Navbar className="mx-auto w-full max-w-(--breakpoint-xl)">
       <div className="flex items-center">
         <Typography
           as="a"
diff --git a/apps/site/src/components/docs/navbar/navbar-with-mega-menu.tsx b/apps/site/src/components/docs/navbar/navbar-with-mega-menu.tsx
index 4e5810773..cbaa97fd3 100644
--- a/apps/site/src/components/docs/navbar/navbar-with-mega-menu.tsx
+++ b/apps/site/src/components/docs/navbar/navbar-with-mega-menu.tsx
@@ -133,7 +133,7 @@ function ProfileMenu() {
         <Menu.Item>
           <HeadsetHelp className="mr-2 h-[18px] w-[18px]" /> Support
         </Menu.Item>
-        <hr className="!my-1 -mx-1 border-secondary-dark" />
+        <hr className="my-1! -mx-1 border-secondary-dark" />
         <Menu.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error dark:hover:text-error dark:focus:text-error">
           <LogOut className="mr-2 h-[18px] w-[18px]" />
           Logout
@@ -189,7 +189,7 @@ export function NavbarWithMegaMenu() {
   }, []);
 
   return (
-    <Navbar className="mx-auto w-full max-w-screen-xl">
+    <Navbar className="mx-auto w-full max-w-(--breakpoint-xl)">
       <div className="flex items-center">
         <Typography
           as="a"
@@ -214,7 +214,7 @@ export function NavbarWithMegaMenu() {
                   </List.ItemEnd>
                 </List.Item>
               </Tooltip.Trigger>
-              <Tooltip.Content className="z-[100000] grid max-w-screen-xl rounded-lg border border-surface bg-background p-2 shadow-xl shadow-surface/10 dark:border-surface dark:bg-background">
+              <Tooltip.Content className="z-100000 grid max-w-(--breakpoint-xl) rounded-lg border border-surface bg-background p-2 shadow-xl shadow-surface/10 dark:border-surface dark:bg-background">
                 <ul className="grid grid-cols-3 gap-y-2">{renderItems}</ul>
                 <Tooltip.Arrow />
               </Tooltip.Content>
diff --git a/apps/site/src/components/docs/navbar/navbar-with-search.tsx b/apps/site/src/components/docs/navbar/navbar-with-search.tsx
index 894fe822f..e06e341e2 100644
--- a/apps/site/src/components/docs/navbar/navbar-with-search.tsx
+++ b/apps/site/src/components/docs/navbar/navbar-with-search.tsx
@@ -70,7 +70,7 @@ export function NavbarWithSearch() {
   }, []);
 
   return (
-    <Navbar className="mx-auto w-full max-w-screen-xl">
+    <Navbar className="mx-auto w-full max-w-(--breakpoint-xl)">
       <div className="flex items-center">
         <Typography
           as="a"
diff --git a/apps/site/src/components/docs/navbar/simple-navbar.tsx b/apps/site/src/components/docs/navbar/simple-navbar.tsx
index 06cea95b7..7575c906c 100644
--- a/apps/site/src/components/docs/navbar/simple-navbar.tsx
+++ b/apps/site/src/components/docs/navbar/simple-navbar.tsx
@@ -56,7 +56,7 @@ export function SimpleNavbar() {
   }, []);
 
   return (
-    <Navbar className="mx-auto w-full max-w-screen-xl">
+    <Navbar className="mx-auto w-full max-w-(--breakpoint-xl)">
       <div className="flex items-center">
         <Typography
           as="a"
diff --git a/apps/site/src/components/docs/navbar/sticky-navbar.tsx b/apps/site/src/components/docs/navbar/sticky-navbar.tsx
index c837e9d2a..5c5a885c2 100644
--- a/apps/site/src/components/docs/navbar/sticky-navbar.tsx
+++ b/apps/site/src/components/docs/navbar/sticky-navbar.tsx
@@ -71,7 +71,7 @@ export function StickyNavbar() {
 
   return (
     <div className="h-96 w-full overflow-scroll">
-      <Navbar className="sticky top-0 mx-auto w-full max-w-screen-xl">
+      <Navbar className="sticky top-0 mx-auto w-full max-w-(--breakpoint-xl)">
         <div className="flex items-center">
           <Typography
             as="a"
diff --git a/apps/site/src/components/docs/plugins/carousel/carousel-demo.tsx b/apps/site/src/components/docs/plugins/carousel/carousel-demo.tsx
index a37f2c896..b713ba8a8 100644
--- a/apps/site/src/components/docs/plugins/carousel/carousel-demo.tsx
+++ b/apps/site/src/components/docs/plugins/carousel/carousel-demo.tsx
@@ -21,7 +21,7 @@ function CustomNavigation() {
         variant="ghost"
         color="secondary"
         onClick={() => swiper.slidePrev()}
-        className="dark !absolute left-2 top-1/2 z-10 -translate-y-1/2"
+        className="dark absolute! left-2 top-1/2 z-10 -translate-y-1/2"
       >
         <NavArrowLeft className="h-7 w-7 -translate-x-0.5 stroke-2" />
       </IconButton>
@@ -31,7 +31,7 @@ function CustomNavigation() {
         variant="ghost"
         color="secondary"
         onClick={() => swiper.slideNext()}
-        className="dark !absolute right-2 top-1/2 z-10 -translate-y-1/2"
+        className="dark absolute! right-2 top-1/2 z-10 -translate-y-1/2"
       >
         <NavArrowRight className="h-7 w-7 translate-x-px stroke-2" />
       </IconButton>
@@ -40,7 +40,7 @@ function CustomNavigation() {
 }
 
 function customPagination(_, className) {
-  return `<span class="${className} w-4 h-4 [&.swiper-pagination-bullet-active]:!opacity-100 [&.swiper-pagination-bullet-active]:[background:rgb(var(--color-background))] !opacity-50 ![background:rgb(var(--color-background))]"></span>`;
+  return `<span class="${className} w-4 h-4 [&.swiper-pagination-bullet-active]:opacity-100! [&.swiper-pagination-bullet-active]:[background:rgb(var(--color-background))] opacity-50! [background:rgb(var(--color-background))]!"></span>`;
 }
 
 export function CarouselDemo() {
@@ -67,7 +67,7 @@ export function CarouselDemo() {
             <img
               src={img}
               alt={`image-${index}`}
-              className="h-[28rem] w-full object-cover"
+              className="h-112 w-full object-cover"
             />
           </SwiperSlide>
         ))}
diff --git a/apps/site/src/components/docs/plugins/text-editor/text-editor-demo.tsx b/apps/site/src/components/docs/plugins/text-editor/text-editor-demo.tsx
index 4c9fa93f7..8642205ee 100644
--- a/apps/site/src/components/docs/plugins/text-editor/text-editor-demo.tsx
+++ b/apps/site/src/components/docs/plugins/text-editor/text-editor-demo.tsx
@@ -212,7 +212,7 @@ function FloatingLinkEditor({ editor }) {
   return (
     <Card
       ref={editorRef}
-      className="absolute -left-[10000px] -top-[10000px] z-[100] -mt-1.5 w-full max-w-xs rounded-[10px] p-1 opacity-0 transition-opacity duration-300"
+      className="absolute -left-[10000px] -top-[10000px] z-100 -mt-1.5 w-full max-w-xs rounded-[10px] p-1 opacity-0 transition-opacity duration-300"
     >
       {isEditMode ? (
         <Input
@@ -485,7 +485,7 @@ export function TextEditorDemo() {
         <div className="relative rounded-b-lg border-t border-surface">
           <RichTextPlugin
             contentEditable={
-              <ContentEditable className="lexical min-h-[280px] resize-none px-3 py-2 text-base caret-primary outline-none" />
+              <ContentEditable className="lexical min-h-[280px] resize-none px-3 py-2 text-base caret-primary outline-hidden" />
             }
             placeholder={<Placeholder />}
             ErrorBoundary={null as any}
diff --git a/apps/site/src/components/docs/popover/popover-with-image.tsx b/apps/site/src/components/docs/popover/popover-with-image.tsx
index d83330919..e02998177 100644
--- a/apps/site/src/components/docs/popover/popover-with-image.tsx
+++ b/apps/site/src/components/docs/popover/popover-with-image.tsx
@@ -11,7 +11,7 @@ export function PopoverWithImage() {
         <Popover.Trigger as={Button} onClick={() => setOpen((cur) => !cur)}>
           More Info
         </Popover.Trigger>
-        <Popover.Content className="grid w-[30rem] grid-cols-2 gap-4">
+        <Popover.Content className="grid w-120 grid-cols-2 gap-4">
           <div className="pl-1">
             <Typography color="default" className="mb-1 font-semibold">
               Material Tailwind
diff --git a/apps/site/src/components/docs/timeline/activities-timeline.tsx b/apps/site/src/components/docs/timeline/activities-timeline.tsx
index ad017a676..8516af0c2 100644
--- a/apps/site/src/components/docs/timeline/activities-timeline.tsx
+++ b/apps/site/src/components/docs/timeline/activities-timeline.tsx
@@ -11,7 +11,7 @@ export function ActivitiesTimeline() {
               <Bell className="h-4 w-4" />
             </Timeline.Icon>
           </Timeline.Header>
-          <Timeline.Body className="!pb-0">
+          <Timeline.Body className="pb-0!">
             <Typography color="default" className="font-bold">
               $2400, Design changes
             </Typography>
@@ -28,7 +28,7 @@ export function ActivitiesTimeline() {
               <CreditCard className="h-4 w-4" />
             </Timeline.Icon>
           </Timeline.Header>
-          <Timeline.Body className="!pb-0">
+          <Timeline.Body className="pb-0!">
             <Typography color="default" className="font-bold">
               New order #1832412
             </Typography>
@@ -45,7 +45,7 @@ export function ActivitiesTimeline() {
               <DollarCircle className="h-4 w-4" />
             </Timeline.Icon>
           </Timeline.Header>
-          <Timeline.Body className="!pb-0">
+          <Timeline.Body className="pb-0!">
             <Typography color="default" className="font-bold">
               Payment completed for order #4395133
             </Typography>
diff --git a/apps/site/src/components/layout/navbar.tsx b/apps/site/src/components/layout/navbar.tsx
index 6a23443ef..221fb1d45 100644
--- a/apps/site/src/components/layout/navbar.tsx
+++ b/apps/site/src/components/layout/navbar.tsx
@@ -184,7 +184,7 @@ export function Navbar() {
       {typeof window !== "undefined" &&
         getCookie("show_notification_bar") !== "false" && (
           <div
-            className="relative z-[99] border-b border-warning bg-warning-light px-4 py-3 text-center"
+            className="relative z-99 border-b border-warning bg-warning-light px-4 py-3 text-center"
             id="notification_bar"
           >
             <Typography
@@ -231,7 +231,7 @@ export function Navbar() {
               </div>
               <Link
                 href="/v3/"
-                className="mr-2 grid h-12 w-12 shrink-0 lg:!hidden"
+                className="mr-2 grid h-12 w-12 shrink-0 lg:hidden!"
               >
                 <Brand />
               </Link>
@@ -328,7 +328,7 @@ export function Navbar() {
                           </Typography>
                         </div>
                       </Card>
-                      <ul className="col-span-3 !m-0">
+                      <ul className="col-span-3 m-0!">
                         <MenuItem
                           title="Updivision"
                           description="Custom Development: Our partners take ideas and turn them into software that users love." 
@@ -364,8 +364,8 @@ export function Navbar() {
                 >
                   <MoreVert className="h-5 w-5 stroke-[1.5]" />
                 </Dialog.Trigger>
-                <Dialog.Overlay className="backdrop-blur">
-                  <Dialog.Content className="fixed left-[unset] right-3.5 top-3.5 w-full max-w-[280px] translate-x-0 translate-y-0 !animate-none rounded-lg p-1">
+                <Dialog.Overlay className="backdrop-blur-sm">
+                  <Dialog.Content className="fixed left-[unset] right-3.5 top-3.5 w-full max-w-[280px] translate-x-0 translate-y-0 animate-none! rounded-lg p-1">
                     <Dialog.DismissTrigger
                       as={IconButton}
                       size="sm"
@@ -536,7 +536,7 @@ export function Navbar() {
               <Drawer.Trigger as={IconButton} variant="ghost" color="secondary">
                 <MenuIcon className="h-5 w-5" />
               </Drawer.Trigger>
-              <Drawer.Overlay className="backdrop-blur">
+              <Drawer.Overlay className="backdrop-blur-sm">
                 <Drawer.Panel placement="left" className="p-0">
                   <div className="flex items-center justify-between gap-4">
                     <Drawer.DismissTrigger
diff --git a/apps/site/src/components/layout/sidenav.tsx b/apps/site/src/components/layout/sidenav.tsx
index 3acd3dd2c..14889a29e 100644
--- a/apps/site/src/components/layout/sidenav.tsx
+++ b/apps/site/src/components/layout/sidenav.tsx
@@ -152,9 +152,9 @@ export function Sidenav() {
   return (
     <ThemeProvider>
       <div className="sticky -left-64 bottom-0 top-[105px] z-1 hidden h-[calc(100vh-4px)] w-60 shrink-0 overflow-y-auto bg-background pb-24 pt-8 lg:left-0 lg:block">
-        <div className="fixed top-[104px] z-50 h-14 w-60 bg-gradient-to-b from-background to-transparent" />
+        <div className="fixed top-[104px] z-50 h-14 w-60 bg-linear-to-b from-background to-transparent" />
         <ul className="pr-2">{getRoutes()}</ul>
-        <div className="sticky -bottom-24 h-14 w-60 bg-gradient-to-t from-background to-transparent" />
+        <div className="sticky -bottom-24 h-14 w-60 bg-linear-to-t from-background to-transparent" />
       </div>
     </ThemeProvider>
   );
diff --git a/apps/site/src/components/layout/toc.tsx b/apps/site/src/components/layout/toc.tsx
index 53ca688c3..9fce4c40d 100644
--- a/apps/site/src/components/layout/toc.tsx
+++ b/apps/site/src/components/layout/toc.tsx
@@ -139,7 +139,7 @@ export function Toc({
   return (
     <ThemeProvider>
       <div className="sticky bottom-0 right-[max(0px,calc(50%-42rem))] top-[105px] z-1 hidden h-[calc(100vh-4px)] w-60 shrink-0 overflow-y-auto bg-background pb-24 pt-8 xl:block">
-        <div className="fixed top-[100px] h-14 w-full bg-gradient-to-b from-background to-transparent" />
+        <div className="fixed top-[100px] h-14 w-full bg-linear-to-b from-background to-transparent" />
         <ul className="border-b border-surface pb-4">
           <li className="py-2 text-sm font-medium text-black dark:text-white">
             On this page
@@ -229,7 +229,7 @@ export function Toc({
             </Typography>
           </Card.Body>
         </Card>
-        <div className="sticky -bottom-24 h-14 w-full bg-gradient-to-t from-background to-transparent" />
+        <div className="sticky -bottom-24 h-14 w-full bg-linear-to-t from-background to-transparent" />
       </div>
     </ThemeProvider>
   );
diff --git a/apps/site/src/components/theme-toggle.tsx b/apps/site/src/components/theme-toggle.tsx
index 7e6fb1d60..b78646583 100644
--- a/apps/site/src/components/theme-toggle.tsx
+++ b/apps/site/src/components/theme-toggle.tsx
@@ -35,7 +35,7 @@ export function ThemeToggleDesktop({ as }: { as: React.ElementType }) {
         }
         className="hidden lg:grid"
       />
-      <Menu.Content className="z-[99999] w-max min-w-max">
+      <Menu.Content className="z-99999 w-max min-w-max">
         <Menu.Item onClick={() => setTheme("light")}>
           <SunLight className="mr-2 h-4 w-4" />
           Light
@@ -77,7 +77,7 @@ export function ThemeToggleMobile({ as }: { as: React.ElementType }) {
         )}
         <span className="mr-0.5 capitalize">{theme}</span>
       </Menu.Trigger>
-      <Menu.Content className="z-[99999] w-max min-w-max">
+      <Menu.Content className="z-99999 w-max min-w-max">
         <Menu.Item onClick={() => setTheme("light")}>
           <SunLight className="mr-2 h-4 w-4" />
           Light
diff --git a/packages/html/package.json b/packages/html/package.json
index c1a157bc6..16c4191be 100644
--- a/packages/html/package.json
+++ b/packages/html/package.json
@@ -13,8 +13,8 @@
     "access": "public"
   },
   "author": {
-    "name": "sajadevo",
-    "url": "https://twitter.com/sajadevo_"
+    "name": "creativetim",
+    "url": "https://x.com/creativetim"
   },
   "license": "MIT",
   "bugs": {
@@ -22,7 +22,7 @@
   },
   "homepage": "https://github.com/creativetimofficial/material-tailwind/packages/html#readme",
   "devDependencies": {
-    "tailwindcss": "3.3.3",
+    "tailwindcss": "4.1.11",
     "tsconfig": "workspace:*",
     "tsup": "7.2.0",
     "typescript": "5.2.2"
diff --git a/packages/react/package.json b/packages/react/package.json
index 98c70859b..f63fbcea2 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -13,8 +13,8 @@
     "access": "public"
   },
   "author": {
-    "name": "sajadevo",
-    "url": "https://twitter.com/sajadevo_"
+    "name": "creativetim",
+    "url": "https://x.com/creativetim"
   },
   "license": "MIT",
   "bugs": {
@@ -29,7 +29,7 @@
     "@types/react-dom": "18.2.19",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tailwindcss": "3.4.13",
+    "tailwindcss": "4.1.11",
     "tailwindcss-animate": "1.0.7",
     "tsconfig": "workspace:*",
     "tsup": "7.2.0",
diff --git a/packages/react/src/theme/alert.ts b/packages/react/src/theme/alert.ts
index ec2337d89..d58e23439 100644
--- a/packages/react/src/theme/alert.ts
+++ b/packages/react/src/theme/alert.ts
@@ -43,16 +43,16 @@ export const alertTheme = {
     },
     gradient: {
       primary:
-        "bg-gradient-to-tr from-primary-dark to-primary-light border-primary text-primary-foreground",
+        "bg-linear-to-tr from-primary-dark to-primary-light border-primary text-primary-foreground",
       secondary:
-        "bg-gradient-to-tr from-secondary-dark to-secondary-light border-secondary text-secondary-foreground",
-      info: "bg-gradient-to-tr from-info-dark to-info-light border-info text-info-foreground",
+        "bg-linear-to-tr from-secondary-dark to-secondary-light border-secondary text-secondary-foreground",
+      info: "bg-linear-to-tr from-info-dark to-info-light border-info text-info-foreground",
       success:
-        "bg-gradient-to-tr from-success-dark to-success-light border-success text-success-foreground",
+        "bg-linear-to-tr from-success-dark to-success-light border-success text-success-foreground",
       warning:
-        "bg-gradient-to-tr from-warning-dark to-warning-light border-warning text-warning-foreground",
+        "bg-linear-to-tr from-warning-dark to-warning-light border-warning text-warning-foreground",
       error:
-        "bg-gradient-to-tr from-error-dark to-error-light border-error text-error-foreground",
+        "bg-linear-to-tr from-error-dark to-error-light border-error text-error-foreground",
     },
   },
 };
@@ -66,5 +66,5 @@ export const alertIconTheme = {
 };
 
 export const alertDismissTriggerTheme = {
-  baseStyle: "outline-none",
+  baseStyle: "outline-hidden",
 };
diff --git a/packages/react/src/theme/button-group.ts b/packages/react/src/theme/button-group.ts
index ce2dc5124..d4fd5169c 100644
--- a/packages/react/src/theme/button-group.ts
+++ b/packages/react/src/theme/button-group.ts
@@ -13,5 +13,5 @@ export const buttonGroupTheme = {
     orientation: "horizontal",
   },
   baseStyle:
-    "inline-flex data-[width=full]:w-full data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:rounded-none data-[orientation=horizontal]:[&:first-child:not([data-variant=ghost])]:[&_*]:rounded-r-none data-[orientation=horizontal]:[&:last-child:not([data-variant=ghost])]:[&_*]:rounded-l-none data-[orientation=horizontal]:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:border-l-0 data-[orientation=horizontal]:[&:last-child:not([data-variant=ghost])]:[&_*]:border-l-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:rounded-none data-[orientation=vertical]:[&:first-child:not([data-variant=ghost])]:[&_*]:rounded-b-none data-[orientation=vertical]:[&:last-child:not([data-variant=ghost])]:[&_*]:rounded-t-none data-[orientation=vertical]:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:border-t-0 data-[orientation=vertical]:[&:last-child:not([data-variant=ghost])]:[&_*]:border-t-0",
+    "inline-flex data-[width=full]:w-full data-[orientation=horizontal]:flex-row **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:data-[orientation=horizontal]:rounded-none **:[&:first-child:not([data-variant=ghost])]:data-[orientation=horizontal]:rounded-r-none **:[&:last-child:not([data-variant=ghost])]:data-[orientation=horizontal]:rounded-l-none **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:data-[orientation=horizontal]:border-l-0 **:[&:last-child:not([data-variant=ghost])]:data-[orientation=horizontal]:border-l-0 data-[orientation=vertical]:flex-col **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:data-[orientation=vertical]:rounded-none **:[&:first-child:not([data-variant=ghost])]:data-[orientation=vertical]:rounded-b-none **:[&:last-child:not([data-variant=ghost])]:data-[orientation=vertical]:rounded-t-none **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:data-[orientation=vertical]:border-t-0 **:[&:last-child:not([data-variant=ghost])]:data-[orientation=vertical]:border-t-0",
 };
diff --git a/packages/react/src/theme/button.ts b/packages/react/src/theme/button.ts
index 8791e9a04..a8aafcd7a 100644
--- a/packages/react/src/theme/button.ts
+++ b/packages/react/src/theme/button.ts
@@ -14,11 +14,11 @@ export const buttonTheme = {
   baseStyle:
     "inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none",
   size: {
-    xs: "text-sm rounded-md py-1 px-2 shadow-sm hover:shadow",
-    sm: "text-sm rounded-md py-1.5 px-3 shadow-sm hover:shadow",
-    md: "text-sm rounded-md py-2 px-4 shadow-sm hover:shadow-md",
-    lg: "text-base rounded-md py-2.5 px-5 shadow-sm hover:shadow-lg",
-    xl: "text-base rounded-lg py-3 px-6 shadow-sm hover:shadow-lg",
+    xs: "text-sm rounded-md py-1 px-2 shadow-xs hover:shadow-sm",
+    sm: "text-sm rounded-md py-1.5 px-3 shadow-xs hover:shadow-sm",
+    md: "text-sm rounded-md py-2 px-4 shadow-xs hover:shadow-md",
+    lg: "text-base rounded-md py-2.5 px-5 shadow-xs hover:shadow-lg",
+    xl: "text-base rounded-lg py-3 px-6 shadow-xs hover:shadow-lg",
   },
   variant: {
     ghost: {
@@ -62,16 +62,16 @@ export const buttonTheme = {
     },
     gradient: {
       primary:
-        "bg-gradient-to-tr from-primary-dark to-primary-light border-primary text-primary-foreground hover:brightness-105",
+        "bg-linear-to-tr from-primary-dark to-primary-light border-primary text-primary-foreground hover:brightness-105",
       secondary:
-        "bg-gradient-to-tr from-secondary-dark to-secondary-light border-secondary text-secondary-foreground hover:brightness-105",
-      info: "bg-gradient-to-tr from-info-dark to-info-light border-info text-info-foreground hover:brightness-105",
+        "bg-linear-to-tr from-secondary-dark to-secondary-light border-secondary text-secondary-foreground hover:brightness-105",
+      info: "bg-linear-to-tr from-info-dark to-info-light border-info text-info-foreground hover:brightness-105",
       success:
-        "bg-gradient-to-tr from-success-dark to-success-light border-success text-success-foreground hover:brightness-105",
+        "bg-linear-to-tr from-success-dark to-success-light border-success text-success-foreground hover:brightness-105",
       warning:
-        "bg-gradient-to-tr from-warning-dark to-warning-light border-warning text-warning-foreground hover:brightness-105",
+        "bg-linear-to-tr from-warning-dark to-warning-light border-warning text-warning-foreground hover:brightness-105",
       error:
-        "bg-gradient-to-tr from-error-dark to-error-light border-error text-error-foreground hover:brightness-105",
+        "bg-linear-to-tr from-error-dark to-error-light border-error text-error-foreground hover:brightness-105",
     },
   },
 };
diff --git a/packages/react/src/theme/card.ts b/packages/react/src/theme/card.ts
index 826df0e58..90cc58853 100644
--- a/packages/react/src/theme/card.ts
+++ b/packages/react/src/theme/card.ts
@@ -10,7 +10,7 @@ export const cardTheme = {
     variant: "solid",
     color: "default",
   },
-  baseStyle: "w-full rounded-lg border shadow-sm overflow-hidden",
+  baseStyle: "w-full rounded-lg border shadow-xs overflow-hidden",
   variant: {
     ghost: {
       default: "bg-background/10 border-transparent shadow-transparent",
@@ -42,16 +42,16 @@ export const cardTheme = {
     gradient: {
       default: "bg-background border-surface shadow-black/5",
       primary:
-        "bg-gradient-to-t from-primary-dark to-primary-light shadow-primary/25 border-primary",
+        "bg-linear-to-t from-primary-dark to-primary-light shadow-primary/25 border-primary",
       secondary:
-        "bg-gradient-to-t from-secondary-dark to-secondary-light shadow-secondary/25 border-secondary",
-      info: "bg-gradient-to-t from-info-dark to-info-light shadow-info/25 border-info",
+        "bg-linear-to-t from-secondary-dark to-secondary-light shadow-secondary/25 border-secondary",
+      info: "bg-linear-to-t from-info-dark to-info-light shadow-info/25 border-info",
       success:
-        "bg-gradient-to-t from-success-dark to-success-light shadow-success/25 border-success",
+        "bg-linear-to-t from-success-dark to-success-light shadow-success/25 border-success",
       warning:
-        "bg-gradient-to-t from-warning-dark to-warning-light shadow-warning/25 border-warning",
+        "bg-linear-to-t from-warning-dark to-warning-light shadow-warning/25 border-warning",
       error:
-        "bg-gradient-to-t from-error-dark to-error-light shadow-error/25 border-error",
+        "bg-linear-to-t from-error-dark to-error-light shadow-error/25 border-error",
     },
   },
 };
diff --git a/packages/react/src/theme/checkbox.ts b/packages/react/src/theme/checkbox.ts
index 47296ed63..3d3692596 100644
--- a/packages/react/src/theme/checkbox.ts
+++ b/packages/react/src/theme/checkbox.ts
@@ -8,7 +8,7 @@ export const checkboxTheme = {
     color: "primary",
   },
   baseStyle:
-    "group shadow-sm shadow-black/5 inline-block relative h-5 w-5 cursor-pointer rounded bg-transparent border border-surface transition-all duration-200 ease-in aria-disabled:opacity-50 aria-disabled:pointer-events-none hover:shadow-md",
+    "group shadow-xs shadow-black/5 inline-block relative h-5 w-5 cursor-pointer rounded bg-transparent border border-surface transition-all duration-200 ease-in aria-disabled:opacity-50 aria-disabled:pointer-events-none hover:shadow-md",
   color: {
     primary:
       "data-[checked=true]:bg-primary data-[checked=true]:border-primary text-primary-foreground",
diff --git a/packages/react/src/theme/chip.ts b/packages/react/src/theme/chip.ts
index 4f81cde99..05052174a 100644
--- a/packages/react/src/theme/chip.ts
+++ b/packages/react/src/theme/chip.ts
@@ -17,9 +17,9 @@ export const chipTheme = {
   baseStyle:
     "relative inline-flex w-max items-center border font-sans font-medium rounded-md data-[shape=pill]:rounded-full",
   size: {
-    sm: "text-xs p-0.5 shadow-sm",
-    md: "text-sm p-0.5 shadow-sm",
-    lg: "text-sm p-1 shadow-sm",
+    sm: "text-xs p-0.5 shadow-xs",
+    md: "text-sm p-0.5 shadow-xs",
+    lg: "text-sm p-1 shadow-xs",
   },
   variant: {
     ghost: {
@@ -49,16 +49,16 @@ export const chipTheme = {
     },
     gradient: {
       primary:
-        "bg-gradient-to-tr from-primary-dark to-primary-light border-primary text-primary-foreground",
+        "bg-linear-to-tr from-primary-dark to-primary-light border-primary text-primary-foreground",
       secondary:
-        "bg-gradient-to-tr from-secondary-dark to-secondary-light border-secondary text-secondary-foreground",
-      info: "bg-gradient-to-tr from-info-dark to-info-light border-info text-info-foreground",
+        "bg-linear-to-tr from-secondary-dark to-secondary-light border-secondary text-secondary-foreground",
+      info: "bg-linear-to-tr from-info-dark to-info-light border-info text-info-foreground",
       success:
-        "bg-gradient-to-tr from-success-dark to-success-light border-success text-success-foreground",
+        "bg-linear-to-tr from-success-dark to-success-light border-success text-success-foreground",
       warning:
-        "bg-gradient-to-tr from-warning-dark to-warning-light border-warning text-warning-foreground",
+        "bg-linear-to-tr from-warning-dark to-warning-light border-warning text-warning-foreground",
       error:
-        "bg-gradient-to-tr from-error-dark to-error-light border-error text-error-foreground",
+        "bg-linear-to-tr from-error-dark to-error-light border-error text-error-foreground",
     },
   },
 };
diff --git a/packages/react/src/theme/dialog.ts b/packages/react/src/theme/dialog.ts
index 9564177a9..9a0d04004 100644
--- a/packages/react/src/theme/dialog.ts
+++ b/packages/react/src/theme/dialog.ts
@@ -15,7 +15,7 @@ export const dialogTheme = {
 };
 
 export const dialogTriggerTheme = {
-  baseStyle: "outline-none",
+  baseStyle: "outline-hidden",
 };
 
 export const dialogContentTheme = {
@@ -30,7 +30,7 @@ export const dialogContentTheme = {
     order: ["content"],
   },
   baseStyle:
-    "fixed z-[9998] top-1/2 left-1/2 -translate-x-1/2 px-4 py-3 max-h-[calc(100vh-32px)] overflow-y-auto -translate-y-1/2 bg-background w-full h-full rounded-xl shadow-2xl shadow-black/5 border border-surface data-[open=true]:motion-safe:animate-in data-[open=true]:motion-safe:fade-in data-[open=true]:motion-safe:zoom-in-95 data-[open=true]:motion-safe:slide-in-from-left-1/2 data-[open=true]:motion-safe:slide-in-from-top-1/2",
+    "fixed z-9998 top-1/2 left-1/2 -translate-x-1/2 px-4 py-3 max-h-[calc(100vh-32px)] overflow-y-auto -translate-y-1/2 bg-background w-full h-full rounded-xl shadow-2xl shadow-black/5 border border-surface motion-safe:data-[open=true]:animate-in motion-safe:data-[open=true]:fade-in motion-safe:data-[open=true]:zoom-in-95 motion-safe:data-[open=true]:slide-in-from-left-1/2 motion-safe:data-[open=true]:slide-in-from-top-1/2",
   size: {
     xs: "w-8/12 sm:w-6/12 md:w-4/12 lg:w-3/12 xl:w-2/12 h-max",
     sm: "w-9/12 sm:w-7/12 md:w-5/12 lg:w-3/12 h-max",
@@ -46,9 +46,9 @@ export const dialogOverlayTheme = {
     lockScroll: true,
   },
   baseStyle:
-    "fixed inset-0 w-screen h-screen z-[9997] bg-black/50 data-[open=true]:motion-safe:animate-in data-[open=true]:motion-safe:fade-in",
+    "fixed inset-0 w-screen h-screen z-9997 bg-black/50 motion-safe:data-[open=true]:animate-in motion-safe:data-[open=true]:fade-in",
 };
 
 export const dialogDismissTriggerTheme = {
-  baseStyle: "outline-none",
+  baseStyle: "outline-hidden",
 };
diff --git a/packages/react/src/theme/drawer.ts b/packages/react/src/theme/drawer.ts
index 5f0c29f2f..44d5682ae 100644
--- a/packages/react/src/theme/drawer.ts
+++ b/packages/react/src/theme/drawer.ts
@@ -8,7 +8,7 @@ export type DrawerDismissTriggerTheme = DeepPartial<
 >;
 
 export const drawerTriggerTheme = {
-  baseStyle: "outline-none",
+  baseStyle: "outline-hidden",
 };
 
 export const drawerPanelTheme = {
@@ -24,7 +24,7 @@ export const drawerPanelTheme = {
     placement: "right",
   },
   baseStyle:
-    "fixed z-[9998] p-4 bg-background w-80 h-80 shadow-2xl shadow-black/5 border-surface data-[placement=top]:top-0 data-[placement=top]:left-0 data-[placement=right]:top-0 data-[placement=right]:right-0 data-[placement=bottom]:bottom-0 data-[placement=bottom]:left-0 data-[placement=left]:top-0 data-[placement=left]:left-0 data-[placement=top]:w-screen data-[placement=bottom]:w-screen data-[placement=left]:h-screen data-[placement=right]:h-screen border border-surface data-[open=true]:motion-safe:animate-in data-[open=true]:motion-safe:fade-in data-[open=true]:data-[placement=top]:motion-safe:slide-in-from-top-10 data-[open=true]:data-[placement=bottom]:motion-safe:slide-in-from-bottom-10 data-[open=true]:data-[placement=left]:motion-safe:slide-in-from-left-10 data-[open=true]:data-[placement=right]:motion-safe:slide-in-from-right-10",
+    "fixed z-9998 p-4 bg-background w-80 h-80 shadow-2xl shadow-black/5 border-surface data-[placement=top]:top-0 data-[placement=top]:left-0 data-[placement=right]:top-0 data-[placement=right]:right-0 data-[placement=bottom]:bottom-0 data-[placement=bottom]:left-0 data-[placement=left]:top-0 data-[placement=left]:left-0 data-[placement=top]:w-screen data-[placement=bottom]:w-screen data-[placement=left]:h-screen data-[placement=right]:h-screen border border-surface motion-safe:data-[open=true]:animate-in motion-safe:data-[open=true]:fade-in motion-safe:data-[open=true]:data-[placement=top]:slide-in-from-top-10 motion-safe:data-[open=true]:data-[placement=bottom]:slide-in-from-bottom-10 motion-safe:data-[open=true]:data-[placement=left]:slide-in-from-left-10 motion-safe:data-[open=true]:data-[placement=right]:slide-in-from-right-10",
 };
 
 export const drawerOverlayTheme = {
@@ -32,9 +32,9 @@ export const drawerOverlayTheme = {
     lockScroll: true,
   },
   baseStyle:
-    "fixed inset-0 w-screen h-screen z-[9997] bg-black/50 data-[open=true]:motion-safe:animate-in data-[open=true]:motion-safe:fade-in",
+    "fixed inset-0 w-screen h-screen z-9997 bg-black/50 motion-safe:data-[open=true]:animate-in motion-safe:data-[open=true]:fade-in",
 };
 
 export const drawerDismissTriggerTheme = {
-  baseStyle: "outline-none",
+  baseStyle: "outline-hidden",
 };
diff --git a/packages/react/src/theme/icon-button.ts b/packages/react/src/theme/icon-button.ts
index 1a7fcca43..2f659ae43 100644
--- a/packages/react/src/theme/icon-button.ts
+++ b/packages/react/src/theme/icon-button.ts
@@ -14,11 +14,11 @@ export const iconButtonTheme = {
   baseStyle:
     "inline-grid place-items-center border align-middle select-none font-sans font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none data-[shape=circular]:rounded-full",
   size: {
-    xs: "text-sm min-w-[30px] min-h-[30px] rounded-md shadow-sm hover:shadow",
-    sm: "text-sm min-w-[34px] min-h-[34px] rounded-md shadow-sm hover:shadow",
-    md: "text-sm min-w-[38px] min-h-[38px] rounded-md shadow-sm hover:shadow-md",
-    lg: "text-base min-w-[46px] min-h-[46px] rounded-md shadow-sm hover:shadow-lg",
-    xl: "text-base min-w-[50px] min-h-[50px] rounded-lg shadow-sm hover:shadow-lg",
+    xs: "text-sm min-w-[30px] min-h-[30px] rounded-md shadow-xs hover:shadow-sm",
+    sm: "text-sm min-w-[34px] min-h-[34px] rounded-md shadow-xs hover:shadow-sm",
+    md: "text-sm min-w-[38px] min-h-[38px] rounded-md shadow-xs hover:shadow-md",
+    lg: "text-base min-w-[46px] min-h-[46px] rounded-md shadow-xs hover:shadow-lg",
+    xl: "text-base min-w-[50px] min-h-[50px] rounded-lg shadow-xs hover:shadow-lg",
   },
   variant: buttonTheme.variant,
 };
diff --git a/packages/react/src/theme/input.ts b/packages/react/src/theme/input.ts
index 6699ab3a4..cc2662299 100644
--- a/packages/react/src/theme/input.ts
+++ b/packages/react/src/theme/input.ts
@@ -12,11 +12,11 @@ export const inputTheme = {
     isSuccess: false,
   },
   baseStyle:
-    "w-full aria-disabled:cursor-not-allowed outline-none focus:outline-none text-black dark:text-white placeholder:text-foreground/60 bg-transparent ring-transparent border border-surface transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none data-[error=true]:border-error data-[success=true]:border-success select-none data-[shape=pill]:rounded-full",
+    "w-full aria-disabled:cursor-not-allowed outline-hidden focus:outline-hidden text-black dark:text-white placeholder:text-foreground/60 bg-transparent ring-transparent border border-surface transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none data-[error=true]:border-error data-[success=true]:border-success select-none data-[shape=pill]:rounded-full",
   size: {
-    sm: "text-sm rounded-md py-1.5 px-2 ring shadow-sm data-[icon-placement=start]:ps-7 data-[icon-placement=end]:pe-7",
-    md: "text-sm rounded-md py-2 px-2.5 ring shadow-sm data-[icon-placement=start]:ps-9 data-[icon-placement=end]:pe-9",
-    lg: "text-base rounded-lg py-3 leading-none px-3 ring-4 shadow-sm data-[icon-placement=start]:ps-11 data-[icon-placement=end]:pe-11",
+    sm: "text-sm rounded-md py-1.5 px-2 ring-3 shadow-xs data-[icon-placement=start]:ps-7 data-[icon-placement=end]:pe-7",
+    md: "text-sm rounded-md py-2 px-2.5 ring-3 shadow-xs data-[icon-placement=start]:ps-9 data-[icon-placement=end]:pe-9",
+    lg: "text-base rounded-lg py-3 leading-none px-3 ring-4 shadow-xs data-[icon-placement=start]:ps-11 data-[icon-placement=end]:pe-11",
   },
   color: {
     primary:
diff --git a/packages/react/src/theme/menu.ts b/packages/react/src/theme/menu.ts
index e302aedcd..92d226a7d 100644
--- a/packages/react/src/theme/menu.ts
+++ b/packages/react/src/theme/menu.ts
@@ -13,7 +13,7 @@ export const menuTheme = {
 };
 
 export const menuTriggerTheme = {
-  baseStyle: "outline-none group",
+  baseStyle: "outline-hidden group",
 };
 
 export const menuContentTheme = {
@@ -28,7 +28,7 @@ export const menuContentTheme = {
     order: ["content"],
   },
   baseStyle:
-    "min-w-40 rounded-lg space-y-0.5 border border-surface bg-background p-1 text-sm text-foreground shadow-xl shadow-black/[0.025] outline-none",
+    "min-w-40 rounded-lg space-y-0.5 border border-surface bg-background p-1 text-sm text-foreground shadow-xl shadow-black/2.5 outline-hidden",
 };
 
 export const menuItemTheme = {
@@ -37,5 +37,5 @@ export const menuItemTheme = {
     closeOnClick: true,
   },
   baseStyle:
-    "w-full text-start flex items-center py-1.5 px-2.5 rounded align-middle select-none outline-none font-sans  transition-all duration-300 ease-in aria-disabled:opacity-50 aria-disabled:pointer-events-none bg-transparent text-foreground hover:text-black dark:hover:text-white hover:bg-surface focus:bg-surface focus:text-black dark:focus:text-white data-[selected=true]:bg-surface data-[selected=true]:text-black dark:data-[selected=true]:text-white dark:bg-opacity-70",
+    "w-full text-start flex items-center py-1.5 px-2.5 rounded align-middle select-none outline-hidden font-sans  transition-all duration-300 ease-in aria-disabled:opacity-50 aria-disabled:pointer-events-none bg-transparent text-foreground hover:text-black dark:hover:text-white hover:bg-surface focus:bg-surface focus:text-black dark:focus:text-white data-[selected=true]:bg-surface data-[selected=true]:text-black dark:data-[selected=true]:text-white dark:bg-opacity-70",
 };
diff --git a/packages/react/src/theme/navbar.ts b/packages/react/src/theme/navbar.ts
index f372e4537..8152a7d43 100644
--- a/packages/react/src/theme/navbar.ts
+++ b/packages/react/src/theme/navbar.ts
@@ -39,16 +39,16 @@ export const navbarTheme = {
     gradient: {
       default: "bg-background border-surface shadow-black/5",
       primary:
-        "bg-gradient-to-t from-primary-dark to-primary-light shadow-primary/25 border-primary",
+        "bg-linear-to-t from-primary-dark to-primary-light shadow-primary/25 border-primary",
       secondary:
-        "bg-gradient-to-t from-secondary-dark to-secondary-light shadow-secondary/25 border-secondary",
-      info: "bg-gradient-to-t from-info-dark to-info-light shadow-info/25 border-info",
+        "bg-linear-to-t from-secondary-dark to-secondary-light shadow-secondary/25 border-secondary",
+      info: "bg-linear-to-t from-info-dark to-info-light shadow-info/25 border-info",
       success:
-        "bg-gradient-to-t from-success-dark to-success-light shadow-success/25 border-success",
+        "bg-linear-to-t from-success-dark to-success-light shadow-success/25 border-success",
       warning:
-        "bg-gradient-to-t from-warning-dark to-warning-light shadow-warning/25 border-warning",
+        "bg-linear-to-t from-warning-dark to-warning-light shadow-warning/25 border-warning",
       error:
-        "bg-gradient-to-t from-error-dark to-error-light shadow-error/25 border-error",
+        "bg-linear-to-t from-error-dark to-error-light shadow-error/25 border-error",
     },
   },
 };
diff --git a/packages/react/src/theme/popover.ts b/packages/react/src/theme/popover.ts
index dc424880e..30e067daa 100644
--- a/packages/react/src/theme/popover.ts
+++ b/packages/react/src/theme/popover.ts
@@ -13,7 +13,7 @@ export const popoverTheme = {
 };
 
 export const popoverTriggerTheme = {
-  baseStyle: "outline-none group",
+  baseStyle: "outline-hidden group",
 };
 
 export const popoverContentTheme = {
@@ -28,10 +28,10 @@ export const popoverContentTheme = {
     order: ["content"],
   },
   baseStyle:
-    "rounded-lg border border-surface bg-background p-2.5 text-sm text-foreground shadow-xl shadow-black/[0.025] outline-none",
+    "rounded-lg border border-surface bg-background p-2.5 text-sm text-foreground shadow-xl shadow-black/2.5 outline-hidden",
 };
 
 export const popoverArrowTheme = {
   baseStyle:
-    "h-3 w-3 rounded-bl-sm border border-[inherit] bg-inherit [clip-path:polygon(0_0,_100%_100%,_0_100%)] data-[placement^=bottom]:rotate-[135deg] data-[placement^=left]:rotate-[225deg] data-[placement^=right]:rotate-45 data-[placement^=top]:-rotate-45",
+    "h-3 w-3 rounded-bl-sm border border-inherit bg-inherit [clip-path:polygon(0_0,100%_100%,0_100%)] data-[placement^=bottom]:rotate-135 data-[placement^=left]:rotate-225 data-[placement^=right]:rotate-45 data-[placement^=top]:-rotate-45",
 };
diff --git a/packages/react/src/theme/radio.ts b/packages/react/src/theme/radio.ts
index 88b119350..8cdd6a3eb 100644
--- a/packages/react/src/theme/radio.ts
+++ b/packages/react/src/theme/radio.ts
@@ -15,7 +15,7 @@ export const radioTheme = {
 
 export const radioItemTheme = {
   baseStyle:
-    "group block cursor-pointer shadow-sm shadow-black/5 relative h-5 w-5 shrink-0 rounded-full bg-transparent border border-surface transition-all duration-200 ease-in aria-disabled:opacity-50 aria-disabled:pointer-events-none hover:shadow-md",
+    "group block cursor-pointer shadow-xs shadow-black/5 relative h-5 w-5 shrink-0 rounded-full bg-transparent border border-surface transition-all duration-200 ease-in aria-disabled:opacity-50 aria-disabled:pointer-events-none hover:shadow-md",
   color: {
     primary:
       "data-[checked=true]:bg-primary data-[checked=true]:border-primary text-primary-foreground",
diff --git a/packages/react/src/theme/select.tsx b/packages/react/src/theme/select.tsx
index b8580021b..91220e735 100644
--- a/packages/react/src/theme/select.tsx
+++ b/packages/react/src/theme/select.tsx
@@ -43,11 +43,11 @@ export const selectTriggerTheme = {
     ),
   },
   baseStyle:
-    "flex items-center gap-4 justify-between h-max w-full outline-none focus:outline-none text-foreground bg-transparent ring-transparent border border-surface transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none data-[error=true]:border-error data-[success=true]:border-success select-none text-start data-[shape=pill]:rounded-full [&_data-slot=placeholder]:text-foreground/60",
+    "flex items-center gap-4 justify-between h-max w-full outline-hidden focus:outline-hidden text-foreground bg-transparent ring-transparent border border-surface transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none data-[error=true]:border-error data-[success=true]:border-success select-none text-start data-[shape=pill]:rounded-full [&_data-slot=placeholder]:text-foreground/60",
   size: {
-    sm: "text-sm rounded-md py-1.5 px-2 ring shadow-sm",
-    md: "text-sm rounded-md py-2 px-2.5 ring shadow-sm",
-    lg: "text-base rounded-lg py-2.5 px-3 ring-4 shadow-sm",
+    sm: "text-sm rounded-md py-1.5 px-2 ring-3 shadow-xs",
+    md: "text-sm rounded-md py-2 px-2.5 ring-3 shadow-xs",
+    lg: "text-base rounded-lg py-2.5 px-3 ring-4 shadow-xs",
   },
   color: {
     primary:
@@ -76,7 +76,7 @@ export const selectListTheme = {
     order: ["content"],
   },
   baseStyle:
-    "flex flex-col gap-0.5 bg-background p-1 rounded-lg shadow-xl shadow-black/[0.025] border border-surface outline-none",
+    "flex flex-col gap-0.5 bg-background p-1 rounded-lg shadow-xl shadow-black/2.5 border border-surface outline-hidden",
 };
 
 export const selectOptionTheme = {
@@ -100,5 +100,5 @@ export const selectOptionTheme = {
     ),
   },
   baseStyle:
-    "outline-none flex items-center justify-between gap-4 py-1.5 px-2.5 rounded align-middle select-none text-sm font-sans transition-all duration-300 ease-in disabled:opacity-50 disabled:cursor-not-allowed bg-transparent text-foreground hover:text-black dark:hover:text-white hover:bg-surface focus:bg-surface focus:text-black dark:focus:text-white data-[selected=true]:bg-surface data-[selected=true]:text-black dark:data-[selected=true]:text-white dark:bg-opacity-70",
+    "outline-hidden flex items-center justify-between gap-4 py-1.5 px-2.5 rounded align-middle select-none text-sm font-sans transition-all duration-300 ease-in disabled:opacity-50 disabled:cursor-not-allowed bg-transparent text-foreground hover:text-black dark:hover:text-white hover:bg-surface focus:bg-surface focus:text-black dark:focus:text-white data-[selected=true]:bg-surface data-[selected=true]:text-black dark:data-[selected=true]:text-white dark:bg-opacity-70",
 };
diff --git a/packages/react/src/theme/slider.ts b/packages/react/src/theme/slider.ts
index fa0f31ac6..42b29fb81 100644
--- a/packages/react/src/theme/slider.ts
+++ b/packages/react/src/theme/slider.ts
@@ -32,7 +32,7 @@ export const sliderRangeTheme = {
 
 export const sliderThumbTheme = {
   baseStyle:
-    "rounded-full shadow shadow-black/10 outline-none ring ring-transparent",
+    "rounded-full shadow-sm shadow-black/10 outline-hidden ring-3 ring-transparent",
   size: {
     sm: "w-3 h-3",
     md: "w-3.5 h-3.5",
diff --git a/packages/react/src/theme/tabs.ts b/packages/react/src/theme/tabs.ts
index 64350084a..7f89ddaa0 100644
--- a/packages/react/src/theme/tabs.ts
+++ b/packages/react/src/theme/tabs.ts
@@ -23,7 +23,7 @@ export const tabsListTheme = {
 
 export const tabsTriggerTheme = {
   baseStyle:
-    "inline-flex relative z-[2] py-1.5 px-3 items-center justify-center align-middle text-black dark:text-white select-none font-sans font-medium text-center text-sm aria-disabled:opacity-50 aria-disabled:pointer-events-none",
+    "inline-flex relative z-2 py-1.5 px-3 items-center justify-center align-middle text-black dark:text-white select-none font-sans font-medium text-center text-sm aria-disabled:opacity-50 aria-disabled:pointer-events-none",
 };
 
 export const tabsPanelTheme = {
@@ -32,5 +32,5 @@ export const tabsPanelTheme = {
 
 export const tabsTriggerIndicatorTheme = {
   baseStyle:
-    "bg-background rounded shadow-sm shadow-black/10 transition-all duration-300 ease-in",
+    "bg-background rounded shadow-xs shadow-black/10 transition-all duration-300 ease-in",
 };
diff --git a/packages/react/src/theme/textarea.ts b/packages/react/src/theme/textarea.ts
index 562a86a42..15332e7e3 100644
--- a/packages/react/src/theme/textarea.ts
+++ b/packages/react/src/theme/textarea.ts
@@ -11,7 +11,7 @@ export const textareaTheme = {
     isSuccess: false,
   },
   baseStyle:
-    "peer block w-full resize-none outline-none focus:outline-none text-black dark:text-white placeholder:text-foreground/60 bg-transparent ring-transparent border border-surface transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none data-[error=true]:border-error data-[success=true]:border-success data-[resize=true]:resize-y",
+    "peer block w-full resize-none outline-hidden focus:outline-hidden text-black dark:text-white placeholder:text-foreground/60 bg-transparent ring-transparent border border-surface transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none data-[error=true]:border-error data-[success=true]:border-success data-[resize=true]:resize-y",
   color: {
     primary:
       "hover:border-primary hover:ring-primary/10 focus:border-primary focus:ring-primary/10",
@@ -26,8 +26,8 @@ export const textareaTheme = {
       "hover:border-error hover:ring-error/10 focus:border-error focus:ring-error/10",
   },
   size: {
-    sm: "text-sm shadow-sm p-2 rounded-md ring",
-    md: "text-sm shadow-sm p-2.5 rounded-md ring",
-    lg: "text-base shadow-sm p-3 rounded-lg ring-4",
+    sm: "text-sm shadow-xs p-2 rounded-md ring-3",
+    md: "text-sm shadow-xs p-2.5 rounded-md ring-3",
+    lg: "text-base shadow-xs p-3 rounded-lg ring-4",
   },
 };
diff --git a/packages/react/src/theme/tooltip.ts b/packages/react/src/theme/tooltip.ts
index e88097983..e58cabb70 100644
--- a/packages/react/src/theme/tooltip.ts
+++ b/packages/react/src/theme/tooltip.ts
@@ -14,15 +14,15 @@ export const tooltipTheme = {
 };
 
 export const tooltipTriggerTheme = {
-  baseStyle: "outline-none group",
+  baseStyle: "outline-hidden group",
 };
 
 export const tooltipContentTheme = {
   baseStyle:
-    "rounded-md bg-black dark:bg-white border-black dark:border-white px-1.5 py-1 text-xs text-white dark:text-black shadow-lg shadow-black/5 outline-none",
+    "rounded-md bg-black dark:bg-white border-black dark:border-white px-1.5 py-1 text-xs text-white dark:text-black shadow-lg shadow-black/5 outline-hidden",
 };
 
 export const tooltipArrowTheme = {
   baseStyle:
-    "h-2 w-2 rounded-bl border border-[inherit] bg-inherit [clip-path:polygon(0_0,_100%_100%,_0_100%)] data-[placement^=bottom]:rotate-[135deg] data-[placement^=left]:rotate-[225deg] data-[placement^=right]:rotate-45 data-[placement^=top]:-rotate-45",
+    "h-2 w-2 rounded-bl border border-inherit bg-inherit [clip-path:polygon(0_0,100%_100%,0_100%)] data-[placement^=bottom]:rotate-135 data-[placement^=left]:rotate-225 data-[placement^=right]:rotate-45 data-[placement^=top]:-rotate-45",
 };

From b48df4ae5ae3abbc40c9a15a5477832f9b96736a Mon Sep 17 00:00:00 2001
From: Alexandru Paduraru <axelut@yahoo.com>
Date: Fri, 25 Jul 2025 14:57:03 +0300
Subject: [PATCH 02/22] deploy scripts

---
 RELEASES.md | 278 ++++++++++++++++++++++++++++++++++++++++++
 deploy.sh   | 339 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 617 insertions(+)
 create mode 100644 RELEASES.md
 create mode 100644 deploy.sh

diff --git a/RELEASES.md b/RELEASES.md
new file mode 100644
index 000000000..88910c52c
--- /dev/null
+++ b/RELEASES.md
@@ -0,0 +1,278 @@
+# Material Tailwind Release Process
+
+This document outlines the complete release process for Material Tailwind packages including versioning, building, GitHub releases, and NPM publishing.
+
+## Package Structure
+
+- `@material-tailwind/react` - React components package
+- `@material-tailwind/html` - HTML/CSS components package
+
+## Release Types
+
+### Beta Releases
+- Used for testing new features and breaking changes
+- Version format: `X.Y.Z-beta.N` (e.g., `3.0.0-beta.1`)
+- Published to NPM with `@beta` tag
+- Can be installed with `npm install @material-tailwind/react@beta`
+
+### Final Releases
+- Stable releases for production use
+- Version format: `X.Y.Z` (e.g., `3.0.0`)
+- Published to NPM with `@latest` tag (default)
+- Can be installed with `npm install @material-tailwind/react`
+
+## Pre-Release Checklist
+
+### 1. Code Preparation
+- [ ] Ensure all features are complete and tested
+- [ ] Update component documentation
+- [ ] Run full test suite: `pnpm test`
+- [ ] Run linting: `pnpm lint`
+- [ ] Build all packages: `pnpm build`
+- [ ] Update CHANGELOG.md with new features/fixes
+
+### 2. Version Management
+- [ ] Decide on version number following [Semantic Versioning](https://semver.org/)
+  - MAJOR: Breaking changes
+  - MINOR: New features (backward compatible)
+  - PATCH: Bug fixes (backward compatible)
+
+### 3. Documentation Updates
+- [ ] Update installation guides if needed
+- [ ] Update component examples
+- [ ] Update migration guides for breaking changes
+- [ ] Verify all CodePreview examples work
+
+## Release Process
+
+### Step 1: Update Package Versions
+
+#### For React Package
+```bash
+cd packages/react
+npm version [patch|minor|major|prerelease] --preid=beta
+```
+
+#### For HTML Package
+```bash
+cd packages/html
+npm version [patch|minor|major|prerelease] --preid=beta
+```
+
+### Step 2: Build Packages
+
+#### Build React Package
+```bash
+cd packages/react
+pnpm build
+```
+
+#### Build HTML Package
+```bash
+cd packages/html
+pnpm build
+```
+
+### Step 3: Create Git Tag and Commit
+
+```bash
+# Commit version changes
+git add .
+git commit -m "chore: release v{VERSION}"
+
+# Create and push tag
+git tag v{VERSION}
+git push origin main
+git push origin v{VERSION}
+```
+
+### Step 4: Create GitHub Release
+
+1. Go to [GitHub Releases](https://github.com/creativetimofficial/material-tailwind/releases)
+2. Click "Draft a new release"
+3. Choose the created tag `v{VERSION}`
+4. Set release title: `Material Tailwind v{VERSION}`
+5. Generate release notes or write custom notes including:
+   - New features
+   - Bug fixes
+   - Breaking changes (if any)
+   - Migration guide links
+6. Mark as "pre-release" if it's a beta version
+7. Publish release
+
+### Step 5: Publish to NPM
+
+#### Beta Release
+```bash
+# React package
+cd packages/react
+npm publish --tag beta
+
+# HTML package
+cd packages/html
+npm publish --tag beta
+```
+
+#### Final Release
+```bash
+# React package
+cd packages/react
+npm publish
+
+# HTML package
+cd packages/html
+npm publish
+```
+
+## NPM Package Management
+
+### Publishing Beta Versions
+```bash
+# Publish beta version
+npm publish --tag beta
+
+# Users install with:
+npm install @material-tailwind/react@beta
+```
+
+### Publishing Final Versions
+```bash
+# Publish final version (latest tag)
+npm publish
+
+# Users install with:
+npm install @material-tailwind/react
+```
+
+### Promoting Beta to Latest
+```bash
+# If beta testing is successful, promote to latest
+npm dist-tag add @material-tailwind/react@{VERSION} latest
+```
+
+## Post-Release Tasks
+
+### 1. Update Documentation
+- [ ] Update documentation site with new version
+- [ ] Deploy documentation changes
+- [ ] Update README.md files if needed
+
+### 2. Community Communication
+- [ ] Announce release on GitHub Discussions
+- [ ] Update Discord/community channels
+- [ ] Consider blog post for major releases
+
+### 3. Monitor Release
+- [ ] Watch for issue reports
+- [ ] Monitor NPM download statistics
+- [ ] Check for any critical bugs
+
+## Emergency Hotfix Process
+
+For critical bugs in production releases:
+
+1. Create hotfix branch from main: `git checkout -b hotfix/v{VERSION}`
+2. Apply minimal fix
+3. Update version (patch increment)
+4. Follow normal release process
+5. Merge hotfix back to main
+
+## Version Management Examples
+
+### Beta Release Example
+```bash
+# Starting from version 2.5.0, create first beta for 3.0.0
+npm version 3.0.0-beta.1
+
+# Subsequent beta releases
+npm version prerelease --preid=beta  # Creates 3.0.0-beta.2
+```
+
+### Final Release Example
+```bash
+# Promote beta to final
+npm version 3.0.0
+```
+
+## Build Verification
+
+Before publishing, ensure all builds are successful:
+
+```bash
+# From project root
+pnpm build
+
+# Verify dist folders exist and contain built files
+ls packages/react/dist/
+ls packages/html/dist/
+
+# Verify package.json files have correct versions
+cat packages/react/package.json | grep version
+cat packages/html/package.json | grep version
+```
+
+## Rollback Process
+
+If a release needs to be rolled back:
+
+### NPM Rollback
+```bash
+# Deprecate problematic version
+npm deprecate @material-tailwind/react@{VERSION} "This version has critical issues, please upgrade"
+
+# Or unpublish within 24 hours
+npm unpublish @material-tailwind/react@{VERSION}
+```
+
+### GitHub Release Rollback
+1. Mark release as draft
+2. Delete problematic tag
+3. Create new release with fixed version
+
+## Security Considerations
+
+- [ ] Never commit NPM auth tokens
+- [ ] Use NPM 2FA for publishing
+- [ ] Verify package contents before publishing
+- [ ] Review dependencies for vulnerabilities
+
+## Automation Notes
+
+Consider setting up GitHub Actions for:
+- Automated testing on release tags
+- Automated NPM publishing on tag creation
+- Automated documentation deployment
+- Release note generation
+
+## Support Matrix
+
+Maintain clear documentation of:
+- Node.js version support
+- React version compatibility
+- Tailwind CSS version compatibility
+- Browser support
+
+---
+
+## Quick Reference Commands
+
+```bash
+# Check current versions
+pnpm version
+
+# Build all packages
+pnpm build
+
+# Publish beta
+npm publish --tag beta
+
+# Publish final
+npm publish
+
+# Check published versions
+npm view @material-tailwind/react versions --json
+```
+
+---
+
+**Note**: Always test releases in a staging environment before publishing to production. Keep this file updated as the release process evolves. 
\ No newline at end of file
diff --git a/deploy.sh b/deploy.sh
new file mode 100644
index 000000000..b17180be8
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,339 @@
+#!/bin/bash
+
+# Material Tailwind Deploy Script
+# Usage: ./deploy.sh [command] [package] [version_type]
+# 
+# Commands:
+#   release react [beta|stable]     - Build and prepare React package for release
+#   release html [beta|stable]      - Build and prepare HTML package for release
+#   release npm react [beta|stable] - Publish React package to NPM
+#   release npm html [beta|stable]  - Publish HTML package to NPM
+#
+# Examples:
+#   ./deploy.sh release react beta
+#   ./deploy.sh release html stable
+#   ./deploy.sh release npm react beta
+#   ./deploy.sh release npm html stable
+
+set -e  # Exit on any error
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Helper functions
+log_info() {
+    echo -e "${BLUE}[INFO]${NC} $1"
+}
+
+log_success() {
+    echo -e "${GREEN}[SUCCESS]${NC} $1"
+}
+
+log_warning() {
+    echo -e "${YELLOW}[WARNING]${NC} $1"
+}
+
+log_error() {
+    echo -e "${RED}[ERROR]${NC} $1"
+}
+
+# Check if we're in the right directory
+check_directory() {
+    if [[ ! -f "package.json" ]] || [[ ! -d "packages" ]]; then
+        log_error "This script must be run from the Material Tailwind root directory"
+        exit 1
+    fi
+}
+
+# Check if pnpm is installed
+check_pnpm() {
+    if ! command -v pnpm &> /dev/null; then
+        log_error "pnpm is not installed. Please install pnpm first."
+        exit 1
+    fi
+}
+
+# Check if git working directory is clean
+check_git_clean() {
+    if [[ -n $(git status --porcelain) ]]; then
+        log_warning "Git working directory is not clean. Uncommitted changes detected."
+        read -p "Do you want to continue anyway? (y/N): " -n 1 -r
+        echo
+        if [[ ! $REPLY =~ ^[Yy]$ ]]; then
+            log_info "Aborting deployment."
+            exit 1
+        fi
+    fi
+}
+
+# Update package version
+update_version() {
+    local package_path=$1
+    local version_type=$2
+    
+    log_info "Updating version for $package_path ($version_type)"
+    
+    cd "$package_path"
+    
+    if [[ "$version_type" == "beta" ]]; then
+        # Check if current version is already a beta
+        current_version=$(node -p "require('./package.json').version")
+        if [[ $current_version == *"beta"* ]]; then
+            # Increment beta version
+            npm version prerelease --preid=beta
+        else
+            # Create first beta for next minor version
+            npm version preminor --preid=beta
+        fi
+    elif [[ "$version_type" == "stable" ]]; then
+        # For stable release, just increment patch/minor/major
+        echo "Select version increment for stable release:"
+        echo "1) patch (x.x.X)"
+        echo "2) minor (x.X.x)"
+        echo "3) major (X.x.x)"
+        read -p "Enter choice (1-3): " choice
+        
+        case $choice in
+            1) npm version patch ;;
+            2) npm version minor ;;
+            3) npm version major ;;
+            *) log_error "Invalid choice"; exit 1 ;;
+        esac
+    else
+        log_error "Invalid version type: $version_type"
+        exit 1
+    fi
+    
+    # Get the new version
+    new_version=$(node -p "require('./package.json').version")
+    log_success "Updated to version: $new_version"
+    
+    cd - > /dev/null
+    echo "$new_version"
+}
+
+# Build package
+build_package() {
+    local package_path=$1
+    local package_name=$2
+    
+    log_info "Building $package_name package..."
+    
+    cd "$package_path"
+    
+    # Clean previous build
+    if [[ -d "dist" ]]; then
+        rm -rf dist
+        log_info "Cleaned previous build"
+    fi
+    
+    # Install dependencies
+    pnpm install
+    
+    # Build package
+    pnpm build
+    
+    # Verify build output
+    if [[ ! -d "dist" ]] || [[ -z "$(ls -A dist)" ]]; then
+        log_error "Build failed - dist directory is missing or empty"
+        exit 1
+    fi
+    
+    log_success "$package_name package built successfully"
+    
+    cd - > /dev/null
+}
+
+# Publish to NPM
+publish_to_npm() {
+    local package_path=$1
+    local package_name=$2
+    local version_type=$3
+    
+    log_info "Publishing $package_name to NPM ($version_type)..."
+    
+    cd "$package_path"
+    
+    # Verify we're logged in to NPM
+    if ! npm whoami &> /dev/null; then
+        log_error "Not logged in to NPM. Run 'npm login' first."
+        exit 1
+    fi
+    
+    # Check if package.json exists and has correct structure
+    if [[ ! -f "package.json" ]]; then
+        log_error "package.json not found in $package_path"
+        exit 1
+    fi
+    
+    # Verify dist directory exists
+    if [[ ! -d "dist" ]]; then
+        log_error "No dist directory found. Build the package first."
+        exit 1
+    fi
+    
+    # Get package info
+    package_json_name=$(node -p "require('./package.json').name")
+    package_version=$(node -p "require('./package.json').version")
+    
+    log_info "Publishing $package_json_name@$package_version"
+    
+    # Dry run first
+    log_info "Running npm publish dry run..."
+    npm publish --dry-run
+    
+    # Confirm publication
+    read -p "Proceed with publishing? (y/N): " -n 1 -r
+    echo
+    if [[ ! $REPLY =~ ^[Yy]$ ]]; then
+        log_info "Publishing cancelled."
+        exit 1
+    fi
+    
+    # Publish with appropriate tag
+    if [[ "$version_type" == "beta" ]]; then
+        npm publish --tag beta
+        log_success "Published $package_json_name@$package_version with @beta tag"
+    elif [[ "$version_type" == "stable" ]]; then
+        npm publish
+        log_success "Published $package_json_name@$package_version with @latest tag"
+    fi
+    
+    cd - > /dev/null
+}
+
+# Create git tag and commit
+create_git_tag() {
+    local package_name=$1
+    local version=$2
+    
+    log_info "Creating git tag for $package_name v$version"
+    
+    # Commit version changes
+    git add .
+    git commit -m "chore($package_name): release v$version"
+    
+    # Create tag
+    tag_name="$package_name-v$version"
+    git tag "$tag_name"
+    
+    log_success "Created git tag: $tag_name"
+    
+    # Ask if user wants to push
+    read -p "Push changes and tags to remote? (y/N): " -n 1 -r
+    echo
+    if [[ $REPLY =~ ^[Yy]$ ]]; then
+        git push origin main
+        git push origin "$tag_name"
+        log_success "Pushed changes and tags to remote"
+    fi
+}
+
+# Main command processing
+main() {
+    local command=$1
+    local target=$2
+    local package_arg=$3
+    local version_type=$4
+    
+    # Handle different command formats
+    if [[ "$command" == "release" && "$target" == "npm" ]]; then
+        # Format: release npm react/html beta/stable
+        local package_name=$package_arg
+        local version_type=$version_type
+        local action="npm"
+    elif [[ "$command" == "release" ]]; then
+        # Format: release react/html beta/stable
+        local package_name=$target
+        local version_type=$package_arg
+        local action="build"
+    else
+        log_error "Invalid command format"
+        show_usage
+        exit 1
+    fi
+    
+    # Validate package name
+    if [[ "$package_name" != "react" && "$package_name" != "html" ]]; then
+        log_error "Invalid package: $package_name. Must be 'react' or 'html'"
+        exit 1
+    fi
+    
+    # Validate version type
+    if [[ "$version_type" != "beta" && "$version_type" != "stable" ]]; then
+        log_error "Invalid version type: $version_type. Must be 'beta' or 'stable'"
+        exit 1
+    fi
+    
+    # Set package path
+    local package_path="packages/$package_name"
+    
+    # Verify package exists
+    if [[ ! -d "$package_path" ]]; then
+        log_error "Package directory not found: $package_path"
+        exit 1
+    fi
+    
+    log_info "Starting $action for $package_name package ($version_type)"
+    
+    # Execute based on action
+    if [[ "$action" == "build" ]]; then
+        # Release process (version + build + tag)
+        new_version=$(update_version "$package_path" "$version_type")
+        build_package "$package_path" "$package_name"
+        create_git_tag "$package_name" "$new_version"
+        
+        log_success "Release process completed for $package_name v$new_version"
+        log_info "To publish to NPM, run: ./deploy.sh release npm $package_name $version_type"
+        
+    elif [[ "$action" == "npm" ]]; then
+        # NPM publish process
+        build_package "$package_path" "$package_name"
+        publish_to_npm "$package_path" "$package_name" "$version_type"
+        
+        log_success "NPM publishing completed for $package_name ($version_type)"
+    fi
+}
+
+# Show usage information
+show_usage() {
+    echo "Material Tailwind Deploy Script"
+    echo ""
+    echo "Usage: $0 [command] [options]"
+    echo ""
+    echo "Commands:"
+    echo "  release react [beta|stable]      - Version, build and tag React package"
+    echo "  release html [beta|stable]       - Version, build and tag HTML package" 
+    echo "  release npm react [beta|stable]  - Build and publish React package to NPM"
+    echo "  release npm html [beta|stable]   - Build and publish HTML package to NPM"
+    echo ""
+    echo "Examples:"
+    echo "  $0 release react beta             # Create beta release for React"
+    echo "  $0 release html stable            # Create stable release for HTML"
+    echo "  $0 release npm react beta         # Publish React beta to NPM"
+    echo "  $0 release npm html stable        # Publish HTML stable to NPM"
+    echo ""
+    echo "Notes:"
+    echo "  - Beta versions: X.Y.Z-beta.N (published with @beta tag)"
+    echo "  - Stable versions: X.Y.Z (published with @latest tag)"
+    echo "  - Make sure you're logged in to NPM before publishing"
+    echo "  - Git working directory should be clean for releases"
+}
+
+# Script entry point
+if [[ $# -lt 3 ]]; then
+    show_usage
+    exit 1
+fi
+
+# Run checks
+check_directory
+check_pnpm
+check_git_clean
+
+# Execute main function
+main "$@" 
\ No newline at end of file

From 32b92effa52ec21f2fe5f274d04561ed652b78a9 Mon Sep 17 00:00:00 2001
From: Alexandru Paduraru <axelut@yahoo.com>
Date: Fri, 25 Jul 2025 15:17:26 +0300
Subject: [PATCH 03/22] changed lint

---
 package.json                             |   2 +-
 packages/html/src/index.d.ts             |   2 +
 packages/html/src/index.d.ts.map         |   1 +
 packages/html/src/index.js               |   2 +
 packages/html/src/index.js.map           |   1 +
 packages/html/src/plugins/index.d.ts     |  28 ++++
 packages/html/src/plugins/index.d.ts.map |   1 +
 packages/html/src/plugins/index.js       | 180 +++++++++++++++++++++++
 packages/html/src/plugins/index.js.map   |   1 +
 9 files changed, 217 insertions(+), 1 deletion(-)
 create mode 100644 packages/html/src/index.d.ts
 create mode 100644 packages/html/src/index.d.ts.map
 create mode 100644 packages/html/src/index.js
 create mode 100644 packages/html/src/index.js.map
 create mode 100644 packages/html/src/plugins/index.d.ts
 create mode 100644 packages/html/src/plugins/index.d.ts.map
 create mode 100644 packages/html/src/plugins/index.js
 create mode 100644 packages/html/src/plugins/index.js.map

diff --git a/package.json b/package.json
index 97f7f84f9..40bf5a872 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "ci": "turbo build lint && pnpm check && pnpm format"
   },
   "devDependencies": {
-    "eslint": "9.14.0",
+    "eslint": "^8.57.0",
     "eslint-config-custom": "workspace:*",
     "prettier": "3.1.1",
     "prettier-plugin-tailwindcss": "0.6.8",
diff --git a/packages/html/src/index.d.ts b/packages/html/src/index.d.ts
new file mode 100644
index 000000000..5fab7a620
--- /dev/null
+++ b/packages/html/src/index.d.ts
@@ -0,0 +1,2 @@
+export * from "@plugins";
+//# sourceMappingURL=index.d.ts.map
\ No newline at end of file
diff --git a/packages/html/src/index.d.ts.map b/packages/html/src/index.d.ts.map
new file mode 100644
index 000000000..4a178862e
--- /dev/null
+++ b/packages/html/src/index.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
\ No newline at end of file
diff --git a/packages/html/src/index.js b/packages/html/src/index.js
new file mode 100644
index 000000000..a47cbb1fd
--- /dev/null
+++ b/packages/html/src/index.js
@@ -0,0 +1,2 @@
+export * from "@plugins";
+//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/packages/html/src/index.js.map b/packages/html/src/index.js.map
new file mode 100644
index 000000000..b92aad89b
--- /dev/null
+++ b/packages/html/src/index.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
\ No newline at end of file
diff --git a/packages/html/src/plugins/index.d.ts b/packages/html/src/plugins/index.d.ts
new file mode 100644
index 000000000..3e1ee223b
--- /dev/null
+++ b/packages/html/src/plugins/index.d.ts
@@ -0,0 +1,28 @@
+export interface Color {
+    default?: `#${string}`;
+    dark?: `#${string}`;
+    light?: `#${string}`;
+    foreground?: `#${string}`;
+}
+export interface Colors {
+    background?: `#${string}`;
+    foreground?: `#${string}`;
+    black?: `#${string}`;
+    white?: `#${string}`;
+    surface?: Color;
+    primary?: Color;
+    secondary?: Color;
+    info?: Color;
+    success?: Color;
+    warning?: Color;
+    error?: Color;
+}
+export interface Options {
+    fonts?: Record<string, string | string[]>;
+    radius?: string;
+    colors?: Colors;
+    darkColors?: Colors;
+}
+export declare const mtConfig: any;
+export default mtConfig;
+//# sourceMappingURL=index.d.ts.map
\ No newline at end of file
diff --git a/packages/html/src/plugins/index.d.ts.map b/packages/html/src/plugins/index.d.ts.map
new file mode 100644
index 000000000..c756a559e
--- /dev/null
+++ b/packages/html/src/plugins/index.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,MAAM;IACrB,UAAU,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,MAAM,WAAW,OAAO;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAOD,eAAO,MAAM,QAAQ,KAgUpB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
\ No newline at end of file
diff --git a/packages/html/src/plugins/index.js b/packages/html/src/plugins/index.js
new file mode 100644
index 000000000..12a018e4b
--- /dev/null
+++ b/packages/html/src/plugins/index.js
@@ -0,0 +1,180 @@
+import hexRgb from "hex-rgb";
+import plugin from "tailwindcss/plugin";
+function getRgbChannels(hex) {
+    const { red, green, blue } = hexRgb(hex);
+    return `${red} ${green} ${blue}`;
+}
+export const mtConfig = plugin.withOptions(function (options) {
+    return function ({ addBase }) {
+        addBase({
+            ":root": {
+                /* border radius */
+                "--radius": options?.radius || "1.5rem",
+                /* fonts */
+                "--font-sans": options?.fonts?.sans || "Inter",
+                "--font-serif": options?.fonts?.serif || "",
+                "--font-mono": options?.fonts?.mono || "Fira Code",
+                /* base colors */
+                "--color-background": getRgbChannels(options?.colors?.background || "#ffffff"),
+                "--color-foreground": getRgbChannels(options?.colors?.foreground || "#374151"),
+                "--color-black": getRgbChannels(options?.colors?.black || "#030712"),
+                "--color-white": getRgbChannels(options?.colors?.white || "#ffffff"),
+                /* surface color */
+                "--color-surface": getRgbChannels(options?.colors?.surface?.default || "#e5e7eb"),
+                "--color-surface-dark": getRgbChannels(options?.colors?.surface?.dark || "#d1d5db"),
+                "--color-surface-light": getRgbChannels(options?.colors?.surface?.light || "#f3f4f6"),
+                "--color-surface-foreground": getRgbChannels(options?.colors?.surface?.foreground || "#030712"),
+                /* primary color */
+                "--color-primary": getRgbChannels(options?.colors?.primary?.default || "#6028ff"),
+                "--color-primary-dark": getRgbChannels(options?.colors?.primary?.dark || "#5216eb"),
+                "--color-primary-light": getRgbChannels(options?.colors?.primary?.light || "#724dff"),
+                "--color-primary-foreground": getRgbChannels(options?.colors?.primary?.foreground || "#f9fafb"),
+                /* secondary color */
+                "--color-secondary": getRgbChannels(options?.colors?.secondary?.default || "#e5e7eb"),
+                "--color-secondary-dark": getRgbChannels(options?.colors?.secondary?.dark || "#d1d5db"),
+                "--color-secondary-light": getRgbChannels(options?.colors?.secondary?.light || "#f3f4f6"),
+                "--color-secondary-foreground": getRgbChannels(options?.colors?.secondary?.foreground || "#030712"),
+                /* info color */
+                "--color-info": getRgbChannels(options?.colors?.info?.default || "#0062ff"),
+                "--color-info-dark": getRgbChannels(options?.colors?.info?.dark || "#0055dd"),
+                "--color-info-light": getRgbChannels(options?.colors?.info?.light || "#007aff"),
+                "--color-info-foreground": getRgbChannels(options?.colors?.info?.foreground || "#f9fafb"),
+                /* success color */
+                "--color-success": getRgbChannels(options?.colors?.success?.default || "#00bf6b"),
+                "--color-success-dark": getRgbChannels(options?.colors?.success?.dark || "#00a35f"),
+                "--color-success-light": getRgbChannels(options?.colors?.success?.light || "#02e585"),
+                "--color-success-foreground": getRgbChannels(options?.colors?.success?.foreground || "#f9fafb"),
+                /* warning color */
+                "--color-warning": getRgbChannels(options?.colors?.warning?.default || "#fca327"),
+                "--color-warning-dark": getRgbChannels(options?.colors?.warning?.dark || "#f67d0a"),
+                "--color-warning-light": getRgbChannels(options?.colors?.warning?.light || "#fdba4c"),
+                "--color-warning-foreground": getRgbChannels(options?.colors?.warning?.foreground || "#f9fafb"),
+                /* error color */
+                "--color-error": getRgbChannels(options?.colors?.error?.default || "#ef4444"),
+                "--color-error-dark": getRgbChannels(options?.colors?.error?.dark || "#dc2626"),
+                "--color-error-light": getRgbChannels(options?.colors?.error?.light || "#f87171"),
+                "--color-error-foreground": getRgbChannels(options?.colors?.error?.foreground || "#f9fafb"),
+            },
+            ".dark": {
+                /* base colors */
+                "--color-background": getRgbChannels(options?.darkColors?.background || "#030712"),
+                "--color-foreground": getRgbChannels(options?.darkColors?.foreground || "#d1d5db"),
+                "--color-black": getRgbChannels(options?.darkColors?.black || "#030712"),
+                "--color-white": getRgbChannels(options?.darkColors?.white || "#ffffff"),
+                /* surface color */
+                "--color-surface": getRgbChannels(options?.darkColors?.surface?.default || "#1f2937"),
+                "--color-surface-dark": getRgbChannels(options?.darkColors?.surface?.dark || "#111827"),
+                "--color-surface-light": getRgbChannels(options?.darkColors?.surface?.light || "#374151"),
+                "--color-surface-foreground": getRgbChannels(options?.darkColors?.surface?.foreground || "#f9fafb"),
+                /* primary color */
+                "--color-primary": getRgbChannels(options?.darkColors?.primary?.default || "#6028ff"),
+                "--color-primary-dark": getRgbChannels(options?.darkColors?.primary?.dark || "#5216eb"),
+                "--color-primary-light": getRgbChannels(options?.darkColors?.primary?.light || "#724dff"),
+                "--color-primary-foreground": getRgbChannels(options?.darkColors?.primary?.foreground || "#f9fafb"),
+                /* secondary color */
+                "--color-secondary": getRgbChannels(options?.darkColors?.secondary?.default || "#1f2937"),
+                "--color-secondary-dark": getRgbChannels(options?.darkColors?.secondary?.dark || "#111827"),
+                "--color-secondary-light": getRgbChannels(options?.darkColors?.secondary?.light || "#374151"),
+                "--color-secondary-foreground": getRgbChannels(options?.darkColors?.secondary?.foreground || "#f9fafb"),
+                /* info color */
+                "--color-info": getRgbChannels(options?.darkColors?.info?.default || "#0062ff"),
+                "--color-info-dark": getRgbChannels(options?.darkColors?.info?.dark || "#0055dd"),
+                "--color-info-light": getRgbChannels(options?.darkColors?.info?.light || "#007aff"),
+                "--color-info-foreground": getRgbChannels(options?.darkColors?.info?.foreground || "#f9fafb"),
+                /* success color */
+                "--color-success": getRgbChannels(options?.darkColors?.success?.default || "#00bf6b"),
+                "--color-success-dark": getRgbChannels(options?.darkColors?.success?.dark || "#00a35f"),
+                "--color-success-light": getRgbChannels(options?.darkColors?.success?.light || "#02e585"),
+                "--color-success-foreground": getRgbChannels(options?.darkColors?.success?.foreground || "#f9fafb"),
+                /* warning color */
+                "--color-warning": getRgbChannels(options?.darkColors?.warning?.default || "#fca327"),
+                "--color-warning-dark": getRgbChannels(options?.darkColors?.warning?.dark || "#f67d0a"),
+                "--color-warning-light": getRgbChannels(options?.darkColors?.warning?.light || "#fdba4c"),
+                "--color-warning-foreground": getRgbChannels(options?.darkColors?.warning?.foreground || "#f9fafb"),
+                /* error color */
+                "--color-error": getRgbChannels(options?.darkColors?.error?.default || "#ef4444"),
+                "--color-error-dark": getRgbChannels(options?.darkColors?.error?.dark || "#dc2626"),
+                "--color-error-light": getRgbChannels(options?.darkColors?.error?.light || "#f87171"),
+                "--color-error-foreground": getRgbChannels(options?.darkColors?.error?.foreground || "#f9fafb"),
+            },
+        });
+    };
+}, function (options) {
+    return {
+        darkMode: "class",
+        content: [
+            "./node_modules/@material-tailwind/react/src/components/**/*.{js,ts,jsx,tsx}",
+            "./node_modules/@material-tailwind/react/src/theme/**/*.{js,ts,jsx,tsx}",
+        ],
+        theme: {
+            extend: {
+                fontFamily: {
+                    sans: ["var(--font-sans)", "sans-serif"],
+                    serif: ["var(--font-serif)", "serif"],
+                    body: ["var(--font-sans)", "sans-serif"],
+                    mono: ["var(--font-mono)", "monospace"],
+                },
+                borderRadius: {
+                    full: "calc(var(--radius) * 1000)",
+                    "3xl": "var(--radius)",
+                    "2xl": "calc(var(--radius) - 8px)",
+                    xl: "calc(var(--radius) - 12px)",
+                    lg: "calc(var(--radius) - 16px)",
+                    md: "calc(var(--radius) - 18px)",
+                    DEFAULT: "calc(var(--radius) - 20px)",
+                    sm: "calc(var(--radius) - 22px)",
+                },
+                colors: {
+                    background: "rgb(var(--color-background) / <alpha-value>)",
+                    foreground: "rgb(var(--color-foreground) / <alpha-value>)",
+                    black: "rgb(var(--color-black) / <alpha-value>)",
+                    white: "rgb(var(--color-white) / <alpha-value>)",
+                    surface: {
+                        DEFAULT: "rgb(var(--color-surface) / <alpha-value>)",
+                        dark: "rgb(var(--color-surface-dark) / <alpha-value>)",
+                        light: "rgb(var(--color-surface-light) / <alpha-value>)",
+                        foreground: "rgb(var(--color-surface-foreground) / <alpha-value>)",
+                    },
+                    primary: {
+                        DEFAULT: "rgb(var(--color-primary) / <alpha-value>)",
+                        dark: "rgb(var(--color-primary-dark) / <alpha-value>)",
+                        light: "rgb(var(--color-primary-light) / <alpha-value>)",
+                        foreground: "rgb(var(--color-primary-foreground) / <alpha-value>)",
+                    },
+                    secondary: {
+                        DEFAULT: "rgb(var(--color-secondary) / <alpha-value>)",
+                        dark: "rgb(var(--color-secondary-dark) / <alpha-value>)",
+                        light: "rgb(var(--color-secondary-light) / <alpha-value>)",
+                        foreground: "rgb(var(--color-secondary-foreground) / <alpha-value>)",
+                    },
+                    info: {
+                        DEFAULT: "rgb(var(--color-info) / <alpha-value>)",
+                        dark: "rgb(var(--color-info-dark) / <alpha-value>)",
+                        light: "rgb(var(--color-info-light) / <alpha-value>)",
+                        foreground: "rgb(var(--color-info-foreground) / <alpha-value>)",
+                    },
+                    success: {
+                        DEFAULT: "rgb(var(--color-success) / <alpha-value>)",
+                        dark: "rgb(var(--color-success-dark) / <alpha-value>)",
+                        light: "rgb(var(--color-success-light) / <alpha-value>)",
+                        foreground: "rgb(var(--color-success-foreground) / <alpha-value>)",
+                    },
+                    warning: {
+                        DEFAULT: "rgb(var(--color-warning) / <alpha-value>)",
+                        dark: "rgb(var(--color-warning-dark) / <alpha-value>)",
+                        light: "rgb(var(--color-warning-light) / <alpha-value>)",
+                        foreground: "rgb(var(--color-warning-foreground) / <alpha-value>)",
+                    },
+                    error: {
+                        DEFAULT: "rgb(var(--color-error) / <alpha-value>)",
+                        dark: "rgb(var(--color-error-dark) / <alpha-value>)",
+                        light: "rgb(var(--color-error-light) / <alpha-value>)",
+                        foreground: "rgb(var(--color-error-foreground) / <alpha-value>)",
+                    },
+                },
+            },
+        },
+    };
+});
+export default mtConfig;
+//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/packages/html/src/plugins/index.js.map b/packages/html/src/plugins/index.js.map
new file mode 100644
index 000000000..1d03e6a2f
--- /dev/null
+++ b/packages/html/src/plugins/index.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,SAAS,CAAC;AAC7B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AA8BxC,SAAS,cAAc,CAAC,GAAiB;IACvC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,GAAG,GAAG,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;AACnC,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,CACxC,UAAU,OAAgB;IACxB,OAAO,UAAU,EAAE,OAAO,EAAE;QAC1B,OAAO,CAAC;YACN,OAAO,EAAE;gBACP,mBAAmB;gBACnB,UAAU,EAAE,OAAO,EAAE,MAAM,IAAI,QAAQ;gBAEvC,WAAW;gBACX,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,IAAI,OAAO;gBAC9C,cAAc,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE;gBAC3C,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,IAAI,WAAW;gBAElD,iBAAiB;gBACjB,oBAAoB,EAAE,cAAc,CAClC,OAAO,EAAE,MAAM,EAAE,UAAU,IAAI,SAAS,CACzC;gBACD,oBAAoB,EAAE,cAAc,CAClC,OAAO,EAAE,MAAM,EAAE,UAAU,IAAI,SAAS,CACzC;gBACD,eAAe,EAAE,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,SAAS,CAAC;gBACpE,eAAe,EAAE,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,SAAS,CAAC;gBAEpE,mBAAmB;gBACnB,iBAAiB,EAAE,cAAc,CAC/B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,IAAI,SAAS,CAC/C;gBACD,sBAAsB,EAAE,cAAc,CACpC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,IAAI,SAAS,CAC5C;gBACD,uBAAuB,EAAE,cAAc,CACrC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,IAAI,SAAS,CAC7C;gBACD,4BAA4B,EAAE,cAAc,CAC1C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,IAAI,SAAS,CAClD;gBAED,mBAAmB;gBACnB,iBAAiB,EAAE,cAAc,CAC/B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,IAAI,SAAS,CAC/C;gBACD,sBAAsB,EAAE,cAAc,CACpC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,IAAI,SAAS,CAC5C;gBACD,uBAAuB,EAAE,cAAc,CACrC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,IAAI,SAAS,CAC7C;gBACD,4BAA4B,EAAE,cAAc,CAC1C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,IAAI,SAAS,CAClD;gBAED,qBAAqB;gBACrB,mBAAmB,EAAE,cAAc,CACjC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,IAAI,SAAS,CACjD;gBACD,wBAAwB,EAAE,cAAc,CACtC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,IAAI,SAAS,CAC9C;gBACD,yBAAyB,EAAE,cAAc,CACvC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,SAAS,CAC/C;gBACD,8BAA8B,EAAE,cAAc,CAC5C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,IAAI,SAAS,CACpD;gBAED,gBAAgB;gBAChB,cAAc,EAAE,cAAc,CAC5B,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,IAAI,SAAS,CAC5C;gBACD,mBAAmB,EAAE,cAAc,CACjC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,IAAI,SAAS,CACzC;gBACD,oBAAoB,EAAE,cAAc,CAClC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,IAAI,SAAS,CAC1C;gBACD,yBAAyB,EAAE,cAAc,CACvC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,IAAI,SAAS,CAC/C;gBAED,mBAAmB;gBACnB,iBAAiB,EAAE,cAAc,CAC/B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,IAAI,SAAS,CAC/C;gBACD,sBAAsB,EAAE,cAAc,CACpC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,IAAI,SAAS,CAC5C;gBACD,uBAAuB,EAAE,cAAc,CACrC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,IAAI,SAAS,CAC7C;gBACD,4BAA4B,EAAE,cAAc,CAC1C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,IAAI,SAAS,CAClD;gBAED,mBAAmB;gBACnB,iBAAiB,EAAE,cAAc,CAC/B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,IAAI,SAAS,CAC/C;gBACD,sBAAsB,EAAE,cAAc,CACpC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,IAAI,SAAS,CAC5C;gBACD,uBAAuB,EAAE,cAAc,CACrC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,IAAI,SAAS,CAC7C;gBACD,4BAA4B,EAAE,cAAc,CAC1C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,IAAI,SAAS,CAClD;gBAED,iBAAiB;gBACjB,eAAe,EAAE,cAAc,CAC7B,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,IAAI,SAAS,CAC7C;gBACD,oBAAoB,EAAE,cAAc,CAClC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,IAAI,SAAS,CAC1C;gBACD,qBAAqB,EAAE,cAAc,CACnC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,IAAI,SAAS,CAC3C;gBACD,0BAA0B,EAAE,cAAc,CACxC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,IAAI,SAAS,CAChD;aACF;YAED,OAAO,EAAE;gBACP,iBAAiB;gBACjB,oBAAoB,EAAE,cAAc,CAClC,OAAO,EAAE,UAAU,EAAE,UAAU,IAAI,SAAS,CAC7C;gBACD,oBAAoB,EAAE,cAAc,CAClC,OAAO,EAAE,UAAU,EAAE,UAAU,IAAI,SAAS,CAC7C;gBACD,eAAe,EAAE,cAAc,CAC7B,OAAO,EAAE,UAAU,EAAE,KAAK,IAAI,SAAS,CACxC;gBACD,eAAe,EAAE,cAAc,CAC7B,OAAO,EAAE,UAAU,EAAE,KAAK,IAAI,SAAS,CACxC;gBAED,mBAAmB;gBACnB,iBAAiB,EAAE,cAAc,CAC/B,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,IAAI,SAAS,CACnD;gBACD,sBAAsB,EAAE,cAAc,CACpC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,IAAI,SAAS,CAChD;gBACD,uBAAuB,EAAE,cAAc,CACrC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,IAAI,SAAS,CACjD;gBACD,4BAA4B,EAAE,cAAc,CAC1C,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,IAAI,SAAS,CACtD;gBAED,mBAAmB;gBACnB,iBAAiB,EAAE,cAAc,CAC/B,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,IAAI,SAAS,CACnD;gBACD,sBAAsB,EAAE,cAAc,CACpC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,IAAI,SAAS,CAChD;gBACD,uBAAuB,EAAE,cAAc,CACrC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,IAAI,SAAS,CACjD;gBACD,4BAA4B,EAAE,cAAc,CAC1C,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,IAAI,SAAS,CACtD;gBAED,qBAAqB;gBACrB,mBAAmB,EAAE,cAAc,CACjC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,IAAI,SAAS,CACrD;gBACD,wBAAwB,EAAE,cAAc,CACtC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,IAAI,SAAS,CAClD;gBACD,yBAAyB,EAAE,cAAc,CACvC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,IAAI,SAAS,CACnD;gBACD,8BAA8B,EAAE,cAAc,CAC5C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,IAAI,SAAS,CACxD;gBAED,gBAAgB;gBAChB,cAAc,EAAE,cAAc,CAC5B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,IAAI,SAAS,CAChD;gBACD,mBAAmB,EAAE,cAAc,CACjC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,IAAI,SAAS,CAC7C;gBACD,oBAAoB,EAAE,cAAc,CAClC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,IAAI,SAAS,CAC9C;gBACD,yBAAyB,EAAE,cAAc,CACvC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,IAAI,SAAS,CACnD;gBAED,mBAAmB;gBACnB,iBAAiB,EAAE,cAAc,CAC/B,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,IAAI,SAAS,CACnD;gBACD,sBAAsB,EAAE,cAAc,CACpC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,IAAI,SAAS,CAChD;gBACD,uBAAuB,EAAE,cAAc,CACrC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,IAAI,SAAS,CACjD;gBACD,4BAA4B,EAAE,cAAc,CAC1C,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,IAAI,SAAS,CACtD;gBAED,mBAAmB;gBACnB,iBAAiB,EAAE,cAAc,CAC/B,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,IAAI,SAAS,CACnD;gBACD,sBAAsB,EAAE,cAAc,CACpC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,IAAI,SAAS,CAChD;gBACD,uBAAuB,EAAE,cAAc,CACrC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,IAAI,SAAS,CACjD;gBACD,4BAA4B,EAAE,cAAc,CAC1C,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,IAAI,SAAS,CACtD;gBAED,iBAAiB;gBACjB,eAAe,EAAE,cAAc,CAC7B,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,IAAI,SAAS,CACjD;gBACD,oBAAoB,EAAE,cAAc,CAClC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,IAAI,SAAS,CAC9C;gBACD,qBAAqB,EAAE,cAAc,CACnC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,IAAI,SAAS,CAC/C;gBACD,0BAA0B,EAAE,cAAc,CACxC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,IAAI,SAAS,CACpD;aACF;SACF,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC,EACD,UAAU,OAAO;IACf,OAAO;QACL,QAAQ,EAAE,OAAO;QACjB,OAAO,EAAE;YACP,6EAA6E;YAC7E,wEAAwE;SACzE;QACD,KAAK,EAAE;YACL,MAAM,EAAE;gBACN,UAAU,EAAE;oBACV,IAAI,EAAE,CAAC,kBAAkB,EAAE,YAAY,CAAC;oBACxC,KAAK,EAAE,CAAC,mBAAmB,EAAE,OAAO,CAAC;oBACrC,IAAI,EAAE,CAAC,kBAAkB,EAAE,YAAY,CAAC;oBACxC,IAAI,EAAE,CAAC,kBAAkB,EAAE,WAAW,CAAC;iBACxC;gBACD,YAAY,EAAE;oBACZ,IAAI,EAAE,4BAA4B;oBAClC,KAAK,EAAE,eAAe;oBACtB,KAAK,EAAE,2BAA2B;oBAClC,EAAE,EAAE,4BAA4B;oBAChC,EAAE,EAAE,4BAA4B;oBAChC,EAAE,EAAE,4BAA4B;oBAChC,OAAO,EAAE,4BAA4B;oBACrC,EAAE,EAAE,4BAA4B;iBACjC;gBACD,MAAM,EAAE;oBACN,UAAU,EAAE,8CAA8C;oBAC1D,UAAU,EAAE,8CAA8C;oBAC1D,KAAK,EAAE,yCAAyC;oBAChD,KAAK,EAAE,yCAAyC;oBAChD,OAAO,EAAE;wBACP,OAAO,EAAE,2CAA2C;wBACpD,IAAI,EAAE,gDAAgD;wBACtD,KAAK,EAAE,iDAAiD;wBACxD,UAAU,EACR,sDAAsD;qBACzD;oBACD,OAAO,EAAE;wBACP,OAAO,EAAE,2CAA2C;wBACpD,IAAI,EAAE,gDAAgD;wBACtD,KAAK,EAAE,iDAAiD;wBACxD,UAAU,EACR,sDAAsD;qBACzD;oBACD,SAAS,EAAE;wBACT,OAAO,EAAE,6CAA6C;wBACtD,IAAI,EAAE,kDAAkD;wBACxD,KAAK,EAAE,mDAAmD;wBAC1D,UAAU,EACR,wDAAwD;qBAC3D;oBACD,IAAI,EAAE;wBACJ,OAAO,EAAE,wCAAwC;wBACjD,IAAI,EAAE,6CAA6C;wBACnD,KAAK,EAAE,8CAA8C;wBACrD,UAAU,EAAE,mDAAmD;qBAChE;oBACD,OAAO,EAAE;wBACP,OAAO,EAAE,2CAA2C;wBACpD,IAAI,EAAE,gDAAgD;wBACtD,KAAK,EAAE,iDAAiD;wBACxD,UAAU,EACR,sDAAsD;qBACzD;oBACD,OAAO,EAAE;wBACP,OAAO,EAAE,2CAA2C;wBACpD,IAAI,EAAE,gDAAgD;wBACtD,KAAK,EAAE,iDAAiD;wBACxD,UAAU,EACR,sDAAsD;qBACzD;oBACD,KAAK,EAAE;wBACL,OAAO,EAAE,yCAAyC;wBAClD,IAAI,EAAE,8CAA8C;wBACpD,KAAK,EAAE,+CAA+C;wBACtD,UAAU,EAAE,oDAAoD;qBACjE;iBACF;aACF;SACF;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
\ No newline at end of file

From 78ceadd7cd6c7795e6f11f93291428396339647a Mon Sep 17 00:00:00 2001
From: Alexandru Paduraru <axelut@yahoo.com>
Date: Fri, 25 Jul 2025 15:45:57 +0300
Subject: [PATCH 04/22] eslint

---
 apps/site/.eslintrc.json               | 10 ++++
 eslint.config.mjs                      | 63 ++++++++++++++++++++++++++
 package.json                           |  9 +++-
 packages/eslint-config-custom/index.js | 13 +-----
 4 files changed, 83 insertions(+), 12 deletions(-)
 create mode 100644 apps/site/.eslintrc.json
 create mode 100644 eslint.config.mjs

diff --git a/apps/site/.eslintrc.json b/apps/site/.eslintrc.json
new file mode 100644
index 000000000..63dff6859
--- /dev/null
+++ b/apps/site/.eslintrc.json
@@ -0,0 +1,10 @@
+{
+  "extends": ["next/core-web-vitals"],
+  "rules": {
+    "react/display-name": "off",
+    "@next/next/no-img-element": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "react/jsx-key": "off",
+    "react/no-unescaped-entities": "off"
+  }
+} 
\ No newline at end of file
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 000000000..a7e67b0f2
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,63 @@
+import js from "@eslint/js";
+import nextPlugin from "@next/eslint-plugin-next";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import reactPlugin from "eslint-plugin-react";
+import turboPlugin from "eslint-plugin-turbo";
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import typescriptParser from "@typescript-eslint/parser";
+
+export default [
+  js.configs.recommended,
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+    plugins: {
+      "@next/next": nextPlugin,
+      "react-hooks": reactHooksPlugin,
+      react: reactPlugin,
+      turbo: turboPlugin,
+      "@typescript-eslint": typescriptEslint,
+    },
+    languageOptions: {
+      parser: typescriptParser,
+      ecmaVersion: "latest",
+      sourceType: "module",
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+      next: {
+        rootDir: ["./apps/*/", "./packages/*/"],
+      },
+    },
+    rules: {
+      ...nextPlugin.configs.recommended.rules,
+      ...nextPlugin.configs["core-web-vitals"].rules,
+      ...reactHooksPlugin.configs.recommended.rules,
+      ...turboPlugin.configs.recommended.rules,
+      
+      // Custom rules
+      "react/display-name": "off",
+      "@next/next/no-img-element": "off",
+      "react-hooks/exhaustive-deps": "off",
+      "react/jsx-key": "off",
+      "react/no-unescaped-entities": "off",
+      "@next/next/no-html-link-for-pages": "off",
+    },
+  },
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "dist/**",
+      "build/**",
+      "*.config.js",
+      "*.config.mjs",
+    ],
+  },
+]; 
\ No newline at end of file
diff --git a/package.json b/package.json
index 40bf5a872..5122f2782 100644
--- a/package.json
+++ b/package.json
@@ -30,8 +30,15 @@
     "ci": "turbo build lint && pnpm check && pnpm format"
   },
   "devDependencies": {
-    "eslint": "^8.57.0",
+    "@eslint/js": "9.31.0",
+    "@next/eslint-plugin-next": "15.4.4",
+    "@typescript-eslint/eslint-plugin": "8.38.0",
+    "@typescript-eslint/parser": "8.38.0",
+    "eslint": "^9.14.0",
     "eslint-config-custom": "workspace:*",
+    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-turbo": "2.5.5",
     "prettier": "3.1.1",
     "prettier-plugin-tailwindcss": "0.6.8",
     "turbo": "2.1.3"
diff --git a/packages/eslint-config-custom/index.js b/packages/eslint-config-custom/index.js
index c9523f13c..a2145f54f 100644
--- a/packages/eslint-config-custom/index.js
+++ b/packages/eslint-config-custom/index.js
@@ -1,11 +1,2 @@
-module.exports = {
-  extends: ["next", "turbo", "prettier"],
-  rules: {
-    "@next/next/no-html-link-for-pages": "off",
-  },
-  parserOptions: {
-    babelOptions: {
-      presets: [require.resolve("next/babel")],
-    },
-  },
-};
+// This is now just a placeholder - the main config is in eslint.config.mjs
+module.exports = {};

From 3721eb6f5cfd17fbe2cda5065744b2ae931b0e00 Mon Sep 17 00:00:00 2001
From: Alexandru Paduraru <axelut@yahoo.com>
Date: Fri, 25 Jul 2025 16:11:25 +0300
Subject: [PATCH 05/22] lint fixes

---
 packages/html/src/plugins/index.d.ts     |  3 ++-
 packages/html/src/plugins/index.d.ts.map |  2 +-
 packages/html/src/plugins/index.js.map   |  2 +-
 packages/html/src/plugins/index.ts       | 19 +++++++++++++++----
 packages/html/tsconfig.json              |  2 +-
 5 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/html/src/plugins/index.d.ts b/packages/html/src/plugins/index.d.ts
index 3e1ee223b..e163c20fa 100644
--- a/packages/html/src/plugins/index.d.ts
+++ b/packages/html/src/plugins/index.d.ts
@@ -1,3 +1,4 @@
+import plugin from "tailwindcss/plugin";
 export interface Color {
     default?: `#${string}`;
     dark?: `#${string}`;
@@ -23,6 +24,6 @@ export interface Options {
     colors?: Colors;
     darkColors?: Colors;
 }
-export declare const mtConfig: any;
+export declare const mtConfig: ReturnType<typeof plugin.withOptions<Options>>;
 export default mtConfig;
 //# sourceMappingURL=index.d.ts.map
\ No newline at end of file
diff --git a/packages/html/src/plugins/index.d.ts.map b/packages/html/src/plugins/index.d.ts.map
index c756a559e..ddf011cac 100644
--- a/packages/html/src/plugins/index.d.ts.map
+++ b/packages/html/src/plugins/index.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,MAAM;IACrB,UAAU,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,MAAM,WAAW,OAAO;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAOD,eAAO,MAAM,QAAQ,KAgUpB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
\ No newline at end of file
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAaxC,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,MAAM;IACrB,UAAU,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,MAAM,WAAW,OAAO;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAOD,eAAO,MAAM,QAAQ,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAgUnE,CAAC;AAEF,eAAe,QAAQ,CAAC"}
\ No newline at end of file
diff --git a/packages/html/src/plugins/index.js.map b/packages/html/src/plugins/index.js.map
index 1d03e6a2f..5191262e9 100644
--- a/packages/html/src/plugins/index.js.map
+++ b/packages/html/src/plugins/index.js.map
@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/packages/html/src/plugins/index.ts b/packages/html/src/plugins/index.ts
index 3395e67e3..6045c6c5f 100644
--- a/packages/html/src/plugins/index.ts
+++ b/packages/html/src/plugins/index.ts
@@ -1,6 +1,17 @@
 import hexRgb from "hex-rgb";
 import plugin from "tailwindcss/plugin";
 
+// Define the PluginAPI type locally based on what tailwindcss expects
+interface PluginAPI {
+  addBase(base: Record<string, any>): void;
+  addVariant(name: string, variant: string | string[] | Record<string, any>): void;
+  addUtilities(utilities: Record<string, any>, options?: any): void;
+  addComponents(utilities: Record<string, any>, options?: any): void;
+  theme(path: string, defaultValue?: any): any;
+  config(path?: string, defaultValue?: any): any;
+  prefix(className: string): string;
+}
+
 export interface Color {
   default?: `#${string}`;
   dark?: `#${string}`;
@@ -34,9 +45,9 @@ function getRgbChannels(hex: `#${string}`) {
   return `${red} ${green} ${blue}`;
 }
 
-export const mtConfig = plugin.withOptions(
-  function (options: Options) {
-    return function ({ addBase }) {
+export const mtConfig: ReturnType<typeof plugin.withOptions<Options>> = plugin.withOptions(
+  function (options?: Options) {
+    return function ({ addBase }: PluginAPI) {
       addBase({
         ":root": {
           /* border radius */
@@ -272,7 +283,7 @@ export const mtConfig = plugin.withOptions(
       });
     };
   },
-  function (options) {
+  function (options?: Options) {
     return {
       darkMode: "class",
       content: [
diff --git a/packages/html/tsconfig.json b/packages/html/tsconfig.json
index 2f60a24da..6a057a3fb 100644
--- a/packages/html/tsconfig.json
+++ b/packages/html/tsconfig.json
@@ -7,7 +7,7 @@
     "lib": ["esnext"],
     "declaration": true,
     "sourceMap": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "skipLibCheck": true,
     "strict": true,
     "isolatedModules": false,

From 51f9561fe65ca2dafdafd1a7af6c11749c76171b Mon Sep 17 00:00:00 2001
From: Alexandru Paduraru <axelut@yahoo.com>
Date: Fri, 25 Jul 2025 16:16:42 +0300
Subject: [PATCH 06/22] pnpm

---
 package.json | 6 +-----
 vercel.json  | 9 +++++++--
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 5122f2782..3034f1213 100644
--- a/package.json
+++ b/package.json
@@ -15,10 +15,6 @@
   },
   "homepage": "https://material-tailwind.com",
   "private": true,
-  "workspaces": [
-    "apps/*",
-    "packages/*"
-  ],
   "scripts": {
     "build": "turbo run build",
     "dev": "turbo run dev",
@@ -43,5 +39,5 @@
     "prettier-plugin-tailwindcss": "0.6.8",
     "turbo": "2.1.3"
   },
-  "packageManager": "pnpm@8.3.1"
+  "packageManager": "pnpm@9.11.0"
 }
\ No newline at end of file
diff --git a/vercel.json b/vercel.json
index 785e5e25c..eb598627b 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,5 +1,10 @@
 {
   "buildCommand": "turbo run build",
-  "installCommand": "pnpm install",
-  "outputDirectory": "apps/site/.next"
+  "installCommand": "pnpm install --frozen-lockfile",
+  "outputDirectory": "apps/site/.next",
+  "functions": {
+    "apps/site/**": {
+      "runtime": "nodejs22.x"
+    }
+  }
 }

From d9ebd216a95fb253efde83ce8465c7307c8bff95 Mon Sep 17 00:00:00 2001
From: Alexandru Paduraru <axelut@yahoo.com>
Date: Fri, 25 Jul 2025 16:21:29 +0300
Subject: [PATCH 07/22] runtime

---
 vercel.json | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/vercel.json b/vercel.json
index eb598627b..170491746 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,10 +1,5 @@
 {
   "buildCommand": "turbo run build",
   "installCommand": "pnpm install --frozen-lockfile",
-  "outputDirectory": "apps/site/.next",
-  "functions": {
-    "apps/site/**": {
-      "runtime": "nodejs22.x"
-    }
-  }
+  "outputDirectory": "apps/site/.next"
 }

From 8f52bde2452cc903b390eabf73c0c2440d427b7b Mon Sep 17 00:00:00 2001
From: Alexandru Paduraru <axelut@yahoo.com>
Date: Fri, 25 Jul 2025 16:22:34 +0300
Subject: [PATCH 08/22] Update vercel.json

---
 vercel.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vercel.json b/vercel.json
index 170491746..785e5e25c 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,5 +1,5 @@
 {
   "buildCommand": "turbo run build",
-  "installCommand": "pnpm install --frozen-lockfile",
+  "installCommand": "pnpm install",
   "outputDirectory": "apps/site/.next"
 }

From 144e61568eda69278efb32d8e355a1bb971842b3 Mon Sep 17 00:00:00 2001
From: Alexandru Paduraru <axelut@yahoo.com>
Date: Fri, 25 Jul 2025 16:48:36 +0300
Subject: [PATCH 09/22] Update package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3034f1213..e34d83bd8 100644
--- a/package.json
+++ b/package.json
@@ -39,5 +39,5 @@
     "prettier-plugin-tailwindcss": "0.6.8",
     "turbo": "2.1.3"
   },
-  "packageManager": "pnpm@9.11.0"
+  "packageManager": "pnpm@8.15.4"
 }
\ No newline at end of file

From 18a9654b7608e36ab75999424796df66ca144324 Mon Sep 17 00:00:00 2001
From: Alexandru Paduraru <axelut@yahoo.com>
Date: Fri, 25 Jul 2025 16:49:25 +0300
Subject: [PATCH 10/22] Update .npmrc

---
 .npmrc | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.npmrc b/.npmrc
index c9bc970bb..76e8f7fe1 100644
--- a/.npmrc
+++ b/.npmrc
@@ -3,4 +3,6 @@ save-exact = true
 auto-install-peers = true
 link-workspace-packages = false
 strict-peer-dependencies = false
-prefer-workspace-packages = false
\ No newline at end of file
+prefer-workspace-packages = false
+node-linker = hoisted
+shamefully-hoist = true
\ No newline at end of file

From 074b301456a2c6d9fe4cc95ce91d551662b1a6f8 Mon Sep 17 00:00:00 2001
From: dragosct10 <dragos@creative-tim.com>
Date: Wed, 30 Jul 2025 12:15:49 +0300
Subject: [PATCH 11/22] Update package.json

---
 packages/html/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/html/package.json b/packages/html/package.json
index 16c4191be..e9370de9e 100644
--- a/packages/html/package.json
+++ b/packages/html/package.json
@@ -5,7 +5,7 @@
   "main": "dist/index.js",
   "scripts": {
     "lint": "tsc",
-    "build": "tsup src --dts",
+    "build": "tsup --config tsup.config.ts",
     "dev": "tsup src --watch"
   },
   "private": false,

From f33782469aebe2572f6fa6125317d4e37ae698ae Mon Sep 17 00:00:00 2001
From: dragosct10 <dragos@creative-tim.com>
Date: Wed, 30 Jul 2025 12:15:51 +0300
Subject: [PATCH 12/22] Update index.ts

---
 packages/html/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts
index d0841767e..67bf44c32 100644
--- a/packages/html/src/index.ts
+++ b/packages/html/src/index.ts
@@ -1 +1 @@
-export * from "@plugins";
+export * from "./plugins";

From 39b95c4441f5325582b624078876af4efd8af4f1 Mon Sep 17 00:00:00 2001
From: dragosct10 <dragos@creative-tim.com>
Date: Wed, 30 Jul 2025 12:15:54 +0300
Subject: [PATCH 13/22] Update index.ts

---
 packages/html/src/plugins/index.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/html/src/plugins/index.ts b/packages/html/src/plugins/index.ts
index 6045c6c5f..4b7901fe4 100644
--- a/packages/html/src/plugins/index.ts
+++ b/packages/html/src/plugins/index.ts
@@ -1,3 +1,5 @@
+/* eslint-disable no-unused-vars */
+
 import hexRgb from "hex-rgb";
 import plugin from "tailwindcss/plugin";
 
@@ -6,7 +8,7 @@ interface PluginAPI {
   addBase(base: Record<string, any>): void;
   addVariant(name: string, variant: string | string[] | Record<string, any>): void;
   addUtilities(utilities: Record<string, any>, options?: any): void;
-  addComponents(utilities: Record<string, any>, options?: any): void;
+  addComponents(utilities: Record<string, any>, options?: any): void; 
   theme(path: string, defaultValue?: any): any;
   config(path?: string, defaultValue?: any): any;
   prefix(className: string): string;
@@ -283,7 +285,7 @@ export const mtConfig: ReturnType<typeof plugin.withOptions<Options>> = plugin.w
       });
     };
   },
-  function (options?: Options) {
+  function () {
     return {
       darkMode: "class",
       content: [

From 357b79aa71c71c8554af149547e8a879f1e9f2ba Mon Sep 17 00:00:00 2001
From: dragosct10 <dragos@creative-tim.com>
Date: Wed, 30 Jul 2025 12:15:56 +0300
Subject: [PATCH 14/22] Update tsconfig.json

---
 packages/html/tsconfig.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/html/tsconfig.json b/packages/html/tsconfig.json
index 6a057a3fb..f1acf2a17 100644
--- a/packages/html/tsconfig.json
+++ b/packages/html/tsconfig.json
@@ -6,11 +6,11 @@
     "module": "esnext",
     "lib": ["esnext"],
     "declaration": true,
-    "sourceMap": true,
-    "moduleResolution": "bundler",
+    "sourceMap": false,
+    "moduleResolution": "node",
     "skipLibCheck": true,
     "strict": true,
-    "isolatedModules": false,
+    "isolatedModules": true,
     "noFallthroughCasesInSwitch": true,
     "esModuleInterop": true,
     "resolveJsonModule": true,

From 01a39499faa614e3f43021240a8620ffab48f61e Mon Sep 17 00:00:00 2001
From: dragosct10 <dragos@creative-tim.com>
Date: Wed, 30 Jul 2025 12:16:03 +0300
Subject: [PATCH 15/22] Update tsup.config.ts

---
 packages/html/tsup.config.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/html/tsup.config.ts b/packages/html/tsup.config.ts
index 5a3af5799..eba2bd430 100644
--- a/packages/html/tsup.config.ts
+++ b/packages/html/tsup.config.ts
@@ -1,6 +1,15 @@
 import { defineConfig } from "tsup";
 
 export default defineConfig({
+  entry: ["src/index.ts", "src/plugins/index.ts"],
   clean: true,
   format: ["cjs", "esm"],
+  dts: {
+    resolve: true,
+  },
+  sourcemap: false,
+  minify: true,
+  splitting: false,
+  keepNames: true,
+  skipNodeModulesBundle: true,
 });

From 684ec0562f6643c53c7d22d93e8c0ec1fbf2719e Mon Sep 17 00:00:00 2001
From: dragosct10 <dragos@creative-tim.com>
Date: Wed, 30 Jul 2025 12:16:05 +0300
Subject: [PATCH 16/22] Update package.json

---
 packages/react/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/package.json b/packages/react/package.json
index f63fbcea2..a184d0dd3 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -27,6 +27,7 @@
   "devDependencies": {
     "@types/react": "18.2.61",
     "@types/react-dom": "18.2.19",
+    "@types/material-ripple-effects": "2.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwindcss": "4.1.11",

From f47d0c6fde0a45cbca07add0688d78ae92d891d1 Mon Sep 17 00:00:00 2001
From: dragosct10 <dragos@creative-tim.com>
Date: Wed, 30 Jul 2025 12:16:09 +0300
Subject: [PATCH 17/22] Update index.ts

---
 packages/react/src/plugins/index.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/plugins/index.ts b/packages/react/src/plugins/index.ts
index 14b854d57..c9d5fe638 100644
--- a/packages/react/src/plugins/index.ts
+++ b/packages/react/src/plugins/index.ts
@@ -35,8 +35,8 @@ function getRgbChannels(hex: `#${string}`) {
   return `${red} ${green} ${blue}`;
 }
 
-export const mtConfig = plugin.withOptions(
-  function (options: Options) {
+export const mtConfig: ReturnType<typeof plugin.withOptions<Options>> = plugin.withOptions(
+  function (options?: Options) {
     return function ({ addBase }) {
       addBase({
         ":root": {
@@ -273,7 +273,7 @@ export const mtConfig = plugin.withOptions(
       });
     };
   },
-  function (options) {
+  function () {
     return {
       darkMode: "class",
       content: [

From 7b8c43e0f515bada47160da3a02461c1b70b5641 Mon Sep 17 00:00:00 2001
From: dragosct10 <dragos@creative-tim.com>
Date: Wed, 30 Jul 2025 12:16:11 +0300
Subject: [PATCH 18/22] Create material-ripple-effects.d.ts

---
 packages/react/src/types/material-ripple-effects.d.ts | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 packages/react/src/types/material-ripple-effects.d.ts

diff --git a/packages/react/src/types/material-ripple-effects.d.ts b/packages/react/src/types/material-ripple-effects.d.ts
new file mode 100644
index 000000000..25d52e93f
--- /dev/null
+++ b/packages/react/src/types/material-ripple-effects.d.ts
@@ -0,0 +1,9 @@
+/* eslint-disable */
+/// <reference lib="dom" />
+
+declare class MaterialRipple {
+  constructor();
+  create(event: any, color?: 'dark' | 'light'): void;
+}
+
+export = MaterialRipple; 
\ No newline at end of file

From 96988e2b1e83f8e87433c627ddc50b27ecb6d1cc Mon Sep 17 00:00:00 2001
From: dragosct10 <dragos@creative-tim.com>
Date: Wed, 30 Jul 2025 12:16:13 +0300
Subject: [PATCH 19/22] Update tsconfig.json

---
 packages/react/tsconfig.json | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 6b1242d29..210fb6e0f 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -4,30 +4,29 @@
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",
-    "lib": ["dom", "esnext"],
+    "moduleResolution": "bundler",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "jsx": "preserve",
     "declaration": true,
-    "sourceMap": true,
-    "moduleResolution": "node",
+    "sourceMap": false,
     "skipLibCheck": true,
     "strict": true,
-    "isolatedModules": false,
+    "isolatedModules": true,
     "noFallthroughCasesInSwitch": true,
-    "jsx": "react-jsx",
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
     "downlevelIteration": true,
     "baseUrl": ".",
     "paths": {
-      "@theme": ["./src/theme/index.ts"],
-      "@utils": ["./src/utils/index.ts"],
-      "@hooks": ["./src/hooks/index.ts"],
-      "@types": ["./src/types/index.ts"],
-      "@plugins": ["./src/plugins/index.ts"],
-      "@context": ["./src/context/index.tsx"],
-      "@components": ["./src/components/index.ts"]
+      "@context": ["./src/context"],
+      "@plugins": ["./src/plugins"],
+      "@theme": ["./src/theme"],
+      "@types": ["./src/types"],
+      "@utils": ["./src/utils"],
+      "@components": ["./src/components"]
     }
   },
-  "include": ["src", "index.d.ts"],
+  "include": ["src"],
   "exclude": ["node_modules", "dist"]
 }

From 63caeda5f389055198aeebd1f637fd94bc7d262c Mon Sep 17 00:00:00 2001
From: dragosct10 <dragos@creative-tim.com>
Date: Wed, 30 Jul 2025 12:16:15 +0300
Subject: [PATCH 20/22] Update tsup.config.ts

---
 packages/react/tsup.config.ts | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/packages/react/tsup.config.ts b/packages/react/tsup.config.ts
index 5a3af5799..0e3c75825 100644
--- a/packages/react/tsup.config.ts
+++ b/packages/react/tsup.config.ts
@@ -2,5 +2,28 @@ import { defineConfig } from "tsup";
 
 export default defineConfig({
   clean: true,
+  dts: {
+    resolve: true,
+  },
   format: ["cjs", "esm"],
+  minify: true,
+  sourcemap: false,
+  splitting: false,
+  treeshake: true,
+  external: ["react", "react-dom"],
+  noExternal: ["tailwindcss", "hex-rgb", "deepmerge"],
+  esbuildOptions(options) {
+    options.banner = {
+      js: '"use client";',
+    };
+    options.alias = {
+      "@context": "./src/context",
+      "@plugins": "./src/plugins",
+      "@theme": "./src/theme",
+      "@types": "./src/types",
+      "@utils": "./src/utils",
+      "@components": "./src/components"
+    };
+  },
 });
+

From e280ce90e480e8b3047312cd2b2354726a3634e7 Mon Sep 17 00:00:00 2001
From: dragosct10 <dragos@creative-tim.com>
Date: Wed, 30 Jul 2025 12:16:17 +0300
Subject: [PATCH 21/22] Update tsconfig.json

---
 tsconfig.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index dbeff47f9..b759c840b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,8 +9,8 @@
     "noEmit": true,
     "incremental": true,
     "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "Node16",
+    "moduleResolution": "node16",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",

From f35a0d760dfe76e3d77b632adfa3cea996a67981 Mon Sep 17 00:00:00 2001
From: Alexandru Paduraru <axelut@yahoo.com>
Date: Thu, 31 Jul 2025 14:13:44 +0300
Subject: [PATCH 22/22] Update toc.tsx

---
 apps/site/src/components/layout/toc.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/site/src/components/layout/toc.tsx b/apps/site/src/components/layout/toc.tsx
index 9fce4c40d..8fc4af1ae 100644
--- a/apps/site/src/components/layout/toc.tsx
+++ b/apps/site/src/components/layout/toc.tsx
@@ -209,11 +209,9 @@ export function Toc({
           href="https://www.material-tailwind.com/roots-of-ui-ux-design?ref=material-tailwind"
         >
           <Card.Header>
-            <Image
-              src="https://material-tailwind-v3.vercel.app/book.webp"
+            <img
+              src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind/ui-ux-book.jpeg"
               alt="book"
-              width={512}
-              height={512}
               className="h-full w-full object-cover"
             />
           </Card.Header>