diff --git a/components/rua/loading/rua-loading.tsx b/components/rua/loading/rua-loading.tsx
index e4c2ff3..c8ed2f5 100644
--- a/components/rua/loading/rua-loading.tsx
+++ b/components/rua/loading/rua-loading.tsx
@@ -9,7 +9,7 @@ type Props = {
   className?: string;
 };
 
-const RuaLoading = ({ className: classNames }: Props) => {
+const RUALoading = ({ className: classNames }: Props) => {
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme;
 
@@ -34,4 +34,4 @@ const RuaLoading = ({ className: classNames }: Props) => {
   );
 };
 
-export default memo(RuaLoading);
+export default memo(RUALoading);
diff --git a/components/rua/rua-code-sandbox.tsx b/components/rua/rua-code-sandbox.tsx
index 5513457..818f644 100644
--- a/components/rua/rua-code-sandbox.tsx
+++ b/components/rua/rua-code-sandbox.tsx
@@ -15,7 +15,7 @@ type Props = {
   url: string;
 };
 
-const RuaCodeSandbox = ({ url }: Props) => {
+const RUACodeSandbox = ({ url }: Props) => {
   const isUrl = pattern.test(url);
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme ?? 'light';
@@ -64,4 +64,4 @@ const RuaCodeSandbox = ({ url }: Props) => {
   );
 };
 
-export default memo(RuaCodeSandbox);
+export default memo(RUACodeSandbox);
diff --git a/components/rua/rua-codepen.tsx b/components/rua/rua-codepen.tsx
index bb7c3ae..9ee4e01 100644
--- a/components/rua/rua-codepen.tsx
+++ b/components/rua/rua-codepen.tsx
@@ -14,7 +14,7 @@ type Props = {
   url: string;
 };
 
-const RuaCodepen = ({ defaultTab, url }: Props) => {
+const RUACodepen = ({ defaultTab, url }: Props) => {
   const urlArr = url.split('/');
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme ?? 'light';
@@ -80,4 +80,4 @@ const RuaCodepen = ({ defaultTab, url }: Props) => {
   );
 };
 
-export default memo(RuaCodepen);
+export default memo(RUACodepen);
diff --git a/components/rua/rua-pagination.tsx b/components/rua/rua-pagination.tsx
index 8b4c10d..9e03f79 100644
--- a/components/rua/rua-pagination.tsx
+++ b/components/rua/rua-pagination.tsx
@@ -13,7 +13,7 @@ type Props = {
   total?: number;
 } & DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
 
-const RuaPagination = ({
+const RUAPagination = ({
   hasPrev,
   hasNext,
   prevLink,
@@ -59,4 +59,4 @@ const RuaPagination = ({
   );
 };
 
-export default memo(RuaPagination);
+export default memo(RUAPagination);
diff --git a/components/rua/rua-sandpack.tsx b/components/rua/rua-sandpack.tsx
index e8d42ba..ea0e0ba 100644
--- a/components/rua/rua-sandpack.tsx
+++ b/components/rua/rua-sandpack.tsx
@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 interface Props extends SandpackProps {}
 
-const RuaSandpack = ({ ...rest }: Props) => {
+const RUASandpack = ({ ...rest }: Props) => {
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme;
 
@@ -20,4 +20,4 @@ const RuaSandpack = ({ ...rest }: Props) => {
   );
 };
 
-export default memo(RuaSandpack);
+export default memo(RUASandpack);
diff --git a/content/posts/build-own-store-with-usesyncexternalstore.mdx b/content/posts/build-own-store-with-usesyncexternalstore.mdx
index fa5d8f8..caf8826 100644
--- a/content/posts/build-own-store-with-usesyncexternalstore.mdx
+++ b/content/posts/build-own-store-with-usesyncexternalstore.mdx
@@ -142,7 +142,7 @@ const Couter = () => {
 };
 ```
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/Input.tsx': {
@@ -242,7 +242,7 @@ const Count = () => {
 };
 ```
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/Input.tsx': {
@@ -373,7 +373,7 @@ export const useTodoStore = (): [Todo, RUADispatch<TodoAction>] => [
 ];
 ```
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/Input.tsx': {
diff --git a/content/posts/generic-component-encapsulate-reusable-component.mdx b/content/posts/generic-component-encapsulate-reusable-component.mdx
index a5e99ca..4d06da7 100644
--- a/content/posts/generic-component-encapsulate-reusable-component.mdx
+++ b/content/posts/generic-component-encapsulate-reusable-component.mdx
@@ -22,7 +22,7 @@ tags: [TypeScript, React]
 
 React Hook Forms 对 TypeScript 支持良好，有了 TypeScript 我们就可以在开发时验证表单类型。而表单的数据类型也是后续封装通用组件较为繁琐的一个地方。
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/App.tsx':
@@ -207,7 +207,7 @@ const sayIt = <T extends number | string>(p: Person<T>) => {
 
 来看一个简单的小组件，该组件可以以一个常见的对象类型 `Record<string, unknown>` 来根据指定的 key 访问其值，并展示在 DOM 上。
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/App.tsx':
@@ -354,4 +354,4 @@ const Input = <T extends Record<string, unknown>>({
 />
 ```
 
-<RuaCodeSandbox url="https://codesandbox.io/s/reusable-input-o7e4jt?file=/src/App.tsx" />
+<RUACodeSandbox url="https://codesandbox.io/s/reusable-input-o7e4jt?file=/src/App.tsx" />
diff --git a/content/posts/hello-world.mdx b/content/posts/hello-world.mdx
index 05663e7..9de283f 100644
--- a/content/posts/hello-world.mdx
+++ b/content/posts/hello-world.mdx
@@ -14,7 +14,7 @@ console.log('Hello world');
 
 ## Say hello to world
 
-<RuaSandpack
+<RUASandpack
   template="react"
   files={{
     '/App.js': sandpack['hello-world'].hello,
diff --git a/content/posts/how-to-load-a-background-with-threejs.mdx b/content/posts/how-to-load-a-background-with-threejs.mdx
index c5f1603..0fe4ac6 100644
--- a/content/posts/how-to-load-a-background-with-threejs.mdx
+++ b/content/posts/how-to-load-a-background-with-threejs.mdx
@@ -45,7 +45,7 @@ renderer.render(scene, camera);
 
 Now, we can get a black canvas in our document.
 
-<RuaSandpack
+<RUASandpack
   template="react"
   files={{
     '/App.js': sandpack['how-to-load-a-background-with-threejs'].firstScene,
@@ -125,7 +125,7 @@ controls.enablePan = false;
 controls.update();
 ```
 
-<RuaSandpack
+<RUASandpack
   template="react"
   files={{
     '/App.js': sandpack['how-to-load-a-background-with-threejs'].loadBackground,
diff --git a/content/posts/javascript-practice-multiplication-table.mdx b/content/posts/javascript-practice-multiplication-table.mdx
index 4dc92e5..32b5f97 100644
--- a/content/posts/javascript-practice-multiplication-table.mdx
+++ b/content/posts/javascript-practice-multiplication-table.mdx
@@ -291,4 +291,4 @@ window.onload = function () {
 };
 ```
 
-<RuaCodepen url="https://codepen.io/Defectink/pen/BaLQZZQ" />
+<RUACodepen url="https://codepen.io/Defectink/pen/BaLQZZQ" />
diff --git a/content/posts/object-around-in-threejs.mdx b/content/posts/object-around-in-threejs.mdx
index bd1a381..36526e1 100644
--- a/content/posts/object-around-in-threejs.mdx
+++ b/content/posts/object-around-in-threejs.mdx
@@ -87,4 +87,4 @@ earth.getWorldPosition(position);
 
 ## Demo
 
-<RuaCodeSandbox url="https://codesandbox.io/s/arounding-box-b1g4qq" />
+<RUACodeSandbox url="https://codesandbox.io/s/arounding-box-b1g4qq" />
diff --git a/content/posts/react18-new-hooks.mdx b/content/posts/react18-new-hooks.mdx
index 2086031..559407a 100644
--- a/content/posts/react18-new-hooks.mdx
+++ b/content/posts/react18-new-hooks.mdx
@@ -26,7 +26,7 @@ tags: [React, TypeScript]
 
 `useTransition` 返回的元组中包含两个值 `[pending, setTransiton]` ，分别是 `setTransiton` 方法和表示正在过渡的状态 `pending` 。如果需要在过渡时展示特定的 UI 就可以使用 `pending` 来控制状态。
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/Button.tsx': {
@@ -45,7 +45,7 @@ tags: [React, TypeScript]
 
 将原本的状态值 `value` 与 `useDeferredValue` 返回的副本相比较就会发现 `value` 会随着 UI 一起被更新，而被延迟的状态 `deferred` 会等待 UI 更新结束后再做更新。
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/Button.tsx': {
@@ -65,7 +65,7 @@ tags: [React, TypeScript]
 - 为页面中需要唯一 ID 元素提供 ID，例如 `<label for="ID">` 。
 - SSR 到客户端注入时需要 ID 避免错误。
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/Input.tsx': {
@@ -147,7 +147,7 @@ export default store;
 
 其中， `listeners` 用于存放 `subscribe` 的回调，在我们更新状态后需要通知 React 来更新组件。所以在 `setState` 中遍历执行。之所以使用 `Set()` 是因为 `subscribe` 还需要返回一个函数用于注销 `listener` 。
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/Input.tsx': {
@@ -171,7 +171,7 @@ CSS-in-JS 库通常需要在运行时插入或修改 `<style>`  标签等。当
 
 解决这个问题的最好办法就是所有东西呈现给浏览器绘制前就进行改变。没错 `useInsertionEffect` 与 `useEffect` 有着同样的签名，但它会同步的在所有 DOM 更改之前触发。比 `useLayoutEffect` 还要早触发，这样就可以用于在重绘之前注入样式。
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/App.tsx': sandpack['react18-new-hooks'].useInsertionEffect,