diff --git a/client/blocks/category-pill-navigation/README.md b/client/components/category-pill-navigation/README.md
similarity index 100%
rename from client/blocks/category-pill-navigation/README.md
rename to client/components/category-pill-navigation/README.md
diff --git a/client/blocks/category-pill-navigation/docs/example.tsx b/client/components/category-pill-navigation/docs/example.tsx
similarity index 89%
rename from client/blocks/category-pill-navigation/docs/example.tsx
rename to client/components/category-pill-navigation/docs/example.tsx
index f41bbd1cbc18a..d82efdbee0cc9 100644
--- a/client/blocks/category-pill-navigation/docs/example.tsx
+++ b/client/components/category-pill-navigation/docs/example.tsx
@@ -9,7 +9,7 @@ const categories = Array.from( { length: 15 }, ( _, i ) => ( {
 	link: '#',
 } ) );
 
-export const CategoryPillNavigationExample: FunctionComponent = () => {
+const CategoryPillNavigationExample: FunctionComponent = () => {
 	return (
 		<div>
 			<Card>
@@ -39,3 +39,5 @@ export const CategoryPillNavigationExample: FunctionComponent = () => {
 		</div>
 	);
 };
+
+export default CategoryPillNavigationExample;
diff --git a/client/devdocs/design/blocks.jsx b/client/devdocs/design/blocks.jsx
index 1227dcb9e65fa..0800465b55cd7 100644
--- a/client/devdocs/design/blocks.jsx
+++ b/client/devdocs/design/blocks.jsx
@@ -11,7 +11,6 @@ import AuthorCompactProfile from 'calypso/blocks/author-compact-profile/docs/exa
 import AuthorSelector from 'calypso/blocks/author-selector/docs/example';
 import CalendarButton from 'calypso/blocks/calendar-button/docs/example';
 import CalendarPopover from 'calypso/blocks/calendar-popover/docs/example';
-import { CategoryPillNavigationExample } from 'calypso/blocks/category-pill-navigation/docs/example';
 import ColorSchemePicker from 'calypso/blocks/color-scheme-picker/docs/example';
 import CommentButtons from 'calypso/blocks/comment-button/docs/example';
 import PostComment from 'calypso/blocks/comments/docs/post-comment-example';
@@ -173,7 +172,6 @@ export default class AppComponents extends Component {
 					<UpsellNudge />
 					<JetpackReviewPrompt readmeFilePath="jetpack-review-prompt" />
 					<ReaderJoinConversationDialogExample readmeFilePath="reader-join-conversation" />
-					<CategoryPillNavigationExample readmeFilePath="category-pill-navigation" />
 				</Collection>
 			</Main>
 		);
diff --git a/client/devdocs/design/index.jsx b/client/devdocs/design/index.jsx
index 92184efb5f1f9..8e5a33ce72363 100644
--- a/client/devdocs/design/index.jsx
+++ b/client/devdocs/design/index.jsx
@@ -34,6 +34,7 @@ import Breadcrumb from 'calypso/components/breadcrumb/docs/example';
 import BulkSelect from 'calypso/components/bulk-select/docs/example';
 import ButtonGroups from 'calypso/components/button-group/docs/example';
 import CardHeading from 'calypso/components/card-heading/docs/example';
+import CategoryPillNavigationExample from 'calypso/components/category-pill-navigation/docs/example';
 import Chart from 'calypso/components/chart/docs/example';
 import Checklist from 'calypso/components/checklist/docs/example';
 import ClipboardButtonInput from 'calypso/components/clipboard-button-input/docs/example';
@@ -186,6 +187,7 @@ export default class DesignAssets extends Component {
 					<Buttons readmeFilePath="/packages/components/src/button" />
 					<CardHeading readmeFilePath="card-heading" />
 					<Cards readmeFilePath="/packages/components/src/card" />
+					<CategoryPillNavigationExample readmeFilePath="category-pill-navigation" />
 					<Chart readmeFilePath="chart" />
 					<Checklist readmeFilePath="checklist" />
 					<ClipboardButtonInput readmeFilePath="clipboard-button-input" />