diff --git a/docs/box.stories.tsx b/docs/box.stories.tsx
index d5e97de..74de785 100644
--- a/docs/box.stories.tsx
+++ b/docs/box.stories.tsx
@@ -7,19 +7,24 @@ export default {
   component: Box,
 };
 
-export const Basic = () => (
+/**
+ * 必须加 args 参数才能在 docs 中展示 codes，参考 https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
+ * @param args 
+ * @returns 
+ */
+export const Basic = (args: any) => (
   <Box as="button" bg="#FF0000" color="#FFFFFF" fontSize="14px" px="12px" py="4px" border="0" borderRadius="99px">
     Button
   </Box>
 );
 
-export const ButtonWithToken = () => (
+export const ButtonWithToken = (args: any) => (
   <Box as="button" bg="brand" color="white" fontSize="title" px="xl" py="m" border="0" borderRadius="99px">
     Button
   </Box>
 );
 
-export const BorderBox = () => (
+export const BorderBox = (args: any) => (
   <Box>
     <Box border="solid" borderColor="line.normal" borderWidth={2}>
       border box
@@ -31,7 +36,7 @@ export const BorderBox = () => (
   </Box>
 );
 
-export const As = () => (
+export const As = (args: any) => (
   <Box as="button" borderRadius="m" bg="brand" color="white" px="l">
     hello
   </Box>
@@ -43,4 +48,4 @@ const injectStyle = css`
   user-select: none;
 `;
 
-export const Custom = () => <Box css={injectStyle}>coral system</Box>;
+export const Custom = (args: any) => <Box css={injectStyle}>coral system</Box>;
diff --git a/docs/center.stories.tsx b/docs/center.stories.tsx
index ab5d3e7..70e22ea 100644
--- a/docs/center.stories.tsx
+++ b/docs/center.stories.tsx
@@ -6,13 +6,13 @@ export default {
   component: Center,
 };
 
-export const Baisc = () => (
+export const Baisc = (args: any) => (
   <Center bg="tomato" height="100px" color="white">
     This is the Center
   </Center>
 );
 
-export const WithIcon = () => (
+export const WithIcon = (args: any) => (
   <Center size="40px" bg="tomato" color="white">
     <Text as="span" fontWeight="bold" fontSize="title">
       1
@@ -20,7 +20,7 @@ export const WithIcon = () => (
   </Center>
 );
 
-export const Square = () => (
+export const Square = (args: any) => (
   <Center size="40px" bg="tomato" color="white" borderRadius="100%">
     <Text as="span" fontWeight="bold" fontSize="title">
       1
diff --git a/docs/flex.stories.tsx b/docs/flex.stories.tsx
index 9061c1b..c22beb2 100644
--- a/docs/flex.stories.tsx
+++ b/docs/flex.stories.tsx
@@ -8,7 +8,7 @@ export default {
   subcomponents: { FlexItem },
 };
 
-export const Basic = () => (
+export const Basic = (args: any) => (
   <Flex spacing="l" direction="row">
     <Box width="40px" height="40px" bg="brand" color="white">
       1
@@ -22,7 +22,7 @@ export const Basic = () => (
   </Flex>
 );
 
-export const VerticalStack = () => (
+export const VerticalStack = (args: any) => (
   <Flex spacing="l" direction="column">
     <Box width="40px" height="40px" bg="brand" color="white">
       1
@@ -45,7 +45,7 @@ const Example = styled.div`
   }
 `;
 
-export const EqualCols = () => (
+export const EqualCols = (args: any) => (
   <Example>
     <Flex>
       <FlexItem className="flex-item">1/3</FlexItem>
@@ -55,7 +55,7 @@ export const EqualCols = () => (
   </Example>
 );
 
-export const ColSpan = () => (
+export const ColSpan = (args: any) => (
   <Example>
     <Flex>
       <FlexItem span={1} className="flex-item">1/12</FlexItem>
@@ -66,7 +66,7 @@ export const ColSpan = () => (
   </Example>
 );
 
-export const AutoCol = () => (
+export const AutoCol = (args: any) => (
   <Example>
     <Flex>
       <FlexItem className="flex-item">item</FlexItem>
@@ -76,7 +76,7 @@ export const AutoCol = () => (
   </Example>
 );
 
-export const JustifyAndAlign = () => (
+export const JustifyAndAlign = (args: any) => (
   <Example>
     <Flex justify="space-around">
       <FlexItem span="auto" className="flex-item">一个居中的盒子</FlexItem>
diff --git a/docs/grid.stories.tsx b/docs/grid.stories.tsx
index c356aa2..b630297 100644
--- a/docs/grid.stories.tsx
+++ b/docs/grid.stories.tsx
@@ -10,7 +10,7 @@ export default {
 /**
  * 多列
  */
-export function Columns() {
+export function Columns(args: any) {
   return (
     <Grid columns={3} spacing="l">
       <Box bg="brand" height="80px" />
@@ -26,7 +26,7 @@ export function Columns() {
 /**
  * 自动响应式
  */
-export function AutoResponsive() {
+export function AutoResponsive(args: any) {
   return (
     <Grid minChildWidth="120px" spacing="l">
       <Box bg="brand" height="80px" />
@@ -42,7 +42,7 @@ export function AutoResponsive() {
 /**
  * 间距
  */
-export function Spacing() {
+export function Spacing(args: any) {
   return (
     <Grid columns={3} spacingX="m" spacingY="l">
       <Box bg="brand" height="80px" />
@@ -58,7 +58,7 @@ export function Spacing() {
 /**
  * 不同列宽
  */
-export function ColSpan() {
+export function ColSpan(args: any) {
   return (
     <Grid height="100px" templateColumns="repeat(12, 1fr)" spacing="4px">
       <GridItem colSpan={4} bg="brand" />
@@ -70,7 +70,7 @@ export function ColSpan() {
 /**
  * 自定义用法
  */
-export function Complex() {
+export function Complex(args: any) {
   return (
     <Grid height="200px" templateRows="repeat(2, 1fr)" templateColumns="repeat(5, 1fr)" spacing="m">
       <GridItem rowSpan={2} colSpan={1} bg="black" />
@@ -81,7 +81,7 @@ export function Complex() {
   );
 }
 
-export function StartEnd() {
+export function StartEnd(args: any) {
   return (
     <Grid templateColumns="repeat(5, 1fr)" spacing="m">
       <GridItem colSpan={2} height="40px" bg="tomato" />
diff --git a/docs/group.stories.tsx b/docs/group.stories.tsx
index 4db2daf..5582536 100644
--- a/docs/group.stories.tsx
+++ b/docs/group.stories.tsx
@@ -7,7 +7,7 @@ export default {
   component: Group,
 };
 
-export const Basic = () => (
+export const Basic = (args: any) => (
   <Group>
     <button>left</button>
     <button>center</button>
@@ -15,7 +15,7 @@ export const Basic = () => (
   </Group>
 );
 
-export const Attached = () => (
+export const Attached = (args: any) => (
   <Group attached>
     <button>left</button>
     <button>center</button>
@@ -23,7 +23,7 @@ export const Attached = () => (
   </Group>
 );
 
-export const More = () => (
+export const More = (args: any) => (
   <Group attached>
     <Box display="inline-block" border="solid" borderColor="#000">
       haha
@@ -38,7 +38,7 @@ const injectStyle = css`
   background-color: red;
 `;
 
-export const Custom = () => (
+export const Custom = (args: any) => (
   <Group css={injectStyle}>
     <button>left</button>
     <button>center</button>
diff --git a/docs/text.stories.tsx b/docs/text.stories.tsx
index 21cd9f0..4e48b0b 100644
--- a/docs/text.stories.tsx
+++ b/docs/text.stories.tsx
@@ -6,7 +6,7 @@ export default {
   component: Text,
 };
 
-export const Basic = () => (
+export const Basic = (args: any) => (
   <Flex spacing="l" direction="column">
     <Text fontSize="note">(note) In love with Hippo</Text>
     <Text fontSize="body" color="#FF0000">
@@ -19,7 +19,7 @@ export const Basic = () => (
   </Flex>
 );
 
-export const Truncate = () => (
+export const Truncate = (args: any) => (
   <Box width="600px" border="solid" borderColor="line.primary">
     <Text truncated>
       Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing
@@ -28,7 +28,7 @@ export const Truncate = () => (
   </Box>
 );
 
-export const LineClamp = () => (
+export const LineClamp = (args: any) => (
   <Box width="300px" p="l" border="solid" borderColor="line.primary">
     <Text lineClamp={2}>
       "The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the
@@ -37,7 +37,7 @@ export const LineClamp = () => (
   </Box>
 );
 
-export const As = () => (
+export const As = (args: any) => (
   <Box>
     <Text as="i">Italic</Text>
     <br />
diff --git a/docs/theme.stories.tsx b/docs/theme.stories.tsx
index f239493..4230ba5 100644
--- a/docs/theme.stories.tsx
+++ b/docs/theme.stories.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { Box, extendTheme, SystemProvider } from 'coral-system';
 
 export default {
-  title: 'Theme',
+  title: 'ThemeProvider',
+  component: SystemProvider,
 };
 
 const newTheme = extendTheme({
@@ -14,7 +15,7 @@ const newTheme = extendTheme({
   },
 });
 
-export const Basic = () => {
+export const Basic = (args: any) => {
   // 自定义颜色必须使用完整的路径
   return (
     <SystemProvider theme={newTheme}>