diff --git a/CHANGELOG.md b/CHANGELOG.md
index 03fc9149f6bec..9670b7cf0156a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.21.5](https://github.com/lobehub/lobe-chat/compare/v1.21.4...v1.21.5)
+
+<sup>Released on **2024-10-05**</sup>
+
+#### 💄 Styles
+
+- **misc**: Support shadcn in Artifacts.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Support shadcn in Artifacts, closes [#4256](https://github.com/lobehub/lobe-chat/issues/4256) ([863bae5](https://github.com/lobehub/lobe-chat/commit/863bae5))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.21.4](https://github.com/lobehub/lobe-chat/compare/v1.21.3...v1.21.4)
 
 <sup>Released on **2024-10-02**</sup>
diff --git a/package.json b/package.json
index ac28cad363a44..c9ead72dc379d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.21.4",
+  "version": "1.21.5",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
diff --git a/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React.tsx b/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React.tsx
deleted file mode 100644
index 64f0bf6df1b95..0000000000000
--- a/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { SandpackLayout, SandpackPreview, SandpackProvider } from '@codesandbox/sandpack-react';
-import { memo } from 'react';
-
-interface ReactRendererProps {
-  code: string;
-}
-const ReactRenderer = memo<ReactRendererProps>(({ code }) => {
-  return (
-    <SandpackProvider
-      customSetup={{
-        dependencies: {
-          antd: 'latest',
-          recharts: 'latest',
-        },
-      }}
-      files={{
-        'App.js': code,
-      }}
-      options={{ externalResources: ['https://cdn.tailwindcss.com'] }}
-      style={{ height: '100%' }}
-      template="react"
-      theme="auto"
-    >
-      <SandpackLayout style={{ height: '100%' }}>
-        <SandpackPreview style={{ height: '100%' }} />
-      </SandpackLayout>
-    </SandpackProvider>
-  );
-});
-
-export default ReactRenderer;
diff --git a/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React/index.tsx b/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React/index.tsx
new file mode 100644
index 0000000000000..4c6a5d0709145
--- /dev/null
+++ b/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React/index.tsx
@@ -0,0 +1,51 @@
+import { SandpackLayout, SandpackPreview, SandpackProvider } from '@codesandbox/sandpack-react';
+import { memo } from 'react';
+
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/selectors';
+
+import { createTemplateFiles } from './template';
+
+interface ReactRendererProps {
+  code: string;
+}
+
+const ReactRenderer = memo<ReactRendererProps>(({ code }) => {
+  const title = useChatStore(chatPortalSelectors.artifactTitle);
+
+  return (
+    <SandpackProvider
+      customSetup={{
+        dependencies: {
+          '@lshay/ui': 'latest',
+          '@radix-ui/react-alert-dialog': 'latest',
+          '@radix-ui/react-dialog': 'latest',
+          '@radix-ui/react-icons': 'latest',
+          'antd': 'latest',
+          'class-variance-authority': 'latest',
+          'clsx': 'latest',
+          'lucide-react': 'latest',
+          'recharts': 'latest',
+          'tailwind-merge': 'latest',
+        },
+      }}
+      files={{
+        'App.tsx': code,
+        ...createTemplateFiles({ title }),
+      }}
+      options={{
+        externalResources: ['https://cdn.tailwindcss.com'],
+        visibleFiles: ['App.tsx'],
+      }}
+      style={{ height: '100%' }}
+      template="vite-react-ts"
+      theme="auto"
+    >
+      <SandpackLayout style={{ height: '100%' }}>
+        <SandpackPreview style={{ height: '100%' }} />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+});
+
+export default ReactRenderer;
diff --git a/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React/template.ts b/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React/template.ts
new file mode 100644
index 0000000000000..6aef8c74dbc93
--- /dev/null
+++ b/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React/template.ts
@@ -0,0 +1,32 @@
+interface TemplateFilesParams {
+  title?: string;
+}
+export const createTemplateFiles = ({ title }: TemplateFilesParams = {}) => ({
+  'index.html': `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${title || 'Artifacts App'}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>
+`,
+  'vite.config.ts': {
+    code: `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@/components/ui': '@lshay/ui/components/default',
+    },
+  },
+});`,
+  },
+});