Ready-to-Use Components Powered by Flowbite, ShadCN & Headless UI
Component Library
Browse and explore components
Drawer
A Drawer is a UI component that slides in from the edge of the screen to display navigation, menus, or additional content.
Default
Drawer
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
Sample Code
Show Code
Copy Code
import { useState } from 'react'
import { Button, Drawer, DrawerHeader, DrawerItems } from 'flowbite-react'
const DefaultDrawerCode = () => {
const [isOpen, setIsOpen] = useState(false)
const handleClose = () => setIsOpen(false)
return (
<div>
<Button color={'primary'} onClick={() => setIsOpen(true)}>
Show Drawer
</Button>
<Drawer open={isOpen} onClose={handleClose} className='p-4'>
<DrawerHeader title='Drawer' />
<DrawerItems>
<p className='mb-6 text-sm'>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets
</p>
<Button color={'primary'}>Learn More</Button>
</DrawerItems>
</Drawer>
</div>
)
}
export default DefaultDrawerCode
Navigation
MENU
Sample Code
Show Code
Copy Code
import { useState } from 'react'
import {
IconLayoutDashboard,
IconShoppingBag,
IconListDetails,
IconLogin2,
IconUserPlus,
IconFiles,
IconComponents,
IconInfoSquareRounded,
} from '@tabler/icons-react'
import { HiSearch } from 'react-icons/hi'
import {
Button,
Drawer,
DrawerHeader,
DrawerItems,
Sidebar,
SidebarItem,
SidebarItemGroup,
SidebarItems,
TextInput,
} from 'flowbite-react'
const NavigationDrawerCode = () => {
const [isNavigation, setIsNavigation] = useState(false)
const navigationClose = () => setIsNavigation(false)
return (
<div>
<Button color={'secondary'} onClick={() => setIsNavigation(true)}>
Show Navigation
</Button>
<Drawer open={isNavigation} onClose={navigationClose} className='p-4'>
<DrawerHeader title='MENU' titleIcon={() => <></>} />
<DrawerItems>
<Sidebar
aria-label='Sidebar with multi-level dropdown example'
className='[&>div]:bg-transparent [&>div]:p-0'>
<div className='flex h-full flex-col justify-between py-2'>
<div>
<form className='pb-3 md:hidden'>
<TextInput
icon={HiSearch}
type='search'
placeholder='Search'
required
size={32}
/>
</form>
<SidebarItems>
<SidebarItemGroup>
<SidebarItem
href='/'
icon={() => <IconLayoutDashboard size={20} />}>
Dashboard
</SidebarItem>
<SidebarItem
href='/e-commerce/products'
icon={() => <IconShoppingBag size={20} />}>
Products
</SidebarItem>
<SidebarItem
href='/users/list'
icon={() => <IconListDetails size={20} />}>
Users list
</SidebarItem>
<SidebarItem
href='/authentication/sign-in'
icon={() => <IconLogin2 size={20} />}>
Sign in
</SidebarItem>
<SidebarItem
href='/authentication/sign-up'
icon={() => <IconUserPlus size={20} />}>
Sign up
</SidebarItem>
</SidebarItemGroup>
<SidebarItemGroup>
<SidebarItem
href='https://github.com/themesberg/flowbite-react/'
icon={() => <IconFiles size={20} />}>
Docs
</SidebarItem>
<SidebarItem
href='https://flowbite-react.com/'
icon={() => <IconComponents size={20} />}>
Components
</SidebarItem>
<SidebarItem
href='https://github.com/themesberg/flowbite-react/issues'
icon={() => <IconInfoSquareRounded size={20} />}>
Help
</SidebarItem>
</SidebarItemGroup>
</SidebarItems>
</div>
</div>
</Sidebar>
</DrawerItems>
</Drawer>
</div>
)
}
export default NavigationDrawerCode
Contact Form
CONTACT US
Sample Code
Show Code
Copy Code
import { useState } from 'react'
import { HiEnvelope } from 'react-icons/hi2'
import {
Button,
Drawer,
DrawerHeader,
DrawerItems,
Label,
Textarea,
TextInput,
} from 'flowbite-react'
const ContactDrawerCode = () => {
const [isContact, setIsContact] = useState(false)
const contactClose = () => setIsContact(false)
return (
<div>
<Button color={'success'} onClick={() => setIsContact(true)}>
Show Contact Form
</Button>
<Drawer open={isContact} onClose={contactClose} className='p-4'>
<DrawerHeader title='CONTACT US' titleIcon={HiEnvelope} />
<DrawerItems>
<form action='#'>
<div className='mb-6 mt-3'>
<Label htmlFor='email' className='mb-2 block'>
Your email
</Label>
<TextInput
id='email'
name='email'
placeholder='name@company.com'
type='email'
className='!form-control'
/>
</div>
<div className='mb-6'>
<Label htmlFor='subject' className='mb-2 block'>
Subject
</Label>
<TextInput
id='subject'
name='subject'
placeholder='Let us know how we can help you'
className='!form-control'
/>
</div>
<div className='mb-6'>
<Label htmlFor='message' className='mb-2 block'>
Your message
</Label>
<Textarea
id='message'
name='message'
className='!form-control-textarea'
placeholder='Your message...'
rows={4}
/>
</div>
<div className='mb-6'>
<Button type='submit' className='w-full ' color='primary'>
Send message
</Button>
</div>
<p className='mb-2 text-sm text-gray-500 dark:text-gray-400'>
<a href='mailto:info@company.com' className='hover:underline'>
info@company.com
</a>
</p>
<p className='text-sm text-gray-500 dark:text-gray-400'>
<a href='tel:2124567890' className='hover:underline'>
212-456-7890
</a>
</p>
</form>
</DrawerItems>
</Drawer>
</div>
)
}
export default ContactDrawerCode
Form Drawer
NEW EVENT
Sample Code
Show Code
Copy Code
import { useState } from 'react'
import {
Button,
Drawer,
Label,
TextInput,
Textarea,
Datepicker,
theme,
Avatar,
DrawerHeader,
DrawerItems,
AvatarGroup,
} from 'flowbite-react'
import { HiCalendar, HiUserAdd } from 'react-icons/hi'
import { twMerge } from 'tailwind-merge'
const FormDrawerCode = () => {
const [isElement, setIsOpen] = useState(false)
const elementClose = () => setIsOpen(false)
return (
<div>
<Button color={'error'} onClick={() => setIsOpen(true)}>
Show Drawer
</Button>
<Drawer open={isElement} onClose={elementClose} className='p-4'>
<DrawerHeader title='NEW EVENT' titleIcon={HiCalendar} />
<DrawerItems>
<form action='#'>
<div className='mb-6 mt-3'>
<Label htmlFor='title' className='mb-2 block'>
Title
</Label>
<TextInput
id='title'
name='title'
placeholder='Apple Keynote'
className='!form-control'
/>
</div>
<div className='mb-6'>
<Label htmlFor='description' className='mb-2 block'>
Description
</Label>
<Textarea
id='description'
name='description'
placeholder='Write event description...'
rows={4}
className='!form-control-textarea'
/>
</div>
<div className='mb-6'>
<Datepicker className='!form-control' />
</div>
<div className='mb-6'>
<TextInput
id='guests'
name='guests'
placeholder='Add guest email'
type='search'
className='!form-control'
rightIcon={() => (
<Button
size='sm'
className='[&>span]:items-center [&>span]:px-2 [&>span]:py-0'
color='primary'>
<HiUserAdd className='mr-2' />
Add
</Button>
)}
theme={{
field: {
rightIcon: {
base: twMerge(
theme.textInput.field.rightIcon.base,
'pointer-events-auto'
),
},
},
}}
/>
</div>
<AvatarGroup className='mb-6'>
<Avatar
alt=''
img='/images/profile/user-2.jpg'
rounded
size='sm'
stacked
/>
<Avatar
alt=''
img='/images/profile/user-3.jpg'
rounded
size='sm'
stacked
/>
<Avatar
alt=''
img='/images/profile/user-4.jpg'
rounded
size='sm'
stacked
/>
<Avatar
alt=''
img='/images/profile/user-5.jpg'
rounded
size='sm'
stacked
/>
</AvatarGroup>
<Button className='w-full' color='primary'>
<HiCalendar className='mr-2' />
Create event
</Button>
</form>
</DrawerItems>
</Drawer>
</div>
)
}
export default FormDrawerCode
Disable BackDrop
MENU
Sample Code
Show Code
Copy Code
import { useState } from 'react'
import {
IconLayoutDashboard,
IconShoppingBag,
IconListDetails,
IconLogin2,
IconUserPlus,
IconFiles,
IconComponents,
IconInfoSquareRounded,
} from '@tabler/icons-react'
import { HiSearch } from 'react-icons/hi'
import {
Button,
Drawer,
DrawerHeader,
DrawerItems,
Sidebar,
SidebarItem,
SidebarItemGroup,
SidebarItems,
TextInput,
} from 'flowbite-react'
const DisableBackDropCode = () => {
const [isOpen, setIsOpen] = useState(false)
const handleClose = () => setIsOpen(false)
return (
<div>
<Button color={'warning'} onClick={() => setIsOpen(true)}>
Show Drawer
</Button>
<Drawer
open={isOpen}
onClose={handleClose}
className='p-4'
backdrop={false}>
<DrawerHeader title='MENU' titleIcon={() => <></>} />
<DrawerItems>
<Sidebar
aria-label='Sidebar with multi-level dropdown example'
className='[&>div]:bg-transparent [&>div]:p-0'>
<div className='flex h-full flex-col justify-between py-2'>
<div>
<form className='pb-3 md:hidden'>
<TextInput
icon={HiSearch}
type='search'
placeholder='Search'
required
size={32}
/>
</form>
<SidebarItems>
<SidebarItemGroup>
<SidebarItem
href='/'
icon={() => <IconLayoutDashboard size={20} />}>
Dashboard
</SidebarItem>
<SidebarItem
href='/e-commerce/products'
icon={() => <IconShoppingBag size={20} />}>
Products
</SidebarItem>
<SidebarItem
href='/users/list'
icon={() => <IconListDetails size={20} />}>
Users list
</SidebarItem>
<SidebarItem
href='/authentication/sign-in'
icon={() => <IconLogin2 size={20} />}>
Sign in
</SidebarItem>
<SidebarItem
href='/authentication/sign-up'
icon={() => <IconUserPlus size={20} />}>
Sign up
</SidebarItem>
</SidebarItemGroup>
<SidebarItemGroup>
<SidebarItem
href='https://github.com/themesberg/flowbite-react/'
icon={() => <IconFiles size={20} />}>
Docs
</SidebarItem>
<SidebarItem
href='https://flowbite-react.com/'
icon={() => <IconComponents size={20} />}>
Components
</SidebarItem>
<SidebarItem
href='https://github.com/themesberg/flowbite-react/issues'
icon={() => <IconInfoSquareRounded size={20} />}>
Help
</SidebarItem>
</SidebarItemGroup>
</SidebarItems>
</div>
</div>
</Sidebar>
</DrawerItems>
</Drawer>
</div>
)
}
export default DisableBackDropCode
Swipeable
Add widget
Chart
Table
Ticket
List
Price
Users
Task
Custom
Sample Code
Show Code
Copy Code
import { useState } from 'react'
import { Button, Drawer, DrawerHeader, DrawerItems } from 'flowbite-react'
import { HiBars2, HiSquaresPlus } from 'react-icons/hi2'
const SwipeableCode = () => {
const [isSwipeable, setIsSwipeable] = useState(false)
const swipeableClose = () => setIsSwipeable(false)
return (
<div>
<Button onClick={() => setIsSwipeable(true)} color='info'>
Swipeable Drawer
</Button>
<Drawer
edge
open={isSwipeable}
onClose={swipeableClose}
position='bottom'
className='p-0'>
<DrawerHeader
closeIcon={HiBars2}
title='Add widget'
titleIcon={HiSquaresPlus}
onClick={() => setIsSwipeable(!isSwipeable)}
className='cursor-pointer px-4 pt-4 hover:bg-gray-50 dark:hover:bg-gray-700'
/>
<DrawerItems className='p-4'>
<div className='grid grid-cols-3 gap-4 p-4 lg:grid-cols-4'>
<div className='cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600'>
<div className='mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600'>
<svg
className='inline h-5 w-5 text-gray-500 dark:text-gray-400'
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
fill='currentColor'
viewBox='0 0 22 21'>
<path d='M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z' />
<path d='M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z' />
</svg>
</div>
<div className='text-center font-medium text-gray-500 dark:text-gray-400'>
Chart
</div>
</div>
<div className='cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600'>
<div className='mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600'>
<svg
className='inline h-5 w-5 text-gray-500 dark:text-gray-400'
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
fill='currentColor'
viewBox='0 0 20 14'>
<path d='M18 0H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM9 6v2H2V6h7Zm2 0h7v2h-7V6Zm-9 4h7v2H2v-2Zm9 2v-2h7v2h-7Z' />
</svg>
</div>
<div className='text-center font-medium text-gray-500 dark:text-gray-400'>
Table
</div>
</div>
<div className='hidden cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 lg:block dark:bg-gray-700 dark:hover:bg-gray-600'>
<div className='mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600'>
<svg
className='inline h-5 w-5 text-gray-500 dark:text-gray-400'
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
fill='currentColor'
viewBox='0 0 14 20'>
<path d='M13.383.076a1 1 0 0 0-1.09.217L11 1.586 9.707.293a1 1 0 0 0-1.414 0L7 1.586 5.707.293a1 1 0 0 0-1.414 0L3 1.586 1.707.293A1 1 0 0 0 0 1v18a1 1 0 0 0 1.707.707L3 18.414l1.293 1.293a1 1 0 0 0 1.414 0L7 18.414l1.293 1.293a1 1 0 0 0 1.414 0L11 18.414l1.293 1.293A1 1 0 0 0 14 19V1a1 1 0 0 0-.617-.924ZM10 15H4a1 1 0 1 1 0-2h6a1 1 0 0 1 0 2Zm0-4H4a1 1 0 1 1 0-2h6a1 1 0 1 1 0 2Zm0-4H4a1 1 0 0 1 0-2h6a1 1 0 1 1 0 2Z' />
</svg>
</div>
<div className='text-center font-medium text-gray-500 dark:text-gray-400'>
Ticket
</div>
</div>
<div className='cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600'>
<div className='mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600'>
<svg
className='inline h-5 w-5 text-gray-500 dark:text-gray-400'
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
fill='currentColor'
viewBox='0 0 18 20'>
<path d='M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z' />
</svg>
</div>
<div className='text-center font-medium text-gray-500 dark:text-gray-400'>
List
</div>
</div>
<div className='cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600'>
<div className='mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600'>
<svg
className='inline h-5 w-5 text-gray-500 dark:text-gray-400'
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 20 16'>
<path
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
d='M5 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1M2 5h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm8 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z'
/>
</svg>
</div>
<div className='text-center font-medium text-gray-500 dark:text-gray-400'>
Price
</div>
</div>
<div className='cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600'>
<div className='mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600'>
<svg
className='inline h-5 w-5 text-gray-500 dark:text-gray-400'
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
fill='currentColor'
viewBox='0 0 20 18'>
<path d='M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z' />
</svg>
</div>
<div className='text-center font-medium text-gray-500 dark:text-gray-400'>
Users
</div>
</div>
<div className='hidden cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 lg:block dark:bg-gray-700 dark:hover:bg-gray-600'>
<div className='mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600'>
<svg
className='inline h-5 w-5 text-gray-500 dark:text-gray-400'
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
fill='currentColor'
viewBox='0 0 20 18'>
<path d='M6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm-1.391 7.361.707-3.535a3 3 0 0 1 .82-1.533L7.929 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h4.259a2.975 2.975 0 0 1-.15-1.639ZM8.05 17.95a1 1 0 0 1-.981-1.2l.708-3.536a1 1 0 0 1 .274-.511l6.363-6.364a3.007 3.007 0 0 1 4.243 0 3.007 3.007 0 0 1 0 4.243l-6.365 6.363a1 1 0 0 1-.511.274l-3.536.708a1.07 1.07 0 0 1-.195.023Z' />
</svg>
</div>
<div className='text-center font-medium text-gray-500 dark:text-gray-400'>
Task
</div>
</div>
<div className='cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600'>
<div className='mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600'>
<svg
className='inline h-5 w-5 text-gray-500 dark:text-gray-400'
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 20 20'>
<path
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
d='M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2'
/>
</svg>
</div>
<div className='text-center font-medium text-gray-500 dark:text-gray-400'>
Custom
</div>
</div>
</div>
</DrawerItems>
</Drawer>
</div>
)
}
export default SwipeableCode
Left Drawer
Drawer
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
Sample Code
Show Code
Copy Code
import { useState } from 'react'
import { Button, Drawer, DrawerHeader, DrawerItems } from 'flowbite-react'
const DefaultDrawerCode = () => {
const [isOpen, setIsOpen] = useState(false)
const handleClose = () => setIsOpen(false)
return (
<div>
<Button color={'primary'} onClick={() => setIsOpen(true)}>
Show Drawer
</Button>
<Drawer open={isOpen} onClose={handleClose} className='p-4'>
<DrawerHeader title='Drawer' />
<DrawerItems>
<p className='mb-6 text-sm'>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets
</p>
<Button color={'primary'}>Learn More</Button>
</DrawerItems>
</Drawer>
</div>
)
}
export default DefaultDrawerCode
Right Drawer
Drawer
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
Sample Code
Show Code
Copy Code
import { useState } from 'react'
import { Button, Drawer, DrawerHeader, DrawerItems } from 'flowbite-react'
const RightDrawerCode = () => {
const [isOpen, setIsOpen] = useState(false)
const handleClose = () => setIsOpen(false)
return (
<div>
<Button color={'secondary'} onClick={() => setIsOpen(true)}>
Show Drawer
</Button>
<Drawer
open={isOpen}
onClose={handleClose}
className='p-4'
position='right'>
<DrawerHeader title='Drawer' />
<DrawerItems>
<p className='mb-6 text-sm'>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets
</p>
<Button color={'primary'}>Learn More</Button>
</DrawerItems>
</Drawer>
</div>
)
}
export default RightDrawerCode
Top Drawer
Drawer
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
Sample Code
Show Code
Copy Code
import { useState } from 'react'
import { Button, Drawer, DrawerHeader, DrawerItems } from 'flowbite-react'
const TopDrawerCode = () => {
const [isOpen, setIsOpen] = useState(false)
const handleClose = () => setIsOpen(false)
return (
<div>
<Button color={'error'} onClick={() => setIsOpen(true)}>
Open Drawer
</Button>
<Drawer
open={isOpen}
onClose={handleClose}
className='p-4'
position='top'>
<DrawerHeader title='Drawer' />
<DrawerItems>
<p className='mb-6 text-sm'>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets
</p>
<Button color={'primary'}>Learn More</Button>
</DrawerItems>
</Drawer>
</div>
)
}
export default TopDrawerCode
Bottom Drawer
Drawer
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
Sample Code
Show Code
Copy Code
import { useState } from 'react'
import { Button, Drawer, DrawerHeader, DrawerItems } from 'flowbite-react'
const BottomDrawerCode = () => {
const [isOpen, setIsOpen] = useState(false)
const handleClose = () => setIsOpen(false)
return (
<div>
<Button color={'success'} onClick={() => setIsOpen(true)}>
Open Drawer
</Button>
<Drawer
open={isOpen}
onClose={handleClose}
className='p-4'
position='bottom'>
<DrawerHeader title='Drawer' />
<DrawerItems>
<p className='mb-6 text-sm'>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets
</p>
<Button color={'primary'}>Learn More</Button>
</DrawerItems>
</Drawer>
</div>
)
}
export default BottomDrawerCode
API ( Drawer )
| Prop | Description | Type | Default |
|---|---|---|---|
open | Controls the visibility of the drawer. | boolean | false |
onClose | Callback function triggered when the drawer is closed. | '() => setIsOpen(false)' | - |
placement | Specifies the side from which the drawer will appear. | 'top' | 'right' | 'bottom' | 'left' | 'right' |
backdrop | Determines if a backdrop is displayed behind the drawer. | boolean | true |
bodyScrolling | Allows body scrolling when the drawer is open. | boolean | false |
edge | Enables swipeable edge functionality. | boolean | false |