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

import { useState } from 'react'
import { Pagination } from 'flowbite-react'

const DefaultPaginationCode = () => {
  const [currentPage, setCurrentPage] = useState(1)
  const onPageChange = (page: number) => setCurrentPage(page)

  return (
    <div>
      <div className='overflow-x-auto'>
        <Pagination
          currentPage={currentPage}
          totalPages={100}
          onPageChange={onPageChange}
        />
      </div>
    </div>
  )
}

export default DefaultPaginationCode

import { useState } from 'react'
import { Pagination } from 'flowbite-react'

const WithIconCode = () => {
  const [currentPages, setCurrentPages] = useState(1)
  const onPageChanges = (page: number) => setCurrentPages(page)

  return (
    <div>
      <div className='overflow-x-auto'>
        <Pagination
          currentPage={currentPages}
          totalPages={100}
          onPageChange={onPageChanges}
          showIcons
        />
      </div>
    </div>
  )
}

export default WithIconCode

import { useState } from 'react'
import { Pagination } from 'flowbite-react'

const PrevNextbuttonCode = () => {
  const [flowPagin, setFlowPagin] = useState(1)
  const onFlowChange = (page: number) => setFlowPagin(page)

  return (
    <div>
      <div>
        <Pagination
          layout='navigation'
          currentPage={flowPagin}
          totalPages={100}
          onPageChange={onFlowChange}
        />
      </div>
    </div>
  )
}

export default PrevNextbuttonCode

import { Pagination } from 'flowbite-react'
import { useState } from 'react'

const PrevNextIconCode = () => {
  const [currentPage, setCurrentPage] = useState(1)

  const onPageChange = (page: number) => setCurrentPage(page)

  return (
    <div>
      <div>
        <Pagination
          layout='navigation'
          currentPage={currentPage}
          totalPages={100}
          onPageChange={onPageChange}
          showIcons
        />
      </div>
    </div>
  )
}

export default PrevNextIconCode

import { Pagination } from 'flowbite-react'
import { useState } from 'react'

const TableDataCode = () => {
  const [tablePage, setTablePage] = useState(1)

  const totalItems = 1000
  const itemsPerPage = 10

  const onTableChange = (page: number) => setTablePage(page)

  return (
    <div>
      <Pagination
        layout='table'
        currentPage={tablePage}
        onPageChange={onTableChange}
        showIcons
        itemsPerPage={itemsPerPage}
        totalItems={totalItems}
      />
    </div>
  )
}

export default TableDataCode

import { useState } from 'react'
import { Pagination } from 'flowbite-react'

const ControlTextCode = () => {
  const [controltextPage, setControltextPage] = useState(1)
  const onControtextChange = (page: number) => setControltextPage(page)

  return (
    <div>
      <div className='overflow-x-auto'>
        <Pagination
          layout='pagination'
          currentPage={controltextPage}
          totalPages={1000}
          onPageChange={onControtextChange}
          previousLabel='Go back'
          nextLabel='Go forward'
          showIcons
        />
      </div>
    </div>
  )
}

export default ControlTextCode