@skel-ui/react 1.0.0-alpha.e84c1ff → 1.0.0-alpha.f24f3db

package/README.md

@@ -1,42 +1,39 @@
-# Getting Started
+Skel UI resolves the challenges of implementing skeletons by eliminating the need to create dedicated loading screens and providing an easier way to manage skeleton states using React Context.
 
-Skel UI resolves the challenges of implementing skeletons by eliminating the need to create dedicated loading screens and providing an easier way to manage skeleton states using react-context.
+See the comparision [here](https://skel-ui.augustin.zip/#comparision).
 
-## Installation
+## Get Started
 
-Install the package into your project via command line.
-
-```bash
-npm install @skel-ui/react
-```
-
-## Importing CSS
+### Import CSS
 
 Import the CSS file into the root of your application.
 
-```js
+```ts
 import "@skel-ui/react/styles.css";
 ```
 
-## Start crafting UI
+### Implement Skel UI
 
 Now it's time for you to craft your user interface to life!
 
-```jsx
+```tsx
 import * as Skel from "@skel-ui/react";
-import Image from "next/image";
+import Image from "@ui/image";
 
-function Profile() {
-  const { user, isLoading } = useProfile();
+export default function PostCard() {
+  const { post, isLoading } = usePost();
 
   return (
     <Skel.Root isLoading={isLoading}>
-      <Skel.Item className="user-avatar">
-        <Image src={user.profile} />
-      </Skel.Item>
-      <Skel.Item as="h1" className="user-email">
-        {user.email}
-      </Skel.Item>
+      <div className="group w-full max-w-80 p-2.5 bg-white border border-slate-200 rounded-lg overflow-hidden duration-300">
+        <Skel.Item
+          as={Image}
+          src={post?.image}
+          className="rounded aspect-[800/530] duration-150 loaded:group-hover:scale-110"
+        />
+        <Skel.h1 className="text-xl font-bold mt-4 loading:max-w-48">{post?.title}</Skel.h1>
+        <Skel.p className="text-sm my-2 loading:h-[3.75rem]">{post?.description}</Skel.p>
+      </div>
     </Skel.Root>
   );
 }
@@ -44,28 +41,6 @@ function Profile() {
 
 Now, not only have you designed the skeleton, but you have also done the actual UI. Additionally, the skeleton state for the entire UI is handled in a single place at the `<Skel.Root>` .
 
-## Customization
 
-Customize the default color and border-radius of skeleton using css variables.
-
-```css title="global.css"
-:root {
-    --skel-ui-color1: #a1a1aa;
-    --skel-ui-color2: #e4e4e7;
-    --skel-ui-radius: 0.25rem;
-}
-```
 
-Each `Skel.Item` will have a `data-loading` attribute that is set to `"true"` when the item is in a loading state, and `"false"` otherwise. You can use this attribute in your CSS to create styles based on the loading state.
-
-```css
-/* This style will be applied during loading. */
-.user-email[data-loading="true"] {
-  width: 5rem;
-}
-
-/* This style will be applied after loading is done. */
-.user-email[data-loading="false"]:hover {
-  background: #f97316;
-}
-```
+For full documentation, visit [skel-ui.augustin.zip](https://skel-ui.augustin.zip/)

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@skel-ui/react",
   "author": "https://github.com/sudoaugustin",
-  "version": "1.0.0-alpha.e84c1ff",
+  "version": "1.0.0-alpha.f24f3db",
   "license": "MIT",
-  "description": "Small but mighty skeleton loading for React",
+  "description": "Lightweight and powerful skeleton loading library for React.",
   "files": [
     "dist"
   ],