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

Component Library

Browse and explore components

Alert

An Alert is a UI component used to display important messages or notifications to the user.

Default Alert

Primary - A simple primary alert

Secondary A simple Secondary alert

Success A simple Success alert

Info A simple Info alert

Warning A simple Warning alert

Error A simple Error alert

Dark A simple Dark alert

import { Alert } from 'flowbite-react'

const DefaultAlertCode = () => {
  return (
    <div>
      <div className='flex flex-col gap-2'>
        <Alert color='primary' className='rounded-md'>
          <span className='font-medium'>Primary</span> - A simple primary alert
        </Alert>

        <Alert color='secondary' className='rounded-md'>
          <span className='font-medium'>Secondary</span> A simple Secondary
          alert
        </Alert>

        <Alert color='success' className='rounded-md'>
          <span className='font-medium'>Success</span> A simple Success alert
        </Alert>

        <Alert color='info' className='rounded-md'>
          <span className='font-medium'>Info</span> A simple Info alert
        </Alert>

        <Alert color='warning' className='rounded-md'>
          <span className='font-medium'>Warning</span> A simple Warning alert
        </Alert>

        <Alert color='error' className='rounded-md'>
          <span className='font-medium'>Error</span> A simple Error alert
        </Alert>

        <Alert color='dark' className='rounded-md'>
          <span className='font-medium'>Dark</span> A simple Dark alert
        </Alert>
      </div>
    </div>
  )
}

export default DefaultAlertCode

Light Default Alert

Primary - A simple primary alert

Secondary A simple Secondary alert

Success A simple Success alert

Info A simple Info alert

Warning A simple Warning alert

Error A simple Error alert

Light A simple Light alert

import { Alert } from 'flowbite-react'

const LightDefaultAlertCode = () => {
  return (
    <div>
      <div className='flex flex-col gap-2'>
        <Alert color='lightprimary' className='rounded-md'>
          <span className='font-medium'>Primary</span> - A simple primary alert
        </Alert>

        <Alert color='lightsecondary' className='rounded-md'>
          <span className='font-medium'>Secondary</span> A simple Secondary
          alert
        </Alert>

        <Alert color='lightsuccess' className='rounded-md'>
          <span className='font-medium'>Success</span> A simple Success alert
        </Alert>

        <Alert color='lightinfo' className='rounded-md'>
          <span className='font-medium'>Info</span> A simple Info alert
        </Alert>

        <Alert color='lightwarning' className='rounded-md'>
          <span className='font-medium'>Warning</span> A simple Warning alert
        </Alert>

        <Alert color='lighterror' className='rounded-md'>
          <span className='font-medium'>Error</span> A simple Error alert
        </Alert>

        <Alert color='lightgray' className='rounded-md'>
          <span className='font-medium'>Light</span> A simple Light alert
        </Alert>
      </div>
    </div>
  )
}

export default LightDefaultAlertCode

Alert With Icon

Primary - A simple primary alert

Secondary - A simple secondary alert

Success - A simple success alert

Info - A simple Info alert

Warning - A simple warning alert

Danger - A simple Danger alert

Dark - A simple Dark alert

import { Alert } from 'flowbite-react'
import { HiInformationCircle } from 'react-icons/hi'

const AlertWithIconCode = () => {
  return (
    <div>
      <div className='flex flex-col gap-2'>
        <Alert
          color='primary'
          icon={HiInformationCircle}
          className='rounded-md'>
          <span className='font-medium'>Primary</span> - A simple primary alert
        </Alert>

        <Alert
          color='secondary'
          icon={HiInformationCircle}
          className='rounded-md'>
          <span className='font-medium'>Secondary</span> - A simple secondary
          alert
        </Alert>

        <Alert
          color='success'
          icon={HiInformationCircle}
          className='rounded-md'>
          <span className='font-medium'>Success</span> - A simple success alert
        </Alert>

        <Alert color='info' icon={HiInformationCircle} className='rounded-md'>
          <span className='font-medium'>Info</span> - A simple Info alert
        </Alert>

        <Alert
          color='warning'
          icon={HiInformationCircle}
          className='rounded-md'>
          <span className='font-medium'>Warning</span> - A simple warning alert
        </Alert>

        <Alert color='error' icon={HiInformationCircle} className='rounded-md'>
          <span className='font-medium'>Danger</span> - A simple Danger alert
        </Alert>

        <Alert color='dark' icon={HiInformationCircle} className='rounded-md'>
          <span className='font-medium'>Dark</span> - A simple Dark alert
        </Alert>
      </div>
    </div>
  )
}

export default AlertWithIconCode

Light Alert With Icon

Primary - A simple Primary alert

Secondary - A simple Secondary alert

Success - A simple Success alert

Info - A simple Info alert

Warning - A simple Warning alert

Error - A simple Error alert

Light A simple Light alert

import { Alert } from 'flowbite-react'
import { HiInformationCircle } from 'react-icons/hi'

const LightAlertIconCode = () => {
  return (
    <div>
      <div className='flex flex-col gap-2'>
        <Alert
          color='lightprimary'
          icon={HiInformationCircle}
          className='rounded-md'>
          <span className='font-medium'>Primary</span> - A simple Primary alert
        </Alert>

        <Alert
          color='lightsecondary'
          icon={HiInformationCircle}
          className='rounded-md'>
          <span className='font-medium'>Secondary</span> - A simple Secondary
          alert
        </Alert>

        <Alert
          color='lightsuccess'
          icon={HiInformationCircle}
          className='rounded-md'>
          <span className='font-medium'>Success</span> - A simple Success alert
        </Alert>

        <Alert
          color='lightinfo'
          icon={HiInformationCircle}
          className='rounded-md'>
          <span className='font-medium'>Info</span> - A simple Info alert
        </Alert>

        <Alert
          color='lightwarning'
          icon={HiInformationCircle}
          className='rounded-md'>
          <span className='font-medium'>Warning</span> - A simple Warning alert
        </Alert>

        <Alert
          color='lighterror'
          icon={HiInformationCircle}
          className='rounded-md'>
          <span className='font-medium'>Error</span> - A simple Error alert
        </Alert>

        <Alert
          color='lightgray'
          icon={HiInformationCircle}
          className='rounded-md'>
          <span className='font-medium'>Light</span> A simple Light alert
        </Alert>
      </div>
    </div>
  )
}

export default LightAlertIconCode

Dismissible Alert

Primary - A simple Primary alert

Secondary - A simple Secondary alert

Success - A simple Success alert

Info - A simple Info alert

Warning - A simple Warning alert

Error - A simple Error alert

Dark - A simple Dark alert

import { Alert } from 'flowbite-react'

const DismisableAlertCode = () => {
  return (
    <div>
      <div className='flex flex-col gap-2'>
        <Alert
          color='primary'
          onDismiss={() => alert('Alert dismissed!')}
          className='rounded-md'>
          <span className='font-medium'>Primary</span> - A simple Primary alert
        </Alert>

        <Alert
          color='secondary'
          onDismiss={() => alert('Alert dismissed!')}
          className='rounded-md'>
          <span className='font-medium'>Secondary</span> - A simple Secondary
          alert
        </Alert>

        <Alert
          color='success'
          onDismiss={() => alert('Alert dismissed!')}
          className='rounded-md'>
          <span className='font-medium'>Success</span> - A simple Success alert
        </Alert>

        <Alert
          color='info'
          onDismiss={() => alert('Alert dismissed!')}
          className='rounded-md'>
          <span className='font-medium'>Info</span> - A simple Info alert
        </Alert>

        <Alert
          color='warning'
          onDismiss={() => alert('Alert dismissed!')}
          className='rounded-md'>
          <span className='font-medium'>Warning</span> - A simple Warning alert
        </Alert>

        <Alert
          color='error'
          onDismiss={() => alert('Alert dismissed!')}
          className='rounded-md'>
          <span className='font-medium'>Error</span> - A simple Error alert
        </Alert>

        <Alert
          color='dark'
          onDismiss={() => alert('Alert dismissed!')}
          className='rounded-md'>
          <span className='font-medium'>Dark</span> - A simple Dark alert
        </Alert>
      </div>
    </div>
  )
}

export default DismisableAlertCode

Light Dismissible Alert

Primary - A simple Primary alert

Secondary - A simple Secondary alert

Success - A simple Success alert

Info - A simple Info alert

Warning - A simple Warning alert

Error - A simple Error alert

Dark - A simple Dark alert

import { Alert } from 'flowbite-react'

const LightDissmisableCode = () => {
  return (
    <div>
      <div className='flex flex-col gap-2'>
        <Alert
          color='lightprimary'
          onDismiss={() => alert('Alert dismissed!')}
          className='rounded-md'>
          <span className='font-medium'>Primary</span> - A simple Primary alert
        </Alert>

        <Alert
          color='lightsecondary'
          onDismiss={() => alert('Alert dismissed!')}
          className='rounded-md'>
          <span className='font-medium'>Secondary</span> - A simple Secondary
          alert
        </Alert>

        <Alert
          color='lightsuccess'
          onDismiss={() => alert('Alert dismissed!')}
          className='rounded-md'>
          <span className='font-medium'>Success</span> - A simple Success alert
        </Alert>

        <Alert
          color='lightinfo'
          onDismiss={() => alert('Alert dismissed!')}
          className='rounded-md'>
          <span className='font-medium'>Info</span> - A simple Info alert
        </Alert>

        <Alert
          color='lightwarning'
          onDismiss={() => alert('Alert dismissed!')}
          className='rounded-md'>
          <span className='font-medium'>Warning</span> - A simple Warning alert
        </Alert>

        <Alert
          color='lighterror'
          onDismiss={() => alert('Alert dismissed!')}
          className='rounded-md'>
          <span className='font-medium'>Error</span> - A simple Error alert
        </Alert>

        <Alert
          color='lightgray'
          onDismiss={() => alert('Alert dismissed!')}
          className='rounded-md'>
          <span className='font-medium'>Dark</span> - A simple Dark alert
        </Alert>
      </div>
    </div>
  )
}

export default LightDissmisableCode

Rounded Alert

Primary - A simple Primary alert

Secondary - A simple Secondary alert

Success - A simple Success alert

Info - A simple Info alert

Warning - A simple Warning alert

Error - A simple Error alert

Dark - A simple Dark alert

import { Alert } from 'flowbite-react'

const RoundedAlertCode = () => {
  return (
    <div>
      <div className='flex flex-col gap-2'>
        <Alert color='primary' rounded>
          <span className='font-medium'>Primary</span> - A simple Primary alert
        </Alert>

        <Alert color='secondary' rounded>
          <span className='font-medium'>Secondary</span> - A simple Secondary
          alert
        </Alert>

        <Alert color='success' rounded>
          <span className='font-medium'>Success</span> - A simple Success alert
        </Alert>

        <Alert color='info' rounded>
          <span className='font-medium'>Info</span> - A simple Info alert
        </Alert>

        <Alert color='warning' rounded>
          <span className='font-medium'>Warning</span> - A simple Warning alert
        </Alert>

        <Alert color='error' rounded>
          <span className='font-medium'>Error</span> - A simple Error alert
        </Alert>

        <Alert color='dark' rounded>
          <span className='font-medium'>Dark</span> - A simple Dark alert
        </Alert>
      </div>
    </div>
  )
}

export default RoundedAlertCode

Light Rounded Alert

Primary - A simple Primary alert

Secondary - A simple Secondary alert

Success - A simple Success alert

Info - A simple Info alert

Warning - A simple Warning alert

Error - A simple Error alert

Light - A simple Light alert

import { Alert } from 'flowbite-react'

const LightRoundedCode = () => {
  return (
    <div>
      <div className='flex flex-col gap-2'>
        <Alert color='lightprimary' rounded>
          <span className='font-medium'>Primary</span> - A simple Primary alert
        </Alert>

        <Alert color='lightsecondary' rounded>
          <span className='font-medium'>Secondary</span> - A simple Secondary
          alert
        </Alert>

        <Alert color='lightsuccess' rounded>
          <span className='font-medium'>Success</span> - A simple Success alert
        </Alert>

        <Alert color='lightinfo' rounded>
          <span className='font-medium'>Info</span> - A simple Info alert
        </Alert>

        <Alert color='lightwarning' rounded>
          <span className='font-medium'>Warning</span> - A simple Warning alert
        </Alert>

        <Alert color='lighterror' rounded>
          <span className='font-medium'>Error</span> - A simple Error alert
        </Alert>

        <Alert color='lightgray' rounded>
          <span className='font-medium'>Light</span> - A simple Light alert
        </Alert>
      </div>
    </div>
  )
}

export default LightRoundedCode

Light Border Accent

Primary - A simple Primary alert

Secondary - A simple Secondary alert

Success - A simple Success alert

Info - A simple Info alert

Warning - A simple Warning alert

Error - A simple Error alert

import { Alert } from 'flowbite-react'

const LightBorderAcccentCode = () => {
  return (
    <div>
      <div className='flex flex-col gap-2'>
        <Alert color='lightprimary' withBorderAccent>
          <span>
            <span className='font-medium'>Primary</span> - A simple Primary
            alert
          </span>
        </Alert>

        <Alert color='lightsecondary' withBorderAccent>
          <span>
            <span className='font-medium'>Secondary</span> - A simple Secondary
            alert
          </span>
        </Alert>

        <Alert color='lightsuccess' withBorderAccent>
          <span>
            <span className='font-medium'>Success</span> - A simple Success
            alert
          </span>
        </Alert>

        <Alert color='lightinfo' withBorderAccent>
          <span>
            <span className='font-medium'>Info</span> - A simple Info alert
          </span>
        </Alert>

        <Alert color='lightwarning' withBorderAccent>
          <span>
            <span className='font-medium'>Warning</span> - A simple Warning
            alert
          </span>
        </Alert>

        <Alert color='lighterror' withBorderAccent>
          <span>
            <span className='font-medium'>Error</span> - A simple Error alert
          </span>
        </Alert>
      </div>
    </div>
  )
}

export default LightBorderAcccentCode

Additional Content

Info alert! Change a few things up and try submitting again.

More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

import { Alert, Button } from 'flowbite-react'
import { HiInformationCircle, HiEye } from 'react-icons/hi'

const AdditionalAlertCode = () => {
  function ExampleAdditionalContent() {
    return (
      <>
        <div className='mb-4 mt-2 text-sm text-cyan-700 dark:text-cyan-800'>
          More info about this info alert goes here. This example text is going
          to run a bit longer so that you can see how spacing within an alert
          works with this kind of content.
        </div>
        <div className='flex gap-3'>
          <Button
            color={'primary'}
            className='flex gap-2 items-center'
            size={'sm'}>
            <HiEye size={15} />
            View more
          </Button>
          <Button
            color={'error'}
            className='flex gap-2 items-center'
            size={'sm'}>
            Dismiss
          </Button>
        </div>
      </>
    )
  }

  return (
    <div>
      <Alert
        additionalContent={<ExampleAdditionalContent />}
        color='lightprimary'
        icon={HiInformationCircle}
        className='rounded-md'>
        <span className='font-medium'>Info alert!</span> Change a few things up
        and try submitting again.
      </Alert>
    </div>
  )
}

export default AdditionalAlertCode

All Options

Info alert! Change a few things up and try submitting again.

More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

import { Alert, Button } from 'flowbite-react'
import { HiInformationCircle, HiEye } from 'react-icons/hi'

const AllOptionscode = () => {
  function ExampleAdditionalContent() {
    return (
      <>
        <div className='mb-4 mt-2 text-success'>
          More info about this info alert goes here. This example text is going
          to run a bit longer so that you can see how spacing within an alert
          works with this kind of content.
        </div>
        <div className='flex gap-3'>
          <Button
            color={'success'}
            className='flex gap-2 items-center'
            size={'sm'}>
            <HiEye size={15} />
            View more
          </Button>
          <Button
            color={'error'}
            className='flex gap-2 items-center'
            size={'sm'}>
            Dismiss
          </Button>
        </div>
      </>
    )
  }

  return (
    <div>
      <Alert
        additionalContent={<ExampleAdditionalContent />}
        color='lightsuccess'
        icon={HiInformationCircle}
        onDismiss={() => alert('Alert dismissed!')}
        rounded
        className='rounded-md'>
        <span className='font-medium'>Info alert!</span> Change a few things up
        and try submitting again.
      </Alert>
    </div>
  )
}

export default AllOptionscode

API ( Alert )

Prop	Description	Type	Default
color	Sets the color scheme of the alert box.	'primary' \| 'success' \| 'warning' \| 'green'	'info'
icon	Adds a custom icon to the alert box.	'HiInformationCircle'	-
onDismiss	Callback function triggered when the dismiss button is clicked.	onDismiss={() => alert('Alert dismissed!')}	-
rounded	Applies rounded corners to the alert box.	boolean	false
withBorderAccent	Adds a border accent to the alert box.	boolean	false
additionalContent	Allows additional content to be added inside the alert box.	React.ReactNode	null

Menu

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

Component Library

INPUTS

DATA DISPLAY

FEEDBACK

NAVIGATION

SURFACES

UTILS

Alert

Default Alert

Sample Code

Light Default Alert

Sample Code

Alert With Icon

Sample Code

Light Alert With Icon

Sample Code

Dismissible Alert

Sample Code

Light Dismissible Alert

Sample Code

Rounded Alert

Sample Code

Light Rounded Alert

Sample Code

Light Border Accent

Sample Code

Additional Content

Sample Code

All Options

Sample Code

API ( Alert )