kosori

Alert

A callout for displaying important information.

Alert is a cva variant map over a div, with default, info, success, warning and error variants. Each state variant reads its colour from the preset's semantic Tokens, and marks itself with data-slot.

Installation

npx shadcn@latest add @kosori/alert

Example

alert-example.tsx
alert-example
import {
  IconAlertCircle,
  IconAlertTriangle,
  IconCircleCheck,
  IconInfoCircle,
} from '@tabler/icons-react';

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';

const AlertExample = () => (
  <div className='flex w-full max-w-md flex-col gap-3'>
    <Alert>
      <IconInfoCircle />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        Describe what can be done about it here.
      </AlertDescription>
    </Alert>
    <Alert variant='info'>
      <IconInfoCircle />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        Describe what can be done about it here.
      </AlertDescription>
    </Alert>
    <Alert variant='success'>
      <IconCircleCheck />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        Describe what can be done about it here.
      </AlertDescription>
    </Alert>
    <Alert variant='warning'>
      <IconAlertTriangle />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        Describe what can be done about it here.
      </AlertDescription>
    </Alert>
    <Alert variant='error'>
      <IconAlertCircle />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        Describe what can be done about it here.
      </AlertDescription>
    </Alert>
  </div>
);

export default AlertExample;

Usage

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';

const AlertDemo = () => (
  <Alert>
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>Your changes have been saved.</AlertDescription>
  </Alert>
);

Variants

PartPropValues
Alertvariantdefault, error, info, success, warning

Accordion

A set of collapsible panels with headings and content.

Alert Dialog

A dialog that requires user response to proceed.

On this page

InstallationExampleUsageVariants