= {
+ 'Themeable': (
+
+ Provides a simple way to customize default themes, you can change the colors, fonts,
+ breakpoints and everything you need.
+
+ ),
+ 'Fast': (
+
+ voids unnecessary styles props at runtime, making it more performant than other UI
+ libraries.
+
+ ),
+ 'Light & Dark UI': (
+
+ Automatic dark mode recognition, NextUI automatically changes the theme when detects HTML
+ theme prop changes.
+
+ ),
+ };
+ return (
+ More}
+ tabList={tabList}
+ tabProps={{
+ size: 'middle',
+ }}
+ >
+ {contentList[activeTabKey]}
+
+ );
+};
diff --git a/src/Card/demos/index.tsx b/src/Card/demos/index.tsx
new file mode 100644
index 0000000..b2624e3
--- /dev/null
+++ b/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 (
+ ,
+ ,
+ ,
+ ]}
+ bordered={true}
+ cover={
+
+ }
+ 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.
+
+ );
+};
diff --git a/src/Card/index.md b/src/Card/index.md
new file mode 100644
index 0000000..623d7ad
--- /dev/null
+++ b/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 (
+
+ 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.Meta usage
+
+
+
+### Card.Grid usage
+
+
+
+### Card.Tab usage
+
+
+
+## Playground
+
+
+
+## APIs
+
+
diff --git a/src/Card/index.tsx b/src/Card/index.tsx
new file mode 100644
index 0000000..f850ff7
--- /dev/null
+++ b/src/Card/index.tsx
@@ -0,0 +1,27 @@
+import { Card as AntdCard, type CardProps as AntdCardProps } from 'antd';
+import { FullToken } from 'antd-style';
+import React from 'react';
+
+import { useStyles } from './style';
+
+export interface CustomCardProps {
+ backgroundToken?: keyof FullToken;
+}
+export interface CardProps extends AntdCardProps, CustomCardProps {}
+
+type ComposedCardProps = React.FC & {
+ Grid: typeof AntdCard.Grid;
+ Meta: typeof AntdCard.Meta;
+};
+
+export const Card: ComposedCardProps = props => {
+ const { className, backgroundToken, ...otherProps } = props;
+
+ const { styles, cx } = useStyles({ backgroundToken });
+ return ;
+};
+
+Card.Grid = AntdCard.Grid;
+Card.Meta = AntdCard.Meta;
+
+export default Card;
diff --git a/src/Card/style.ts b/src/Card/style.ts
new file mode 100644
index 0000000..3ffe651
--- /dev/null
+++ b/src/Card/style.ts
@@ -0,0 +1,16 @@
+import { createStyles } from 'antd-style';
+
+import { CustomCardProps } from './index';
+
+export const useStyles = createStyles(
+ ({ css, token }, { backgroundToken }: CustomCardProps) => {
+ return {
+ custom:
+ backgroundToken &&
+ css`
+ background-color: ${token[backgroundToken]} !important;
+ `,
+ };
+ },
+ { hashPriority: 'low' }
+);
diff --git a/src/index.ts b/src/index.ts
index e3f8a4e..93e0e78 100644
--- a/src/index.ts
+++ b/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