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 * as Alert from '~/components/ui/alert'

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

1

Add Component

Insert code snippet into your project. Update import paths as needed.

import { ark } from '@ark-ui/react/factory'
import type { ComponentProps } from 'react'
import { styled } from 'styled-system/jsx'
import { alert } from 'styled-system/recipes'
import { createStyleContext } from '~/lib/create-style-context'

const { withProvider, withContext } = createStyleContext(alert)

export const Root = withProvider(styled(ark.div), 'root')
export const Content = withContext(styled(ark.div), 'content')
export const Description = withContext(styled(ark.div), 'description')
export const Icon = withContext(styled(ark.svg), 'icon')
export const Title = withContext(styled(ark.h5), 'title')

export interface RootProps extends ComponentProps<typeof Root> {}
export interface ContentProps extends ComponentProps<typeof Content> {}
export interface DescriptionProps extends ComponentProps<typeof Description> {}
export interface IconProps extends ComponentProps<typeof Icon> {}
export interface TitleProps extends ComponentProps<typeof Title> {}
2

Add Recipe

This step is necessary only if you do not use any of the Park UI plugins.

import { defineSlotRecipe } from '@pandacss/dev'

export const alert = defineSlotRecipe({
  className: 'alert',
  slots: ['root', 'content', 'description', 'icon', 'title'],
  base: {
    root: {
      background: 'bg.default',
      borderWidth: '1px',
      borderRadius: 'l3',
      display: 'flex',
      gap: '3',
      p: '4',
      width: 'full',
    },
    content: {
      display: 'flex',
      flexDirection: 'column',
      gap: '1',
    },
    description: {
      color: 'fg.muted',
      textStyle: 'sm',
    },
    icon: {
      color: 'fg.default',
      flexShrink: '0',
      width: '5',
      height: '5',
    },
    title: {
      color: 'fg.default',
      fontWeight: 'semibold',
      textStyle: 'sm',
    },
  },
})

Previous

Accordion