diff --git a/.changeset/wild-llamas-prove.md b/.changeset/wild-llamas-prove.md
new file mode 100644
index 0000000000..23e1567ca6
--- /dev/null
+++ b/.changeset/wild-llamas-prove.md
@@ -0,0 +1,7 @@
+---
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+'nextra': patch
+---
+
+reduce global style conflicts with external components.
diff --git a/packages/nextra-theme-blog/src/styles.css b/packages/nextra-theme-blog/src/styles.css
index cf7e12b3d9..978e9e2320 100644
--- a/packages/nextra-theme-blog/src/styles.css
+++ b/packages/nextra-theme-blog/src/styles.css
@@ -1,46 +1,51 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-@import 'nextra/styles/code-block.css';
-@import 'nextra/styles/subheading-anchor.css';
-@import 'nextra/styles/scrollbar.css';
-@import 'nextra/styles/steps.css';
-@import 'nextra/styles/cards.css';
-
-html {
-  @apply _scroll-pt-5;
-}
+@import 'tailwindcss/base' layer(nextra-base);
+@import 'tailwindcss/components' layer(nextra-components);
+@import 'nextra/styles/focus-ring.css' layer(nextra-components);
+@import 'nextra/styles/code-block.css' layer(nextra-components);
+@import 'nextra/styles/subheading-anchor.css' layer(nextra-components);
+@import 'nextra/styles/scrollbar.css' layer(nextra-components);
+@import 'nextra/styles/steps.css' layer(nextra-components);
+@import 'nextra/styles/cards.css' layer(nextra-components);
+@import 'tailwindcss/utilities' layer(nextra-utilities);
+
+@layer nextra-base {
+  html {
+    @apply _scroll-pt-5;
+  }
 
-body {
-  @apply _px-4 _bg-[rgb(var(--nextra-bg))];
-}
+  body {
+    @apply _px-4 _bg-[rgb(var(--nextra-bg))];
+  }
 
-article {
-  @apply _mx-auto _block _pt-20 _pb-32;
-}
+  article {
+    @apply _mx-auto _block _pt-20 _pb-32;
+  }
 
-article img {
-  @apply _mx-auto;
-}
+  article img {
+    @apply _mx-auto;
+  }
 
-h1 {
-  letter-spacing: -0.03em;
+  h1 {
+    letter-spacing: -0.03em;
+  }
 }
 
-._prose code {
-  &:before,
-  &:after {
-    @apply _hidden;
+@layer nextra-components {
+  ._prose code {
+    &:before,
+    &:after {
+      @apply _hidden;
+    }
+    .line {
+      @apply _font-normal;
+    }
   }
-  .line {
-    @apply _font-normal;
-  }
-}
 
-._prose .nextra-callout p {
-  @apply _m-0;
-}
+  ._prose .nextra-callout p {
+    @apply _m-0;
+  }
 
-.footnotes a[data-footnote-backref] {
-  font-family: initial;
+  .footnotes a[data-footnote-backref] {
+    font-family: initial;
+  }
 }
diff --git a/packages/nextra-theme-docs/css/styles.css b/packages/nextra-theme-docs/css/styles.css
index 1422294967..a176aea6a6 100644
--- a/packages/nextra-theme-docs/css/styles.css
+++ b/packages/nextra-theme-docs/css/styles.css
@@ -1,193 +1,182 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-@import 'nextra/styles/code-block.css';
-@import 'nextra/styles/subheading-anchor.css';
-@import 'nextra/styles/scrollbar.css';
-@import 'nextra/styles/steps.css';
-@import 'nextra/styles/cards.css';
-@import './hamburger.css';
-@import './typesetting-article.css';
-
-html {
-  @apply _antialiased _text-base _scroll-pt-[--nextra-navbar-height];
-  font-feature-settings:
-    'rlig' 1,
-    'calt' 1,
-    'ss01' 1;
-  -webkit-tap-highlight-color: transparent;
-}
+@import 'tailwindcss/base' layer(nextra-base);
+@import 'tailwindcss/components' layer(nextra-components);
+@import 'nextra/styles/code-block.css' layer(nextra-components);
+@import 'nextra/styles/subheading-anchor.css' layer(nextra-components);
+@import 'nextra/styles/scrollbar.css' layer(nextra-components);
+@import 'nextra/styles/steps.css' layer(nextra-components);
+@import 'nextra/styles/cards.css' layer(nextra-components);
+@import 'nextra/styles/focus-ring.css' layer(nextra-components);
+@import './hamburger.css' layer(nextra-components);
+@import './typesetting-article.css' layer(nextra-components);
+@import 'tailwindcss/utilities' layer(nextre-utilities);
+
+@layer nextra-base {
+  html {
+    @apply _antialiased _text-base _scroll-pt-[--nextra-navbar-height];
+    font-feature-settings:
+      'rlig' 1,
+      'calt' 1,
+      'ss01' 1;
+    -webkit-tap-highlight-color: transparent;
+  }
 
-body {
-  @apply _w-full dark:_text-gray-100;
-}
+  body {
+    @apply _w-full dark:_text-gray-100;
+  }
 
-a,
-summary,
-button,
-input,
-[tabindex]:not([tabindex='-1']) {
-  &:focus-visible {
-    @apply _outline-none;
-    @apply _ring-2 _ring-primary-200 _ring-offset-1 _ring-offset-primary-300 dark:_ring-primary-800 dark:_ring-offset-primary-700;
+  /* Content Typography */
+  summary::-webkit-details-marker {
+    @apply _hidden;
+  }
+  input[type='search'] {
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      -webkit-appearance: none;
+    }
   }
 }
 
-a,
-summary {
-  @apply _rounded;
-}
+@layer nextra-components {
+  .nextra-content {
+    @apply _text-slate-700 dark:_text-slate-200;
+  }
 
-.nextra-content {
-  @apply _text-slate-700 dark:_text-slate-200;
-}
+  @media (max-width: 767px) {
+    .nextra-sidebar-container {
+      @apply _fixed _pt-[calc(var(--nextra-navbar-height))] _top-0 _w-full _bottom-0 _z-[15] _overscroll-contain;
+      transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
+      will-change: transform, opacity;
+      contain: layout style;
+      backface-visibility: hidden;
+
+      & > .nextra-scrollbar {
+        mask-image: linear-gradient(to bottom, transparent, #000 20px),
+          linear-gradient(to left, #000 10px, transparent 10px);
+      }
+    }
 
-@media (max-width: 767px) {
-  .nextra-sidebar-container {
-    @apply _fixed _pt-[calc(var(--nextra-navbar-height))] _top-0 _w-full _bottom-0 _z-[15] _overscroll-contain;
-    transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
-    will-change: transform, opacity;
-    contain: layout style;
-    backface-visibility: hidden;
+    .nextra-banner-container ~ div {
+      .nextra-sidebar-container {
+        @apply _pt-[6.5rem];
+      }
 
-    & > .nextra-scrollbar {
-      mask-image: linear-gradient(to bottom, transparent, #000 20px),
-        linear-gradient(to left, #000 10px, transparent 10px);
+      &.nextra-nav-container {
+        @apply _top-10 md:_top-0;
+      }
     }
-  }
 
-  .nextra-banner-container ~ div {
-    .nextra-sidebar-container {
-      @apply _pt-[6.5rem];
+    .nextra-banner-hidden {
+      .nextra-banner-container ~ div .nextra-sidebar-container {
+        @apply _pt-16;
+      }
+
+      .nextra-nav-container {
+        @apply !_top-0;
+      }
     }
-    &.nextra-nav-container {
-      @apply _top-10 md:_top-0;
+
+    .nextra-search .excerpt {
+      @apply _overflow-hidden _text-ellipsis;
+      display: -webkit-box;
+      line-clamp: 1;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
     }
   }
-  .nextra-banner-hidden {
-    .nextra-banner-container ~ div .nextra-sidebar-container {
-      @apply _pt-16;
-    }
-    .nextra-nav-container {
-      @apply !_top-0;
+
+  @media (prefers-reduced-motion: reduce) and (max-width: 767px) {
+    article:before,
+    .nextra-sidebar-container,
+    .nextra-sidebar-container.open,
+    body.resizing .nextra-sidebar-container {
+      @apply _transition-none;
     }
   }
-  .nextra-search .excerpt {
-    @apply _overflow-hidden _text-ellipsis;
-    display: -webkit-box;
-    line-clamp: 1;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-  }
-}
 
-@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
-  article:before,
-  .nextra-sidebar-container,
-  .nextra-sidebar-container.open,
-  body.resizing .nextra-sidebar-container {
-    @apply _transition-none;
+  @media (min-width: 768px) {
+    .nextra-toc > .div,
+    .nextra-sidebar-container {
+      mask-image: linear-gradient(to bottom, transparent, #000 20px),
+        linear-gradient(to left, #000 10px, transparent 10px);
+    }
   }
-}
 
-/* Content Typography */
-summary::-webkit-details-marker {
-  @apply _hidden;
-}
+  .nextra-banner-hidden .nextra-banner-container {
+    @apply _hidden;
+  }
 
-@media (min-width: 768px) {
-  .nextra-toc > .div,
   .nextra-sidebar-container {
-    mask-image: linear-gradient(to bottom, transparent, #000 20px),
-      linear-gradient(to left, #000 10px, transparent 10px);
-  }
-}
+    [data-toggle-animation='show'] button {
+      opacity: 0;
+      animation: nextra-fadein 1s ease 0.2s forwards;
+    }
 
-input[type='search'] {
-  &::-webkit-search-decoration,
-  &::-webkit-search-cancel-button,
-  &::-webkit-search-results-button,
-  &::-webkit-search-results-decoration {
-    -webkit-appearance: none;
+    [data-toggle-animation='hide'] button {
+      opacity: 0;
+      animation: nextra-fadein2 1s ease 0.2s forwards;
+    }
   }
-}
 
-.contains-task-list {
-  @apply _ml-0 _list-none;
-  input[type='checkbox'] {
-    @apply _mr-1;
+  .footnotes a[data-footnote-backref] {
+    font-family: initial;
   }
-}
 
-.nextra-banner-hidden .nextra-banner-container {
-  @apply _hidden;
-}
+  @keyframes nextra-fadein {
+    0% {
+      opacity: 0;
+    }
 
-.nextra-sidebar-container {
-  [data-toggle-animation='show'] button {
-    opacity: 0;
-    animation: nextra-fadein 1s ease 0.2s forwards;
-  }
-  [data-toggle-animation='hide'] button {
-    opacity: 0;
-    animation: nextra-fadein2 1s ease 0.2s forwards;
+    100% {
+      opacity: 1;
+    }
   }
-}
 
-.footnotes a[data-footnote-backref] {
-  font-family: initial;
-}
+  @keyframes nextra-fadein2 {
+    0% {
+      opacity: 0;
+    }
 
-@keyframes nextra-fadein {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
+    100% {
+      opacity: 1;
+    }
   }
-}
 
-@keyframes nextra-fadein2 {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
+  body,
+  .nextra-nav-container-blur,
+  .nextra-toc-footer,
+  .nextra-sidebar-footer {
+    @apply _bg-[rgb(var(--nextra-bg))];
   }
-}
 
-body,
-.nextra-nav-container-blur,
-.nextra-toc-footer,
-.nextra-sidebar-footer {
-  @apply _bg-[rgb(var(--nextra-bg))];
-}
-.nextra-sidebar-container {
-  @apply max-md:_bg-[rgb(var(--nextra-bg))];
-}
+  .nextra-sidebar-container {
+    @apply max-md:_bg-[rgb(var(--nextra-bg))];
+  }
 
-.nextra-nav-container-blur {
-  @apply _pointer-events-none _absolute _z-[-1] _size-full;
-  @apply _shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)];
-  @apply dark:_shadow-[0_-1px_0_rgba(255,255,255,.1)_inset];
-  @apply contrast-more:_shadow-[0_0_0_1px_#000];
-  @apply contrast-more:dark:_shadow-[0_0_0_1px_#fff];
-  @apply _backdrop-blur-md _bg-[rgba(var(--nextra-bg),.7)];
-}
+  .nextra-nav-container-blur {
+    @apply _pointer-events-none _absolute _z-[-1] _size-full;
+    @apply _shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)];
+    @apply dark:_shadow-[0_-1px_0_rgba(255,255,255,.1)_inset];
+    @apply contrast-more:_shadow-[0_0_0_1px_#000];
+    @apply contrast-more:dark:_shadow-[0_0_0_1px_#fff];
+    @apply _backdrop-blur-md _bg-[rgba(var(--nextra-bg),.7)];
+  }
 
-.nextra-toc-footer,
-.nextra-sidebar-footer {
-  @apply _border-t dark:_border-neutral-800;
-  @apply contrast-more:_shadow-none contrast-more:_border-neutral-400 contrast-more:dark:_border-neutral-400;
-  @apply _shadow-[0_-12px_16px_rgb(var(--nextra-bg))];
-}
+  .nextra-toc-footer,
+  .nextra-sidebar-footer {
+    @apply _border-t dark:_border-neutral-800;
+    @apply contrast-more:_shadow-none contrast-more:_border-neutral-400 contrast-more:dark:_border-neutral-400;
+    @apply _shadow-[0_-12px_16px_rgb(var(--nextra-bg))];
+  }
 
-.nextra-search-results {
-  @apply _border _border-gray-200 _text-gray-100 dark:_border-neutral-800;
-  @apply _absolute _top-full _z-20 _mt-2 _overflow-auto _overscroll-contain _rounded-xl _py-2.5 _shadow-xl;
-  @apply _max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)];
-  @apply md:_max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)];
-  @apply _inset-x-0 ltr:md:_left-auto rtl:md:_right-auto;
-  @apply contrast-more:_border contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50;
-  @apply _backdrop-blur-lg _bg-[rgb(var(--nextra-bg),.8)];
+  .nextra-search-results {
+    @apply _border _border-gray-200 _text-gray-100 dark:_border-neutral-800;
+    @apply _absolute _top-full _z-20 _mt-2 _overflow-auto _overscroll-contain _rounded-xl _py-2.5 _shadow-xl;
+    @apply _max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)];
+    @apply md:_max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)];
+    @apply _inset-x-0 ltr:md:_left-auto rtl:md:_right-auto;
+    @apply contrast-more:_border contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50;
+    @apply _backdrop-blur-lg _bg-[rgb(var(--nextra-bg),.8)];
+  }
 }
diff --git a/packages/nextra-theme-docs/src/constants.tsx b/packages/nextra-theme-docs/src/constants.tsx
index 6494886594..aed8949027 100644
--- a/packages/nextra-theme-docs/src/constants.tsx
+++ b/packages/nextra-theme-docs/src/constants.tsx
@@ -90,6 +90,7 @@ export const DEFAULT_THEME: DocsThemeConfig = {
       })
     }
   },
+  focusRing: true,
   footer: {
     component: Footer,
     content: `MIT ${new Date().getFullYear()} © Nextra.`
diff --git a/packages/nextra-theme-docs/src/index.tsx b/packages/nextra-theme-docs/src/index.tsx
index 427f5da3ff..4dddd0384d 100644
--- a/packages/nextra-theme-docs/src/index.tsx
+++ b/packages/nextra-theme-docs/src/index.tsx
@@ -45,7 +45,10 @@ function InnerLayout({ children }: { children: ReactNode }): ReactElement {
         before hydration as Tailwind expects the `dir` attribute to exist on the
         `html` element.
       */}
-      <div dir={dir}>
+      <div
+        dir={dir}
+        className={themeConfig.focusRing ? 'nextra-focus-ring' : undefined}
+      >
         <script
           dangerouslySetInnerHTML={{
             __html: `document.documentElement.setAttribute('dir','${dir}')`
diff --git a/packages/nextra-theme-docs/src/schemas.ts b/packages/nextra-theme-docs/src/schemas.ts
index c6cb350d38..408c610061 100644
--- a/packages/nextra-theme-docs/src/schemas.ts
+++ b/packages/nextra-theme-docs/src/schemas.ts
@@ -57,6 +57,7 @@ export const themeSchema = /* @__PURE__ */ (() =>
       labels: z.string(),
       useLink: z.function().returns(z.string())
     }),
+    focusRing: z.boolean().optional(),
     footer: z.strictObject({
       component: z.custom<ReactNode | FC<{ menu: boolean }>>(...reactNode),
       content: z.custom<ReactNode | FC>(...reactNode)
diff --git a/packages/nextra/styles/focus-ring.css b/packages/nextra/styles/focus-ring.css
new file mode 100644
index 0000000000..a53dde9aad
--- /dev/null
+++ b/packages/nextra/styles/focus-ring.css
@@ -0,0 +1,17 @@
+.nextra-focus-ring:where(
+    :not([class~='not-nextra-focus-ring'], [class~='not-nextra-focus-ring'] *)
+  ) {
+  a,
+  summary,
+  button,
+  input,
+  [tabindex]:not([tabindex='-1']) {
+    &:focus-visible {
+      @apply _outline-none;
+      @apply _ring-2 _ring-primary-200 _ring-offset-1 _ring-offset-primary-300 dark:_ring-primary-800 dark:_ring-offset-primary-700;
+    }
+    &:focus-visible:where(a, summary) {
+      @apply _rounded;
+    }
+  }
+}