diff --git a/build-tools/utils/pluralize.js b/build-tools/utils/pluralize.js
index 43d4a24493..a5699f4fb3 100644
--- a/build-tools/utils/pluralize.js
+++ b/build-tools/utils/pluralize.js
@@ -70,6 +70,7 @@ const pluralizationMap = {
   SegmentedControl: 'SegmentedControls',
   Select: 'Selects',
   SideNavigation: 'SideNavigations',
+  Skeleton: 'Skeletons',
   Slider: 'Sliders',
   SpaceBetween: 'SpaceBetweens',
   Spinner: 'Spinners',
diff --git a/pages/skeleton/components-examples.page.tsx b/pages/skeleton/components-examples.page.tsx
new file mode 100644
index 0000000000..4fe7c8ebd2
--- /dev/null
+++ b/pages/skeleton/components-examples.page.tsx
@@ -0,0 +1,325 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import Box from '~components/box';
+import Button from '~components/button';
+import Cards from '~components/cards';
+import Checkbox from '~components/checkbox';
+import ColumnLayout from '~components/column-layout';
+import Container from '~components/container';
+import Header from '~components/header';
+import KeyValuePairs from '~components/key-value-pairs';
+import Link from '~components/link';
+import List from '~components/list';
+import Skeleton from '~components/skeleton';
+import SpaceBetween from '~components/space-between';
+
+interface DataItem {
+  id: string;
+  name: string;
+  description: string;
+  status: string;
+  date: string;
+}
+
+const sampleData: DataItem[] = [
+  {
+    id: 'item-1',
+    name: 'Production Database',
+    description: 'Primary production database instance with automated backups and high availability configuration',
+    status: 'Active',
+    date: '2026-04-15',
+  },
+  {
+    id: 'item-2',
+    name: 'Development Environment',
+    description: 'Testing and development environment for new features',
+    status: 'Active',
+    date: '2026-04-14',
+  },
+  {
+    id: 'item-3',
+    name: 'Analytics Pipeline',
+    description: 'Data processing pipeline for analytics and reporting',
+    status: 'Pending',
+    date: '2026-04-13',
+  },
+  {
+    id: 'item-4',
+    name: 'Backup Server',
+    description: 'Secondary backup server for disaster recovery',
+    status: 'Active',
+    date: '2026-04-12',
+  },
+];
+
+export default function SkeletonComponentsExamples() {
+  const [isLoading, setIsLoading] = useState(true);
+
+  return (
+    <Box padding="l">
+      <div style={{ position: 'sticky', top: 0, zIndex: 1000, backgroundColor: 'white' }}>
+        <Container>
+          <SpaceBetween size="m">
+            <Header
+              variant="h2"
+              description="Demonstrates skeleton loading patterns across different components to minimize layout shift"
+            >
+              Skeleton Component Examples
+            </Header>
+            <Checkbox checked={isLoading} onChange={({ detail }) => setIsLoading(detail.checked)}>
+              Show loading state (Skeleton)
+            </Checkbox>
+          </SpaceBetween>
+        </Container>
+      </div>
+      <SpaceBetween size="l">
+        {/* Cards Example */}
+        <Container header={<Header variant="h2">Cards with Skeleton</Header>}>
+          <Cards
+            cardDefinition={{
+              header: item => (isLoading ? <Skeleton width="200px" /> : item.name),
+              sections: [
+                {
+                  id: 'description',
+                  header: 'Description',
+                  content: item => (isLoading ? <Skeleton /> : item.description),
+                },
+                {
+                  id: 'status',
+                  header: 'Status',
+                  content: item => (isLoading ? <Skeleton width="80px" /> : item.status),
+                  width: 50,
+                },
+                {
+                  id: 'date',
+                  header: 'Date',
+                  content: item => (isLoading ? <Skeleton width="100px" /> : item.date),
+                  width: 50,
+                },
+              ],
+            }}
+            items={isLoading ? Array(4).fill({}) : sampleData}
+            cardsPerRow={[{ cards: 1 }, { minWidth: 768, cards: 2 }]}
+          />
+        </Container>
+
+        {/* Key-Value Pairs Example */}
+        <Container header={<Header variant="h2">Key-Value Pairs with Skeleton</Header>}>
+          <KeyValuePairs
+            columns={2}
+            items={
+              isLoading
+                ? [
+                    {
+                      type: 'group',
+                      title: 'Resource Information',
+                      items: [
+                        {
+                          label: 'Resource ID',
+                          value: <Skeleton width="200px" />,
+                        },
+                        {
+                          label: 'Name',
+                          value: <Skeleton width="180px" />,
+                        },
+                        {
+                          label: 'Type',
+                          value: <Skeleton width="120px" />,
+                        },
+                        {
+                          label: 'Created',
+                          value: <Skeleton width="150px" />,
+                        },
+                      ],
+                    },
+                    {
+                      type: 'group',
+                      title: 'Configuration',
+                      items: [
+                        {
+                          label: 'Region',
+                          value: <Skeleton width="100px" />,
+                        },
+                        {
+                          label: 'Availability Zone',
+                          value: <Skeleton width="80px" />,
+                        },
+                        {
+                          label: 'Status',
+                          value: <Skeleton width="90px" />,
+                        },
+                        {
+                          label: 'Endpoint',
+                          value: <Skeleton width="250px" />,
+                        },
+                      ],
+                    },
+                  ]
+                : [
+                    {
+                      type: 'group',
+                      title: 'Resource Information',
+                      items: [
+                        {
+                          label: 'Resource ID',
+                          value: 'res-abc123def456',
+                        },
+                        {
+                          label: 'Name',
+                          value: 'Production Database',
+                        },
+                        {
+                          label: 'Type',
+                          value: 'RDS Instance',
+                        },
+                        {
+                          label: 'Created',
+                          value: 'April 15, 2026',
+                        },
+                      ],
+                    },
+                    {
+                      type: 'group',
+                      title: 'Configuration',
+                      items: [
+                        {
+                          label: 'Region',
+                          value: 'us-east-1',
+                        },
+                        {
+                          label: 'Availability Zone',
+                          value: 'us-east-1a',
+                        },
+                        {
+                          label: 'Status',
+                          value: 'Available',
+                        },
+                        {
+                          label: 'Endpoint',
+                          value: 'db.example.us-east-1.rds.amazonaws.com',
+                        },
+                      ],
+                    },
+                  ]
+            }
+          />
+        </Container>
+
+        {/* List Example */}
+        <Container header={<Header variant="h2">List with Skeleton</Header>}>
+          <List
+            items={
+              isLoading
+                ? Array(4)
+                    .fill(null)
+                    .map((_, i) => ({ id: `loading-${i + 1}` }) as DataItem)
+                : sampleData
+            }
+            renderItem={item =>
+              isLoading
+                ? {
+                    id: item.id,
+                    content: <Skeleton width="200px" />,
+                    secondaryContent: <Skeleton width="50%" variant="text-body-s" display="inline-block" />,
+                    actions: <Skeleton width="80px" variant="text-body-s" />,
+                  }
+                : {
+                    id: item.id,
+                    content: <Link fontSize="inherit">{item.name}</Link>,
+                    secondaryContent: <Box variant="small">{item.description}</Box>,
+                    actions: (
+                      <SpaceBetween size="xs" direction="horizontal" alignItems="center">
+                        <Box variant="small">{item.date}</Box>
+                        <Button variant="inline-icon" iconName="external" ariaLabel="Open" />
+                      </SpaceBetween>
+                    ),
+                  }
+            }
+          />
+        </Container>
+
+        {/* Container with Complex Layout */}
+        <Container
+          header={
+            isLoading ? (
+              <Header variant="h2" description={<Skeleton width="250px" />}>
+                <Skeleton width="200px" />
+              </Header>
+            ) : (
+              <Header variant="h2" description="Detailed resource information and metrics">
+                Resource Details
+              </Header>
+            )
+          }
+        >
+          <SpaceBetween size="l">
+            <ColumnLayout columns={3} variant="text-grid">
+              <div>
+                <Box variant="awsui-key-label">CPU Utilization</Box>
+                <Box fontSize="display-l">{isLoading ? <Skeleton width="80px" /> : '45%'}</Box>
+              </div>
+              <div>
+                <Box variant="awsui-key-label">Memory Usage</Box>
+                <Box fontSize="display-l">{isLoading ? <Skeleton width="80px" /> : '62%'}</Box>
+              </div>
+              <div>
+                <Box variant="awsui-key-label">Network I/O</Box>
+                <Box fontSize="display-l">{isLoading ? <Skeleton width="80px" /> : '1.2 GB/s'}</Box>
+              </div>
+            </ColumnLayout>
+
+            <Box variant="p">
+              {isLoading ? (
+                <Skeleton />
+              ) : (
+                <>
+                  This resource is operating within normal parameters. All health checks are passing and no issues have
+                  been detected. The current configuration supports up to 1000 concurrent connections with automatic
+                  scaling enabled.
+                </>
+              )}
+            </Box>
+          </SpaceBetween>
+        </Container>
+
+        {/* Text Content Skeleton */}
+        <Container header={<Header variant="h2">Text Content with Skeleton</Header>}>
+          <>
+            <Header variant="h3">{isLoading ? <Skeleton width="200px" /> : 'Getting Started'}</Header>
+            <Box variant="p">
+              {isLoading ? (
+                <>
+                  <Skeleton />
+                  <Skeleton width="88%" />
+                </>
+              ) : (
+                <>
+                  Welcome to the Skeleton component examples page. This page demonstrates how to use skeleton loading
+                  states effectively across different components in your application. Skeleton screens help reduce
+                  perceived loading time and minimize layout shift by showing placeholder content that matches the
+                  structure of your actual content.
+                </>
+              )}
+            </Box>
+            <Header variant="h3">{isLoading ? <Skeleton width="200px" /> : 'Best Practices'}</Header>
+            <Box variant="p">
+              {isLoading ? (
+                <>
+                  <Skeleton />
+                  <Skeleton width="88%" />
+                </>
+              ) : (
+                <>
+                  When implementing skeleton screens, ensure that the skeleton elements closely match the dimensions and
+                  layout of your actual content. This prevents jarring layout shifts when the real content loads.
+                </>
+              )}
+            </Box>
+          </>
+        </Container>
+      </SpaceBetween>
+    </Box>
+  );
+}
diff --git a/pages/skeleton/permutations.page.tsx b/pages/skeleton/permutations.page.tsx
new file mode 100644
index 0000000000..43215de5b9
--- /dev/null
+++ b/pages/skeleton/permutations.page.tsx
@@ -0,0 +1,38 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Skeleton, { SkeletonProps } from '~components/skeleton';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+
+const permutations = createPermutations<SkeletonProps>([
+  {
+    height: [undefined, '50px', '100px', '2em'],
+    width: [undefined, '100px', '200px', '50%', '100%'],
+  },
+  {
+    height: ['80px'],
+    width: ['300px'],
+  },
+]);
+
+export default function SkeletonPermutations() {
+  return (
+    <>
+      <h1>Skeleton permutations</h1>
+      <ScreenshotArea disableAnimations={true}>
+        <PermutationsView
+          permutations={permutations}
+          render={permutation => (
+            <div style={{ marginBottom: '16px' }}>
+              <Skeleton {...permutation} />
+            </div>
+          )}
+        />
+      </ScreenshotArea>
+    </>
+  );
+}
diff --git a/pages/skeleton/simple.page.tsx b/pages/skeleton/simple.page.tsx
new file mode 100644
index 0000000000..f0fc97dc44
--- /dev/null
+++ b/pages/skeleton/simple.page.tsx
@@ -0,0 +1,46 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Container from '~components/container';
+import Skeleton from '~components/skeleton';
+import SpaceBetween from '~components/space-between';
+
+export default function SkeletonSimple() {
+  return (
+    <article>
+      <h1>Skeleton demo page</h1>
+      <SpaceBetween size="l">
+        <Container header={<h2>Default skeleton</h2>}>
+          <SpaceBetween size="m">
+            <Skeleton />
+            <p>Default skeleton with no properties (100% width, 3em height)</p>
+          </SpaceBetween>
+        </Container>
+
+        <Container header={<h2>Custom dimensions</h2>}>
+          <SpaceBetween size="m">
+            <Skeleton height="50px" width="300px" />
+            <p>Fixed dimensions: 50px height, 300px width</p>
+          </SpaceBetween>
+        </Container>
+
+        <Container header={<h2>Percentage width</h2>}>
+          <SpaceBetween size="m">
+            <Skeleton height="60px" width="75%" />
+            <p>Responsive width: 75% of container</p>
+          </SpaceBetween>
+        </Container>
+
+        <Container header={<h2>Multiple skeletons (simulating content loading)</h2>}>
+          <SpaceBetween size="s">
+            <Skeleton height="24px" width="200px" />
+            <Skeleton height="16px" width="100%" />
+            <Skeleton height="16px" width="100%" />
+            <Skeleton height="16px" width="80%" />
+          </SpaceBetween>
+        </Container>
+      </SpaceBetween>
+    </article>
+  );
+}
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index df49bc3a94..0a73ff484c 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -42,6 +42,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-radius-item-card-default": "0px",
   "border-radius-item-card-embedded": "2px",
   "border-radius-popover": "2px",
+  "border-radius-skeleton": "8px",
   "border-radius-tabs-focus-ring": "0px",
   "border-radius-tiles": "2px",
   "border-radius-token": "2px",
@@ -158,6 +159,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-segment-disabled": "#ffffff",
   "color-background-segment-hover": "#fafafa",
   "color-background-segment-wrapper": "#ffffff",
+  "color-background-skeleton": "#eaeded",
+  "color-background-skeleton-wave": "#f6f6f9",
   "color-background-slider-handle-active": "#0a4a74",
   "color-background-slider-handle-default": "#0073bb",
   "color-background-slider-handle-error-active": "#d13212",
@@ -888,6 +891,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-radius-item-card-default": "0px",
   "border-radius-item-card-embedded": "2px",
   "border-radius-popover": "2px",
+  "border-radius-skeleton": "8px",
   "border-radius-tabs-focus-ring": "0px",
   "border-radius-tiles": "2px",
   "border-radius-token": "2px",
@@ -1004,6 +1008,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-segment-disabled": "#2a2e33",
   "color-background-segment-hover": "#21252c",
   "color-background-segment-wrapper": "#2a2e33",
+  "color-background-skeleton": "#2a2e33",
+  "color-background-skeleton-wave": "#414750",
   "color-background-slider-handle-active": "#44b9d6",
   "color-background-slider-handle-default": "#00a1c9",
   "color-background-slider-handle-error-active": "#ff5d64",
@@ -1734,6 +1740,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-radius-item-card-default": "0px",
   "border-radius-item-card-embedded": "2px",
   "border-radius-popover": "2px",
+  "border-radius-skeleton": "8px",
   "border-radius-tabs-focus-ring": "0px",
   "border-radius-tiles": "2px",
   "border-radius-token": "2px",
@@ -1850,6 +1857,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-segment-disabled": "#ffffff",
   "color-background-segment-hover": "#fafafa",
   "color-background-segment-wrapper": "#ffffff",
+  "color-background-skeleton": "#eaeded",
+  "color-background-skeleton-wave": "#f6f6f9",
   "color-background-slider-handle-active": "#0a4a74",
   "color-background-slider-handle-default": "#0073bb",
   "color-background-slider-handle-error-active": "#d13212",
@@ -2580,6 +2589,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-radius-item-card-default": "0px",
   "border-radius-item-card-embedded": "2px",
   "border-radius-popover": "2px",
+  "border-radius-skeleton": "8px",
   "border-radius-tabs-focus-ring": "0px",
   "border-radius-tiles": "2px",
   "border-radius-token": "2px",
@@ -2696,6 +2706,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-segment-disabled": "#ffffff",
   "color-background-segment-hover": "#fafafa",
   "color-background-segment-wrapper": "#ffffff",
+  "color-background-skeleton": "#eaeded",
+  "color-background-skeleton-wave": "#f6f6f9",
   "color-background-slider-handle-active": "#0a4a74",
   "color-background-slider-handle-default": "#0073bb",
   "color-background-slider-handle-error-active": "#d13212",
@@ -3426,6 +3438,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-radius-item-card-default": "16px",
   "border-radius-item-card-embedded": "8px",
   "border-radius-popover": "8px",
+  "border-radius-skeleton": "8px",
   "border-radius-tabs-focus-ring": "20px",
   "border-radius-tiles": "8px",
   "border-radius-token": "8px",
@@ -3542,6 +3555,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-segment-disabled": "#ffffff",
   "color-background-segment-hover": "#f0fbff",
   "color-background-segment-wrapper": "#ffffff",
+  "color-background-skeleton": "#ebebf0",
+  "color-background-skeleton-wave": "#f6f6f9",
   "color-background-slider-handle-active": "#004a9e",
   "color-background-slider-handle-default": "#006ce0",
   "color-background-slider-handle-error-active": "#db0000",
@@ -4272,6 +4287,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-item-card-default": "16px",
   "border-radius-item-card-embedded": "8px",
   "border-radius-popover": "8px",
+  "border-radius-skeleton": "8px",
   "border-radius-tabs-focus-ring": "20px",
   "border-radius-tiles": "8px",
   "border-radius-token": "8px",
@@ -4388,6 +4404,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-segment-disabled": "#ffffff",
   "color-background-segment-hover": "#f0fbff",
   "color-background-segment-wrapper": "#ffffff",
+  "color-background-skeleton": "#ebebf0",
+  "color-background-skeleton-wave": "#f6f6f9",
   "color-background-slider-handle-active": "#004a9e",
   "color-background-slider-handle-default": "#006ce0",
   "color-background-slider-handle-error-active": "#db0000",
@@ -5118,6 +5136,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-item-card-default": "16px",
   "border-radius-item-card-embedded": "8px",
   "border-radius-popover": "8px",
+  "border-radius-skeleton": "8px",
   "border-radius-tabs-focus-ring": "20px",
   "border-radius-tiles": "8px",
   "border-radius-token": "8px",
@@ -5234,6 +5253,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-segment-disabled": "#0f141a",
   "color-background-segment-hover": "#1b232d",
   "color-background-segment-wrapper": "#0f141a",
+  "color-background-skeleton": "#232b37",
+  "color-background-skeleton-wave": "#333843",
   "color-background-slider-handle-active": "#75cfff",
   "color-background-slider-handle-default": "#42b4ff",
   "color-background-slider-handle-error-active": "#ff7a7a",
@@ -5964,6 +5985,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-item-card-default": "16px",
   "border-radius-item-card-embedded": "8px",
   "border-radius-popover": "8px",
+  "border-radius-skeleton": "8px",
   "border-radius-tabs-focus-ring": "20px",
   "border-radius-tiles": "8px",
   "border-radius-token": "8px",
@@ -6080,6 +6102,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-segment-disabled": "#161d26",
   "color-background-segment-hover": "#1b232d",
   "color-background-segment-wrapper": "#161d26",
+  "color-background-skeleton": "#232b37",
+  "color-background-skeleton-wave": "#333843",
   "color-background-slider-handle-active": "#75cfff",
   "color-background-slider-handle-default": "#42b4ff",
   "color-background-slider-handle-error-active": "#ff7a7a",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 701351b97d..1adecc71b4 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -25703,6 +25703,90 @@ Object that represents an expandable group of links.
 }
 `;
 
+exports[`Components definition for skeleton matches the snapshot: skeleton 1`] = `
+{
+  "dashCaseName": "skeleton",
+  "events": [],
+  "functions": [],
+  "name": "Skeleton",
+  "properties": [
+    {
+      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
+      "description": "Adds the specified classes to the root element of the component.",
+      "name": "className",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "inlineType": {
+        "name": ""inline" | "block" | "inline-block"",
+        "type": "union",
+        "values": [
+          "inline",
+          "block",
+          "inline-block",
+        ],
+      },
+      "name": "display",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "Specifies the height of the skeleton. Accepts any valid CSS value (e.g. \`"100px"\`, \`"3em"\`).",
+      "name": "height",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
+use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
+use the \`id\` attribute, consider setting it on a parent element instead.",
+      "description": "Adds the specified ID to the root element of the component.",
+      "name": "id",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "Specifies the variant of the skeleton to match Box fontSize options.
+When undefined, skeleton matches surrounding font size.
+* \`text-body-s\` - Skeleton with height matching body-s line-height.
+* \`text-body-m\` - Skeleton with height matching body-m line-height.
+* \`text-heading-xs\` - Skeleton with height matching heading-xs line-height.
+* \`text-heading-s\` - Skeleton with height matching heading-s line-height.
+* \`text-heading-m\` - Skeleton with height matching heading-m line-height.
+* \`text-heading-l\` - Skeleton with height matching heading-l line-height.
+* \`text-heading-xl\` - Skeleton with height matching heading-xl line-height.
+* \`text-display-l\` - Skeleton with height matching display-l line-height.",
+      "inlineType": {
+        "name": ""text-body-s" | "text-body-m" | "text-heading-xs" | "text-heading-s" | "text-heading-m" | "text-heading-l" | "text-heading-xl" | "text-display-l"",
+        "type": "union",
+        "values": [
+          "text-body-s",
+          "text-body-m",
+          "text-heading-xs",
+          "text-heading-s",
+          "text-heading-m",
+          "text-heading-l",
+          "text-heading-xl",
+          "text-display-l",
+        ],
+      },
+      "name": "variant",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "Specifies the width of the skeleton. Accepts any valid CSS value (e.g. \`"200px"\`, \`"100%"\`).",
+      "name": "width",
+      "optional": true,
+      "type": "string",
+    },
+  ],
+  "regions": [],
+  "releaseStatus": "stable",
+}
+`;
+
 exports[`Components definition for slider matches the snapshot: slider 1`] = `
 {
   "dashCaseName": "slider",
@@ -43045,6 +43129,10 @@ Note: when used with collection-hooks the \`trackBy\` is set automatically from
       ],
       "name": "SideNavigationItemWrapper",
     },
+    {
+      "methods": [],
+      "name": "SkeletonWrapper",
+    },
     {
       "methods": [
         {
@@ -52177,6 +52265,10 @@ Note: when used with collection-hooks the \`trackBy\` is set automatically from
       ],
       "name": "SideNavigationItemWrapper",
     },
+    {
+      "methods": [],
+      "name": "SkeletonWrapper",
+    },
     {
       "methods": [
         {
diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
index f48b744660..aa7e3d9b0a 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
@@ -600,6 +600,9 @@ exports[`test-utils selectors 1`] = `
     "awsui_section-group_l0dv0",
     "awsui_section_l0dv0",
   ],
+  "skeleton": [
+    "awsui_root_1qq5l",
+  ],
   "slider": [
     "awsui_root_pcgz5",
     "awsui_thumb_pcgz5",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
index d98cd076ae..e67ba5edaa 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
@@ -77,6 +77,7 @@ import S3ResourceSelectorWrapper from './s3-resource-selector';
 import SegmentedControlWrapper from './segmented-control';
 import SelectWrapper from './select';
 import SideNavigationWrapper from './side-navigation';
+import SkeletonWrapper from './skeleton';
 import SliderWrapper from './slider';
 import SpaceBetweenWrapper from './space-between';
 import SpinnerWrapper from './spinner';
@@ -170,6 +171,7 @@ export { S3ResourceSelectorWrapper };
 export { SegmentedControlWrapper };
 export { SelectWrapper };
 export { SideNavigationWrapper };
+export { SkeletonWrapper };
 export { SliderWrapper };
 export { SpaceBetweenWrapper };
 export { SpinnerWrapper };
@@ -2101,6 +2103,34 @@ findAllSideNavigations(selector?: string): Array<SideNavigationWrapper>;
  * @returns {SideNavigationWrapper | null}
  */
 findClosestSideNavigation(): SideNavigationWrapper | null;
+/**
+ * Returns the wrapper of the first Skeleton that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Skeleton.
+ * If no matching Skeleton is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SkeletonWrapper | null}
+ */
+findSkeleton(selector?: string): SkeletonWrapper | null;
+
+/**
+ * Returns an array of Skeleton wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Skeletons inside the current wrapper.
+ * If no matching Skeleton is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<SkeletonWrapper>}
+ */
+findAllSkeletons(selector?: string): Array<SkeletonWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Skeleton for the current element,
+ * or the element itself if it is an instance of Skeleton.
+ * If no Skeleton is found, returns \`null\`.
+ *
+ * @returns {SkeletonWrapper | null}
+ */
+findClosestSkeleton(): SkeletonWrapper | null;
 /**
  * Returns the wrapper of the first Slider that matches the specified CSS selector.
  * If no CSS selector is specified, returns the wrapper of the first Slider.
@@ -3633,6 +3663,19 @@ ElementWrapper.prototype.findSideNavigation = function(selector) {
 ElementWrapper.prototype.findAllSideNavigations = function(selector) {
   return this.findAllComponents(SideNavigationWrapper, selector);
 };
+ElementWrapper.prototype.findSkeleton = function(selector) {
+  let rootSelector = \`.\${SkeletonWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SkeletonWrapper && SkeletonWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SkeletonWrapper.rootSelector}, .\${SkeletonWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SkeletonWrapper);
+};
+
+ElementWrapper.prototype.findAllSkeletons = function(selector) {
+  return this.findAllComponents(SkeletonWrapper, selector);
+};
 ElementWrapper.prototype.findSlider = function(selector) {
   let rootSelector = \`.\${SliderWrapper.rootSelector}\`;
   if("legacyRootSelector" in SliderWrapper && SliderWrapper.legacyRootSelector){
@@ -4273,6 +4316,11 @@ ElementWrapper.prototype.findClosestSideNavigation = function() {
   // https://github.com/microsoft/TypeScript/issues/29132
   return (this as any).findClosestComponent(SideNavigationWrapper);
 };
+ElementWrapper.prototype.findClosestSkeleton = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(SkeletonWrapper);
+};
 ElementWrapper.prototype.findClosestSlider = function() {
   // casting to 'any' is needed to avoid this issue with generics
   // https://github.com/microsoft/TypeScript/issues/29132
@@ -4475,6 +4523,7 @@ import S3ResourceSelectorWrapper from './s3-resource-selector';
 import SegmentedControlWrapper from './segmented-control';
 import SelectWrapper from './select';
 import SideNavigationWrapper from './side-navigation';
+import SkeletonWrapper from './skeleton';
 import SliderWrapper from './slider';
 import SpaceBetweenWrapper from './space-between';
 import SpinnerWrapper from './spinner';
@@ -4568,6 +4617,7 @@ export { S3ResourceSelectorWrapper };
 export { SegmentedControlWrapper };
 export { SelectWrapper };
 export { SideNavigationWrapper };
+export { SkeletonWrapper };
 export { SliderWrapper };
 export { SpaceBetweenWrapper };
 export { SpinnerWrapper };
@@ -5751,6 +5801,23 @@ findSideNavigation(selector?: string): SideNavigationWrapper;
  * @returns {MultiElementWrapper<SideNavigationWrapper>}
  */
 findAllSideNavigations(selector?: string): MultiElementWrapper<SideNavigationWrapper>;
+/**
+ * Returns a wrapper that matches the Skeletons with the specified CSS selector.
+ * If no CSS selector is specified, returns a wrapper that matches Skeletons.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SkeletonWrapper}
+ */
+findSkeleton(selector?: string): SkeletonWrapper;
+
+/**
+ * Returns a multi-element wrapper that matches Skeletons with the specified CSS selector.
+ * If no CSS selector is specified, returns a multi-element wrapper that matches Skeletons.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {MultiElementWrapper<SkeletonWrapper>}
+ */
+findAllSkeletons(selector?: string): MultiElementWrapper<SkeletonWrapper>;
 /**
  * Returns a wrapper that matches the Sliders with the specified CSS selector.
  * If no CSS selector is specified, returns a wrapper that matches Sliders.
@@ -7030,6 +7097,19 @@ ElementWrapper.prototype.findSideNavigation = function(selector) {
 ElementWrapper.prototype.findAllSideNavigations = function(selector) {
   return this.findAllComponents(SideNavigationWrapper, selector);
 };
+ElementWrapper.prototype.findSkeleton = function(selector) {
+  let rootSelector = \`.\${SkeletonWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SkeletonWrapper && SkeletonWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SkeletonWrapper.rootSelector}, .\${SkeletonWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SkeletonWrapper);
+};
+
+ElementWrapper.prototype.findAllSkeletons = function(selector) {
+  return this.findAllComponents(SkeletonWrapper, selector);
+};
 ElementWrapper.prototype.findSlider = function(selector) {
   let rootSelector = \`.\${SliderWrapper.rootSelector}\`;
   if("legacyRootSelector" in SliderWrapper && SliderWrapper.legacyRootSelector){
diff --git a/src/skeleton/__tests__/skeleton.test.tsx b/src/skeleton/__tests__/skeleton.test.tsx
new file mode 100644
index 0000000000..537b3ebacf
--- /dev/null
+++ b/src/skeleton/__tests__/skeleton.test.tsx
@@ -0,0 +1,42 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Skeleton from '../../../lib/components/skeleton';
+import createWrapper from '../../../lib/components/test-utils/dom';
+
+function renderSkeleton(props: React.ComponentProps<typeof Skeleton> = {}) {
+  const { container } = render(<Skeleton {...props} />);
+  return createWrapper(container).findSkeleton()!;
+}
+
+describe('Skeleton Component', () => {
+  it('renders with default props', () => {
+    const wrapper = renderSkeleton();
+    expect(wrapper.getElement()).toBeInTheDocument();
+    expect(wrapper.getElement().tagName).toBe('DIV');
+    expect(wrapper.getElement()).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('applies width prop', () => {
+    const wrapper = renderSkeleton({ width: '200px' });
+    expect(wrapper.getElement()).toHaveStyle({ inlineSize: '200px' });
+  });
+
+  it('applies height prop', () => {
+    const wrapper = renderSkeleton({ height: '100px' });
+    expect(wrapper.getElement()).toHaveStyle({ blockSize: '100px' });
+  });
+
+  it('applies both width and height', () => {
+    const wrapper = renderSkeleton({ width: '50%', height: '4em' });
+    expect(wrapper.getElement()).toHaveStyle({ inlineSize: '50%', blockSize: '4em' });
+  });
+
+  it('does not set inline dimensions when props are not provided', () => {
+    const wrapper = renderSkeleton();
+    expect(wrapper.getElement().style.inlineSize).toBe('');
+    expect(wrapper.getElement().style.blockSize).toBe('');
+  });
+});
diff --git a/src/skeleton/index.tsx b/src/skeleton/index.tsx
new file mode 100644
index 0000000000..f9284ff6f1
--- /dev/null
+++ b/src/skeleton/index.tsx
@@ -0,0 +1,18 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+'use client';
+import React from 'react';
+
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { SkeletonProps } from './interfaces';
+import InternalSkeleton from './internal';
+
+export { SkeletonProps };
+
+export default function Skeleton(props: SkeletonProps) {
+  const baseComponentProps = useBaseComponent('Skeleton');
+  return <InternalSkeleton {...props} {...baseComponentProps} />;
+}
+
+applyDisplayName(Skeleton, 'Skeleton');
diff --git a/src/skeleton/interfaces.ts b/src/skeleton/interfaces.ts
new file mode 100644
index 0000000000..e745e540ff
--- /dev/null
+++ b/src/skeleton/interfaces.ts
@@ -0,0 +1,51 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BaseComponentProps } from '../internal/base-component';
+
+export interface SkeletonProps extends BaseComponentProps {
+  /**
+   * Specifies the variant of the skeleton to match Box fontSize options.
+   * When undefined, skeleton matches surrounding font size.
+   * * `text-body-s` - Skeleton with height matching body-s line-height.
+   * * `text-body-m` - Skeleton with height matching body-m line-height.
+   * * `text-heading-xs` - Skeleton with height matching heading-xs line-height.
+   * * `text-heading-s` - Skeleton with height matching heading-s line-height.
+   * * `text-heading-m` - Skeleton with height matching heading-m line-height.
+   * * `text-heading-l` - Skeleton with height matching heading-l line-height.
+   * * `text-heading-xl` - Skeleton with height matching heading-xl line-height.
+   * * `text-display-l` - Skeleton with height matching display-l line-height.
+   */
+  variant?:
+    | 'text-body-s'
+    | 'text-body-m'
+    | 'text-heading-xs'
+    | 'text-heading-s'
+    | 'text-heading-m'
+    | 'text-heading-l'
+    | 'text-heading-xl'
+    | 'text-display-l';
+
+  /**
+   *
+   */
+  display?: 'block' | 'inline-block' | 'inline';
+
+  /**
+   * Specifies the height of the skeleton. Accepts any valid CSS value (e.g. `"100px"`, `"3em"`).
+   */
+  height?: string;
+
+  /**
+   * Specifies the width of the skeleton. Accepts any valid CSS value (e.g. `"200px"`, `"100%"`).
+   */
+  width?: string;
+}
+
+export namespace SkeletonProps {
+  export interface Style {
+    root?: {
+      background?: string;
+      borderRadius?: string;
+    };
+  }
+}
diff --git a/src/skeleton/internal.tsx b/src/skeleton/internal.tsx
new file mode 100644
index 0000000000..c9626daf29
--- /dev/null
+++ b/src/skeleton/internal.tsx
@@ -0,0 +1,45 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+
+import { getBaseProps } from '../internal/base-component';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { SkeletonProps } from './interfaces';
+
+import styles from './styles.css.js';
+
+interface InternalSkeletonProps extends SkeletonProps, InternalBaseComponentProps {}
+
+export default function InternalSkeleton({
+  variant,
+  height,
+  width,
+  display,
+  __internalRootRef,
+  ...props
+}: InternalSkeletonProps) {
+  const baseProps = getBaseProps(props);
+
+  const inlineStyle: React.CSSProperties = {
+    ...(height !== undefined && { blockSize: height }),
+    ...(width !== undefined && { inlineSize: width }),
+  };
+
+  return (
+    <div
+      {...baseProps}
+      className={clsx(
+        baseProps.className,
+        styles.root,
+        variant && styles[`variant-${variant}`],
+        display && styles[`display-${display}`]
+      )}
+      ref={__internalRootRef}
+      style={inlineStyle}
+      aria-hidden="true"
+    >
+      <div className={styles.inner} />
+    </div>
+  );
+}
diff --git a/src/skeleton/styles.scss b/src/skeleton/styles.scss
new file mode 100644
index 0000000000..c531d232b7
--- /dev/null
+++ b/src/skeleton/styles.scss
@@ -0,0 +1,121 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles' as styles;
+@use '../internal/styles/tokens' as awsui;
+
+@keyframes skeleton-wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes skeleton-wave-rtl {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+$skeleton-wave-duration: 1.25s;
+$skeleton-wave-easing: ease-in-out;
+
+.root {
+  inline-size: 100%;
+
+  > .inner {
+    block-size: 1em;
+    inline-size: 100%;
+    vertical-align: middle;
+
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+
+    background-color: awsui.$color-background-skeleton;
+    border-start-start-radius: awsui.$border-radius-skeleton;
+    border-start-end-radius: awsui.$border-radius-skeleton;
+    border-end-start-radius: awsui.$border-radius-skeleton;
+    border-end-end-radius: awsui.$border-radius-skeleton;
+
+    @include styles.with-motion {
+      &::after {
+        content: '';
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-end: 0;
+        inset-block-end: 0;
+        inset-inline-start: 0;
+        background: linear-gradient(90deg, transparent, awsui.$color-background-skeleton-wave, transparent);
+        @include styles.with-motion {
+          animation: skeleton-wave $skeleton-wave-duration $skeleton-wave-easing infinite;
+        }
+      }
+      @include styles.with-direction('rtl') {
+        &::after {
+          @include styles.with-motion {
+            animation: skeleton-wave-rtl $skeleton-wave-duration $skeleton-wave-easing infinite;
+          }
+        }
+      }
+    }
+  }
+}
+
+.display-block {
+  display: block;
+}
+.display-inline-block {
+  display: inline-block;
+  vertical-align: middle;
+}
+.display-inline {
+  display: inline;
+}
+
+.variant-text-body-s {
+  font-size: awsui.$font-size-body-s;
+  line-height: awsui.$line-height-body-s;
+}
+
+.variant-text-body-m {
+  font-size: awsui.$font-size-body-m;
+  line-height: awsui.$line-height-body-m;
+}
+
+.variant-text-heading-xs {
+  font-size: awsui.$font-size-heading-xs;
+  line-height: awsui.$line-height-heading-xs;
+}
+
+.variant-text-heading-s {
+  font-size: awsui.$font-size-heading-s;
+  line-height: awsui.$line-height-heading-s;
+}
+
+.variant-text-heading-m {
+  font-size: awsui.$font-size-heading-m;
+  line-height: awsui.$line-height-heading-m;
+}
+
+.variant-text-heading-l {
+  font-size: awsui.$font-size-heading-l;
+  line-height: awsui.$line-height-heading-l;
+}
+
+.variant-text-heading-xl {
+  font-size: awsui.$font-size-heading-xl;
+  line-height: awsui.$line-height-heading-xl;
+}
+
+.variant-text-display-l {
+  font-size: awsui.$font-size-display-l;
+  line-height: awsui.$line-height-display-l;
+}
diff --git a/src/test-utils/dom/skeleton/index.ts b/src/test-utils/dom/skeleton/index.ts
new file mode 100644
index 0000000000..4c97466cbd
--- /dev/null
+++ b/src/test-utils/dom/skeleton/index.ts
@@ -0,0 +1,9 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ComponentWrapper } from '@cloudscape-design/test-utils-core/dom';
+
+import styles from '../../../skeleton/styles.selectors.js';
+
+export default class SkeletonWrapper extends ComponentWrapper<HTMLDivElement> {
+  static rootSelector: string = styles.root;
+}
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 3528caa76c..141db94247 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -572,6 +572,8 @@ export type ColorsTokenName =
   | 'colorBackgroundSegmentDisabled'
   | 'colorBackgroundSegmentHover'
   | 'colorBackgroundSegmentWrapper'
+  | 'colorBackgroundSkeleton'
+  | 'colorBackgroundSkeletonWave'
   | 'colorBackgroundSliderRangeDefault'
   | 'colorBackgroundSliderRangeActive'
   | 'colorBackgroundSliderHandleDefault'
@@ -902,6 +904,7 @@ export type BordersTokenName =
   | 'borderRadiusInput'
   | 'borderRadiusItem'
   | 'borderRadiusPopover'
+  | 'borderRadiusSkeleton'
   | 'borderRadiusTabsFocusRing'
   | 'borderRadiusTiles'
   | 'borderRadiusToken'
diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts
index 3ea0d48025..fb7cb43c82 100644
--- a/style-dictionary/visual-refresh/borders.ts
+++ b/style-dictionary/visual-refresh/borders.ts
@@ -71,4 +71,5 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderWidthActionCardHover: '{borderWidthCard}',
   borderWidthActionCardActive: '{borderWidthCard}',
   borderWidthActionCardDisabled: '{borderWidthCard}',
+  borderRadiusSkeleton: '8px',
 };
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index c3a1e792bd..f9e8a45150 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -325,6 +325,8 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorIconActionCardHover: { light: '{colorPrimary900}', dark: '{colorPrimary300}' },
   colorIconActionCardActive: { light: '{colorPrimary900}', dark: '{colorPrimary300}' },
   colorIconActionCardDisabled: { light: '{colorNeutral400}', dark: '{colorNeutral600}' },
+  colorBackgroundSkeleton: { light: '{colorNeutral250}', dark: '{colorNeutral750}' },
+  colorBackgroundSkeletonWave: { light: '{colorNeutral150}', dark: '{colorNeutral700}' },
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);