diff --git a/docusaurus/docs/cms/features/preview.md b/docusaurus/docs/cms/features/preview.md
index 99dff7725e..da38008e49 100644
--- a/docusaurus/docs/cms/features/preview.md
+++ b/docusaurus/docs/cms/features/preview.md
@@ -11,6 +11,17 @@ tags:
# Preview
+
+
+
+
+
+
+
+
+The Preview feature lets you see how your content changes will look on your front-end directly from Strapi's admin panel. It requires configuration in both Strapi (handler setup) and your front-end app (preview routes). Live Preview is available with Growth and Enterprise plans for real-time editing alongside preview.
+
+
With the Preview feature, you can preview your front end application directly from Strapi's admin panel. This is helpful to see how updates to your content in the Edit View of the Content Manager will affect the final result.
diff --git a/docusaurus/src/components/Tldr.jsx b/docusaurus/src/components/Tldr.jsx
new file mode 100644
index 0000000000..28eeacfd83
--- /dev/null
+++ b/docusaurus/src/components/Tldr.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import Icon from './Icon';
+
+export function Tldr({ children, title, icon = 'sparkle', design = 'default', className, ...rest }) {
+ const designClass = design !== 'default' ? `tldr--${design}` : '';
+
+ return (
+
+ {title && (
+
+ {title}
+
+ )}
+
+ {children}
+
+
+ );
+}
\ No newline at end of file
diff --git a/docusaurus/src/scss/__index.scss b/docusaurus/src/scss/__index.scss
index 3243b1af17..01aff3d63c 100644
--- a/docusaurus/src/scss/__index.scss
+++ b/docusaurus/src/scss/__index.scss
@@ -51,4 +51,5 @@
@use 'table.scss';
@use 'tabs.scss';
@use 'table-of-contents.scss';
+@use 'tldr.scss';
@use 'typography.scss';
diff --git a/docusaurus/src/scss/tldr.scss b/docusaurus/src/scss/tldr.scss
new file mode 100644
index 0000000000..ca9fd611bc
--- /dev/null
+++ b/docusaurus/src/scss/tldr.scss
@@ -0,0 +1,154 @@
+@use './tokens.scss' as *;
+@use './mixins' as *;
+
+:root {
+ --border-left-color: var(--strapi-neutral-200);
+ --quote-icon-color: var(--strapi-neutral-200);
+ --editorial-first-letter-color: var(--strapi-neutral-500);
+ --default-tldr-font-size: var(--strapi-font-size-md);
+}
+
+.tldr {
+ border-left: 4px solid var(--border-left-color);
+ padding-left: var(--strapi-spacing-4);
+ margin-bottom: var(--strapi-spacing-8);
+ font-size: var(--default-tldr-font-size);
+ color: var(--strapi-neutral-500);
+
+ &__title {
+ font-weight: 600;
+ margin-bottom: var(--strapi-spacing-2);
+ color: var(--strapi-neutral-500);
+ }
+
+ &__content {
+ color: inherit;
+
+ * {
+ color: inherit;
+ }
+
+ code {
+ background-color: var(--strapi-neutral-100);
+ border: 1px solid var(--strapi-neutral-200);
+ }
+
+ a {
+ color: var(--strapi-primary-500);
+
+ &:hover {
+ color: var(--strapi-primary-600);
+ }
+ }
+
+ > *:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ // Design: quote-style avec icône newspaper en filigrane
+ &--quote {
+ position: relative;
+
+ &::before {
+ content: '\E346'; // ph-newspaper icon (U+E344)
+ font-family: 'Phosphor';
+ font-size: 4em;
+ // font-style: italic;
+ position: absolute;
+ top: 9px;
+ left: -72px;
+ color: var(--quote-icon-color);
+ z-index: -1;
+ }
+
+ .tldr__title {
+ position: relative;
+ z-index: 1;
+ }
+
+ .tldr__content {
+ position: relative;
+ z-index: 1;
+ }
+ }
+
+ // Design: editorial avec drop cap classique
+ &--editorial {
+ .tldr__content p:first-child::first-letter {
+ font-size: 3.3em;
+ font-weight: 700;
+ float: left;
+ line-height: 0.8;
+ margin-right: 8px;
+ margin-top: 2px;
+ color: var(--editorial-first-letter-color);
+ }
+ }
+
+ // Design: highlighted avec background dégradé + bordure complète
+ &--highlighted {
+ background: linear-gradient(90deg, var(--strapi-neutral-100) 0%, transparent 100%);
+ border-radius: 0 4px 4px 0;
+ padding: var(--strapi-spacing-3) var(--strapi-spacing-4);
+
+ .tldr__content code {
+ background-color: var(--strapi-neutral-200);
+ border-color: var(--strapi-neutral-300);
+ }
+ }
+}
+
+@include dark {
+ --border-left-color: var(--strapi-neutral-400);
+ --quote-icon-color: var(--strapi-neutral-400);
+ --editorial-first-letter-color: var(--strapi-neutral-400);
+
+ .tldr {
+ border-left-color: var(--strapi-neutral-400);
+ color: var(--strapi-neutral-500);
+
+ &__title {
+ color: var(--strapi-neutral-500);
+ }
+
+ &__content {
+ code {
+ background-color: var(--strapi-neutral-150);
+ border-color: var(--strapi-neutral-200);
+ }
+
+ a {
+ color: var(--strapi-primary-500);
+
+ &:hover {
+ color: var(--strapi-primary-400);
+ }
+ }
+ }
+
+ // Design quote dark mode
+ &--quote {
+ &::before {
+ color: var(--quote-icon-color);
+ }
+ }
+
+ // Design editorial dark mode
+ &--editorial {
+ .tldr__content p:first-child::first-letter {
+ color: var(--editorial-first-letter-color);
+ }
+ }
+
+ // Design highlighted dark mode
+ &--highlighted {
+ background: linear-gradient(90deg, var(--strapi-neutral-150) 0%, transparent 100%);
+
+ .tldr__content code {
+ background-color: var(--strapi-neutral-200);
+ border-color: var(--strapi-neutral-300);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/docusaurus/src/theme/MDXComponents.js b/docusaurus/src/theme/MDXComponents.js
index e69b4cdaec..b4121ed4cf 100644
--- a/docusaurus/src/theme/MDXComponents.js
+++ b/docusaurus/src/theme/MDXComponents.js
@@ -23,6 +23,7 @@ import { InteractiveQueryBuilder } from '../components/InteractiveQueryBuilder/I
import { AlphaBadge, BetaBadge, FeatureFlagBadge, EnterpriseBadge, GrowthBadge, SsoBadge, CloudEssentialBadge, CloudProBadge, CloudScaleBadge, NewBadge, UpdatedBadge, VersionBadge } from '../components/Badge';
import { SideBySideColumn, SideBySideContainer } from '../components';
import ThemedImage from '@theme/ThemedImage';
+import { Tldr } from '../components/Tldr.jsx';
import {
MultiLanguageSwitcher,
MultiLanguageSwitcherRequest,
@@ -92,6 +93,7 @@ export default {
BreakingChangeIdCard,
IdentityCard,
IdentityCardItem,
+ Tldr,
DebugComponent,
/**
* Reusable annotation components go below👇