diff --git a/docs/content/docs/components/dialog.mdx b/docs/content/docs/components/dialog.mdx
index 97b0f30..5d0f61c 100644
--- a/docs/content/docs/components/dialog.mdx
+++ b/docs/content/docs/components/dialog.mdx
@@ -19,38 +19,31 @@ description: A dialog is a type of modal window that appears in front of app con
 ## Usage
 
 <Dialog>
-  <div className='flex justify-center'>
+  <div className="flex justify-center">
     <DialogTrigger asChild>
-      <Button outline="default" >Edit Profile</Button>
+      <Button outline="default">Edit Profile</Button>
     </DialogTrigger>
   </div>
   <DialogContent className="sm:max-w-[425px]">
     <DialogHeader>
       <DialogTitle className="font-bold text-3xl">Lorem ipsum </DialogTitle>
       <DialogDescription className="font-light">
-        say somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay something
+        say somethingsay somethingsay somethingsay somethingsay somethingsay
+        somethingsay somethingsay something
       </DialogDescription>
     </DialogHeader>
-      <div className='flex flex-col gap-1'>
-        <Label htmlFor="name">
-          Name
-        </Label>
-        <Input
-          id="name"
-          defaultValue="Sebastian Garcias"
-          className="col-span-3"
-        />
-      </div>
-      <div className='flex flex-col gap-1'>
-        <Label htmlFor="username">
-          Username
-        </Label>
-        <Input
-          id="username"
-          defaultValue="@Sebasjs"
-          className="col-span-3"
-        />
-      </div>
+    <div className="flex flex-col gap-1">
+      <Label htmlFor="name">Name</Label>
+      <Input
+        id="name"
+        defaultValue="Sebastian Garcias"
+        className="col-span-3"
+      />
+    </div>
+    <div className="flex flex-col gap-1">
+      <Label htmlFor="username">Username</Label>
+      <Input id="username" defaultValue="@Sebasjs" className="col-span-3" />
+    </div>
     <DialogFooter>
       <Button type="submit">Confirm</Button>
     </DialogFooter>
@@ -58,67 +51,72 @@ description: A dialog is a type of modal window that appears in front of app con
 </Dialog>
 
 ```jsx
-import {  Dialog, DialogOverlay, DialogPortal, DialogClose, DialogDescription, DialogTitle, DialogTrigger, DialogHeader, DialogContent, DialogFooter,} from '@openlite/ui'
+import {
+  Dialog,
+  DialogOverlay,
+  DialogPortal,
+  DialogClose,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+  DialogHeader,
+  DialogContent,
+  DialogFooter,
+} from "@openlite/ui";
 
 function App() {
-  return(
+  return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button outline="default" >Edit Profile</Button>
+        <Button outline="default">Edit Profile</Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
           <DialogTitle className="font-bold text-3xl">Lorem ipsum </DialogTitle>
           <DialogDescription className="font-light">
-          say somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay something
+            say somethingsay somethingsay somethingsay somethingsay somethingsay
+            somethingsay somethingsay something
           </DialogDescription>
         </DialogHeader>
-        <div className='flex flex-col gap-1'>
-          <Label htmlFor="name">
-            Name
-          </Label>
+        <div className="flex flex-col gap-1">
+          <Label htmlFor="name">Name</Label>
           <Input
             id="name"
             defaultValue="Sebastian Garcias"
             className="col-span-3"
           />
         </div>
-        <div className='flex flex-col gap-1'>
-          <Label htmlFor="username">
-            Username
-          </Label>
-          <Input
-            id="username"
-            defaultValue="@Sebasjs"
-            className="col-span-3"
-          />
+        <div className="flex flex-col gap-1">
+          <Label htmlFor="username">Username</Label>
+          <Input id="username" defaultValue="@Sebasjs" className="col-span-3" />
         </div>
         <DialogFooter>
           <Button type="submit">Confirm</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
+  );
 }
 ```
 
 ## Examples
 
 <Dialog>
-  <div className='flex justify-center'>
+  <div className="flex justify-center">
     <DialogTrigger asChild>
-      <Button outline="default" >Delete</Button>
+      <Button outline="default">Delete</Button>
     </DialogTrigger>
   </div>
   <DialogContent className="sm:max-w-[425px] p-0">
     <DialogHeader className="border-b px-4 py-3">
       <DialogTitle className="font-bold text-xl">Delete folder?</DialogTitle>
     </DialogHeader>
-      <div className='flex flex-col gap-1 p-4'>
-        <DialogDescription>
-          This action cannot be undone. This will permanently delete the folder and all its contents.
-        </DialogDescription>
-      </div>
+    <div className="flex flex-col gap-1 p-4">
+      <DialogDescription>
+        This action cannot be undone. This will permanently delete the folder
+        and all its contents.
+      </DialogDescription>
+    </div>
     <DialogFooter className="border-t px-4 py-3">
       <Button outline="default">Cancel</Button>
       <Button type="submit">Delete</Button>
@@ -127,21 +125,35 @@ function App() {
 </Dialog>
 
 ```jsx
-import {  Dialog, DialogOverlay, DialogPortal, DialogClose, DialogDescription, DialogTitle, DialogTrigger, DialogHeader, DialogContent, DialogFooter,} from '@openlite/ui'
+import {
+  Dialog,
+  DialogOverlay,
+  DialogPortal,
+  DialogClose,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+  DialogHeader,
+  DialogContent,
+  DialogFooter,
+} from "@openlite/ui";
 
 function App() {
-  return(
+  return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button outline="default" >Delete</Button>
+        <Button outline="default">Delete</Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-[425px] p-0">
         <DialogHeader className="border-b px-4 py-3">
-          <DialogTitle className="font-bold text-xl">Delete folder?</DialogTitle>
+          <DialogTitle className="font-bold text-xl">
+            Delete folder?
+          </DialogTitle>
         </DialogHeader>
-        <div className='flex flex-col gap-1 p-4'>
+        <div className="flex flex-col gap-1 p-4">
           <DialogDescription>
-            This action cannot be undone. This will permanently delete the folder and all its contents.
+            This action cannot be undone. This will permanently delete the
+            folder and all its contents.
           </DialogDescription>
         </div>
         <DialogFooter className="border-t px-4 py-3">
@@ -150,6 +162,6 @@ function App() {
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
+  );
 }
-```
\ No newline at end of file
+```
diff --git a/docs/content/docs/components/scroll-area.mdx b/docs/content/docs/components/scroll-area.mdx
index 4d9df02..c618351 100644
--- a/docs/content/docs/components/scroll-area.mdx
+++ b/docs/content/docs/components/scroll-area.mdx
@@ -1,4 +1,156 @@
 ---
 title: Scroll Area
 description: A scroll area is a container that allows scrolling of content.
----
\ No newline at end of file
+---
+
+## Import
+
+- **ScrollArea**: The main component to display an scroll.
+
+## Usage
+
+<ScrollArea className="h-[200px] w-[350px] rounded-md border px-4">
+  <h2>The title </h2>
+  <span>
+    Jokester began sneaking into the castle in the middle of the night and
+    leaving jokes all over the place: under the king's pillow, in his soup, even
+    in the royal toilet. The king was furious, but he couldn't seem to stop
+    Jokester. And then, one day, the people of the kingdom discovered that the
+    jokes left by Jokester were so funny that they couldn't help but laugh. And
+    once they started laughing, they couldn't stop.
+  </span>
+</ScrollArea>
+
+```tsx
+import { ScrollArea } from "@openlite/ui";
+
+export default function Demo() {
+  return (
+    <ScrollArea className="h-[200px] w-[350px] rounded-md border px-4">
+      <h2>The title </h2>
+      <span>
+        Jokester began sneaking into the castle in the middle of the night and
+        leaving jokes all over the place: under the king's pillow, in his soup,
+        even in the royal toilet. The king was furious, but he couldn't seem to
+        stop Jokester. And then, one day, the people of the kingdom discovered
+        that the jokes left by Jokester were so funny that they couldn't help
+        but laugh. And once they started laughing, they couldn't stop.
+      </span>
+    </ScrollArea>
+  );
+}
+```
+
+## Examples
+
+<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+  <div className="flex w-max space-x-4 p-4">
+    <figure className="shrink-0">
+      <div className="overflow-hidden rounded-md">
+        <img
+          src="https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
+          alt={`Photo by demo`}
+          className="aspect-[3/4] h-fit w-fit object-cover"
+          width={300}
+          height={400}
+        />
+      </div>
+      <figcaption className="pt-2 text-xs text-muted-foreground">
+        Photo by <span className="font-semibold text-foreground">demo</span>
+      </figcaption>
+    </figure>
+    <figure className="shrink-0">
+      <div className="overflow-hidden rounded-md">
+        <img
+          src="https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
+          alt={`Photo by demo`}
+          className="aspect-[3/4] h-fit w-fit object-cover"
+          width={300}
+          height={400}
+        />
+      </div>
+      <figcaption className="pt-2 text-xs text-muted-foreground">
+        Photo by <span className="font-semibold text-foreground">demo</span>
+      </figcaption>
+    </figure>
+    <figure className="shrink-0">
+      <div className="overflow-hidden rounded-md">
+        <img
+          src="https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
+          alt={`Photo by demo`}
+          className="aspect-[3/4] h-fit w-fit object-cover"
+          width={300}
+          height={400}
+        />
+      </div>
+      <figcaption className="pt-2 text-xs text-muted-foreground">
+        Photo by <span className="font-semibold text-foreground">demo</span>
+      </figcaption>
+    </figure>
+  </div>
+  <ScrollBar orientation="horizontal" />
+</ScrollArea>
+
+```tsx
+import { ScrollArea, ScrollBar } from "@openlite/ui";
+
+export default function Demo() {
+  return (
+    <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+      <div className="flex w-max space-x-4 p-4">
+        <figure className="shrink-0">
+          <div className="overflow-hidden rounded-md">
+            <img
+              src="https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
+              alt={`Photo by demo`}
+              className="aspect-[3/4] h-fit w-fit object-cover"
+              width={300}
+              height={400}
+            />
+          </div>
+          <figcaption className="pt-2 text-xs text-muted-foreground">
+            Photo by <span className="font-semibold text-foreground">demo</span>
+          </figcaption>
+        </figure>
+        <figure className="shrink-0">
+          <div className="overflow-hidden rounded-md">
+            <img
+              src="https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
+              alt={`Photo by demo`}
+              className="aspect-[3/4] h-fit w-fit object-cover"
+              width={300}
+              height={400}
+            />
+          </div>
+          <figcaption className="pt-2 text-xs text-muted-foreground">
+            Photo by <span className="font-semibold text-foreground">demo</span>
+          </figcaption>
+        </figure>
+        <figure className="shrink-0">
+          <div className="overflow-hidden rounded-md">
+            <img
+              src="https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
+              alt={`Photo by demo`}
+              className="aspect-[3/4] h-fit w-fit object-cover"
+              width={300}
+              height={400}
+            />
+          </div>
+          <figcaption className="pt-2 text-xs text-muted-foreground">
+            Photo by <span className="font-semibold text-foreground">demo</span>
+          </figcaption>
+        </figure>
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  );
+}
+```
+
+## API
+
+### ScrollBar Props
+
+| Props | Type | Description |
+| ----- | ---- | ----------- |
+| orientation | `'vertical' \| 'horizontal'` | The orientation of the scroll. |
diff --git a/docs/content/docs/components/sheet.mdx b/docs/content/docs/components/sheet.mdx
index a8a00ea..761dc13 100644
--- a/docs/content/docs/components/sheet.mdx
+++ b/docs/content/docs/components/sheet.mdx
@@ -1,4 +1,102 @@
 ---
 title: Sheet
 description: A sheet is a container that slides in from the edge of the screen.
----
\ No newline at end of file
+---
+
+- **Sheet**: The main component to display a sheet.
+- **SheetDescription**: The description component to display a sheet.
+- **SheetTitle**: The title component to display a sheet.
+- **SheetClose**: The close button component to close a sheet.
+- **SheetTrigger**: The trigger component to display a sheet.
+- **SheetHeader**: The header component to display a sheet.
+- **SheetContent**: The content component to display a sheet.
+- **SheetFooter**: The footer component to display a sheet.
+
+## Usage
+
+<Sheet>
+  <SheetTrigger asChild>
+    <Button rippleColor="light">example form</Button>
+  </SheetTrigger>
+  <SheetContent>
+    <SheetHeader>
+      <SheetTitle>Edit profile</SheetTitle>
+      <SheetDescription>
+        Make changes to your profile here. Click save when you're done.
+      </SheetDescription>
+    </SheetHeader>
+    <div className="w-full py-4 space-y-4">
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="name" className="text-right">
+          Username
+        </Label>
+        <Input id="name" value="Pedro Duarte" className="col-span-3 w-44" />
+      </div>
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="username" className="text-right">
+          Email
+        </Label>
+        <Input id="username" value="@peduarte" className="col-span-3 w-44" />
+      </div>
+    </div>
+    <SheetFooter>
+      <SheetClose asChild>
+        <Button type="submit">Log In</Button>
+      </SheetClose>
+    </SheetFooter>
+  </SheetContent>
+</Sheet>
+
+```jsx
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@openlite/ui";
+
+export default function DemoSheet() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button rippleColor="light">example form</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>
+            Make changes to your profile here. Click save when you're done.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="w-full py-4 space-y-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              Username
+            </Label>
+            <Input id="name" value="Pedro Duarte" className="col-span-3 w-44" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">
+              Email
+            </Label>
+            <Input
+              id="username"
+              value="@peduarte"
+              className="col-span-3 w-44"
+            />
+          </div>
+        </div>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button type="submit">Log In</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
+```
diff --git a/docs/mdx-components.tsx b/docs/mdx-components.tsx
index 555cd65..0efd9d0 100644
--- a/docs/mdx-components.tsx
+++ b/docs/mdx-components.tsx
@@ -72,6 +72,8 @@ import {
   PopoverContent,
   PopoverTrigger,
   Progress,
+  ScrollArea,
+  ScrollBar,
   Select,
   SelectContent,
   SelectGroup,
@@ -80,6 +82,14 @@ import {
   SelectTrigger,
   SelectValue,
   Separator,
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
   Skeleton,
   Slider,
   Table,
@@ -171,6 +181,8 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     Select,
     SelectContent,
     SelectItem,
+    ScrollArea,
+    ScrollBar,
     SelectTrigger,
     SelectValue,
     SelectLabel,
@@ -190,6 +202,14 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     Slider,
     Skeleton,
     TabsUI,
+    Sheet,
+    SheetContent,
+    SheetDescription,
+    SheetHeader,
+    SheetClose,
+    SheetTitle,
+    SheetTrigger,
+    SheetFooter,
     TabsContent,
     TabsList,
     TabsTrigger,