Your 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="hover:underline">info@company.com</A>
   </P>
   <P class="text-sm text-gray-500 dark:text-gray-400">
      <A href='/' class="hover:underline">212-456-7890</A>
   </P>
</Drawer>
```

Use this example if you want to add form elements inside the drawer component including datepickers.

```svelte example
<script>
  import { Drawer, Button, CloseButton, Label, Input, Textarea } from 'flowbite-svelte'
  import { sineIn } from 'svelte/easing';

let hidden4 = true;
  let transitionParams = {
    x: -320,
    duration: 200,
    easing: sineIn
  };
</script>

<div class="text-center">
  <Button on:click={() => (hidden4 = false)}>Show drawer form</Button>
</div>
<Drawer transitionType="fly" {transitionParams} bind:hidden={hidden4} id='sidebar4'>
  <div class='flex items-center'>
    <h5 id="drawer-label" class="inline-flex items-center mb-6 text-base font-semibold text-gray-500 uppercase dark:text-gray-400"><svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>New event</h5>
    <CloseButton on:click={() => (hidden4 = true)} class='mb-4 dark:text-white'/>
  </div>
   <form action="#" class="mb-6">
    <div class="mb-6">
      <Label for='title' class='block mb-2'>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 noBorder id="search" placeholder="Add guest email" class="p-3">
        </Input>
        <Button textSize="text-sm" class="absolute inline-flex items-center px-3 py-1 text-sm font-medium text-white bg-blue-700 rounded-lg right-2 bottom-2 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="submit"><svg class="w-4 h-4 mr-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"></path></svg>Add</Button>
      </div>
    </div>
      <div class="flex mb-4 -space-x-4">
         <img class="w-8 h-8 border-2 border-white rounded-full dark:border-gray-800" src="/images/profile-picture-1.webp" alt="">
         <img class="w-8 h-8 border-2 border-white rounded-full dark:border-gray-800" src="/images/profile-picture-2.webp" alt="">
         <img class="w-8 h-8 border-2 border-white rounded-full dark:border-gray-800" src="/images/profile-picture-3.webp" alt="">
         <img class="w-8 h-8 border-2 border-white rounded-full dark:border-gray-800" src="/images/profile-picture-4.webp" alt="">
      </div>
      <Button type="submit" class="w-full"><svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> Create event</Button>
   </form>
</Drawer>
```

Use the placement prop to position the drawer component either on the top, right, bottom, or left side of the document page. This can be done using the `placement='left|right|top|bottom'` where the default value is “left”.

<Heading tag="h3" customSize="text-xl font-semibold" class='my-4'>Left drawer</Heading>

```svelte example
<script>
  import { Drawer, Button, CloseButton, Label, Input, Textarea } from 'flowbite-svelte'
  import { sineIn } from 'svelte/easing';

let hidden5 = true;
  let transitionParams = {
    x: -320,
    duration: 200,
    easing: sineIn
  };
</script>

<div class="text-center">
  <Button on:click={() => (hidden5 = false)}>Show drawer</Button>
</div>

<Drawer placement='left' transitionType="fly" {transitionParams} bind:hidden={hidden5} id='sidebar5'>
<div class='flex items-center'>
  <h5
    id="drawer-label"
    class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
    <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
  </h5>
  <CloseButton on:click={() => (hidden5 = true)} class='mb-4 dark:text-white'/>
    </div>
  <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-blue-600 underline dark:text-blue-500 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="/" >Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
  </div>
</Drawer>
```

<Heading tag="h3" customSize="text-xl font-semibold" class='my-4'>Right drawer</Heading>

Use this example to show the drawer component on the right side of the page.

Set the `transitionParams` variable to new variables.

```svelte example
<script>
  import { Drawer, Button, CloseButton } from 'flowbite-svelte'
  import { sineIn } from 'svelte/easing';

let hidden6 = true;
  let transitionParamsRight = {
    x: 320,
    duration: 200,
    easing: sineIn
  };
</script>

<div class="text-center">
  <Button on:click={() => (hidden6 = false)}>Show drawer</Button>
</div>

<Drawer placement='right' transitionType="fly" transitionParams={transitionParamsRight} bind:hidden={hidden6} id='sidebar6'>
<div class='flex items-center'>
  <h5
    id="drawer-label"
    class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
    <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
  </h5>
  <CloseButton on:click={() => (hidden6 = true)} class='mb-4 dark:text-white'/>
    </div>
  <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-blue-600 underline dark:text-blue-500 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="/" >Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
  </div>
</Drawer>
```

<Heading tag="h3" customSize="text-xl font-semibold" class='my-4'>Top drawer</Heading>

Use this example to show the drawer on the top side of the page.

```svelte example
<script>
  import { Drawer, Button, CloseButton, A } from 'flowbite-svelte'
  import { sineIn } from 'svelte/easing';

let hidden7 = true;
  let transitionParamsTop = {
    y: -320,
    duration: 200,
    easing: sineIn
  };
</script>

<div class="text-center">
  <Button on:click={() => (hidden7 = false)}>Show drawer</Button>
</div>

<Drawer placement='top' width='w-full' transitionType="fly" transitionParams={transitionParamsTop} bind:hidden={hidden7} id='sidebar7'>
<div class='flex items-center'>
  <h5
    id="drawer-label"
    class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
    <svg
      class="mr-2 w-5 h-5"
      aria-hidden="true"
      fill="currentColor"
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
      ><path
        fill-rule="evenodd"
        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
        clip-rule="evenodd" /></svg
    >Top drawer
  </h5>
  <CloseButton on:click={() => (hidden7 = true)} class='mb-4 dark:text-white'/>
    </div>
  <p class="max-w-lg mb-6 text-sm text-gray-500 dark:text-gray-400">
    Supercharge your hiring by taking advantage of our <A
      href="/" >limited-time sale</A> for
    Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
    job board.
  </p>
    <Button color="light" href="/">Learn more</Button>
    <Button href="/" class='ml-2' >Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
</Drawer>
```

<Heading tag="h3" customSize="text-xl font-semibold" class='my-4'>Bottom drawer</Heading>

Use this example to show the drawer on the bottom side of the page.

```svelte example
<script>
  import { Drawer, Button, CloseButton, A } from 'flowbite-svelte'
  import { sineIn } from 'svelte/easing';

let hidden8 = true;
  let transitionParamsBottom = {
    y: 320,
    duration: 200,
    easing: sineIn
  };
</script>
  
<div class="text-center">
  <Button on:click={() => (hidden8 = false)}>Show drawer</Button>
</div>

<Drawer placement='bottom' width='w-full' transitionType="fly" transitionParams={transitionParamsBottom} bind:hidden={hidden8} id='sidebar8'>
<div class='flex items-center'>
  <h5
    id="drawer-label"
    class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
    <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
  </h5>
  <CloseButton on:click={() => (hidden8 = true)} class='mb-4 dark:text-white'/>
    </div>
  <p class="max-w-lg mb-6 text-sm text-gray-500 dark:text-gray-400">
    Supercharge your hiring by taking advantage of our <a
      href="/"
      class="text-blue-600 underline dark:text-blue-500 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>
    <Button color="light" href="/">Learn more</Button>
    <Button href="/" class='ml-2'>Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
</Drawer>
```

The backdrop element can be used to dim out the background elements when the drawer is visible and also automatically hide the component when clicking outside of it.

Use the `backdrop="false|true"` prop where you can disable or enable the backdrop element.

<Heading tag="h3" customSize="text-xl font-semibold" class='my-4'>Enabled (default)</Heading>

Use this example to enable the backdrop element by default.

```svelte example
<script>
  import { Drawer, Button, CloseButton, A } from 'flowbite-svelte'
  import { sineIn } from 'svelte/easing';

let hiddenBackdropTrue = true;
  let transitionParams = {
    x: -320,
    duration: 200,
    easing: sineIn
  };
</script>

<div class="text-center">
  <Button on:click={() => (hiddenBackdropTrue = false)}>Show drawer</Button>
</div>

<Drawer backdrop={true} transitionType="fly" {transitionParams} bind:hidden={hiddenBackdropTrue} id='sidebar1'>
<div class='flex items-center'>
  <h5
    id="drawer-label"
    class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
    <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
  </h5>
  <CloseButton on:click={() => (hiddenBackdropTrue = true)} class='mb-4 dark:text-white'/>
    </div>
  <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-blue-600 underline dark:text-blue-500 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="/" >Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
  </div>
</Drawer>
```

<Heading tag="h3" customSize="text-xl font-semibold" class='my-4'>Disabled</Heading>

Use the `backdrop={false}` prop to disable the backdrop element when the drawer is shown.

```svelte example
<script>
  import { Drawer, Button, CloseButton, A } from 'flowbite-svelte'
  import { sineIn } from 'svelte/easing';

let hiddenBackdropFalse = true;
  let transitionParams = {
    x: -320,
    duration: 200,
    easing: sineIn
  };
</script>

<div class="text-center">
  <Button on:click={() => (hiddenBackdropFalse = false)}>Show drawer</Button>
</div>

<Drawer backdrop={false} transitionType="fly" {transitionParams} bind:hidden={hiddenBackdropFalse} id='sidebar1'>
<div class='flex items-center'>
  <h5
    id="drawer-label"
    class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
    <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
  </h5>
  <CloseButton on:click={() => (hiddenBackdropFalse = true)} class='mb-4 dark:text-white'/>
    </div>
  <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-blue-600 underline dark:text-blue-500 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="/" >Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
  </div>
</Drawer>
```

Use `leftOffset|rightOffset|topOffset|bottomOffset` prop to change the position of the drawer.

```svelte example
<script>
  import { Drawer, Button, CloseButton, A } from 'flowbite-svelte'
  import { sineIn } from 'svelte/easing';

let hidden9 = true;
  let transitionParams = {
    x: -320,
    duration: 200,
    easing: sineIn
  };
</script>

<div class="text-center">
  <Button on:click={() => (hidden9 = false)}>Show drawer</Button>
</div>

<Drawer
  leftOffset="top-16 h-screen left-0"
  transitionType="fly"
  {transitionParams}
  bind:hidden={hidden9}
  id="sidebar9">
  <div class="flex items-center">
    <h5
      id="drawer-label"
      class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
      <svg
        class="w-5 h-5 mr-2"
        aria-hidden="true"
        fill="currentColor"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
        ><path
          fill-rule="evenodd"
          d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
          clip-rule="evenodd" /></svg
      >Info
    </h5>
    <CloseButton on:click={() => (hidden9 = true)} class="mb-4 dark:text-white" />
  </div>
  <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-blue-600 underline dark:text-blue-500 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="/"
      >Get access <svg
        class="w-4 h-4 ml-1"
        aria-hidden="true"
        fill="currentColor"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
        ><path
          fill-rule="evenodd"
          d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
          clip-rule="evenodd" /></svg
      ></Button>
  </div>
</Drawer>
```

As the default, the drawer closes when you click the outside of the drawer.
However sometimes you don't want that. Set `activateClickOutside` to false to disable it.

```svelte example
<script>
  import { Drawer, Button, CloseButton } from 'flowbite-svelte';
  import { sineIn } from 'svelte/easing';
  let hidden10 = true; 
  let activateClickOutside = false
  let backdrop = false
  let transitionParams = {
    x: -320,
    duration: 200,
    easing: sineIn
  };
</script>

<div class="text-center">
  <Button on:click={() => (hidden10 = false)}>Show drawer</Button>
</div>

<Drawer {activateClickOutside} {backdrop} transitionType="fly" {transitionParams} bind:hidden={hidden10} id='sidebar10'>
<div class='flex items-center'>
  <h5
    id="drawer-label"
    class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
    <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
  </h5>
  <CloseButton on:click={() => (hidden10 = true)} class='mb-4 dark:text-white'/>
</div>
  <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-blue-600 underline dark:text-blue-500 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>
</Drawer>
```

```svelte example
<script>
  import { Drawer, Button, CloseButton, A } from 'flowbite-svelte'
  import { sineIn } from 'svelte/easing';

let hiddenBackdropFalse = true;
  let transitionParams = {
    x: -320,
    duration: 200,
    easing: sineIn
  };
</script>

<div class="text-center">
  <Button on:click={() => (hiddenBackdropFalse = false)}>Show drawer</Button>
</div>

<Drawer activateClickOutside={false} transitionType="fly" {transitionParams} bind:hidden={hiddenBackdropFalse} id='sidebar1'>
<div class='flex items-center'>
  <h5
    id="drawer-label"
    class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
    <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
  </h5>
  <CloseButton on:click={() => (hiddenBackdropFalse = true)} class='mb-4 dark:text-white'/>
    </div>
  <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-blue-600 underline dark:text-blue-500 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="/" >Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
  </div>
</Drawer>
```

The component has the following props, type, and default values. See <A href="/pages/types">types 
 page</A> for type information.

<P>
  <A href="https://flowbite.com/docs/components/drawer/" target="_blank" rel="noreferrer" class="link"
    >Flowbite drawer</A
  >
</P>

Info

Menu

Contact us