diff --git a/docs/docs/about.mdx b/docs/docs/about.mdx
index 59f07c7..03e8c7f 100644
--- a/docs/docs/about.mdx
+++ b/docs/docs/about.mdx
@@ -1,4 +1,4 @@
-import { Cards } from '#components/cards/cards.tsx';
+import { MainSectionCards } from '#components/cards/cards.tsx';
 
 export const meta = {
   title: 'About',
@@ -32,4 +32,4 @@ Some utilities are created for training and educational purposes.
 
 ## Sections
 
-<Cards />
+<MainSectionCards />
diff --git a/docs/docs/dom/overview.mdx b/docs/docs/dom/overview.mdx
index f2eff56..2300b9d 100644
--- a/docs/docs/dom/overview.mdx
+++ b/docs/docs/dom/overview.mdx
@@ -1,3 +1,5 @@
+import { StoryCards } from '#components/cards/cards';
+
 export const meta = {
   title: '',
   category: 'DOM',
@@ -12,50 +14,6 @@ All helpers specific to the [DOM](https://developer.mozilla.org/en-US/docs/Web/A
 import { findAncestor, getPositionedParentOffset, isScrollable } from '@krutoo/utils';
 ```
 
-### `isScrollable`
-
-Checks that element is scrollable.
-
-```ts
-import { isScrollable } from '@krutoo/utils';
-
-const element = document.querySelector('#something');
-
-isScrollable(element); // true or false
-```
-
-### `findAncestor`
-
-Finds closest ancestor element that matches condition.
-
-```ts
-import { findAncestor } from '@krutoo/utils';
-
-const element = document.querySelector('#something');
+### Utils
 
-// element or null returns
-const closestTarget = findAncestor(element, parent => parent.classList.contains('target'));
-```
-
-### `getPositionedParentOffset`
-
-Returns position of top left corner of the parent positioned element relative to viewport origin.
-Useful when you need to visually move element to position relative to viewport.
-
-- It works for elements with any ancestors in any subtrees of your DOM
-- It works for `absolute` and `fixed` positioning
-
-For example when you need to move element to mouse you can do this:
-
-```ts
-import { getPositionedParentOffset } from '@krutoo/utils';
-
-const element = document.querySelector('#something');
-
-window.addEventListener('mousemove', event => {
-  const offset = getPositionedParentOffset(element);
-
-  element.style.top = `${event.clientY - offset.y}px`;
-  element.style.left = `${event.clientX - offset.x}px`;
-});
-```
+<StoryCards category='DOM' />
diff --git a/docs/docs/math/overview.mdx b/docs/docs/math/overview.mdx
index a53c492..5677c08 100644
--- a/docs/docs/math/overview.mdx
+++ b/docs/docs/math/overview.mdx
@@ -1,3 +1,5 @@
+import { StoryCards } from '#components/cards/cards';
+
 export const meta = {
   title: '',
   category: 'Math',
@@ -11,3 +13,7 @@ All utilities specific to the math and geometry available from package root.
 ```ts
 import { clamp, lerp, randomFloat } from '@krutoo/utils';
 ```
+
+### Utils
+
+<StoryCards category='Math' />
diff --git a/docs/docs/misc/overview.mdx b/docs/docs/misc/overview.mdx
index 34c9676..9391a8c 100644
--- a/docs/docs/misc/overview.mdx
+++ b/docs/docs/misc/overview.mdx
@@ -1,3 +1,5 @@
+import { StoryCards } from '#components/cards/cards.tsx';
+
 export const meta = {
   title: '',
   category: 'Misc',
@@ -17,3 +19,7 @@ await wait(1000);
 
 console.log('One second passed');
 ```
+
+### Utils
+
+<StoryCards category='Misc' />
diff --git a/docs/docs/react/overview.mdx b/docs/docs/react/overview.mdx
index c6d4dc5..67c4f7a 100644
--- a/docs/docs/react/overview.mdx
+++ b/docs/docs/react/overview.mdx
@@ -1,4 +1,5 @@
 import { Callout } from '#components/callout/callout';
+import { StoryCards } from '#components/cards/cards';
 
 export const meta = {
   title: '',
@@ -21,3 +22,33 @@ import { Portal, mergeRefs, useStableCallback } from '@krutoo/utils/react';
     applications.
   </Callout.Main>
 </Callout>
+
+### Core
+
+Extending core React functionality without depending on browser/Node.js APIs etc.
+
+<StoryCards category='React' />
+
+### React DOM
+
+Browser dependent hooks and components
+
+<StoryCards category='React DOM' />
+
+### React DI
+
+Dependency Injection bindings
+
+<StoryCards category='React DI' />
+
+### React Query
+
+Declarative fetching anything by `fetch`, `axios`, GraphQL or what you want
+
+<StoryCards category='React Query' />
+
+### React Router
+
+Router bindings
+
+<StoryCards category='React Router' />
diff --git a/docs/docs/react/query/use-query.mdx b/docs/docs/react/query/use-query.mdx
index bd0e3e1..cd832b4 100644
--- a/docs/docs/react/query/use-query.mdx
+++ b/docs/docs/react/query/use-query.mdx
@@ -1,6 +1,7 @@
 export const meta = {
   category: 'React Query',
   title: 'useQuery',
+  menuPriority: 10,
 };
 
 # `useQuery`
diff --git a/docs/docs/rspack/overview.mdx b/docs/docs/rspack/overview.mdx
index a086751..0c0e520 100644
--- a/docs/docs/rspack/overview.mdx
+++ b/docs/docs/rspack/overview.mdx
@@ -1,3 +1,5 @@
+import { StoryCards } from '#components/cards/cards';
+
 export const meta = {
   title: '',
   category: 'Rspack',
@@ -33,136 +35,6 @@ export default {
 };
 ```
 
-### `pluginTypeScript`
-
-Typescript support.
-
-Features:
-
-- Builtin SWC loader used under the hood so you don't need to add rule for files
-- By default root tsconfig.json will be used for define path aliases so you don't need to add `resolve.alias.tsConfig` option to config
-- By default `js, jsx, ts, tsx, mts, cts` files handled
-
-```js title="rspack.config.js"
-import { pluginTypeScript } from '@krutoo/utils/rspack';
-
-export default {
-  plugins: [
-    // just use plugin function
-    pluginTypeScript(),
-  ],
-};
-```
-
-### `pluginCSS`
-
-CSS and css-modules support.
-
-```js title="rspack.config.js"
-import { pluginCSS } from '@krutoo/utils/rspack';
-
-export default {
-  plugins: [
-    // just use plugin function
-    pluginCSS(),
-  ],
-};
-```
-
-### `pluginHTML`
-
-HTML file will be added to bundle.
-By default modern options is applied to builtin HTML plugin.
-
-```js title="rspack.config.js"
-import { pluginHTML } from '@krutoo/utils/rspack';
-
-export default {
-  plugins: [
-    // just use plugin function
-    pluginHTML(),
-  ],
-};
-```
-
-### `pluginReactSVG`
-
-Allows to import SVG files as React-components.
-
-[@svgr/webpack](https://react-svgr.com/docs/webpack/) must be installed in your project.
-
-> @svgr/webpack is a part of Webpack ecosystem but don't worry - it is compatible with Rspack
-
-```js title="rspack.config.js"
-import { pluginReactSVG } from '@krutoo/utils/rspack';
-
-export default {
-  plugins: [
-    // just use plugin function
-    pluginReactSVG(),
-  ],
-};
-```
-
-### `pluginPublicFiles`
-
-Folder "public" in project root will be copied to bundle as is.
-
-```js title="rspack.config.js"
-import { pluginPublicFiles } from '@krutoo/utils/rspack';
-
-export default {
-  plugins: [
-    // just use plugin function
-    pluginPublicFiles(),
-  ],
-};
-```
-
-### `pluginRawImport`
-
-Ability to import source code of file by:
-
-- adding `?raw` query to import specifier
-- or by adding import attribute like `with { type: 'text' }`
-
-```js title="rspack.config.js"
-import { pluginRawImport } from '@krutoo/utils/rspack';
-
-export default {
-  plugins: [
-    // just use plugin function
-    pluginRawImport(),
-  ],
-};
-```
-
-### `pluginStaticAssets`
-
-Common file types like images, sounds and fonts will be imported as urls to resource so you don't need to add rules for it.
-
-```js title="rspack.config.js"
-import { pluginStaticAssets } from '@krutoo/utils/rspack';
+### Utils
 
-export default {
-  plugins: [
-    // just use plugin function
-    pluginStaticAssets(),
-  ],
-};
-```
-
-### `pluginImportMetaEnv`
-
-Same as builtin [EnvironmentPlugin](https://rspack.rs/plugins/webpack/environment-plugin) but allows to use variables as `import.meta.env.APP_NAME`.
-
-```js title="rspack.config.js"
-import { pluginImportMetaEnv } from '@krutoo/utils/rspack';
-
-export default {
-  plugins: [
-    // just use plugin function
-    pluginImportMetaEnv(['NODE_ENV', 'DEBUG']),
-  ],
-};
-```
+<StoryCards category='Rspack' />
diff --git a/docs/docs/rspack/plugin-css.mdx b/docs/docs/rspack/plugin-css.mdx
index e45b8a8..267e783 100644
--- a/docs/docs/rspack/plugin-css.mdx
+++ b/docs/docs/rspack/plugin-css.mdx
@@ -132,4 +132,4 @@ declare module '*.m.css' {
 ```
 
 Or you can use ready declarations from this package as described here:
-[Type declarations](/utils/typings/overview)
+[Type declarations](/utils/typescript/overview)
diff --git a/docs/docs/rspack/plugin-react-svg.mdx b/docs/docs/rspack/plugin-react-svg.mdx
index d70b1f2..0e1d934 100644
--- a/docs/docs/rspack/plugin-react-svg.mdx
+++ b/docs/docs/rspack/plugin-react-svg.mdx
@@ -62,4 +62,4 @@ declare module '*.svg' {
 ```
 
 Or you can use ready declarations from this package as described here:
-[Type declarations](/utils/typings/overview)
+[Type declarations](/utils/typescript/overview)
diff --git a/docs/docs/testing/overview.mdx b/docs/docs/testing/overview.mdx
index 6071f45..67a2476 100644
--- a/docs/docs/testing/overview.mdx
+++ b/docs/docs/testing/overview.mdx
@@ -1,7 +1,16 @@
+import { StoryCards } from '#components/cards/cards';
+
 export const meta = {
   title: '',
   category: 'Testing',
   menuPriority: -5,
-  menuHidden: true,
   menuPriority: 100,
 };
+
+# Testing utils
+
+The library provides useful mock implementations for various interfaces, especially for Web APIs.
+
+### Utils
+
+<StoryCards category='Testing' />
diff --git a/docs/package-lock.json b/docs/package-lock.json
index f4740be..4edb306 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -8,7 +8,7 @@
       "name": "@krutoo/utils-docs",
       "version": "0.0.0",
       "dependencies": {
-        "@krutoo/showcase": "^0.7.2",
+        "@krutoo/showcase": "^0.8.0",
         "@mdx-js/react": "^3.1.0",
         "classnames": "^2.5.1",
         "lucide-react": "^1.17.0",
@@ -62,9 +62,9 @@
       }
     },
     "node_modules/@krutoo/showcase": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/@krutoo/showcase/-/showcase-0.7.2.tgz",
-      "integrity": "sha512-jyNg+vkYCPzkDJoGUiK8jAhp4qpf55rTpKDX0NHzwJQDa2URDFOA9/75GCxmEiVpGtReTfeAy5FOZJXY16BzgQ==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@krutoo/showcase/-/showcase-0.8.0.tgz",
+      "integrity": "sha512-zynS/Gw2haR+7oX2eE/o2oGThL67YOf/G/DL8PfZH/DLQafBHiaVQdQl5Sg13Gn1oNy+ak3sA4v8DzGklD2JzQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "chokidar": "^4.0.3",
@@ -1088,9 +1088,9 @@
       }
     },
     "node_modules/fastq": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
-      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.3.tgz",
+      "integrity": "sha512-XKv5nnLs6nLF71NgiKJLIZFLkPyIEuOselLG7ujZnGrRfQK8HpvY+WqKhAJUAdLomwVHErVS4LfxFlPq0/FTAw==",
       "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
@@ -2992,9 +2992,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
-      "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
+      "version": "4.6.5",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.6.5.tgz",
+      "integrity": "sha512-v5l/aFXZQeai4awLbOpSoHecE9UiMrnfx75tEXLjNonXVARxQ5mOeipTjROUchszUNCqnE+hqAMujRsRHsut2Q==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
diff --git a/docs/package.json b/docs/package.json
index d993f88..d0e3561 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -23,7 +23,7 @@
     "typescript": "^5.9.2"
   },
   "dependencies": {
-    "@krutoo/showcase": "^0.7.2",
+    "@krutoo/showcase": "^0.8.0",
     "@mdx-js/react": "^3.1.0",
     "classnames": "^2.5.1",
     "lucide-react": "^1.17.0",
diff --git a/docs/src/components/cards/cards.m.css b/docs/src/components/cards/cards.m.css
index 16ab1ca..8312ae4 100644
--- a/docs/src/components/cards/cards.m.css
+++ b/docs/src/components/cards/cards.m.css
@@ -6,7 +6,6 @@
 
 .item {
   width: 0;
-  flex-grow: 1;
   flex-basis: calc(50% - 6px);
   transition: scale 200ms;
 }
diff --git a/docs/src/components/cards/cards.tsx b/docs/src/components/cards/cards.tsx
index a0810be..454c49a 100644
--- a/docs/src/components/cards/cards.tsx
+++ b/docs/src/components/cards/cards.tsx
@@ -1,59 +1,96 @@
+import { ReactNode, useContext } from 'react';
+import { RoutingContext, useMenuItems } from '@krutoo/showcase/runtime-showcase';
 import { Callout } from '#components/callout/callout.tsx';
 import { Link } from '#components/link/link.tsx';
 import { withPublicPath } from '../../utils.ts';
 import styles from './cards.m.css';
 
-export function Cards() {
+const MAIN_SECTIONS = [
+  {
+    href: withPublicPath('./react/overview'),
+    title: 'React',
+    description: 'SSR ready performant components and hooks',
+  },
+  {
+    href: withPublicPath('./rspack/overview'),
+    title: 'Rspack',
+    description: 'Plugins to define configs easy',
+  },
+  {
+    href: withPublicPath('./typescript/overview'),
+    title: 'Typings',
+    description: 'TypeScript type declarations',
+  },
+  {
+    href: withPublicPath('./di/overview'),
+    title: 'DI',
+    description: 'Dependency injection toolkit',
+  },
+  {
+    href: withPublicPath('./router/browser-router'),
+    title: 'Router',
+    description: 'Router implementation and React bindings',
+  },
+  {
+    href: withPublicPath('./math/overview'),
+    title: 'Math',
+    description: 'Math and geometry functions',
+  },
+  {
+    href: withPublicPath('./misc/overview'),
+    title: 'Misc',
+    description: 'Non specific helpers',
+  },
+  {
+    href: withPublicPath('./dom/overview'),
+    title: 'DOM',
+    description: 'Browser utilities',
+  },
+];
+
+export function CardLayout({ children }: { children?: ReactNode }): ReactNode {
+  return <div className={styles.root}>{children}</div>;
+}
+
+export function MainSectionCards(): ReactNode {
+  return (
+    <CardLayout>
+      {MAIN_SECTIONS.map((item, index) => (
+        <Link key={index} className={styles.item} href={item.href}>
+          <Callout>
+            <Callout.Heading>{item.title}</Callout.Heading>
+            <Callout.Main>{item.description}</Callout.Main>
+          </Callout>
+        </Link>
+      ))}
+    </CardLayout>
+  );
+}
+
+export function StoryCards({ category }: { category?: string }): ReactNode {
+  const routing = useContext(RoutingContext);
+  const menuItems = useMenuItems({ grouping: false });
+
+  const items = menuItems
+    .map(item =>
+      item.type === 'story' &&
+      !item.story.meta?.menuHidden &&
+      item.story.meta?.title &&
+      (category ? item.story.meta.category === category : true)
+        ? item
+        : null,
+    )
+    .filter(item => item !== null);
+
   return (
-    <div className={styles.root}>
-      <Link className={styles.item} href={withPublicPath('./react/overview')}>
-        <Callout>
-          <Callout.Heading>React</Callout.Heading>
-          <Callout.Main>SSR ready performant components and hooks</Callout.Main>
-        </Callout>
-      </Link>
-      <Link className={styles.item} href={withPublicPath('./rspack/overview')}>
-        <Callout>
-          <Callout.Heading>Rspack</Callout.Heading>
-          <Callout.Main>Plugins to define configs easy</Callout.Main>
-        </Callout>
-      </Link>
-      <Link className={styles.item} href={withPublicPath('./typescript/overview')}>
-        <Callout>
-          <Callout.Heading>Typings</Callout.Heading>
-          <Callout.Main>TypeScript type declarations</Callout.Main>
-        </Callout>
-      </Link>
-      <Link className={styles.item} href={withPublicPath('./di/overview')}>
-        <Callout>
-          <Callout.Heading>DI</Callout.Heading>
-          <Callout.Main>Dependency injection toolkit</Callout.Main>
-        </Callout>
-      </Link>
-      <Link className={styles.item} href={withPublicPath('./router/browser-router')}>
-        <Callout>
-          <Callout.Heading>Router</Callout.Heading>
-          <Callout.Main>Router implementation and React bindings</Callout.Main>
-        </Callout>
-      </Link>
-      <Link className={styles.item} href={withPublicPath('./math/overview')}>
-        <Callout>
-          <Callout.Heading>Math</Callout.Heading>
-          <Callout.Main>Math and geometry functions</Callout.Main>
-        </Callout>
-      </Link>
-      <Link className={styles.item} href={withPublicPath('./misc/overview')}>
-        <Callout>
-          <Callout.Heading>Misc</Callout.Heading>
-          <Callout.Main>Non specific helpers</Callout.Main>
-        </Callout>
-      </Link>
-      <Link className={styles.item} href={withPublicPath('./dom/overview')}>
-        <Callout>
-          <Callout.Heading>DOM</Callout.Heading>
-          <Callout.Main>Browser utilities</Callout.Main>
-        </Callout>
-      </Link>
-    </div>
+    <CardLayout>
+      {items.map((item, index) => (
+        <Link key={index} className={styles.item} href={routing.getStoryShowcaseUrl(item.story)}>
+          <Callout>
+            <Callout.Main>{item.title}</Callout.Main>
+          </Callout>
+        </Link>
+      ))}
+    </CardLayout>
   );
 }