diff --git a/packages/ui/components/sheet/sheet.stories.mdx b/packages/ui/components/sheet/sheet.stories.mdx
new file mode 100644
index 0000000000..38f8f49b0f
--- /dev/null
+++ b/packages/ui/components/sheet/sheet.stories.mdx
@@ -0,0 +1,57 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+ Examples,
+ Example,
+ Note,
+ Title,
+ VariantsTable,
+ VariantColumn,
+ RowTitles,
+ CustomArgsTable,
+} from "@calcom/storybook/components";
+
+import {
+ Sheet,
+ SheetClose,
+ SheetContent,
+ SheetDescription,
+ SheetFooter,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "./sheet";
+
+import {Button} from "../button";
+
+
+
+
+
+
+## Definition
+
+A sheet is a container that can be used to display content on differnt sides of the current page.
+
+## Structure
+
+
+
+
+
+
+
+
+ Edit profile
+
+ Make changes to your profile here. Click save when you're done.
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/ui/components/sheet/sheet.tsx b/packages/ui/components/sheet/sheet.tsx
new file mode 100644
index 0000000000..ed8642672e
--- /dev/null
+++ b/packages/ui/components/sheet/sheet.tsx
@@ -0,0 +1,207 @@
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import classNames from "@calcom/lib/classNames";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const portalVariants = cva("fixed inset-0 z-50 flex", {
+ variants: {
+ position: {
+ top: "items-start",
+ bottom: "items-end",
+ left: "justify-start",
+ right: "justify-end",
+ },
+ },
+ defaultVariants: { position: "right" },
+});
+
+interface SheetPortalProps extends SheetPrimitive.DialogPortalProps, VariantProps {}
+
+const SheetPortal = ({ position, className, children, ...props }: SheetPortalProps) => (
+
+ {children}
+
+);
+SheetPortal.displayName = SheetPrimitive.Portal.displayName;
+
+const SheetOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+ "fixed z-50 scale-100 gap-4 bg-default m-4 rounded-xl p-6 opacity-100 shadow-lg border",
+ {
+ variants: {
+ position: {
+ top: "animate-in slide-in-from-top w-full duration-300",
+ bottom: "animate-in slide-in-from-bottom w-full duration-300",
+ left: "animate-in slide-in-from-left h-full duration-300",
+ right: "animate-in slide-in-from-right h-full duration-300",
+ },
+ size: {
+ content: "",
+ default: "",
+ sm: "",
+ lg: "",
+ xl: "",
+ full: "",
+ },
+ },
+ compoundVariants: [
+ {
+ position: ["top", "bottom"],
+ size: "content",
+ class: "max-h-screen",
+ },
+ {
+ position: ["top", "bottom"],
+ size: "default",
+ class: "h-1/3",
+ },
+ {
+ position: ["top", "bottom"],
+ size: "sm",
+ class: "h-1/4",
+ },
+ {
+ position: ["top", "bottom"],
+ size: "lg",
+ class: "h-1/2",
+ },
+ {
+ position: ["top", "bottom"],
+ size: "xl",
+ class: "h-5/6",
+ },
+ {
+ position: ["top", "bottom"],
+ size: "full",
+ class: "h-screen",
+ },
+ {
+ position: ["right", "left"],
+ size: "content",
+ class: "max-w-screen",
+ },
+ {
+ position: ["right", "left"],
+ size: "default",
+ class: "w-1/3 h-[calc(100vh-2rem)]",
+ },
+ {
+ position: ["right", "left"],
+ size: "sm",
+ class: "w-1/4 h-[calc(100vh-2rem)]",
+ },
+ {
+ position: ["right", "left"],
+ size: "lg",
+ class: "w-1/2 h-[calc(100vh-2rem)]",
+ },
+ {
+ position: ["right", "left"],
+ size: "xl",
+ class: "w-5/6 h-[calc(100vh-2rem)]",
+ },
+ {
+ position: ["right", "left"],
+ size: "full",
+ class: "w-screen h-[calc(100vh-2rem)]",
+ },
+ ],
+ defaultVariants: {
+ position: "right",
+ size: "default",
+ },
+ }
+);
+
+export interface DialogContentProps
+ extends React.ComponentPropsWithoutRef,
+ VariantProps {}
+
+const SheetContent = React.forwardRef, DialogContentProps>(
+ ({ position, size, className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+ )
+);
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (
+
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (
+
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+ Sheet,
+ SheetTrigger,
+ SheetClose,
+ SheetContent,
+ SheetHeader,
+ SheetFooter,
+ SheetTitle,
+ SheetDescription,
+};