Success! Your changes have been saved

This is an alert with icon, title and description.

This Alert has a title and an icon. No description.

Unable to process your payment.

Please verify your billing information and try again.

• Check your card details
• Ensure sufficient funds
• Verify billing address

Installation

pnpm dlx kliping@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>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	class-variance-authority@^0.7.1
Files	components/ui/alert/alert.vue components/ui/alert/alert-description.vue components/ui/alert/alert-title.vue components/ui/alert/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Alert>
  <AlertTitle />
  <AlertDescription />
</Alert>

API Reference

Alert

Prop	Type	Default	Description
variant?	"default" | "destructive"	—	The visual style.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"alert"

AlertDescription

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"alert-description"

AlertTitle

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"alert-title"

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border, --card, --card-foreground, --destructive, --muted-foreground, --radius.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.