Shadow Panda
Shadow Panda
Component
Alert

Alert

Displays a callout for user attention.

shadcn/ui

Installation

Copy and paste the following code into your project

components/ui/alert/index.tsx
import * as React from 'react'
import { styled } from '@shadow-panda/styled-system/jsx'
import { alert, alertTitle, alertDescription } from '@shadow-panda/styled-system/recipes'
 
const BaseAlert = (
  props: React.HTMLAttributes<HTMLDivElement>,
  ref: React.ForwardedRef<HTMLDivElement>,
) => <div ref={ref} {...props} role="alert" />
 
export const Alert = styled(
  React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(BaseAlert),
  alert,
)
export const AlertTitle = styled('h5', alertTitle)
export const AlertDescription = styled('div', alertDescription)

Update the import paths to match your project setup

Usage

import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'
import { Terminal } from 'lucide-react' // Any icon of your choice
<Alert>
  <Terminal />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Examples

Default

Destructive

AccordionAlert Dialog