diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 1e51a0dc..1c386fab 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -72,6 +72,7 @@ export default defineConfig({
         items: [
           { text: 'WobbleMaterial', link: '/guide/materials/wobble-material' },
           { text: 'MeshGlassMaterial', link: '/guide/materials/glass-material' },
+          { text: 'CustomShaderMaterial', link: '/guide/materials/custom-shader-material' },
         ],
       },
       {
diff --git a/docs/.vitepress/theme/components/CustomShaderMaterialDemo.vue b/docs/.vitepress/theme/components/CustomShaderMaterialDemo.vue
new file mode 100644
index 00000000..f8c9ce32
--- /dev/null
+++ b/docs/.vitepress/theme/components/CustomShaderMaterialDemo.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import {
+  CustomShaderMaterial,
+  useTweakPane,
+  OrbitControls,
+} from '@tresjs/cientos'
+
+import { MeshBasicMaterial } from 'three'
+import { onMounted, nextTick } from 'vue'
+
+const { onLoop } = useRenderLoop()
+
+const gl = {
+  clearColor: '#82DBC5',
+}
+
+const materialProps = {
+  baseMaterial: MeshBasicMaterial,
+  fragmentShader: `
+    varying float vWobble;
+
+    uniform float u_Time;
+
+    void main() {
+      float wobble = vWobble * 0.5 + 0.5;
+      csm_FragColor = mix(vec4(0.0, 0.4, 1.5, 1.0), vec4(1.2, 0.6, 0.8, 1.0), wobble);
+    }
+  `,
+  vertexShader: `
+    uniform float u_Time;
+    uniform float u_WobbleSpeed;
+    uniform float u_WobbleAmplitude;
+    uniform float u_WobbleFrequency;
+
+    varying float vWobble;
+
+    void main() {
+      float wobble = sin(csm_Position.z * u_WobbleFrequency + u_Time * u_WobbleSpeed);
+      csm_Position += normal * wobble * u_WobbleAmplitude;
+
+      vWobble = wobble;
+    }
+  `,
+  uniforms: {
+    u_Time: { value: 0 },
+    u_WobbleSpeed: { value: 3 },
+    u_WobbleAmplitude: { value: 0.07 },
+    u_WobbleFrequency: { value: 3 },
+  },
+}
+
+onMounted(async () => {
+  await nextTick()
+
+  createDebugPanel()
+
+  onLoop(() => {
+    materialProps.uniforms.u_Time.value
+			+= 0.01 * materialProps.uniforms.u_WobbleSpeed.value
+  })
+})
+
+function createDebugPanel() {
+  const { pane } = useTweakPane('.debug-container')
+
+  const folder = pane.addFolder({
+    title: 'Settings',
+  })
+
+  folder.addInput(materialProps.uniforms.u_WobbleSpeed, 'value', {
+    label: 'Wobble Speed',
+    min: 0,
+    max: 10,
+  })
+
+  folder.addInput(materialProps.uniforms.u_WobbleAmplitude, 'value', {
+    label: 'Wobble Amplitude',
+    min: 0,
+    max: 0.2,
+  })
+
+  folder.addInput(materialProps.uniforms.u_WobbleFrequency, 'value', {
+    label: 'Wobble Frequency',
+    min: 1,
+    max: 30,
+  })
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera
+      :position="[0, 2, 4]"
+      :look-at="[0, 0, 0]"
+    />
+
+    <OrbitControls />
+
+    <TresMesh>
+      <TresTorusKnotGeometry :args="[1, 0.3, 512, 32]" />
+      <CustomShaderMaterial v-bind="materialProps" />
+    </TresMesh>
+  </TresCanvas>
+
+  <div class="debug-container" />
+</template>
+
+<style scoped>
+.debug-container {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+}
+</style>
diff --git a/docs/guide/materials/custom-shader-material.md b/docs/guide/materials/custom-shader-material.md
new file mode 100644
index 00000000..39d7ef69
--- /dev/null
+++ b/docs/guide/materials/custom-shader-material.md
@@ -0,0 +1,15 @@
+# TresCustomShaderMaterial <Badge type="warning" text="^3.6.0" />
+
+<DocsDemo>
+  <CustomShaderMaterialDemo />
+</DocsDemo>
+
+The `cientos` package provides a new `<TresCustomShaderMaterial />` component which is a wrapper around the [`three-custom-shader-material`](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial) class. As states in the repo, it _"lets you extend Three.js' material library with your own Vertex and Fragment shaders"_.
+
+## Usage
+
+<<< @/.vitepress/theme/components/CustomShaderMaterialDemo.vue{4,9,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,59,60,99}
+
+## Props
+
+Being a wrapper around the `CustomShaderMaterial` class, the `<TresCustomShaderMaterial />` component accepts all the props that the class does. You can find the full list of props in the [official repo](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial).
diff --git a/package.json b/package.json
index 2cef6af6..3c9f9537 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "camera-controls": "^2.7.2",
     "stats-gl": "^1.0.5",
     "stats.js": "^0.17.0",
+    "three-custom-shader-material": "^5.4.0",
     "three-stdlib": "^2.27.3"
   },
   "devDependencies": {
diff --git a/playground/public/matcap_01.png b/playground/public/matcap_01.png
new file mode 100644
index 00000000..19fd69fc
Binary files /dev/null and b/playground/public/matcap_01.png differ
diff --git a/playground/src/pages/materials/CustomShaderMaterialDemo.vue b/playground/src/pages/materials/CustomShaderMaterialDemo.vue
new file mode 100644
index 00000000..fbd57189
--- /dev/null
+++ b/playground/src/pages/materials/CustomShaderMaterialDemo.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { TresCanvas, useRenderLoop, useTexture } from '@tresjs/core'
+import {
+  CustomShaderMaterial,
+  StatsGl,
+  useTweakPane,
+  OrbitControls,
+} from '@tresjs/cientos'
+
+import { MeshMatcapMaterial } from 'three'
+import { onMounted, nextTick } from 'vue'
+
+const { onLoop } = useRenderLoop()
+
+const gl = {
+  clearColor: '#82DBC5',
+}
+
+const texture01 = await useTexture({
+  matcap: '/matcap_01.png',
+})
+
+const materialProps = {
+  baseMaterial: MeshMatcapMaterial,
+  matcap: texture01.matcap,
+  fragmentShader: `
+    varying float vWobble;
+
+    uniform float u_Time;
+
+    void main() {
+      float wobble = vWobble * 0.5 + 0.5;
+      vec4 csm_DiffuseColor2 = mix(vec4(0.0, 0.0, 0.0, 1.0), vec4(1.0, 0.0, 2.0, 1.0), wobble);
+      csm_DiffuseColor = mix(csm_DiffuseColor, csm_DiffuseColor2, wobble);
+    }
+  `,
+  vertexShader: `
+    uniform float u_Time;
+    uniform float u_WobbleSpeed;
+    uniform float u_WobbleAmplitude;
+    uniform float u_WobbleFrequency;
+
+    varying float vWobble;
+
+    void main() {
+      float wobble = sin(csm_Position.z * u_WobbleFrequency + u_Time * u_WobbleSpeed);
+      csm_Position += normal * wobble * u_WobbleAmplitude;
+
+      vWobble = wobble;
+    }
+  `,
+  uniforms: {
+    u_Time: { value: 0 },
+    u_WobbleSpeed: { value: 3 },
+    u_WobbleAmplitude: { value: 0.07 },
+    u_WobbleFrequency: { value: 3 },
+  },
+}
+
+onMounted(async () => {
+  await nextTick()
+
+  createDebugPanel()
+
+  onLoop(() => {
+    materialProps.uniforms.u_Time.value
+			+= 0.01 * materialProps.uniforms.u_WobbleSpeed.value
+  })
+})
+
+function createDebugPanel() {
+  const { pane } = useTweakPane()
+
+  const folder = pane.addFolder({
+    title: 'Settings',
+  })
+
+  folder.addInput(materialProps.uniforms.u_WobbleSpeed, 'value', {
+    label: 'Wobble Speed',
+    min: 0,
+    max: 10,
+  })
+
+  folder.addInput(materialProps.uniforms.u_WobbleAmplitude, 'value', {
+    label: 'Wobble Amplitude',
+    min: 0,
+    max: 0.2,
+  })
+
+  folder.addInput(materialProps.uniforms.u_WobbleFrequency, 'value', {
+    label: 'Wobble Frequency',
+    min: 1,
+    max: 30,
+  })
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera
+      :position="[0, 2, 4]"
+      :look-at="[0, 0, 0]"
+    />
+
+    <OrbitControls />
+
+    <TresMesh>
+      <TresTorusKnotGeometry :args="[1, 0.3, 512, 32]" />
+      <CustomShaderMaterial v-bind="materialProps" />
+    </TresMesh>
+
+    <Suspense>
+      <StatsGl />
+    </Suspense>
+  </TresCanvas>
+</template>
diff --git a/playground/src/router/routes/materials.ts b/playground/src/router/routes/materials.ts
index c2a4eb92..12c5f78c 100644
--- a/playground/src/router/routes/materials.ts
+++ b/playground/src/router/routes/materials.ts
@@ -9,4 +9,9 @@ export const materialsRoutes = [
     name: 'GlassMaterial',
     component: () => import('../../pages/materials/GlassMaterialDemo.vue'),
   },
-]
\ No newline at end of file
+  {
+    path: '/materials/custom-shader-material',
+    name: 'CustomShaderMaterial',
+    component: () => import('../../pages/materials/CustomShaderMaterialDemo.vue'),
+  },
+]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c423d782..41d4aa90 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       stats.js:
         specifier: ^0.17.0
         version: 0.17.0
+      three-custom-shader-material:
+        specifier: ^5.4.0
+        version: 5.4.0(three@0.157.0)
       three-stdlib:
         specifier: ^2.27.3
         version: 2.27.3(three@0.157.0)
@@ -2572,6 +2575,10 @@ packages:
       meow: 12.1.1
     dev: true
 
+  /core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+    dev: false
+
   /cosmiconfig@8.3.6(typescript@5.2.2):
     resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
     engines: {node: '>=14'}
@@ -3736,6 +3743,20 @@ packages:
       slash: 4.0.0
     dev: true
 
+  /glsl-token-functions@1.0.1:
+    resolution: {integrity: sha512-EigGhp1g+aUVeUNY7H1o5tL/bnwIB3/FcRREPr2E7Du+/UDXN24hDkaZ3e4aWHDjHr9lJ6YHXMISkwhUYg9UOg==}
+    dev: false
+
+  /glsl-token-string@1.0.1:
+    resolution: {integrity: sha512-1mtQ47Uxd47wrovl+T6RshKGkRRCYWhnELmkEcUAPALWGTFe2XZpH3r45XAwL2B6v+l0KNsCnoaZCSnhzKEksg==}
+    dev: false
+
+  /glsl-tokenizer@2.1.5:
+    resolution: {integrity: sha512-XSZEJ/i4dmz3Pmbnpsy3cKh7cotvFlBiZnDOwnj/05EwNp2XrhQ4XKJxT7/pDt4kp4YcpRSKz8eTV7S+mwV6MA==}
+    dependencies:
+      through2: 0.6.5
+    dev: false
+
   /gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies:
@@ -3981,7 +4002,6 @@ packages:
 
   /inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-    dev: true
 
   /ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
@@ -4317,6 +4337,10 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /isarray@0.0.1:
+    resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
+    dev: false
+
   /isarray@2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
     dev: true
@@ -4836,6 +4860,11 @@ packages:
       boolbase: 1.0.0
     dev: true
 
+  /object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+    dev: false
+
   /object-inspect@1.13.0:
     resolution: {integrity: sha512-HQ4J+ic8hKrgIt3mqk6cVOVrW2ozL4KdvHlqpBv9vDYWx9ysAgENAdvy4FoGF+KFdhR7nQTNm5J0ctAeOwn+3g==}
     dev: true
@@ -5332,6 +5361,15 @@ packages:
       type-fest: 4.4.0
     dev: true
 
+  /readable-stream@1.0.34:
+    resolution: {integrity: sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==}
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 0.0.1
+      string_decoder: 0.10.31
+    dev: false
+
   /readable-stream@3.6.2:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
     engines: {node: '>= 6'}
@@ -5838,6 +5876,10 @@ packages:
       es-abstract: 1.22.2
     dev: true
 
+  /string_decoder@0.10.31:
+    resolution: {integrity: sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==}
+    dev: false
+
   /string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
     dependencies:
@@ -5941,6 +5983,25 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
+  /three-custom-shader-material@5.4.0(three@0.157.0):
+    resolution: {integrity: sha512-Yn1lFlKOk3Vul3npEGAmbbFUZ5S2+yjPgM2XqJEZEYRSUUH2vk+WVYrtTB6Bcq15wa7hLUXAKoctAvbRmBmbYA==}
+    peerDependencies:
+      '@react-three/fiber': '>=8.0'
+      react: '>=18.0'
+      three: '>=0.154'
+    peerDependenciesMeta:
+      '@react-three/fiber':
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      glsl-token-functions: 1.0.1
+      glsl-token-string: 1.0.1
+      glsl-tokenizer: 2.1.5
+      object-hash: 3.0.0
+      three: 0.157.0
+    dev: false
+
   /three-stdlib@2.27.3(three@0.157.0):
     resolution: {integrity: sha512-HA3LDEGnrbahOMGMk4HTfCClr/oKQnwvnvNR2gOMytvHg7nk8SIiABl/qgol2xDVp/Lf7MEbeq5ZjzjajuZxpw==}
     peerDependencies:
@@ -5958,6 +6019,13 @@ packages:
   /three@0.157.0:
     resolution: {integrity: sha512-CeAwQrf4x3z0/e+MC4F+nXLW5t0gh3pw+L6CCBqpHvOq3bGYIgRYub7Pv0j/9wR+d++OiEglyZzWyuSYbwWGOA==}
 
+  /through2@0.6.5:
+    resolution: {integrity: sha512-RkK/CCESdTKQZHdmKICijdKKsCRVHs5KsLZ6pACAmF/1GPUQhonHSXWNERctxEp7RmvjdNbZTL5z9V7nSCXKcg==}
+    dependencies:
+      readable-stream: 1.0.34
+      xtend: 4.0.2
+    dev: false
+
   /through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
     dev: true
@@ -6712,6 +6780,11 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+    dev: false
+
   /y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
diff --git a/src/core/materials/customShaderMaterial/index.vue b/src/core/materials/customShaderMaterial/index.vue
new file mode 100644
index 00000000..dd43268b
--- /dev/null
+++ b/src/core/materials/customShaderMaterial/index.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { useTresContext } from '@tresjs/core'
+
+import CustomShaderMaterial from 'three-custom-shader-material/vanilla'
+
+interface CustomShaderMaterialProps {
+  baseMaterial: Function
+  vertexShader?: string
+  fragmentShader?: string
+  silent?: boolean
+  uniforms?: { [uniform: string]: any }
+}
+
+const props = defineProps<CustomShaderMaterialProps>()
+
+const customShaderMaterialClass = shallowRef(null)
+
+const { extend } = useTresContext()
+extend({ CustomShaderMaterial })
+
+defineExpose({ value: customShaderMaterialClass })
+</script>
+
+<template>
+  <TresCustomShaderMaterial
+    ref="customShaderMaterialClass"
+    :args="[props]"
+  />
+</template>
diff --git a/src/core/materials/index.ts b/src/core/materials/index.ts
index ecabbc99..9a9fc728 100644
--- a/src/core/materials/index.ts
+++ b/src/core/materials/index.ts
@@ -1,4 +1,5 @@
 import MeshWobbleMaterial from './meshWobbleMaterial/index.vue'
 import MeshGlassMaterial from './meshGlassMaterial/index.vue'
+import CustomShaderMaterial from './customShaderMaterial/index.vue'
 
-export { MeshWobbleMaterial, MeshGlassMaterial }
+export { MeshWobbleMaterial, MeshGlassMaterial, CustomShaderMaterial }