9.7k

Alert

PreviousNext

Displays a callout for user attention.

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import {
  VAlert,
  VAlertDescription,
  VAlertTitle,
} from '@ui-kit/src/components/Base/VAlert'
</script>

<template>
  <div class="w-full max-w-xl">
    <VAlert variant="info">
      <div class="grid gap-1">
        <VAlertTitle>Deployment ready</VAlertTitle>
        <VAlertDescription>
          This UI-kit demo uses the internal alert primitive rather than the upstream showcase component.
        </VAlertDescription>
      </div>
    </VAlert>
  </div>
</template>

Installation

pnpm dlx shadcn-vue@latest add alert

Usage

<script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
</script>

<template>
  <Alert>
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>
      You can add components and dependencies to your app using the cli.
    </AlertDescription>
  </Alert>
</template>
AccordionAlert Dialog