docs: component skeleton

docs/content/docs/components/skeleton.mdx

@@ -1,4 +1,101 @@
 ---
 title: Skeleton
 description: A skeleton is a placeholder that represents the shape of the content that is loading.
----
+---
+
+## Import
+
+- **Skeleton**: The main component to display a skeleton.
+
+## Usage
+
+<div className="flex items-center space-x-4">
+  <Skeleton className="h-12 w-12 rounded-full" />
+  <div className="space-y-2">
+    <Skeleton className="h-4 w-[250px]" />
+    <Skeleton className="h-4 w-[200px]" />
+  </div>
+</div>
+
+```jsx
+import { Skeleton } from "@openlite/ui"
+
+export function SkeletonDemo() {
+  return (
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  )
+}
+```
+
+## Examples
+
+### Button Skeleton
+
+<Skeleton className="h-10 w-28" rounded="lg" />
+
+```jsx
+import { Skeleton } from "@openlite/ui"
+
+export function SkeletonButtonDemo() {
+  return (
+    <Skeleton className="h-10 w-28" rounded="lg" />
+  )
+}
+```
+
+### CArd Skeleton
+
+<div className="flex flex-col gap-3 max-w-sm">
+  <Skeleton className="w-full h-52" rounded="lg" />
+  <div className="space-y-2 p-2">
+    <Skeleton className="h-4 w-[150px]" />
+    <Skeleton className="h-2 w-full" />
+    <Skeleton className="h-2 w-full" />
+    <Skeleton className="h-2 w-full" />
+    <Skeleton className="h-2 w-full" />
+    <Skeleton className="h-4 w-[100px]" />
+    <div className='grid grid-cols-2 gap-4' >
+      <Skeleton className="h-10 w-full" rounded="lg" />
+      <Skeleton className="h-10 w-full" rounded="lg" />
+    </div>
+  </div>
+</div>
+
+```jsx
+import { Skeleton } from "@openlite/ui"
+
+export function SkeletonCardDemo() {
+  return (
+    <div className="flex flex-col gap-3 max-w-sm">
+      <Skeleton className="w-full h-52" rounded="lg" />
+      <div className="space-y-2 p-2">
+        <Skeleton className="h-4 w-[150px]" />
+        <Skeleton className="h-2 w-full" />
+        <Skeleton className="h-2 w-full" />
+        <Skeleton className="h-2 w-full" />
+        <Skeleton className="h-2 w-full" />
+        <Skeleton className="h-4 w-[100px]" />
+        <div className='grid grid-cols-2 gap-4' >
+          <Skeleton className="h-10 w-full" rounded="lg" />
+          <Skeleton className="h-10 w-full" rounded="lg" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+```
+
+## API
+
+### Skeleton Props
+
+| Props | Type | Description |
+| --- | --- | --- |
+| `rounded` | `'none' \| 'sm' \| 'md' \| 'lg'` | The rounded of the Skeleton. |

docs/mdx-components.tsx

@@ -80,6 +80,7 @@ import {
   SelectTrigger,
   SelectValue,
   Separator,
+  Skeleton,
   Slider,
   Tooltip,
   TooltipContent,
@@ -175,6 +176,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     Accordion,
     Accordions,
     Slider,
+    Skeleton,
     InstallTabs: ({
       items,
       children,