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

import { Spinner } from 'flowbite-react'

const DefaultSpinnerCode = () => {
  return (
    <div>
      <Spinner aria-label='Default status example' />
    </div>
  )
}

export default DefaultSpinnerCode

import { Spinner } from 'flowbite-react'

const ColorSpinnerCode = () => {
  return (
    <div>
      <div className='flex flex-wrap gap-3 pt-3'>
        <Spinner color='info' aria-label='Info spinner example' />
        <Spinner color='success' aria-label='Success spinner example' />
        <Spinner color='failure' aria-label='Failure spinner example' />
        <Spinner color='warning' aria-label='Warning spinner example' />
        <Spinner color='pink' aria-label='Pink spinner example' />
        <Spinner color='purple' aria-label='Purple spinner example' />
      </div>
    </div>
  )
}

export default ColorSpinnerCode

import { Spinner } from 'flowbite-react'

const SizingSpinnerCode = () => {
  return (
    <div>
      <div className='flex flex-wrap gap-3'>
        <Spinner aria-label='Extra small spinner example' size='xs' />
        <Spinner aria-label='Small spinner example' size='sm' />
        <Spinner aria-label='Medium sized spinner example' size='md' />
        <Spinner aria-label='Large spinner example' size='lg' />
        <Spinner aria-label='Extra large spinner example' size='xl' />
      </div>
    </div>
  )
}

export default SizingSpinnerCode

import { Spinner } from 'flowbite-react'

const AlignSpinnerCode = () => {
  return (
    <div>
      <div className='w-1/3'>
        <div className='text-left'>
          <Spinner aria-label='Left-aligned spinner example' />
        </div>
        <div className='text-center'>
          <Spinner aria-label='Center-aligned spinner example' />
        </div>
        <div className='text-right'>
          <Spinner aria-label='Right-aligned spinner example' />
        </div>
      </div>
    </div>
  )
}

export default AlignSpinnerCode

import { Button, Spinner } from 'flowbite-react'

const LoadButtonCode = () => {
  return (
    <div>
      <div className='flex flex-row gap-3 py-3'>
        <Button color='primary'>
          <Spinner aria-label='Spinner button example' size='sm' />
          <span className='pl-3'>Loading...</span>
        </Button>
        <Button color='gray'>
          <Spinner aria-label='Alternate spinner button example' size='sm' />
          <span className='pl-3'>Loading...</span>
        </Button>
      </div>
    </div>
  )
}

export default LoadButtonCode