diff --git a/packages/react-docs/pages/components/skeleton.page.mdx b/packages/react-docs/pages/components/skeleton.page.mdx
deleted file mode 100644
index 5321e6ea42..0000000000
--- a/packages/react-docs/pages/components/skeleton.page.mdx
+++ /dev/null
@@ -1,182 +0,0 @@
-# Skeleton
-
-Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
-
-## Import
-
-```js
-import { Skeleton } from '@tonic-ui/react';
-```
-
-## Usage
-
-The component is designed to be used when the data for your component might not be immediately available. For instance:
-
-```jsx disabled
-{image
- ?
- :
-}
-```
-
-### Variants
-
-The component supports 3 shape variants:
-* `text` (default) represents a single line of text.
-* `rectangle` and `circle` represent a rectangle and a circle respectively.
-
-```jsx
-
-
-
-
-
-
-```
-
-### Animations
-
-By default, the animation is disabled. You can enable animation by setting the `animation` prop to `wave` or `pulse`.
-
-```jsx noInline
-const FormGroup = (props) => (
-
-);
-
-const useSelection = (defaultValue) => {
- const [value, setValue] = React.useState(defaultValue);
- const changeBy = (value) => () => setValue(value);
- return [value, changeBy];
-};
-
-render(() => {
- const [animation, changeAnimationBy] = useSelection('none');
-
- return (
- <>
-
-
-
- animation
-
-
- *:not(:first-of-type)': {
- marginLeft: -1
- }
- }}
- >
- {['none', 'pulse', 'wave'].map(value => (
-
- ))}
-
-
-
-
-
-
-
-
-
- );
-});
-```
-
-### Color
-
-The color of the component can be customized by changing its `backgroundColor` prop. This is especially useful when on a dark background.
-
-```jsx
-
-
-
-```
-
-### More examples
-
-```jsx
-
-
- Modal Title
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```jsx noInline
-render(() => {
- const [colorMode] = useColorMode();
- const [colorStyle] = useColorStyle({ colorMode });
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-});
-```
-
-## Props
-
-### Skeleton
-
-| Name | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| variant | string | 'text' | The type of content that will be rendered. One of: 'text', 'rectangle', 'circle' |
-| animation | string | | The animation effect. One of: 'pulse', 'wave' |
-| width | number \| string | | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. |
-| height | number \| string | | Height of the skeleton. Useful when you don't want to adopt the skeleton to a text element. |
diff --git a/packages/react-docs/pages/components/skeleton/animations.js b/packages/react-docs/pages/components/skeleton/animations.js
new file mode 100644
index 0000000000..e3ebdc1599
--- /dev/null
+++ b/packages/react-docs/pages/components/skeleton/animations.js
@@ -0,0 +1,55 @@
+import { Box, Button, ButtonGroup, Divider, Skeleton, Stack, TextLabel } from '@tonic-ui/react';
+import React from 'react';
+
+const FormGroup = (props) => (
+
+);
+
+const useSelection = (defaultValue) => {
+ const [value, setValue] = React.useState(defaultValue);
+ const changeBy = (value) => () => setValue(value);
+ return [value, changeBy];
+};
+
+const App = () => {
+ const [animation, changeAnimationBy] = useSelection('none');
+
+ return (
+ <>
+
+
+
+ animation
+
+
+ *:not(:first-of-type)': {
+ marginLeft: -1
+ }
+ }}
+ >
+ {['none', 'pulse', 'wave'].map(value => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/skeleton/color.js b/packages/react-docs/pages/components/skeleton/color.js
new file mode 100644
index 0000000000..a25b1c3c42
--- /dev/null
+++ b/packages/react-docs/pages/components/skeleton/color.js
@@ -0,0 +1,16 @@
+import { Box, Skeleton } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+
+
+
+);
+
+export default App;
diff --git a/packages/react-docs/pages/components/skeleton/index.page.mdx b/packages/react-docs/pages/components/skeleton/index.page.mdx
new file mode 100644
index 0000000000..1bd431575e
--- /dev/null
+++ b/packages/react-docs/pages/components/skeleton/index.page.mdx
@@ -0,0 +1,61 @@
+# Skeleton
+
+Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
+
+## Import
+
+```js
+import { Skeleton } from '@tonic-ui/react';
+```
+
+## Usage
+
+The component is designed to be used when the data for your component might not be immediately available. For instance:
+
+```jsx disabled
+{image
+ ?
+ :
+}
+```
+
+### Variants
+
+The component supports 3 shape variants:
+* `text` (default) represents a single line of text.
+* `rectangle` and `circle` represent a rectangle and a circle respectively.
+
+{render('./variants')}
+
+### Animations
+
+By default, the animation is disabled. You can enable animation by setting the `animation` prop to `wave` or `pulse`.
+
+{render('./animations')}
+
+### Color
+
+The color of the component can be customized by changing its `backgroundColor` prop. This is especially useful when on a dark background.
+
+{render('./color')}
+
+### Compositions
+
+#### Profile
+
+{render('./profile-skeletons')}
+
+#### Modal
+
+{render('./modal-skeletons')}
+
+## Props
+
+### Skeleton
+
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| variant | string | 'text' | The type of content that will be rendered. One of: 'text', 'rectangle', 'circle' |
+| animation | string | | The animation effect. One of: 'pulse', 'wave' |
+| width | number \| string | | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. |
+| height | number \| string | | Height of the skeleton. Useful when you don't want to adopt the skeleton to a text element. |
diff --git a/packages/react-docs/pages/components/skeleton/modal-skeletons.js b/packages/react-docs/pages/components/skeleton/modal-skeletons.js
new file mode 100644
index 0000000000..78cf2c7c65
--- /dev/null
+++ b/packages/react-docs/pages/components/skeleton/modal-skeletons.js
@@ -0,0 +1,44 @@
+import {
+ Button,
+ Grid,
+ ModalBody,
+ ModalContent,
+ ModalHeader,
+ ModalFooter,
+ Skeleton,
+ Stack,
+} from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+
+
+ Modal Title
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default App;
diff --git a/packages/react-docs/pages/components/skeleton/profile-skeletons.js b/packages/react-docs/pages/components/skeleton/profile-skeletons.js
new file mode 100644
index 0000000000..d93043828a
--- /dev/null
+++ b/packages/react-docs/pages/components/skeleton/profile-skeletons.js
@@ -0,0 +1,27 @@
+import { Box, Divider, Flex, Skeleton, Stack, useColorMode, useColorStyle } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => {
+ const [colorMode] = useColorMode();
+ const [colorStyle] = useColorStyle({ colorMode });
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/skeleton/variants.js b/packages/react-docs/pages/components/skeleton/variants.js
new file mode 100644
index 0000000000..e84645ac14
--- /dev/null
+++ b/packages/react-docs/pages/components/skeleton/variants.js
@@ -0,0 +1,13 @@
+import { Skeleton, Stack } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+
+
+
+
+
+
+);
+
+export default App;