Drawer

Setup

<script>
	import { Drawer, Drawerhead, Button, uiHelpers } from 'svelte-5-ui-lib';
	import { InfoCircleSolid } from 'flowbite-svelte-icons';
	const drawer = uiHelpers();
	let drawerStatus = $state(false);
	const closeDrawer = drawer.close;
	$effect(() => {
		drawerStatus = drawer.isOpen;
	});
</script>

Interactive Drawer Builder

<Button onclick={drawer.toggle}>Drawer</Button>
<Drawer drawerStatus={drawerStatus} closeDrawer={closeDrawer}>
  <Drawerhead onclick={closeDrawer} class="mb-4>
    <h5 id="drawer-label" class="inline-flex items-center text-xl font-semibold text-gray-500 dark:text-gray-400">
        <InfoCircleSolid class="me-2.5 h-5 w-5" />Fly drawer
      </h5>
  </Drawerhead>
    My Drawer
</Drawer>

Form elements

<script lang="ts">
	import { Button, Drawer, uiHelpers, Drawerhead, Label, Input, Textarea } from 'svelte-5-ui-lib';
	import { InfoCircleSolid, UserAddOutline, CalendarEditSolid } from 'flowbite-svelte-icons';
	const drawer = uiHelpers();
	let drawerStatus = $state(false);
	const closeDrawer = drawer.close;
	$effect(() => {
		drawerStatus = drawer.isOpen;
	});
</script>

<div class="text-center">
	<Button onclick={drawer.toggle}>Show navigation</Button>
</div>
<Drawer {drawerStatus} {closeDrawer}>
	<Drawerhead onclick={closeDrawer} class="mb-4">
		<h5
			id="drawer-label"
			class="inline-flex items-center text-lg font-semibold text-gray-500 dark:text-gray-400"
		>
			<InfoCircleSolid class="me-2.5 h-5 w-5" />New event
		</h5>
	</Drawerhead>
	<form action="#" class="mb-6">
		<div class="mb-6">
			<Label for="title" class="mb-2 block">Title</Label>
			<Input id="title" name="title" required placeholder="Apple Keynote" />
		</div>
		<div class="mb-6">
			<Label for="description" class="mb-2">Description</Label>
			<Textarea id="message" placeholder="Write event description..." rows={4} name="message" />
		</div>
		<div class="mb-6">
			<Input id="date" name="date" required type="date" />
		</div>
		<div class="mb-4">
			<div class="relative">
				<Input id="search" placeholder="Add guest email" class="p-3" />
				<Button
					class="bg-primary-700 hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 absolute end-2 bottom-2 inline-flex items-center rounded-lg px-3 py-1 text-sm font-medium text-white focus:ring-4 focus:outline-none"
					type="submit"
				>
					<UserAddOutline class="me-1.5 h-3 w-3 text-white" />Add
				</Button>
			</div>
		</div>
		<div class="mb-4 flex -space-x-4 rtl:space-x-reverse">
			<img
				class="h-8 w-8 rounded-full border-2 border-white dark:border-gray-800"
				src="/images/profile-picture-1.webp"
				alt=""
			/>
			<img
				class="h-8 w-8 rounded-full border-2 border-white dark:border-gray-800"
				src="/images/profile-picture-2.webp"
				alt=""
			/>
			<img
				class="h-8 w-8 rounded-full border-2 border-white dark:border-gray-800"
				src="/images/profile-picture-3.webp"
				alt=""
			/>
			<img
				class="h-8 w-8 rounded-full border-2 border-white dark:border-gray-800"
				src="/images/profile-picture-4.webp"
				alt=""
			/>
		</div>
		<Button type="submit" class="w-full">
			<CalendarEditSolid class="me-2.5 h-3.5 w-3.5 text-white" /> Create event
		</Button>
	</form>
</Drawer>

Contact form

<script lang="ts">
	import { Button, Drawer, uiHelpers, Drawerhead, Label, Input, Textarea, P, A } from 'svelte-5-ui-lib';
	import { InfoCircleSolid } from 'flowbite-svelte-icons';
	const drawer = uiHelpers();
	let drawerStatus = $state(false);
	const closeDrawer = drawer.close;
	$effect(() => {
		drawerStatus = drawer.isOpen;
	});
</script>

<div class="text-center">
	<Button onclick={drawer.toggle}>Show navigation</Button>
</div>
<Drawer {drawerStatus} {closeDrawer}>
	<Drawerhead onclick={closeDrawer} class="mb-4">
		<h5
			id="drawer-label"
			class="inline-flex items-center text-lg font-semibold text-gray-500 dark:text-gray-400"
		>
			<InfoCircleSolid class="me-2.5 h-5 w-5" />Contact us
		</h5>
	</Drawerhead>
	<form action="#" class="mb-6">
		<div class="mb-6">
			<Label for="email" class="mb-2 block">Your email</Label>
			<Input id="email" name="email" required placeholder="name@company.com" />
		</div>
		<div class="mb-6">
			<Label for="subject" class="mb-2 block">Subject</Label>
			<Input id="subject" name="subject" required placeholder="Let us know how we can help you" />
		</div>
		<div class="mb-6">
			<Label for="message" class="mb-2">Your message</Label>
			<Textarea id="message" placeholder="Your message..." rows={4} name="message" />
		</div>
		<Button type="submit" class="w-full">Send message</Button>
	</form>
	<P class="mb-2 text-sm text-gray-500 dark:text-gray-400">
		<A href="/" class="text-primary-600 dark:text-primary-500 hover:underline">info@company.com</A>
	</P>
	<P class="text-sm text-gray-500 dark:text-gray-400">
		<A href="/" class="text-primary-600 dark:text-primary-500 hover:underline">212-456-7890</A>
	</P>
</Drawer>

Drawer navigation

<script lang="ts">
	import {
		Button,
		Drawer,
		Drawerhead,
		uiHelpers,
		Sidebar,
		SidebarGroup,
		SidebarItem,
		SidebarDropdownWrapper
	} from 'svelte-5-ui-lib';
	import {
		InfoCircleSolid,
		ChartOutline,
		GridSolid,
		MailBoxSolid,
		UserSolid,
		ArrowRightToBracketOutline,
		EditSolid,
		ShoppingBagSolid
	} from 'flowbite-svelte-icons';
	const drawer = uiHelpers();
	let drawerStatus = $state(false);
	const closeDrawer = drawer.close;
	$effect(() => {
		drawerStatus = drawer.isOpen;
	});
	let spanClass = 'flex-1 ms-3 whitespace-nowrap';
</script>

<div class="text-center">
	<Button onclick={drawer.toggle}>Show navigation</Button>
</div>
<Drawer {drawerStatus} {closeDrawer} class="bg-gray-50">
	<Drawerhead onclick={closeDrawer} class="mb-4">
		<h5
			id="drawer-label"
			class="inline-flex items-center text-xl font-semibold text-gray-500 dark:text-gray-400"
		>
			<InfoCircleSolid class="me-2.5 h-5 w-5" />Menu
		</h5>
	</Drawerhead>
	<Sidebar class="p-2" divClass="p-0 m-0">
		<SidebarGroup>
			<SidebarItem label="Dashboard">
				{#snippet iconSlot()}
					<ChartOutline
						class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
					/>
				{/snippet}
			</SidebarItem>
			<SidebarDropdownWrapper label="E-commerce" btnClass="p-2">
				{#snippet iconSlot()}
					<ShoppingBagSolid
						class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
					/>
				{/snippet}
				<SidebarItem label="Products" />
				<SidebarItem label="Billing" />
				<SidebarItem label="Invoice" />
			</SidebarDropdownWrapper>
			<SidebarItem label="Drawer" href="/components/drawer" {spanClass}>
				{#snippet iconSlot()}
					<GridSolid
						class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
					/>
				{/snippet}
				{#snippet subtext()}
					<span
						class="ms-3 inline-flex items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
						>Pro</span
					>
				{/snippet}
			</SidebarItem>
			<SidebarItem label="Inbox" {spanClass} href="/">
				{#snippet iconSlot()}
					<MailBoxSolid
						class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
					/>
				{/snippet}
				{#snippet subtext()}
					<span
						class="bg-primary-200 text-primary-600 dark:bg-primary-900 dark:text-primary-200 ms-3 inline-flex h-3 w-3 items-center justify-center rounded-full p-3 text-sm font-medium"
						>3</span
					>
				{/snippet}
			</SidebarItem>
			<SidebarItem label="Users">
				{#snippet iconSlot()}
					<UserSolid
						class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
					/>
				{/snippet}
			</SidebarItem>
			<SidebarItem label="Sign In">
				{#snippet iconSlot()}
					<ArrowRightToBracketOutline
						class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
					/>
				{/snippet}
			</SidebarItem>
			<SidebarItem label="Sign Up">
				{#snippet iconSlot()}
					<EditSolid
						class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
					/>
				{/snippet}
			</SidebarItem>
		</SidebarGroup>
	</Sidebar>
</Drawer>

Offset

<script lang="ts">
	import { Button, Drawer, Drawerhead, uiHelpers } from 'svelte-5-ui-lib';
	import { InfoCircleSolid } from 'flowbite-svelte-icons';
	const drawerBackdrop = uiHelpers();
	let drawerStatusBackdrop = $state(false);
	const closeDrawerBackdrop = drawerBackdrop.close;

	$effect(() => {
		drawerStatusBackdrop = drawerBackdrop.isOpen;
	});
	let offsetClass = $state('');
	const changeClass = () => {
		offsetClass = offsetClass === '' ? 'top-16 h-screen start-0' : '';
	};
</script>

<div class="mb-4 text-center">
	<Button onclick={drawerBackdrop.toggle}>Show drawer</Button>
</div>
<Drawer class={offsetClass} drawerStatus={drawerStatusBackdrop} closeDrawer={closeDrawerBackdrop}>
	<Drawerhead onclick={closeDrawerBackdrop} class="mb-4">
		<h5
			id="drawer-label"
			class="inline-flex items-center text-xl font-semibold text-gray-500 dark:text-gray-400"
		>
			<InfoCircleSolid class="me-2.5 h-5 w-5" />Drawer
		</h5>
	</Drawerhead>
	<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
		Offset: {offsetClass ? offsetClass : 'none'}
	</p>
</Drawer>
<div class="flex justify-center gap-2">
	<Button color="green" onclick={changeClass}>{offsetClass ? 'Remove offset' : 'Add offset'}</Button
	>
</div>

Onmouseenter

<script lang="ts">
	import { Button, Drawer, Drawerhead, uiHelpers } from 'svelte-5-ui-lib';
	import { InfoCircleSolid, ArrowRightOutline } from 'flowbite-svelte-icons';
	const drawerMouseEnter = uiHelpers();
	let drawerStatusMouseEnter = $state(false);
	const closeDrawerMouseEnter = drawerMouseEnter.close;
	$effect(() => {
		drawerStatusMouseEnter = drawerMouseEnter.isOpen;
	});
</script>

<div class="text-center">
	<Button onmouseenter={drawerMouseEnter.toggle}>Show drawer</Button>
</div>

<Drawer drawerStatus={drawerStatusMouseEnter} closeDrawer={closeDrawerMouseEnter}>
	<Drawerhead onclick={closeDrawerMouseEnter} class="mb-4">
		<h5
			id="drawer-label"
			class="inline-flex items-center text-xl font-semibold text-gray-500 dark:text-gray-400"
		>
			<InfoCircleSolid class="me-2.5 h-5 w-5" />Info
		</h5>
	</Drawerhead>
	<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
		Supercharge your hiring by taking advantage of our <a
			href="/"
			class="text-primary-600 dark:text-primary-500 underline hover:no-underline"
			>limited-time sale</a
		>
		for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
		job board.
	</p>
	<div class="grid grid-cols-2 gap-4">
		<Button color="light" href="/">Learn more</Button>
		<Button href="/" class="px-4">Get access <ArrowRightOutline class="ms-2 h-3.5 w-3.5" /></Button>
	</div>
</Drawer>

Drawer

Setup

Interactive Drawer Builder

Form elements

Contact form

Drawer navigation

Offset

Onmouseenter

Component data