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

import { Kbd } from 'flowbite-react'

const DefaultKbdCode = () => {
  return (
    <>
      <div className='flex flex-wrap gap-3'>
        <Kbd className='rounded-md'>Shift</Kbd>
        <Kbd className='rounded-md'>Ctrl</Kbd>
        <Kbd className='rounded-md'>Tab</Kbd>
        <Kbd className='rounded-md'>Caps Lock</Kbd>
        <Kbd className='rounded-md'>Esc</Kbd>
        <Kbd className='rounded-md'>Spacebar</Kbd>
        <Kbd className='rounded-md'>Enter</Kbd>
      </div>
    </>
  )
}

export default DefaultKbdCode

import { Kbd } from 'flowbite-react'

const InsideTextCode = () => {
  return (
    <>
      <div>
        Please press <Kbd className='rounded-md'>Ctrl</Kbd> +{' '}
        <Kbd className='rounded-md'>Shift</Kbd> +{' '}
        <Kbd className='rounded-md'>R</Kbd> to re-render an MDN page.
      </div>
    </>
  )
}

export default InsideTextCode

import {
  Table,
  Kbd,
  TableBody,
  TableCell,
  TableHead,
  TableHeadCell,
  TableRow,
} from 'flowbite-react'
import {
  MdKeyboardArrowDown,
  MdKeyboardArrowLeft,
  MdKeyboardArrowRight,
  MdKeyboardArrowUp,
} from 'react-icons/md'

const InsideTableCode = () => {
  return (
    <div className='overflow-x-auto'>
      <Table>
        <TableHead>
          <TableRow>
            <TableHeadCell>Key</TableHeadCell>
            <TableHeadCell>Description</TableHeadCell>
          </TableRow>
        </TableHead>
        <TableBody className='divide-y divide-border'>
          <TableRow className='bg-white dark:border-darkborder dark:bg-gray-900'>
            <TableCell className='whitespace-nowrap font-medium text-gray-900 dark:text-white'>
              <Kbd className='rounded-md'>Shift</Kbd> <span>or</span>{' '}
              <Kbd className='rounded-md'>Tab</Kbd>
            </TableCell>
            <TableCell>Navigate to interactive elements</TableCell>
          </TableRow>
          <TableRow className='bg-white dark:border-darkborder dark:bg-gray-900'>
            <TableCell className='whitespace-nowrap font-medium text-gray-900 dark:text-white'>
              <Kbd className='rounded-md'>Enter</Kbd> or{' '}
              <Kbd className='rounded-md'>Spacebar</Kbd>
            </TableCell>
            <TableCell>
              Ensure elements with ARIA role="button" can be activated with both
              key commands.
            </TableCell>
          </TableRow>
          <TableRow className='bg-white dark:border-darkborder dark:bg-gray-900'>
            <TableCell className='whitespace-nowrap font-medium text-gray-900 dark:text-white'>
              <span className='inline-flex gap-2'>
                <Kbd icon={MdKeyboardArrowUp} />
                <Kbd icon={MdKeyboardArrowDown} />
              </span>
              <span> or </span>
              <span className='inline-flex gap-2'>
                <Kbd icon={MdKeyboardArrowLeft} />
                <Kbd icon={MdKeyboardArrowRight} />
              </span>
            </TableCell>
            <TableCell>Choose and activate previous/next tab.</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  )
}

export default InsideTableCode