diff --git a/packages/svelteui-core/src/components/Drawer/Drawer.d.ts b/packages/svelteui-core/src/components/Drawer/Drawer.d.ts
new file mode 100644
index 000000000..f549195e5
--- /dev/null
+++ b/packages/svelteui-core/src/components/Drawer/Drawer.d.ts
@@ -0,0 +1,39 @@
+import { HTMLAttributes } from 'svelte/elements';
+import { LiteralUnion, Transition } from '$lib/internal';
+import { DefaultProps, SvelteUINumberSize, SvelteUIShadow, SvelteUISize } from '$lib/styles';
+
+export interface DrawerProps extends DefaultProps, HTMLAttributes<HTMLElement> {
+	opened: boolean;
+	title?: any;
+	zIndex?: number;
+	overflow?: 'outside' | 'inside';
+	withCloseButton?: boolean;
+	overlay?: boolean;
+	overlayOpacity?: number;
+	overlayColor?: string;
+	overlayBlur?: number;
+	position?: DrawerPosition;
+	size?: LiteralUnion<SvelteUISize, number | string>;
+	transition?: Transition;
+	transitionDuration?: number;
+	transitionTimingFunction?: string;
+	closeButtonLabel?: string;
+	id?: string;
+	shadow?: SvelteUIShadow;
+	padding?: SvelteUINumberSize;
+	closeOnClickOutside?: boolean;
+	closeOnEscape?: boolean;
+	trapFocus?: boolean;
+	centered?: boolean;
+	target?: HTMLElement | string;
+	withinPortal?: boolean;
+	speed?: number;
+}
+
+export interface DrawerEvents {
+	close: CustomEvent;
+	[evt: string]: CustomEvent<any>;
+}
+
+
+export type DrawerPosition = 'right' | 'left' | 'top' | 'bottom';
\ No newline at end of file
diff --git a/packages/svelteui-core/src/components/Drawer/Drawer.stories.svelte b/packages/svelteui-core/src/components/Drawer/Drawer.stories.svelte
new file mode 100644
index 000000000..9fc928876
--- /dev/null
+++ b/packages/svelteui-core/src/components/Drawer/Drawer.stories.svelte
@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+	import { Drawer } from './index';
+	import { Button } from '../Button';
+	import TextInput from '../TextInput/TextInput.svelte';
+	import Checkbox from '../Checkbox/Checkbox.svelte';
+	import InputWrapper from '../InputWrapper/InputWrapper.svelte';
+	import Input from '../Input/Input.svelte';
+	import { Grid } from '../Grid';
+	import { EnvelopeClosed, LockClosed } from 'radix-icons-svelte';
+	import type { DrawerPosition } from './Drawer';
+
+	let opened = false;
+
+	function toggleOpen() {
+		opened = !opened;
+	}
+	function handleClose() {
+		opened = false;
+	}
+
+	let openedPosition = false;
+
+	function toggleOpenPosition() {
+		openedPosition = !openedPosition;
+	}
+	function handleClosePosition() {
+		openedPosition = false;
+	}
+
+	let position: DrawerPosition = 'left';
+</script>
+
+<Meta title="Components/Drawer" component={Drawer} />
+
+<Template let:args>
+	<Button on:click={toggleOpen}>Bottom</Button>
+	<Drawer
+		size={'500px'}
+		title={'Title of Drawer'}
+		{opened}
+		position={'bottom'}
+		on:close={handleClose}
+		{...args}
+	>
+		<div style="height: 100%;width:200px;background-color: brown;">fsdfdsfsƒ</div>
+	</Drawer>
+</Template>
+
+<Story name="Right">
+	<Button on:click={toggleOpen}>Right</Button>
+
+	<Drawer
+		withinPortal={true}
+		size={'500px'}
+		title={'Title of Drawer'}
+		{opened}
+		position={'right'}
+		on:close={handleClose}
+	>
+		<Grid>
+			<Grid.Col span={6}
+				><InputWrapper id="input-demo1" label="First Name">
+					<Input placeholder="Enter first name" />
+				</InputWrapper></Grid.Col
+			>
+			<Grid.Col span={6}>
+				<InputWrapper id="input-demo3" label="Last Name">
+					<Input placeholder="Enter last name" />
+				</InputWrapper></Grid.Col
+			>
+			<Grid.Col span={12}>
+				<InputWrapper id="input-demo2" label="Email" description="">
+					<Input icon={EnvelopeClosed} placeholder="Enter your email id" />
+				</InputWrapper></Grid.Col
+			>
+			<Grid.Col span={12}>
+				<InputWrapper id="input-demo4" label="Password" description="">
+					<Input icon={LockClosed} placeholder="Enter Password" />
+				</InputWrapper></Grid.Col
+			>
+			<Grid.Col span={12}>
+				<InputWrapper id="input-demo4" label="Confirm Password" description="">
+					<Input icon={LockClosed} placeholder="Enter Confirm Password" />
+				</InputWrapper></Grid.Col
+			>
+			<Grid.Col span={12}><Checkbox size={'md'} label="I agree to sell my privacy" /></Grid.Col>
+			<Grid.Col span={12}><Button>Save</Button></Grid.Col>
+		</Grid>
+	</Drawer>
+</Story>
+
+<Story name="Position">
+	<Grid>
+		<Grid.Col span={6}
+			><Button
+				on:click={() => {
+					toggleOpenPosition();
+					position = 'right';
+				}}>Right</Button
+			></Grid.Col
+		><Grid.Col span={6}
+			><Button
+				on:click={() => {
+					toggleOpenPosition();
+					position = 'left';
+				}}>Left</Button
+			></Grid.Col
+		><Grid.Col span={6}
+			><Button
+				on:click={() => {
+					toggleOpenPosition();
+					position = 'top';
+				}}>Top</Button
+			></Grid.Col
+		><Grid.Col span={6}
+			><Button
+				on:click={() => {
+					toggleOpenPosition();
+					position = 'bottom';
+				}}>Bottom</Button
+			></Grid.Col
+		></Grid
+	>
+
+	<Drawer
+		size={'300px'}
+		title={'Title of Drawer'}
+		opened={openedPosition}
+		{position}
+		on:close={handleClosePosition}
+	>
+		<div style="height: 100%;width:200px;">Drawer content</div>
+	</Drawer>
+</Story>
diff --git a/packages/svelteui-core/src/components/Drawer/Drawer.styles.ts b/packages/svelteui-core/src/components/Drawer/Drawer.styles.ts
new file mode 100644
index 000000000..b0f2fa44d
--- /dev/null
+++ b/packages/svelteui-core/src/components/Drawer/Drawer.styles.ts
@@ -0,0 +1,78 @@
+import { createStyles } from '$lib/styles';
+
+export interface DrawerStylesParams {
+	overflow: 'outside' | 'inside';
+	size: string | number;
+	speed: number;
+	zIndex: number;
+	position: 'right' | 'left' | 'top' | 'bottom';
+}
+
+export const sizes = {
+	xs: 320,
+	sm: 380,
+	md: 440,
+	lg: 620,
+	xl: 780,
+	full: '100%'
+};
+
+export default createStyles((theme, { overflow, size, zIndex, position, speed }: DrawerStylesParams) => {
+	const customSize = size in sizes === false;
+	const computedSize = typeof size === 'string' && customSize ? size : theme.fn.size({ sizes, size });
+	return {
+		close: {},
+		overlay: {},
+		root: {
+			position: 'fixed',
+			zIndex,
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0
+		},
+
+		wrapper: {
+			backgroundColor: 'white',
+			zIndex: 1111
+		},
+		title: {
+			marginRight: +theme.space.md.value,
+			textOverflow: 'ellipsis',
+			display: 'block',
+			wordBreak: 'break-word'
+		},
+		Drawer: {
+			[`${theme.dark} &`]: {
+				backgroundColor: theme.fn.themeColor('dark', 7)
+			},
+			position: 'fixed',
+			top: `${position === 'top' || position === 'left' || position === 'right' ? (position === 'top' ? ('-' + computedSize) : 0) : 'auto'}`,
+			bottom: `${position === 'bottom' || position === 'left' || position === 'right' ? (position === 'bottom' ? ('-' + computedSize) : 0) : 'auto'} `,
+			right: `${position === 'right' || position === 'bottom' || position === 'top' ? (position === 'right' ? ('-' + computedSize) : 0) : 'auto'} `,
+			left: `${position === 'left' || position === 'bottom' || position === 'top' ? (position === 'left' ? ('-' + computedSize) : 0) : 'auto'} `,
+			width: position === 'left' || position === 'right' ? computedSize : '100vw',
+			height: position === 'top' || position === 'bottom' ? computedSize : '100vh',
+			boxShadow: '-6px 0 16px -8px #00000014, -9px 0 28px #0000000d, -12px 0 48px 16px #00000008;',
+			transition: `${position} ${speed}ms cubic-bezier(.23,1,.32,1),box-shadow ${speed}ms cubic-bezier(.23,1,.32,1)`,
+			outline: 0,
+			backgroundColor: 'white',
+			zIndex: 1
+
+		},
+
+		header: {
+			display: 'flex',
+			alignItems: 'center',
+			justifyContent: 'space-between',
+			marginBottom: parseInt(theme.space.md.value),
+			marginRight: -9
+		},
+
+		body: {
+			maxHeight: overflow === 'inside' ? 'calc(100vh - 185px)' : null,
+			overflowY: overflow === 'inside' ? 'auto' : null,
+			wordBreak: 'break-word'
+		}
+	};
+});
diff --git a/packages/svelteui-core/src/components/Drawer/Drawer.svelte b/packages/svelteui-core/src/components/Drawer/Drawer.svelte
new file mode 100644
index 000000000..ddb8a35ec
--- /dev/null
+++ b/packages/svelteui-core/src/components/Drawer/Drawer.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+	import { createEventDispatcher, onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { sineInOut } from 'svelte/easing';
+	import { focustrap, lockscroll } from '@svelteuidev/composables';
+	import { randomID, colorScheme, css } from '$lib/styles';
+	import { CloseButton } from '../ActionIcon';
+	import { Box } from '../Box';
+	import { Overlay } from '../Overlay';
+	import { Paper } from '../Paper';
+	import { OptionalPortal } from '../Portal';
+	import { Text } from '../Text';
+	import useStyles from './Drawer.styles';
+	import type { DrawerProps as $$DrawerProps, DrawerEvents as $$DrawerEvents } from './Drawer';
+
+	interface $$Props extends $$DrawerProps {}
+	interface $$Events extends $$DrawerEvents {}
+
+	export let use: $$Props['use'] = [],
+		element: $$Props['element'] = undefined,
+		className: $$Props['className'] = '',
+		override: $$Props['override'] = {},
+		opened: $$Props['opened'] = false,
+		title: $$Props['title'] = '',
+		zIndex: $$Props['zIndex'] = 200,
+		overflow: $$Props['overflow'] = 'outside',
+		withCloseButton: $$Props['withCloseButton'] = true,
+		overlay: $$Props['overlay'] = true,
+		overlayOpacity: $$Props['overlayOpacity'] = null,
+		overlayColor: $$Props['overlayColor'] = null,
+		overlayBlur: $$Props['overlayBlur'] = 0,
+		position: $$Props['position'] = 'right',
+		size: $$Props['size'] = 'md',
+		closeButtonLabel: $$Props['closeButtonLabel'] = 'svelteui-close-button',
+		id: $$Props['id'] = 'svelteui',
+		shadow: $$Props['shadow'] = 'lg',
+		padding: $$Props['padding'] = 'lg',
+		closeOnClickOutside: $$Props['closeOnClickOutside'] = true,
+		closeOnEscape: $$Props['closeOnEscape'] = true,
+		trapFocus: $$Props['trapFocus'] = false,
+		target: $$Props['target'] = '#SVELTEUI_PROVIDER',
+		withinPortal: $$Props['withinPortal'] = true,
+		speed: $$Props['speed'] = 250;
+	export { className as class };
+
+	const dispatch = createEventDispatcher();
+	const castAny = (self: unknown) => self as any;
+	const baseId = randomID(id);
+	const titleId = `${baseId}-title`;
+	const bodyId = `${baseId}-body`;
+	let openStyle = '';
+	let showContent = false;
+
+	const _overlayOpacity =
+		typeof overlayOpacity === 'number' ? overlayOpacity : $colorScheme === 'dark' ? 0.85 : 0.75;
+
+	const closeOnEscapePress = (event: KeyboardEvent) => {
+		if (!trapFocus && event.code === 'Escape' && closeOnEscape) {
+			onClose();
+		}
+	};
+
+	function onClose() {
+		dispatch('close');
+	}
+
+	const zIndexStyles = css({ zIndex });
+
+	$: {
+		onMount(() => {
+			if (!trapFocus) {
+				typeof window !== 'undefined'
+					? window.addEventListener('keydown', closeOnEscapePress)
+					: null;
+			}
+		});
+	}
+
+	$: if (opened && ((typeof target === 'string' && !document.querySelector(target)) || !target)) {
+		throw new Error(
+			'Wrap your app in the SvelteUIProvider, or provide a sufficent target throught the "target={\'\'}" prop '
+		);
+	}
+	$: lockScroll = opened;
+	$: ({ cx, classes, getStyles } = useStyles(
+		{ overflow, size, zIndex, position, speed },
+		{ name: 'Drawer' }
+	));
+
+	$: if (opened) {
+		setTimeout(() => {
+			openStyle = position + `: 0px;`;
+		}, 100);
+		showContent = true;
+	} else {
+		setTimeout(() => {
+			openStyle = position + `: -` + size;
+		}, 100);
+		setTimeout(() => {
+			showContent = false;
+		}, speed - 50);
+	}
+</script>
+
+{#if showContent}
+	<OptionalPortal class={zIndexStyles()} {withinPortal} {target}>
+		<Box
+			id={baseId}
+			bind:element
+			{use}
+			{...$$restProps}
+			class={cx(className, getStyles({ css: override }))}
+		>
+			<div
+				role="presentation"
+				use:lockscroll={lockScroll}
+				on:keydown|capture={(event) => {
+					const shouldTrigger =
+						castAny(event.target)?.getAttribute('data-svelteui-stop-propagation') !== 'true';
+					shouldTrigger && event.code === 'Escape' && closeOnEscape && onClose();
+				}}
+			>
+				{#if overlay}
+					<div transition:fade={{ duration: 200, easing: sineInOut }}>
+						<Overlay
+							class={classes.overlay}
+							override={{ position: 'fixed' }}
+							zIndex={0}
+							on:mousedown={() => closeOnClickOutside && onClose()}
+							blur={overlayBlur}
+							color={overlayColor || '#00000073'}
+							opacity={_overlayOpacity}
+						/>
+					</div>
+				{/if}
+
+				<div class={classes.wrapper}>
+					<Paper
+						style={openStyle}
+						class={classes.Drawer}
+						{shadow}
+						{padding}
+						radius={0}
+						role="dialog"
+						aria-labelledby={titleId}
+						aria-describedby={bodyId}
+						aria-modal
+						tabindex={-1}
+						use={[focustrap]}
+					>
+						<div>
+							{#if title || withCloseButton}
+								<div class={classes.header}>
+									<Text id={titleId} class={classes.title}>
+										{title}
+									</Text>
+
+									{#if withCloseButton}
+										<CloseButton
+											iconSize={16}
+											on:click={onClose}
+											aria-label={closeButtonLabel}
+											class={classes.close}
+										/>
+									{/if}
+								</div>
+							{/if}
+							<div id={bodyId} class={classes.body}>
+								<slot>Place some content</slot>
+							</div>
+						</div>
+					</Paper>
+				</div>
+			</div>
+		</Box>
+	</OptionalPortal>
+{/if}
diff --git a/packages/svelteui-core/src/components/Drawer/index.ts b/packages/svelteui-core/src/components/Drawer/index.ts
new file mode 100644
index 000000000..2be3f033b
--- /dev/null
+++ b/packages/svelteui-core/src/components/Drawer/index.ts
@@ -0,0 +1,3 @@
+export { default as Drawer } from './Drawer.svelte';
+export type { DrawerStylesParams } from './Drawer.styles';
+export type { DrawerProps, DrawerEvents } from './Drawer';
diff --git a/packages/svelteui-core/src/components/index.ts b/packages/svelteui-core/src/components/index.ts
index 76eec3122..e811873ef 100644
--- a/packages/svelteui-core/src/components/index.ts
+++ b/packages/svelteui-core/src/components/index.ts
@@ -15,6 +15,7 @@ export * from './Chip';
 export * from './Code';
 export * from './Container';
 export * from './Divider';
+export * from './Drawer';
 export * from './FileUpload';
 export * from './Grid';
 export * from './Group';