diff --git a/plasmicpkgs/antd5/src/registerSkeleton.tsx b/plasmicpkgs/antd5/src/registerSkeleton.tsx
new file mode 100644
index 00000000000..264eb9062a5
--- /dev/null
+++ b/plasmicpkgs/antd5/src/registerSkeleton.tsx
@@ -0,0 +1,216 @@
+import { Skeleton, SkeletonProps } from "antd";
+import React from "react";
+import { Registerable, registerComponentHelper } from "./utils";
+
+export type AntdSkeletonProps = SkeletonProps & {
+ type?: 'Basic' | 'Button' | 'Avatar' | 'Input' | 'Image' | 'Node'
+ width?: string | number | (string | number)[]
+ widthTitle?: string
+ rows?: number
+ shape?: 'circle' | 'square'
+ size?: 'large' | 'small' | 'default'
+ customClassName?: string
+}
+
+export function AntdSkeleton(props: AntdSkeletonProps) {
+ const {
+ type,
+ paragraph,
+ avatar,
+ title,
+ shape,
+ size,
+ loading,
+ width,
+ widthTitle,
+ rows,
+ className: rootClassName,
+ customClassName,
+ children,
+ } = props
+
+ if (type === 'Button') {
+ return loading ? (
+
+ ) : (
+ children
+ )
+ }
+
+ if (type === 'Avatar') {
+ return loading ? (
+
+ ) : (
+ children
+ )
+ }
+
+ if (type === 'Input') {
+ return loading ? (
+
+ ) : (
+ children
+ )
+ }
+
+ if (type === 'Image') {
+ return loading ? (
+
+ ) : (
+ children
+ )
+ }
+
+ if (type === 'Node') {
+ return (
+
+ )
+ }
+
+ return (
+
+ )
+}
+
+export const skeletonComponentName = "plasmic-antd5-skeleton";
+
+export function registerSkeleton(loader?: Registerable) {
+ registerComponentHelper(loader, AntdSkeleton, {
+ name: skeletonComponentName,
+ displayName: 'Skeleton',
+ props: {
+ children: 'slot',
+ type: {
+ type: 'choice',
+ defaultValue: 'Basic',
+ options: ['Basic', 'Button', 'Avatar', 'Input', 'Image', 'Node'],
+ },
+ active: {
+ type: 'boolean',
+ description: 'Show animation effect',
+ defaultValue: false,
+ },
+ avatar: {
+ type: 'boolean',
+ description: 'Show avatar placeholder',
+ hidden: (ps) => ps.type !== 'Basic',
+ defaultValue: false,
+ },
+ loading: {
+ type: 'boolean',
+ description: 'Display the skeleton when true',
+ defaultValue: false,
+ },
+ paragraph: {
+ type: 'boolean',
+ description: 'Show paragraph placeholder',
+ hidden: (ps) => ps.type !== 'Basic',
+ defaultValue: true,
+ },
+ round: {
+ type: 'boolean',
+ description: 'Show paragraph and title radius when true',
+ hidden: (ps) => ps.type !== 'Basic',
+ defaultValue: false,
+ },
+ title: {
+ type: 'boolean',
+ description: 'Show title placeholder',
+ hidden: (ps) => ps.type !== 'Basic',
+ defaultValue: true,
+ },
+ size: {
+ type: 'choice',
+ defaultValue: 'default',
+ description: `Size of the skeleton for types: Avatar, Button and Input`,
+ hidden: (ps) =>
+ ps.type !== 'Avatar' &&
+ ps.type !== 'Button' &&
+ ps.type !== 'Input' &&
+ ps.avatar !== true,
+ advanced: true,
+ options: ['large', 'small', 'default'],
+ },
+ // SkeletonAvatarProps
+ shape: {
+ type: 'choice',
+ defaultValue: 'circle',
+ description: `Set the shape of avatar`,
+ hidden: (ps) => ps.type !== 'Avatar' && ps.avatar !== true,
+ advanced: true,
+ options: ['circle', 'square'],
+ },
+ // SkeletonTitleProps
+ widthTitle: {
+ type: 'string',
+ description: 'Width of the title',
+ hidden: (ps) => !ps.title,
+ advanced: true,
+ },
+ // SkeletonParagraphProps
+ width: {
+ type: 'array',
+ description:
+ 'Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width',
+ hidden: (ps) => !ps.paragraph && ps.type !== 'Basic',
+ advanced: true,
+ },
+ rows: {
+ type: 'number',
+ description: 'Set the row count of paragraph',
+ hidden: (ps) => !ps.paragraph && ps.type !== 'Basic',
+ advanced: true,
+ },
+ // SkeletonButtonProps
+ shapeButton: {
+ type: 'choice',
+ defaultValue: 'default',
+ description: `Set the shape of button`,
+ hidden: (ps) => ps.type !== 'Button',
+ advanced: true,
+ options: ['default', 'circle', 'round', 'square'],
+ },
+ block: {
+ type: 'boolean',
+ description: 'Option to fit button width to its parent width',
+ hidden: (ps) => ps.type !== 'Button' && ps.type !== 'Input',
+ defaultValue: false,
+ advanced: true,
+ },
+ customClassName: {
+ type: 'string',
+ displayName: 'Class Name',
+ description: 'Custom class name for Node skeleton for custom styling',
+ },
+ },
+ importPath: "@plasmicpkgs/antd5/skinny/registerSkeleton",
+ importName: "AntdSkeleton",
+ });
+}