feat: add Card component

src/Card/demos/Grid.tsx

@@ -0,0 +1,19 @@
+import { Card } from '@yuntijs/ui';
+
+export default () => {
+  const content =
+    'The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution. ';
+  const gridStyle: React.CSSProperties = {
+    width: '50%',
+    textAlign: 'center',
+  };
+  return (
+    <Card title="YuntiUI Card.Grid">
+      <Card.Grid hoverable={false} style={gridStyle}>
+        {content}
+      </Card.Grid>
+      <Card.Grid style={gridStyle}>{content}</Card.Grid>
+      <Card.Grid style={gridStyle}>{content}</Card.Grid>
+    </Card>
+  );
+};

src/Card/demos/Meta.tsx

@@ -0,0 +1,12 @@
+import { Card, Logo } from '@yuntijs/ui';
+
+export default () => {
+  const description =
+    'The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution. ';
+
+  return (
+    <Card>
+      <Card.Meta avatar={<Logo />} description={description} title="YuntiUI Card.Meta" />
+    </Card>
+  );
+};

src/Card/demos/Playground.tsx

@@ -0,0 +1,32 @@
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+import type { CardProps } from '@yuntijs/ui';
+import { Card } from '@yuntijs/ui';
+
+export default () => {
+  const store = useCreateStore();
+  const control: CardProps | any = useControls(
+    {
+      title: 'YuntiUI Card',
+      extra: 'extra',
+      bordered: true,
+      loading: false,
+      hoverable: true,
+      children:
+        'The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.',
+      type: {
+        options: ['inner'],
+        value: 'default',
+      },
+      size: {
+        options: ['default', 'small'],
+        value: 'default',
+      },
+    },
+    { store }
+  );
+  return (
+    <StoryBook levaStore={store}>
+      <Card {...control} />
+    </StoryBook>
+  );
+};

src/Card/demos/Tab.tsx

@@ -0,0 +1,57 @@
+import { Card } from '@yuntijs/ui';
+import { useState } from 'react';
+
+export default () => {
+  const tabList = [
+    {
+      key: 'Themeable',
+      label: 'Themeable',
+    },
+    {
+      key: 'Fast',
+      label: 'Fast',
+    },
+    {
+      key: 'Light & Dark UI',
+      label: 'Light & Dark UI',
+    },
+  ];
+  const [activeTabKey, setActiveTabKey] = useState<string>(tabList[0].key);
+  const onTabChange = (key: string) => {
+    setActiveTabKey(key);
+  };
+  const contentList: Record<string, React.ReactNode> = {
+    'Themeable': (
+      <p>
+        Provides a simple way to customize default themes, you can change the colors, fonts,
+        breakpoints and everything you need.
+      </p>
+    ),
+    'Fast': (
+      <p>
+        voids unnecessary styles props at runtime, making it more performant than other UI
+        libraries.
+      </p>
+    ),
+    'Light & Dark UI': (
+      <p>
+        Automatic dark mode recognition, NextUI automatically changes the theme when detects HTML
+        theme prop changes.
+      </p>
+    ),
+  };
+  return (
+    <Card
+      activeTabKey={activeTabKey}
+      onTabChange={onTabChange}
+      style={{ width: '100%' }}
+      tabBarExtraContent={<a href="#">More</a>}
+      tabList={tabList}
+      tabProps={{
+        size: 'middle',
+      }}
+    >
+      {contentList[activeTabKey]}
+    </Card>
+  );
+};

src/Card/demos/index.tsx

@@ -0,0 +1,29 @@
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
+import { Card } from '@yuntijs/ui';
+
+export default () => {
+  return (
+    <Card
+      actions={[
+        <SettingOutlined key="setting" />,
+        <EditOutlined key="edit" />,
+        <EllipsisOutlined key="ellipsis" />,
+      ]}
+      bordered={true}
+      cover={
+        <img
+          alt="example"
+          src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
+        />
+      }
+      extra="extra"
+      hoverable={true}
+      loading={false}
+      title="YuntiUI Card"
+    >
+      The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully
+      compatible with Antd components, and it is recommended to use antd-style as the default
+      css-in-js styling solution.
+    </Card>
+  );
+};

src/Card/index.md

@@ -0,0 +1,51 @@
+---
+nav: Components
+group: Data Display
+title: Card
+description: A container for displaying information.
+---
+
+## Usage
+
+based on antd [Card](https://ant.design/components/card-cn/) component.
+
+### Simple usage
+
+```jsx | pure
+import { Card } from '@yuntijs/ui';
+
+export default () => {
+  return (
+    <Card
+      title= 'YuntiUI Card'
+      bordered={true}
+      loading={false}
+      hoverable={true}
+    >
+    The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.
+    </Children>
+  );
+};
+```
+
+<code src="./demos/index.tsx" center></code>
+
+### Card.Meta usage
+
+<code src="./demos/Meta.tsx" center></code>
+
+### Card.Grid usage
+
+<code src="./demos/Grid.tsx" center></code>
+
+### Card.Tab usage
+
+<code src="./demos/Tab.tsx" center></code>
+
+## Playground
+
+<code src="./demos/Playground.tsx" nopadding></code>
+
+## APIs
+
+<API></API>

src/Card/index.tsx

@@ -0,0 +1 @@
+export { Card, type CardProps } from 'antd';

src/index.ts

@@ -7,6 +7,7 @@ export * from './Tree';
 
 // ~ custom antd
 export * from './Alert';
+export * from './Card';
 
 // ~ antd
 export {
@@ -20,6 +21,20 @@ export {
   type AutoCompleteProps,
   Avatar,
   type AvatarProps,
+  BackTop,
+  type BackTopProps,
+  Badge, // @todo composed type
+  type BadgeProps,
+  Button, // @todo dependence unifiedLink. link type, hover primary color, back button
+  type ButtonProps,
+  Calendar,
+  type CalendarProps,
+  Carousel,
+  type CarouselProps,
+  Checkbox,
+  type CheckboxProps,
+  ColorPicker,
+  type ColorPickerProps,
 } from 'antd';
 
 // ~ antd-style