GitbookIO · SamyPesse · Jun 7, 2025 · Jun 4, 2025 · Jun 7, 2025 · Jun 7, 2025
diff --git a/.changeset/fair-crews-wink.md b/.changeset/fair-crews-wink.md
@@ -0,0 +1,5 @@
+---
+"gitbook": minor
+---
+
+Add circular corners and depth styling
diff --git a/bun.lock b/bun.lock
@@ -26,7 +26,7 @@
       "name": "@gitbook/cache-tags",
       "version": "0.3.1",
       "dependencies": {
-        "@gitbook/api": "^0.115.0",
+        "@gitbook/api": "^0.118.0",
         "assert-never": "^1.2.1",
       },
       "devDependencies": {
@@ -51,7 +51,7 @@
       "name": "gitbook",
       "version": "0.12.0",
       "dependencies": {
-        "@gitbook/api": "^0.115.0",
+        "@gitbook/api": "^0.118.0",
         "@gitbook/cache-do": "workspace:*",
         "@gitbook/cache-tags": "workspace:*",
         "@gitbook/colors": "workspace:*",
@@ -143,7 +143,7 @@
       "name": "gitbook-v2",
       "version": "0.3.0",
       "dependencies": {
-        "@gitbook/api": "^0.115.0",
+        "@gitbook/api": "^0.118.0",
         "@gitbook/cache-tags": "workspace:*",
         "@opennextjs/cloudflare": "1.1.0",
         "@sindresorhus/fnv1a": "^3.1.0",
@@ -202,7 +202,7 @@
       "name": "@gitbook/react-contentkit",
       "version": "0.7.0",
       "dependencies": {
-        "@gitbook/api": "^0.115.0",
+        "@gitbook/api": "^0.118.0",
         "@gitbook/icons": "workspace:*",
         "classnames": "^2.5.1",
       },
@@ -260,7 +260,7 @@
   },
   "overrides": {
     "@codemirror/state": "6.4.1",
-    "@gitbook/api": "^0.115.0",
+    "@gitbook/api": "^0.118.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
   },
@@ -625,7 +625,7 @@
 
     "@fortawesome/fontawesome-svg-core": ["@fortawesome/[email protected]", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "6.6.0" } }, "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg=="],
 
-    "@gitbook/api": ["@gitbook/api@0.115.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-Lyj+1WVNnE/Zuuqa/1ZdnUQfUiNE6es89RFK6CJ+Tb36TFwls6mbHKXCZsBwSYyoMYTVK39WQ3Nob6Nw6+TWCA=="],
+    "@gitbook/api": ["@gitbook/api@0.118.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-5bpvXyGNsMOn1Ee7uzohDz/yOgxpVyLZMLu6THYwbG9UeY6BFsWISeqTw03COCX42rVLU5zFReDxRTb7lfZtCw=="],
 
     "@gitbook/cache-do": ["@gitbook/cache-do@workspace:packages/cache-do"],
 

diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "packageManager": "[email protected]",
     "overrides": {
         "@codemirror/state": "6.4.1",
-        "@gitbook/api": "^0.115.0",
+        "@gitbook/api": "^0.118.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     },

diff --git a/packages/cache-tags/package.json b/packages/cache-tags/package.json
@@ -10,7 +10,7 @@
     },
     "version": "0.3.1",
     "dependencies": {
-        "@gitbook/api": "^0.115.0",
+        "@gitbook/api": "^0.118.0",
         "assert-never": "^1.2.1"
     },
     "devDependencies": {

diff --git a/packages/gitbook-v2/package.json b/packages/gitbook-v2/package.json
@@ -3,7 +3,7 @@
     "version": "0.3.0",
     "private": true,
     "dependencies": {
-        "@gitbook/api": "^0.115.0",
+        "@gitbook/api": "^0.118.0",
         "@gitbook/cache-tags": "workspace:*",
         "@opennextjs/cloudflare": "1.1.0",
         "@sindresorhus/fnv1a": "^3.1.0",

diff --git a/packages/gitbook/e2e/internal.spec.ts b/packages/gitbook/e2e/internal.spec.ts
@@ -1,6 +1,7 @@
 import {
     CustomizationBackground,
     CustomizationCorners,
+    CustomizationDepth,
     CustomizationHeaderPreset,
     CustomizationIconsStyle,
     CustomizationSidebarListStyle,
@@ -817,6 +818,16 @@ const testCases: TestsCase[] = [
                 }),
                 run: waitForCookiesDialog,
             },
+            {
+                name: `With flat and circular corners - Theme mode ${themeMode}`,
+                url: getCustomizationURL({
+                    styling: {
+                        depth: CustomizationDepth.Flat,
+                        corners: CustomizationCorners.Circular,
+                    },
+                }),
+                run: waitForCookiesDialog,
+            },
         ]),
     },
     {

diff --git a/packages/gitbook/e2e/util.ts b/packages/gitbook/e2e/util.ts
@@ -3,6 +3,7 @@ import {
     CustomizationBackground,
     CustomizationCorners,
     CustomizationDefaultFont,
+    CustomizationDepth,
     type CustomizationHeaderItem,
     CustomizationHeaderPreset,
     CustomizationIconsStyle,
@@ -278,6 +279,7 @@ export function getCustomizationURL(partial: DeepPartial<SiteCustomizationSettin
             dangerColor: { light: '#FB2C36', dark: '#FB2C36' },
             successColor: { light: '#00C950', dark: '#00C950' },
             corners: CustomizationCorners.Rounded,
+            depth: CustomizationDepth.Subtle,
             font: CustomizationDefaultFont.Inter,
             background: CustomizationBackground.Plain,
             icons: CustomizationIconsStyle.Regular,

diff --git a/packages/gitbook/package.json b/packages/gitbook/package.json
@@ -16,7 +16,7 @@
         "clean": "rm -rf ./.next && rm -rf ./public/~gitbook/static/icons && rm -rf ./public/~gitbook/static/math"
     },
     "dependencies": {
-        "@gitbook/api": "^0.115.0",
+        "@gitbook/api": "^0.118.0",
         "@gitbook/cache-do": "workspace:*",
         "@gitbook/cache-tags": "workspace:*",
         "@gitbook/colors": "workspace:*",

diff --git a/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx b/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
@@ -34,7 +34,7 @@ export function AnnouncementBanner(props: {
                     <Tag
                         href={contentRef?.href ?? ''}
                         className={tcls(
-                            'flex w-full items-start justify-center overflow-hidden rounded-md straight-corners:rounded-none px-4 py-3 text-neutral-strong text-sm theme-bold:ring-1 theme-gradient:ring-1 ring-inset transition-colors',
+                            'flex w-full items-start justify-center overflow-hidden circular-corners:rounded-xl rounded-md straight-corners:rounded-none px-4 py-3 text-neutral-strong text-sm theme-bold:ring-1 theme-gradient:ring-1 ring-inset transition-colors',
                             style.container,
                             closeable && 'pr-12',
                             hasLink && style.hover
@@ -81,7 +81,7 @@ export function AnnouncementBanner(props: {
                     </Tag>
                     {closeable ? (
                         <button
-                            className={`absolute top-0 right-4 mt-2 mr-2 rounded straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${style.close}`}
+                            className={`absolute top-0 right-4 mt-2 mr-2 rounded circular-corners:rounded-lg straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${style.close}`}
                             type="button"
                             onClick={dismissAnnouncement}
                             title={tString(language, 'close')}

diff --git a/packages/gitbook/src/components/Cookies/CookiesToast.tsx b/packages/gitbook/src/components/Cookies/CookiesToast.tsx
@@ -47,9 +47,11 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
                 'bg-tint-base',
                 'rounded',
                 'straight-corners:rounded-none',
+                'circular-corners:rounded-2xl',
                 'ring-1',
                 'ring-tint-subtle',
                 'shadow-1xs',
+                'depth-flat:shadow-none',
                 'p-4',
                 'pr-8',
                 'bottom-4',
@@ -83,6 +85,7 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
                     'justify-center',
                     'items-center',
                     'rounded-sm',
+                    'circular-corners:rounded-full',
                     'hover:bg-tint-hover'
                 )}
                 title={tString(language, 'close')}

diff --git a/packages/gitbook/src/components/DocumentView/Block.tsx b/packages/gitbook/src/components/DocumentView/Block.tsx
@@ -113,6 +113,9 @@ export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
             case 'code-line':
             case 'tabs-item':
                 throw new Error(`Blocks (${block.type}) should be directly rendered by parent`);
+            case 'columns':
+            case 'column':
+                return null;
             default:
                 return nullIfNever(block);
         }
@@ -177,6 +180,9 @@ export function BlockSkeleton(props: { block: DocumentBlock; style: ClassValue }
         case 'code-line':
         case 'tabs-item':
             throw new Error(`Blocks (${block.type}) should be directly rendered by parent`);
+        case 'columns':
+        case 'column':
+            return null;
         default:
             return nullIfNever(block);
     }

diff --git a/packages/gitbook/src/components/DocumentView/Hint.tsx b/packages/gitbook/src/components/DocumentView/Hint.tsx
@@ -23,6 +23,7 @@ export function Hint(props: BlockProps<DocumentBlockHint>) {
                 'rounded-md',
                 hasHeading ? 'rounded-l' : null,
                 'straight-corners:rounded-none',
+                'circular-corners:rounded-xl',
                 'overflow-hidden',
                 hasHeading ? ['border-l-2', hintStyle.containerWithHeader] : hintStyle.container,
 

diff --git a/packages/gitbook/src/components/DocumentView/Images.tsx b/packages/gitbook/src/components/DocumentView/Images.tsx
@@ -1,9 +1,4 @@
-import type {
-    DocumentBlockImage,
-    DocumentBlockImageDimension,
-    DocumentBlockImages,
-    JSONDocument,
-} from '@gitbook/api';
+import type { DocumentBlockImage, DocumentBlockImages, JSONDocument, Length } from '@gitbook/api';
 
 import { Image, type ImageResponsiveSize } from '@/components/utils';
 import { resolveContentRef } from '@/lib/references';
@@ -119,7 +114,7 @@ async function ImageBlock(props: {
  * When using relative values, the converted dimension will be relative to the parent element's size.
  */
 function getImageDimension<DefaultValue>(
-    dimension: DocumentBlockImageDimension | undefined,
+    dimension: Length | undefined,
     defaultValue: DefaultValue
 ): string | DefaultValue {
     if (typeof dimension === 'number') {

diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/scalar.css b/packages/gitbook/src/components/DocumentView/OpenAPI/scalar.css
@@ -271,7 +271,7 @@ body {
 }
 .scalar-activate-button {
     @apply flex gap-2 items-center;
-    @apply bg-primary-solid text-contrast-primary-solid hover:bg-primary-solid-hover hover:text-contrast-primary-solid-hover contrast-more:ring-1 rounded-md straight-corners:rounded-none place-self-start;
+    @apply bg-primary-solid text-contrast-primary-solid hover:bg-primary-solid-hover hover:text-contrast-primary-solid-hover contrast-more:ring-1 rounded-md straight-corners:rounded-none circular-corners:rounded-full circular-corners:px-3 place-self-start;
     @apply ring-1 ring-tint hover:ring-tint-hover;
     @apply shadow-sm shadow-tint dark:shadow-tint-1 hover:shadow-md active:shadow-none;
     @apply contrast-more:ring-tint-12 contrast-more:hover:ring-2 contrast-more:hover:ring-tint-12;

diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
@@ -481,7 +481,7 @@
 .openapi-panel,
 .openapi-codesample,
 .openapi-response-examples {
-    @apply border rounded-md straight-corners:rounded-none bg-tint-subtle border-tint-subtle shadow-sm;
+    @apply border rounded-md straight-corners:rounded-none circular-corners:rounded-xl bg-tint-subtle border-tint-subtle shadow-sm;
 }
 
 .openapi-panel pre,
@@ -571,7 +571,7 @@ body:has(.openapi-select-popover) {
 }
 
 .openapi-select-popover {
-    @apply min-w-32 z-10 max-w-[max(20rem,var(--trigger-width))] overflow-x-hidden max-h-52 overflow-y-auto p-1.5 border border-tint-subtle bg-tint-base backdrop-blur-xl rounded-md straight-corners:rounded-none;
+    @apply min-w-32 z-10 max-w-[max(20rem,var(--trigger-width))] overflow-x-hidden max-h-52 overflow-y-auto p-1.5 border border-tint-subtle bg-tint-base backdrop-blur-xl rounded-md circular-corners:rounded-xl straight-corners:rounded-none;
     @apply shadow-md shadow-tint-12/1 dark:shadow-tint-1/1;
 }
 
@@ -680,7 +680,7 @@ body:has(.openapi-select-popover) {
 
 /* Disclosure group */
 .openapi-disclosure-group {
-    @apply border-tint-subtle transition-all border-b border-x overflow-auto last:rounded-b-md straight-corners:last:rounded-none first:rounded-t-md straight-corners:first:rounded-none first:border-t relative;
+    @apply border-tint-subtle transition-all border-b border-x overflow-auto last:rounded-b-md straight-corners:last:rounded-none circular-corners:last:rounded-b-xl first:rounded-t-md straight-corners:first:rounded-none circular-corners:first:rounded-t-xl first:border-t relative;
 }
 
 .openapi-disclosure-group:has(.openapi-disclosure-group-trigger:hover) {
@@ -786,7 +786,7 @@ body:has(.openapi-select-popover) {
 }
 
 .openapi-disclosure-trigger-label {
-    @apply absolute right-3 px-2 h-5 justify-end shrink-0 ring-tint-subtle truncate text-tint duration-300 transition-all rounded straight-corners:rounded-none flex flex-row gap-1 items-center text-xs;
+    @apply absolute right-3 px-2 h-5 justify-end shrink-0 ring-tint-subtle truncate text-tint duration-300 transition-all rounded straight-corners:rounded-none circular-corners:rounded-xl flex flex-row gap-1 items-center text-xs;
 }
 
 .openapi-disclosure-trigger-label span {
@@ -848,7 +848,7 @@ body:has(.openapi-select-popover) {
 }
 
 .openapi-tooltip {
-    @apply flex items-center gap-1 bg-tint-base border border-tint-subtle text-tint-strong rounded-md straight-corners:rounded-none font-medium px-1.5 py-0.5 shadow-sm text-[13px];
+    @apply flex items-center gap-1 bg-tint-base border border-tint-subtle text-tint-strong rounded-md straight-corners:rounded-none circular-corners:rounded-lg font-medium px-1.5 py-0.5 shadow-sm text-[13px];
 }
 
 .openapi-tooltip svg {

diff --git a/packages/gitbook/src/components/DocumentView/Table/RecordCard.tsx b/packages/gitbook/src/components/DocumentView/Table/RecordCard.tsx
@@ -50,8 +50,9 @@ export async function RecordCard(
                 'w-[calc(100%+2px)]',
                 'h-[calc(100%+2px)]',
                 'inset-[-1px]',
-                'rounded-[7px]',
+                'rounded',
                 'straight-corners:rounded-none',
+                'circular-corners:rounded-xl',
                 'overflow-hidden',
                 '[&_.heading>div:first-child]:hidden',
                 '[&_.heading>div]:text-[.8em]',
@@ -147,8 +148,10 @@ export async function RecordCard(
         'grid',
         'shadow-1xs',
         'shadow-tint-9/1',
-        'rounded-md',
+        'depth-flat:shadow-none',
+        'rounded',
         'straight-corners:rounded-none',
+        'circular-corners:rounded-xl',
         'dark:shadow-transparent',
 
         'before:pointer-events-none',

diff --git a/packages/gitbook/src/components/DocumentView/Table/ViewGrid.tsx b/packages/gitbook/src/components/DocumentView/Table/ViewGrid.tsx
@@ -38,7 +38,8 @@ export function ViewGrid(props: TableViewProps<DocumentTableViewGrid>) {
                         className={tcls(
                             tableWidth,
                             styles.rowGroup,
-                            'straight-corners:rounded-none'
+                            'straight-corners:rounded-none',
+                            'circular-corners:rounded-xl'
                         )}
                     >
                         <div role="row" className={tcls('flex', 'w-full')}>

diff --git a/packages/gitbook/src/components/PageAside/AsideSectionHighlight.tsx b/packages/gitbook/src/components/PageAside/AsideSectionHighlight.tsx
@@ -30,6 +30,7 @@ export function AsideSectionHighlight({
 
                 'rounded-md',
                 'straight-corners:rounded-none',
+                'circular-corners:rounded-2xl',
                 'sidebar-list-line:rounded-l-none',
 
                 'sidebar-list-pill:bg-primary',

diff --git a/packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx b/packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx
@@ -82,6 +82,7 @@ export function ScrollSectionsList(props: { sections: DocumentSection[] }) {
 
                             'rounded-md',
                             'straight-corners:rounded-none',
+                            'circular-corners:rounded-2xl',
                             'sidebar-list-line:rounded-l-none',
 
                             'hover:bg-tint-hover',

diff --git a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx
@@ -1,5 +1,4 @@
 import {
-    CustomizationCorners,
     CustomizationHeaderPreset,
     CustomizationIconsStyle,
     CustomizationSidebarBackgroundStyle,
@@ -77,14 +76,13 @@ export async function CustomizationRootLayout(props: {
                 customization.header.preset === CustomizationHeaderPreset.None
                     ? null
                     : 'scroll-pt-[76px]', // Take the sticky header in consideration for the scrolling
-                customization.styling.corners === CustomizationCorners.Straight
-                    ? ' straight-corners'
-                    : '',
+                customization.styling.corners && `${customization.styling.corners}-corners`,
                 'theme' in customization.styling && `theme-${customization.styling.theme}`,
                 tintColor ? ' tint' : 'no-tint',
                 sidebarStyles.background && `sidebar-${sidebarStyles.background}`,
                 sidebarStyles.list && `sidebar-list-${sidebarStyles.list}`,
                 'links' in customization.styling && `links-${customization.styling.links}`,
+                'depth' in customization.styling && `depth-${customization.styling.depth}`,
                 fontNotoColorEmoji.variable,
                 ibmPlexMono.variable,
                 fontData.type === 'default' ? fontData.variable : 'font-custom',

diff --git a/packages/gitbook/src/components/Search/SearchAskAnswer.tsx b/packages/gitbook/src/components/Search/SearchAskAnswer.tsx
@@ -176,6 +176,7 @@ function AnswerFollowupQuestions(props: { followupQuestions: string[] }) {
                         'py-2',
                         'rounded',
                         'straight-corners:rounded-none',
+                        'circular-corners:rounded-full',
                         'text-tint',
                         'hover:bg-tint-hover',
                         'focus-within:bg-tint-hover'

diff --git a/packages/gitbook/src/components/Search/SearchButton.tsx b/packages/gitbook/src/components/Search/SearchButton.tsx
@@ -45,21 +45,25 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
                 'w-full',
                 'py-2',
                 'px-3',
+                'circular-corners:px-4',
                 'gap-2',
 
                 'bg-tint-base',
 
                 'ring-1',
                 'ring-tint-12/2',
+                'depth-flat:ring-tint-subtle',
 
                 'shadow-sm',
                 'shadow-tint-12/3',
                 'dark:shadow-none',
+                'depth-flat:shadow-none',
 
                 'text-tint',
 
                 'rounded-lg',
                 'straight-corners:rounded-sm',
+                'circular-corners:rounded-full',
 
                 'contrast-more:ring-tint-12',
                 'contrast-more:text-tint-strong',
@@ -68,10 +72,12 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
                 'hover:bg-tint-subtle',
                 'hover:shadow-md',
                 'hover:scale-102',
+                'depth-flat:hover:scale-100',
                 'hover:ring-tint-hover',
                 'hover:text-tint-strong',
                 'focus:shadow-md',
                 'focus:scale-102',
+                'depth-flat:focus:scale-100',
                 'focus:ring-tint-hover',
                 'focus:text-tint-strong',