diff --git a/README.md b/README.md
index 8df956f..434a9b2 100644
--- a/README.md
+++ b/README.md
@@ -67,6 +67,42 @@ const App = () => {
 };
 ```
 
+## Content Security Policy (CSP)
+
+react-hot-toast supports strict Content Security Policies through an opt-in strict CSP mode.
+
+### Default Mode
+
+By default, react-hot-toast uses inline styles for maximum flexibility. This requires `style-src 'unsafe-inline'` in your CSP.
+
+### Strict CSP Mode
+
+For applications with strict CSP that disallow inline styles, enable strict CSP mode:
+
+```jsx
+import toast, { Toaster } from 'react-hot-toast';
+
+<Toaster strictCSP={true} />
+```
+
+In strict CSP mode:
+- All inline `style` props are ignored
+- Styling must be done via CSS classes and CSS variables
+- Toast positioning uses CSS flexbox instead of inline transforms
+- Fully compatible with CSP `style-src 'nonce-...'` directives
+
+The library uses [goober](https://github.com/cristianbote/goober) for styling. To support CSP nonces, set `window.__nonce__` before your app loads:
+
+```html
+<script nonce="your-nonce-here">
+  window.__nonce__ = 'your-nonce-here';
+</script>
+```
+
+goober will automatically apply the nonce to its generated `<style>` elements.
+
+Make sure your CSP includes `style-src 'nonce-your-nonce-here'` and `script-src 'nonce-your-nonce-here'`.
+
 ## Documentation
 
 Find the full API reference on [official documentation](https://react-hot-toast.com/docs).
diff --git a/package.json b/package.json
index ad9c02c..cbf471c 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,7 @@
   },
   "dependencies": {
     "csstype": "^3.1.3",
-    "goober": "^2.1.16"
+    "goober": "^2.1.18"
   },
   "peerDependencies": {
     "react": ">=16",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 716737d..826b981 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^3.1.3
         version: 3.1.3
       goober:
-        specifier: ^2.1.16
-        version: 2.1.16(csstype@3.1.3)
+        specifier: ^2.1.18
+        version: 2.1.18(csstype@3.1.3)
     devDependencies:
       '@jest/types':
         specifier: ^29.6.3
@@ -83,6 +83,10 @@ packages:
     resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/code-frame@7.27.1':
+    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/compat-data@7.26.3':
     resolution: {integrity: sha512-nHIxvKPniQXpmQLb0vhY3VaFb3S0YrTAwpOWJZh1wn3oJPjJk9Asva204PsBdmAE8vpzfHudT8DB0scYvy9q0g==}
     engines: {node: '>=6.9.0'}
@@ -121,6 +125,10 @@ packages:
     resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.27.1':
+    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-option@7.25.9':
     resolution: {integrity: sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==}
     engines: {node: '>=6.9.0'}
@@ -229,6 +237,10 @@ packages:
     resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.25.9':
     resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
     engines: {node: '>=6.9.0'}
@@ -1200,8 +1212,8 @@ packages:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
 
-  goober@2.1.16:
-    resolution: {integrity: sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==}
+  goober@2.1.18:
+    resolution: {integrity: sha512-2vFqsaDVIT9Gz7N6kAL++pLpp41l3PfDuusHcjnGLfR6+huZkl6ziX+zgVC3ZxpqWhzH6pyDdGrCeDhMIvwaxw==}
     peerDependencies:
       csstype: ^3.0.10
 
@@ -2180,6 +2192,12 @@ snapshots:
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
+  '@babel/code-frame@7.27.1':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.27.1
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
   '@babel/compat-data@7.26.3': {}
 
   '@babel/core@7.26.0':
@@ -2240,6 +2258,8 @@ snapshots:
 
   '@babel/helper-validator-identifier@7.25.9': {}
 
+  '@babel/helper-validator-identifier@7.27.1': {}
+
   '@babel/helper-validator-option@7.25.9': {}
 
   '@babel/helpers@7.26.0':
@@ -2340,6 +2360,8 @@ snapshots:
     dependencies:
       regenerator-runtime: 0.14.1
 
+  '@babel/runtime@7.28.4': {}
+
   '@babel/template@7.25.9':
     dependencies:
       '@babel/code-frame': 7.26.2
@@ -2685,8 +2707,8 @@ snapshots:
 
   '@testing-library/dom@8.16.0':
     dependencies:
-      '@babel/code-frame': 7.26.2
-      '@babel/runtime': 7.26.0
+      '@babel/code-frame': 7.27.1
+      '@babel/runtime': 7.28.4
       '@types/aria-query': 4.2.2
       aria-query: 5.3.2
       chalk: 4.1.2
@@ -3347,7 +3369,7 @@ snapshots:
       merge2: 1.4.1
       slash: 3.0.0
 
-  goober@2.1.16(csstype@3.1.3):
+  goober@2.1.18(csstype@3.1.3):
     dependencies:
       csstype: 3.1.3
 
diff --git a/site/pages/docs/styling.mdx b/site/pages/docs/styling.mdx
index 61aff50..6f77c01 100644
--- a/site/pages/docs/styling.mdx
+++ b/site/pages/docs/styling.mdx
@@ -128,3 +128,55 @@ import { Toaster, ToastBar } from 'react-hot-toast';
   )}
 </Toaster>;
 ```
+
+## Strict CSP Mode
+
+For applications with strict Content Security Policies that disallow inline styles, enable `strictCSP` mode:
+
+```jsx
+<Toaster strictCSP={true} />
+```
+
+In strict CSP mode:
+- All inline `style` props are ignored
+- Styling must be done via CSS classes and CSS variables
+- Toast positioning uses CSS flexbox instead of inline transforms
+- The library is fully compatible with CSP `style-src 'nonce-...'` directives
+
+### CSP Nonce Support
+
+The library uses [goober](https://github.com/cristianbote/goober) for styling. To support CSP nonces, set `window.__nonce__` before your app loads:
+
+```html
+<script nonce="your-nonce-here">
+  window.__nonce__ = 'your-nonce-here';
+</script>
+```
+
+goober will automatically apply the nonce to its generated `<style>` elements.
+
+Make sure your CSP includes `style-src 'nonce-your-nonce-here'` and `script-src 'nonce-your-nonce-here'`.
+
+### Styling with CSS Variables (Strict CSP)
+
+When using strict CSP mode, use CSS variables for theming:
+
+```css
+:root {
+  /* Success toasts */
+  --rht-success-bg: #ecfdf5;
+  --rht-success-fg: #065f46;
+
+  /* Error toasts */
+  --rht-error-bg: #fef2f2;
+  --rht-error-fg: #991b1b;
+
+  /* Loading toasts */
+  --rht-loading-bg: #eff6ff;
+  --rht-loading-fg: #1e40af;
+
+  /* Blank toasts */
+  --rht-blank-bg: #fff;
+  --rht-blank-fg: #363636;
+}
+```
diff --git a/src/components/toast-bar.tsx b/src/components/toast-bar.tsx
index de520dc..66d555e 100644
--- a/src/components/toast-bar.tsx
+++ b/src/components/toast-bar.tsx
@@ -1,23 +1,10 @@
 import * as React from 'react';
-import { styled, keyframes } from 'goober';
+import { styled } from 'goober';
 
 import { Toast, ToastPosition, resolveValue, Renderable } from '../core/types';
 import { ToastIcon } from './toast-icon';
 import { prefersReducedMotion } from '../core/utils';
 
-const enterAnimation = (factor: number) => `
-0% {transform: translate3d(0,${factor * -200}%,0) scale(.6); opacity:.5;}
-100% {transform: translate3d(0,0,0) scale(1); opacity:1;}
-`;
-
-const exitAnimation = (factor: number) => `
-0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}
-100% {transform: translate3d(0,${factor * -150}%,-1px) scale(.6); opacity:0;}
-`;
-
-const fadeInAnimation = `0%{opacity:0;} 100%{opacity:1;}`;
-const fadeOutAnimation = `0%{opacity:1;} 100%{opacity:0;}`;
-
 // Use :where() for zero specificity - allows Tailwind to override easily
 const ToastBarBase = styled('div')`
   :where(&) {
@@ -33,6 +20,84 @@ const ToastBarBase = styled('div')`
     padding: 8px 10px;
     border-radius: 8px;
   }
+
+  @keyframes rht-enter-from-top {
+    0% { transform: translate3d(0, -200%, 0) scale(.6); opacity: .5; }
+    100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
+  }
+
+  @keyframes rht-enter-from-bottom {
+    0% { transform: translate3d(0, 200%, 0) scale(.6); opacity: .5; }
+    100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
+  }
+
+  @keyframes rht-exit-to-top {
+    0% { transform: translate3d(0, 0, -1px) scale(1); opacity: 1; }
+    100% { transform: translate3d(0, -150%, -1px) scale(.6); opacity: 0; }
+  }
+
+  @keyframes rht-exit-to-bottom {
+    0% { transform: translate3d(0, 0, -1px) scale(1); opacity: 1; }
+    100% { transform: translate3d(0, 150%, -1px) scale(.6); opacity: 0; }
+  }
+
+  @keyframes rht-fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  @keyframes rht-fade-out {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+  }
+
+  &.rht-enter-from-top {
+    animation: rht-enter-from-top 0.35s cubic-bezier(.21,1.02,.73,1) forwards;
+  }
+
+  &.rht-enter-from-bottom {
+    animation: rht-enter-from-bottom 0.35s cubic-bezier(.21,1.02,.73,1) forwards;
+  }
+
+  &.rht-exit-to-top {
+    animation: rht-exit-to-top 0.4s forwards cubic-bezier(.06,.71,.55,1);
+  }
+
+  &.rht-exit-to-bottom {
+    animation: rht-exit-to-bottom 0.4s forwards cubic-bezier(.06,.71,.55,1);
+  }
+
+  &.rht-fade-in {
+    animation: rht-fade-in 0.35s cubic-bezier(.21,1.02,.73,1) forwards;
+  }
+
+  &.rht-fade-out {
+    animation: rht-fade-out 0.4s forwards cubic-bezier(.06,.71,.55,1);
+  }
+
+  &.rht-invisible {
+    opacity: 0;
+  }
+
+  &.rht-success {
+    background: var(--rht-success-bg, #ecfdf5);
+    color: var(--rht-success-fg, #065f46);
+  }
+
+  &.rht-error {
+    background: var(--rht-error-bg, #fef2f2);
+    color: var(--rht-error-fg, #991b1b);
+  }
+
+  &.rht-loading {
+    background: var(--rht-loading-bg, #fff);
+    color: var(--rht-loading-fg, #363636);
+  }
+
+  &.rht-blank {
+    background: var(--rht-blank-bg, #fff);
+    color: var(--rht-blank-fg, #363636);
+  }
 `;
 
 const Message = styled('div')`
@@ -48,38 +113,43 @@ interface ToastBarProps {
   toast: Toast;
   position?: ToastPosition;
   style?: React.CSSProperties;
+  strictCSP?: boolean;
   children?: (components: {
     icon: Renderable;
     message: Renderable;
   }) => Renderable;
 }
 
-const getAnimationStyle = (
+const getAnimationClass = (
   position: ToastPosition,
-  visible: boolean
-): React.CSSProperties => {
+  visible: boolean,
+  hasHeight: boolean
+): string => {
+  if (!hasHeight) {
+    return 'rht-invisible';
+  }
+
   const top = position.includes('top');
-  const factor = top ? 1 : -1;
+  const reduced = prefersReducedMotion();
 
-  const [enter, exit] = prefersReducedMotion()
-    ? [fadeInAnimation, fadeOutAnimation]
-    : [enterAnimation(factor), exitAnimation(factor)];
+  if (reduced) {
+    return visible ? 'rht-fade-in' : 'rht-fade-out';
+  }
+
+  if (visible) {
+    return top ? 'rht-enter-from-top' : 'rht-enter-from-bottom';
+  }
 
-  return {
-    animation: visible
-      ? `${keyframes(enter)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`
-      : `${keyframes(exit)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`,
-  };
+  return top ? 'rht-exit-to-top' : 'rht-exit-to-bottom';
 };
 
 export const ToastBar: React.FC<ToastBarProps> = React.memo(
-  ({ toast, position, style, children }) => {
-    const animationStyle: React.CSSProperties = toast.height
-      ? getAnimationStyle(
-          toast.position || position || 'top-center',
-          toast.visible
-        )
-      : { opacity: 0 };
+  ({ toast, position, style, strictCSP, children }) => {
+    const animationClass = getAnimationClass(
+      toast.position || position || 'top-center',
+      toast.visible,
+      !!toast.height
+    );
 
     const icon = <ToastIcon toast={toast} />;
     const message = (
@@ -88,11 +158,18 @@ export const ToastBar: React.FC<ToastBarProps> = React.memo(
       </Message>
     );
 
+    const className = [
+      toast.className,
+      animationClass,
+      toast.type ? `rht-${toast.type}` : null,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
     return (
       <ToastBarBase
-        className={toast.className}
-        style={{
-          ...animationStyle,
+        className={className}
+        style={strictCSP ? undefined : {
           ...style,
           ...toast.style,
         }}
diff --git a/src/components/toaster.tsx b/src/components/toaster.tsx
index 1b36ddb..c39affd 100644
--- a/src/components/toaster.tsx
+++ b/src/components/toaster.tsx
@@ -1,4 +1,4 @@
-import { css, setup } from 'goober';
+import { styled, setup, css } from 'goober';
 import * as React from 'react';
 import {
   resolveValue,
@@ -38,7 +38,7 @@ const ToastWrapper = ({
   );
 
   return (
-    <div ref={ref} className={className} style={style}>
+    <div ref={ref} className={className} {...(style ? { style } : {})}>
       {children}
     </div>
   );
@@ -81,19 +81,106 @@ const activeClass = css`
 `;
 
 const DEFAULT_OFFSET = 16;
+const DEFAULT_GUTTER = 8;
+
+const ToasterContainer = styled('div')`
+  position: fixed;
+  z-index: 9999;
+  top: ${DEFAULT_OFFSET}px;
+  left: ${DEFAULT_OFFSET}px;
+  right: ${DEFAULT_OFFSET}px;
+  bottom: ${DEFAULT_OFFSET}px;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  gap: ${DEFAULT_GUTTER}px;
+
+  &[data-position="top-left"],
+  &[data-position="top-center"],
+  &[data-position="top-right"] {
+    align-items: flex-start;
+  }
+
+  &[data-position="bottom-left"],
+  &[data-position="bottom-center"],
+  &[data-position="bottom-right"] {
+    align-items: flex-start;
+    flex-direction: column-reverse;
+  }
+
+  &[data-position="top-center"],
+  &[data-position="bottom-center"] {
+    align-items: center;
+  }
+
+  &[data-position="top-right"],
+  &[data-position="bottom-right"] {
+    align-items: flex-end;
+  }
+
+  > * {
+    pointer-events: auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+`;
 
 export const Toaster: React.FC<ToasterProps> = ({
   reverseOrder,
   position = 'top-center',
   toastOptions,
-  gutter,
+  gutter = DEFAULT_GUTTER,
   children,
   toasterId,
   containerStyle,
   containerClassName,
+  strictCSP = false,
 }) => {
   const { toasts, handlers } = useToaster(toastOptions, toasterId);
 
+  // Sort toasts based on reverseOrder
+  const sortedToasts = reverseOrder ? [...toasts].reverse() : toasts;
+
+  // Strict CSP mode: Use styled component with no inline styles
+  if (strictCSP) {
+    return (
+      <ToasterContainer
+        data-rht-toaster={toasterId || ''}
+        data-position={position}
+        className={containerClassName}
+        onMouseEnter={handlers.startPause}
+        onMouseLeave={handlers.endPause}
+      >
+        {sortedToasts.map((t) => {
+          const toastPosition = t.position || position;
+
+          return (
+            <ToastWrapper
+              id={t.id}
+              key={t.id}
+              onHeightUpdate={handlers.updateHeight}
+              className=""
+            >
+              {t.type === 'custom' ? (
+                resolveValue(t.message, t)
+              ) : children ? (
+                children(t)
+              ) : (
+                <ToastBar toast={t} position={toastPosition} strictCSP />
+              )}
+            </ToastWrapper>
+          );
+        })}
+      </ToasterContainer>
+    );
+  }
+
+  // Default mode: Use inline styles for maximum flexibility
   return (
     <div
       data-rht-toaster={toasterId || ''}
diff --git a/src/core/types.ts b/src/core/types.ts
index 2e668ee..92e8bd7 100644
--- a/src/core/types.ts
+++ b/src/core/types.ts
@@ -86,6 +86,7 @@ export interface ToasterProps {
   containerClassName?: string;
   toasterId?: string;
   children?: (toast: Toast) => React.ReactElement;
+  strictCSP?: boolean; // When true, disables all inline styles for CSP compliance
 }
 
 export interface ToastWrapperProps {