Snippets anywhere

create/reusable-snippets.mdx

@@ -1,27 +1,46 @@
 ---
 title: "Reusable snippets"
 description: "Create reusable snippets to maintain consistency across pages."
-keywords: ["content snippets", "reusable content", "variables"]
+keywords: ["content snippets", "reusable content", "variables", "snippets configuration"]
 ---
 
 One of the core principles of software development is DRY (Don't Repeat
 Yourself), which applies to documentation as
 well. If you find yourself repeating the same content in multiple places, you
 should create a custom snippet to keep your content in sync.
 
-## Creating a custom snippet
+## Snippet locations
+
+By default, snippet files live in the `/snippets/` directory. You can also configure additional directories to store snippets using the `snippets` property in your `docs.json`.
 
-**Pre-condition**: You must create your snippet file in the `snippets` directory in order for the import to work.
+Any file in a snippet directory will be treated as a snippet and will not be rendered into a standalone page. If you want to create a standalone page from the snippet, import the snippet into another file and call it as a component.
 
 <Tip>
-  Snippets support both absolute imports (starting with `/snippets/`) and
+  Snippets support both absolute imports (starting with `/snippets/` or your custom path) and
   relative imports (starting with `./` or `../`).
 </Tip>
 
-Any page in the `snippets` directory will be treated as a snippet and will not
-be rendered into a standalone page. If you want to create a standalone page
-from the snippet, import the snippet into another file and call it as a
-component.
+### Custom snippet directories
+
+To organize snippets in custom locations, add the `snippets` property to your `docs.json` with an array of glob patterns. Patterns use [minimatch](https://github.com/isaacs/minimatch) syntax:
+
+```json docs.json
+{
+  "snippets": ["components/**", "shared/reusable/**"]
+}
+```
+
+This configuration allows you to import snippets from the specified directories in addition to the default `/snippets/` folder:
+
+```typescript destination-file.mdx
+import Alert from '../components/Alert.mdx';
+import Banner from '../shared/reusable/Banner.mdx';
+import DefaultSnippet from '../snippets/my-snippet.mdx';
+```
+
+## Creating a custom snippet
+
+**Pre-condition**: Your snippet file must be in the `/snippets/` directory or a [custom snippet directory](#custom-snippet-directories) you've configured.
 
 ### Default export
 
@@ -51,13 +70,13 @@
 
 ### Exporting with variables
 
 1. Optionally, you can add variables that can be filled in via props when you import the snippet. In this example, our variable is word.
 
 ```typescript snippets/my-snippet.mdx
 My keyword of the day is {word}.
 ```
 
 2. Import the snippet into your destination file with the variable. The property will fill in based on your specification.
 
 ```typescript destination-file.mdx
 ---
@@ -98,7 +117,7 @@
 Hello, my name is {myName} and I like {myObject.fruit}.
 ```
 
 ### JSX snippets
 
 1. Export a JSX component from your snippet file. (See [React components](/customize/react-components) for more information):
 
@@ -113,8 +132,8 @@
 ```
 
 <Note>
   Important: When creating JSX snippets, use arrow function syntax (`=>`) rather
   than function declarations. The `function` keyword is not supported in this
   context.
 </Note>
 

customize/react-components.mdx

@@ -92,7 +92,7 @@
 
 ## Importing components
 
-To import React components in your MDX files, the component files must be located in the `snippets` folder. You can then import them into any MDX page in your documentation. Learn more about [reusable snippets](/create/reusable-snippets).
+To import React components in your MDX files, the component files must be located in a snippet directory. By default, this is the `/snippets/` folder, but you can [configure additional directories](/create/reusable-snippets#custom-snippet-directories) in your `docs.json`. Learn more about [reusable snippets](/create/reusable-snippets).
 
 ### Example
 
@@ -236,9 +236,9 @@
     - **Accessibility**: Ensure dynamic content changes are announced to screen readers.
   </Accordion>
   <Accordion title="Performance best practices">
     - **Optimize dependency arrays**: Include only necessary dependencies in your `useEffect` dependency arrays.
     - **Memoize complex calculations**: Use `useMemo` or `useCallback` for expensive operations.
     - **Reduce re-renders**: Break large components into smaller ones to prevent cascading re-renders.
     - **Lazy loading**: Consider lazy loading complex components to improve initial page load time.
   </Accordion>
 </AccordionGroup>

organize/settings.mdx

@@ -50,7 +50,7 @@
 </ResponseField>
 
 <ResponseField name="colors" type="object" required>
   The colors used in your documentation. Colors are applied differently across themes. If you only provide a primary color, it will be used for all color elements.
 
   <Expandable title="Colors">
     <ResponseField name="primary" type="string matching ^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" required>
@@ -115,7 +115,7 @@
       Background image for your thumbnails. Can be a relative path or absolute URL.
     </ResponseField>
     <ResponseField name="fonts" type="object">
       Font configuration for thumbnails. Only Google Fonts family names are supported.
 
       <Expandable title="Fonts">
         <ResponseField name="family" type="string" required>
@@ -347,6 +347,18 @@
   </Expandable>
 </ResponseField>
 
+<ResponseField name="snippets" type="array of string">
+  Additional directories to treat as snippet locations. Accepts an array of glob patterns using [minimatch](https://github.com/isaacs/minimatch) syntax. The `/snippets/` directory is always included by default.
+
+  ```json
+  {
+    "snippets": ["components/**", "shared/reusable/**"]
+  }
+  ```
+
+  See [Reusable snippets](/create/reusable-snippets) for more information.
+</ResponseField>
+
 ### Structure
 
 <ResponseField name="navbar" type="object">
@@ -550,7 +562,7 @@
 
   <Expandable title="Interaction">
     <ResponseField name="drilldown" type="boolean">
       Control automatic navigation behavior when selecting navigation groups. Set to `true` to force navigation to the first page when a navigation group is expanded. Set to `false` to prevent navigation and only expand or collapse the group. Leave unset to use the theme's default behavior.
     </ResponseField>
   </Expandable>
 </ResponseField>
@@ -560,7 +572,7 @@
 
   <Expandable title="Metadata">
     <ResponseField name="timestamp" type="boolean">
       Enable the last modified date on all pages. When enabled, all pages will display the date the content was last modified. Defaults to `false`.
     </ResponseField>
   </Expandable>
 </ResponseField>
@@ -638,7 +650,7 @@
       Destination path to redirect to. Example: `/new-page`
     </ResponseField>
     <ResponseField name="permanent" type="boolean">
       Whether to use a permanent redirect (301). Defaults to `true`.
     </ResponseField>
   </Expandable>
 </ResponseField>
@@ -672,7 +684,7 @@
   </Expandable>
 </ResponseField>
 
 ### API Configurations
 
 <ResponseField name="api" type="object">
   API documentation and interactive playground settings.
@@ -782,10 +794,10 @@
   </Expandable>
 </ResponseField>
 
 ### SEO and search
 
 <ResponseField name="seo" type="object">
   SEO indexing configurations.
 
   <Expandable title="Seo">
     <ResponseField name="metatags" type="object">