diff --git a/docs/docs/intro/addons/index.md b/docs/docs/intro/addons/index.md
index 305ba3f776..53ca6b9304 100644
--- a/docs/docs/intro/addons/index.md
+++ b/docs/docs/intro/addons/index.md
@@ -31,7 +31,7 @@ const main: StorybookConfig = {
 export default main;
 ```
 
-:::info Why `deviceAddons`?
+:::info[Why `deviceAddons`?]
 On-device addons contain React Native code that can only run on the device. When listed in the regular `addons` array, Storybook Core tries to evaluate them as presets during server-side operations (like `extract` or `build`), which fails because Node.js can't load React Native modules. The `deviceAddons` property ensures they're only loaded at runtime on the device.
 
 For backwards compatibility, on-device addons in the `addons` array still work — they're detected by the "ondevice" substring in their name and handled correctly. However, `deviceAddons` is the recommended approach.
diff --git a/docs/docs/intro/configuration/cli-configuration.md b/docs/docs/intro/configuration/cli-configuration.md
index dff337d745..afa5e951f7 100644
--- a/docs/docs/intro/configuration/cli-configuration.md
+++ b/docs/docs/intro/configuration/cli-configuration.md
@@ -4,7 +4,7 @@ sidebar_position: 5
 
 # CLI Configuration
 
-:::info You probably don't need this
+:::info[You probably don't need this]
 If you're using the `withStorybook` bundler wrapper (the recommended setup), the `storybook.requires.ts` file is generated and updated automatically every time your bundler starts. You don't need to run any CLI commands for story generation.
 
 The `sb-rn-get-stories` command documented here is only needed if you've chosen **not** to use a `withStorybook` wrapper at all — for example, in a fully custom build pipeline.
diff --git a/docs/docs/intro/configuration/environment-variables.md b/docs/docs/intro/configuration/environment-variables.md
index c3a23f3fe4..4eadd1a4cf 100644
--- a/docs/docs/intro/configuration/environment-variables.md
+++ b/docs/docs/intro/configuration/environment-variables.md
@@ -115,7 +115,7 @@ STORYBOOK_ENABLED=true STORYBOOK_WS_HOST=192.168.1.100 STORYBOOK_WS_PORT=7007 ex
 }
 ```
 
-:::note Windows
+:::note[Windows]
 Use `cross-env` to set environment variables on Windows:
 
 ```json
diff --git a/docs/docs/intro/configuration/storybook-ui-configuration.md b/docs/docs/intro/configuration/storybook-ui-configuration.md
index a5bc583cc7..f324263a1c 100644
--- a/docs/docs/intro/configuration/storybook-ui-configuration.md
+++ b/docs/docs/intro/configuration/storybook-ui-configuration.md
@@ -294,7 +294,7 @@ const StorybookUIRoot = view.getStorybookUI({
 
 Enable remote control of Storybook from external tools. See [WebSocket Configuration](./websocket-configuration.md) for the full guide.
 
-:::tip Auto-injected by the bundler wrapper
+:::tip[Auto-injected by the bundler wrapper]
 When you configure `websockets: 'auto'` (or `{ host, port }`) in your `withStorybook` bundler wrapper, the WebSocket settings are automatically injected into the generated `storybook.requires` file. You do **not** need to set `enableWebsockets`, `host`, or `port` in `getStorybookUI` — they're already wired up. This applies to both the bundler-agnostic and Metro-specific wrappers.
 
 The options below are only needed if you're not using a `withStorybook` wrapper at all, or if you want to override the auto-injected values.
diff --git a/docs/docs/intro/getting-started/expo-router.md b/docs/docs/intro/getting-started/expo-router.md
index d616766fa6..86899dead7 100644
--- a/docs/docs/intro/getting-started/expo-router.md
+++ b/docs/docs/intro/getting-started/expo-router.md
@@ -6,7 +6,7 @@ sidebar_position: 1
 
 This guide covers setting up Storybook as a route inside an Expo Router app. This approach renders Storybook within your app's navigation — useful if you want Storybook accessible alongside your app screens during development.
 
-:::tip Recommended: Entry-point swapping
+:::tip[Recommended: Entry-point swapping]
 For most projects, the simpler approach is **entry-point swapping** — the bundler swaps your entire app entry point for Storybook when `STORYBOOK_ENABLED=true` is set. No route setup needed, no Storybook code in production. See the [Getting Started guide](./index.md).
 
 The Expo Router approach documented here is fully supported but not the preferred setup, because it embeds Storybook into your app's bundle and navigation.
@@ -36,7 +36,7 @@ module.exports = withStorybook(config, {
 });
 ```
 
-:::warning Don't use the bundler-agnostic wrapper here
+:::warning[Don't use the bundler-agnostic wrapper here]
 The bundler-agnostic `withStorybook` from `@storybook/react-native/withStorybook` performs entry-point swapping, which replaces your entire app with Storybook. For the Expo Router route approach, you need the Metro-specific wrapper from `@storybook/react-native/metro/withStorybook` so your app's routing stays intact.
 :::
 
diff --git a/docs/docs/intro/getting-started/index.md b/docs/docs/intro/getting-started/index.md
index cfdaa98f8a..4b55edab96 100644
--- a/docs/docs/intro/getting-started/index.md
+++ b/docs/docs/intro/getting-started/index.md
@@ -11,13 +11,13 @@ This guide is intended for Storybook version 10+. For v9 docs see the [v9.1 docs
 
 React Native Storybook works with both plain React Native and Expo but examples are using Expo for brevity since Expo is officially recommended by Meta. For plain React Native projects there should be minimal differences.
 
-:::info Expo Router Users
+:::info[Expo Router Users]
 For most projects, the simplest approach is entry-point swapping: the bundler swaps your app’s entire entry point for Storybook when `STORYBOOK_ENABLED=true` is set. No route setup needed, and no Storybook code ships to production.
 
 However, if you’re using **Expo Router** and want to render Storybook within your app’s navigation (instead of as a separate entry point), follow our dedicated [Expo Router Setup guide](./expo-router.md). This approach is fully supported, but not recommended, because it embeds Storybook into your app’s bundle and navigation.
 :::
 
-:::tip AI-Assisted Setup
+:::tip[AI-Assisted Setup]
 If you're using an AI coding agent (Claude Code, Cursor, Windsurf, etc.), you can install our agent skills to get guided setup assistance:
 
 ```sh
@@ -64,7 +64,7 @@ Then run:
 npm run storybook
 ```
 
-:::note Windows
+:::note[Windows]
 Use `cross-env` to set environment variables on Windows:
 
 ```json
@@ -73,7 +73,7 @@ Use `cross-env` to set environment variables on Windows:
 
 :::
 
-:::tip Bundler configuration
+:::tip[Bundler configuration]
 The CLI automatically wraps your `metro.config.js` with `withStorybook`. If you need to customize this — for example to chain it with other wrappers like `withNativeWind` — see [Metro Configuration](../configuration/metro-configuration.md) or [Manual Setup](./manual-setup.md).
 :::
 
diff --git a/docs/docs/intro/getting-started/manual-setup.md b/docs/docs/intro/getting-started/manual-setup.md
index 78d5be9978..5bce9d4c77 100644
--- a/docs/docs/intro/getting-started/manual-setup.md
+++ b/docs/docs/intro/getting-started/manual-setup.md
@@ -6,7 +6,7 @@ sidebar_position: 2
 
 This guide covers integrating Storybook directly into your app — rendering it inside your `App.tsx`, behind a toggle, or on a dedicated screen. This gives you full control over when and how Storybook appears.
 
-:::tip Recommended: Automated setup with entry-point swapping
+:::tip[Recommended: Automated setup with entry-point swapping]
 For most projects, the [Getting Started guide](./index.md) is the easier path. The CLI sets everything up automatically, and Storybook runs as its own entry point — no changes to your app code needed.
 
 The approach described on this page is fully supported but requires more manual work to set up and maintain.
@@ -132,7 +132,7 @@ module.exports = withStorybook(mergeConfig(defaultConfig, config), {
 });
 ```
 
-:::warning Don't use the bundler-agnostic wrapper here
+:::warning[Don't use the bundler-agnostic wrapper here]
 The bundler-agnostic `withStorybook` from `@storybook/react-native/withStorybook` performs entry-point swapping, which replaces your entire app entry point with Storybook. For in-app integration, you need the Metro-specific wrapper from `@storybook/react-native/metro/withStorybook` so your app remains the entry point and you control where Storybook renders.
 :::
 
diff --git a/docs/docs/intro/getting-started/migrating-to-entry-point-swapping.md b/docs/docs/intro/getting-started/migrating-to-entry-point-swapping.md
index 66c13c355b..b6726eba10 100644
--- a/docs/docs/intro/getting-started/migrating-to-entry-point-swapping.md
+++ b/docs/docs/intro/getting-started/migrating-to-entry-point-swapping.md
@@ -140,7 +140,7 @@ const main: StorybookConfig = {
 export default main;
 ```
 
-:::tip Automigration available
+:::tip[Automigration available]
 If you're using the Storybook CLI, the `rn-ondevice-addons-to-device-addons` automigration handles this step automatically. Any addon with "ondevice" in its name is moved to `deviceAddons`.
 
 ```sh
@@ -177,7 +177,7 @@ For React Native CLI projects:
 }
 ```
 
-:::note Windows users
+:::note[Windows users]
 On Windows, use `cross-env` to set environment variables:
 
 ```json
@@ -192,7 +192,7 @@ On Windows, use `cross-env` to set environment variables:
 
 After making all changes, restart Metro with a cache clear (`npx expo start --clear` or `npx react-native start --reset-cache`) and run your storybook script to verify everything works.
 
-:::tip WebSocket configuration
+:::tip[WebSocket configuration]
 If you were manually configuring WebSocket host/port in both your metro config and `getStorybookUI`, you can now remove that duplication. The new `withStorybook` auto-injects WebSocket settings. See [Environment Variables](../configuration/environment-variables.md) for how to override them.
 :::