Park UI Logo
GitHub
Components
Alert

Alert

A component that displays a brief, important message to the user.

Usage

Browser Update available
For the best experience, please update your browser.
import { InfoIcon } from 'lucide-react'
import { Alert } from '~/components/ui'

export const Demo = (props: Alert.RootProps) => {
  return (
    <Alert.Root {...props}>
      <Alert.Icon asChild>
        <InfoIcon />
      </Alert.Icon>
      <Alert.Content>
        <Alert.Title>Browser Update available</Alert.Title>
        <Alert.Description>For the best experience, please update your browser.</Alert.Description>
      </Alert.Content>
    </Alert.Root>
  )
}

Examples

With Icon and Title

Browser Update available
<Alert.Root>
  <Alert.Icon asChild>
    <InfoIcon />
  </Alert.Icon>
  <Alert.Title>Browser Update available</Alert.Title>
</Alert.Root>

Installation

npx @park-ui/cli components add alert