Ready-to-Use Components Powered by Flowbite, ShadCN & Headless UI

import { IconCalendarMonth } from '@tabler/icons-react'
import { Datepicker } from 'flowbite-react'

const DefaultDatepCode = () => {
  return (
    <>
      <div className='max-w-sm'>
        <Datepicker
          className='!form-control'
          icon={() => <IconCalendarMonth size={20} />}
        />
      </div>
    </>
  )
}

export default DefaultDatepCode

import { IconCalendarMonth } from '@tabler/icons-react'
import { Datepicker } from 'flowbite-react'

const LocalizationDatepCode = () => {
  return (
    <>
      <div className='max-w-sm'>
        <Datepicker
          language='pt-BR'
          labelTodayButton='Hoje'
          labelClearButton='Limpar'
          className='!form-control'
          icon={() => <IconCalendarMonth size={20} />}
        />
      </div>
    </>
  )
}

export default LocalizationDatepCode

import { IconCalendarMonth } from '@tabler/icons-react'
import { Datepicker } from 'flowbite-react'

const LimitDatepCode = () => {
  return (
    <>
      <div className='max-w-sm'>
        <Datepicker
          minDate={new Date(2023, 0, 1)}
          maxDate={new Date(2023, 3, 30)}
          className='!form-control'
          icon={() => <IconCalendarMonth size={20} />}
        />
      </div>
    </>
  )
}

export default LimitDatepCode

import { IconCalendarMonth } from '@tabler/icons-react'
import { Datepicker } from 'flowbite-react'

const WeekStartCode = () => {
  return (
    <>
      <div className='max-w-sm'>
        <Datepicker
          weekStart={1} // Monday
          className='!form-control'
          icon={() => <IconCalendarMonth size={20} />}
        />
      </div>
    </>
  )
}

export default WeekStartCode

import { IconCalendarMonth } from '@tabler/icons-react'
import { Datepicker } from 'flowbite-react'

const AutoHideCode = () => {
  return (
    <>
      <div className='max-w-sm'>
        <Datepicker
          autoHide={false}
          className='!form-control'
          icon={() => <IconCalendarMonth size={20} />}
        />
      </div>
    </>
  )
}

export default AutoHideCode

import { IconCalendarMonth } from '@tabler/icons-react'
import { Datepicker } from 'flowbite-react'

const TitleDatePickerCode = () => {
  return (
    <>
      <div className='max-w-sm'>
        <Datepicker
          title='DatePicker Title'
          className='!form-control'
          icon={() => <IconCalendarMonth size={20} />}
        />
      </div>
    </>
  )
}

export default TitleDatePickerCode