Docs
Alert
Alert
Displays a callout for user attention.
Loading...
Loading...
import {
UbAlertDescriptionDirective,
UbAlertDirective,
UbAlertIconDirective,
UbAlertTitleDirective,
} from '@/components/ui/alert'
import { Component } from '@angular/core'
import { NgIconComponent, provideIcons } from '@ng-icons/core'
import { lucideRocket } from '@ng-icons/lucide'
@Component({
standalone: true,
selector: 'alert-demo-new-york',
imports: [
NgIconComponent,
UbAlertDirective,
UbAlertTitleDirective,
UbAlertDescriptionDirective,
UbAlertIconDirective,
],
viewProviders: [provideIcons({ lucideRocket })],
template: `
<div ubAlert>
<ng-icon ubAlertIcon name="lucideRocket" class="h-4 w-4" />
<h5 ubAlertTitle>Heads up!</h5>
<div ubAlertDescription>
You can add components and dependencies to your app using the cli.
</div>
</div>
`,
})
export class AlertDemoNewYork { }import {
UbAlertDescriptionDirective,
UbAlertDirective,
UbAlertIconDirective,
UbAlertTitleDirective,
} from '@/components/ui/alert'
import { Component } from '@angular/core'
import { NgIconComponent, provideIcons } from '@ng-icons/core'
import { lucideTerminal } from '@ng-icons/lucide'
@Component({
standalone: true,
selector: 'alert-demo-default',
imports: [
NgIconComponent,
UbAlertDirective,
UbAlertTitleDirective,
UbAlertDescriptionDirective,
UbAlertIconDirective,
],
viewProviders: [provideIcons({ lucideTerminal })],
template: `
<div ubAlert>
<ng-icon ubAlertIcon name="lucideTerminal" class="h-4 w-4" />
<h5 ubAlertTitle>Heads up!</h5>
<div ubAlertDescription>
You can add components and dependencies to your app using the cli.
</div>
</div>
`,
})
export class AlertDemoDefault { }Installation
npx shadcn-ng@latest add alert
npm
yarn
pnpm
bun
Copy and paste the following code into your project.
import type { VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'
import { computed, Directive, input } from '@angular/core'
import { cva } from 'class-variance-authority'
const alertVariants = cva(
'relative w-full rounded-lg border px-4 py-3 text-sm [&>[ubAlertIcon]+div]:translate-y-[-3px] [&>[ubAlertIcon]]:absolute [&>[ubAlertIcon]]:left-4 [&>[ubAlertIcon]]:top-4 [&>[ubAlertIcon]]:text-foreground [&>[ubAlertIcon]~*]:pl-7',
{
variants: {
variant: {
default: 'bg-background text-foreground',
destructive:
'border-destructive/50 text-destructive dark:border-destructive [&>[ubAlertIcon]]:text-destructive',
},
},
defaultVariants: {
variant: 'default',
},
},
)
type AlertProps = VariantProps<typeof alertVariants>
type UbAlertVariant = NonNullable<AlertProps['variant']>
@Directive({
selector: 'div[ubAlert]',
standalone: true,
host: {
'role': 'alert',
'[class]': 'computedClass()',
},
})
export class UbAlertDirective {
readonly class = input<string>()
readonly variant = input<UbAlertVariant>('default')
protected computedClass = computed(() =>
cn(alertVariants({ variant: this.variant(), class: this.class() })),
)
}
@Directive({
standalone: true,
selector: 'ubAlertIcon',
})
export class UbAlertIconDirective {}
@Directive({
selector: 'h5[ubAlertTitle]',
standalone: true,
host: {
'[class]': 'computedClass()',
},
})
export class UbAlertTitleDirective {
readonly class = input<string>()
protected computedClass = computed(() =>
cn('mb-1 font-medium leading-none tracking-tight', this.class()),
)
}
@Directive({
selector: 'div[ubAlertDescription]',
standalone: true,
host: {
'[class]': 'computedClass()',
},
})
export class UbAlertDescriptionDirective {
readonly class = input<string>()
protected computedClass = computed(() =>
cn('text-sm [&_p]:leading-relaxed', this.class()),
)
}import type { VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'
import { computed, Directive, input } from '@angular/core'
import { cva } from 'class-variance-authority'
const alertVariants = cva(
'relative w-full rounded-lg border p-4 [&>[ubAlertIcon]~*]:pl-7 [&>[ubAlertIcon]+div]:translate-y-[-3px] [&>[ubAlertIcon]]:absolute [&>[ubAlertIcon]]:left-4 [&>[ubAlertIcon]]:top-4 [&>[ubAlertIcon]]:text-foreground',
{
variants: {
variant: {
default: 'bg-background text-foreground',
destructive:
'border-destructive/50 text-destructive dark:border-destructive [&>[ubAlertIcon]]:text-destructive',
},
},
defaultVariants: {
variant: 'default',
},
},
)
type AlertProps = VariantProps<typeof alertVariants>
type UbAlertVariant = NonNullable<AlertProps['variant']>
@Directive({
selector: 'div[ubAlert]',
standalone: true,
host: {
'role': 'alert',
'[class]': 'computedClass()',
},
})
export class UbAlertDirective {
readonly class = input<string>()
readonly variant = input<UbAlertVariant>('default')
protected computedClass = computed(() =>
cn(alertVariants({ variant: this.variant(), class: this.class() })),
)
}
@Directive({
standalone: true,
selector: 'ubAlertIcon',
})
export class UbAlertIconDirective {}
@Directive({
selector: 'h5[ubAlertTitle]',
standalone: true,
host: {
'[class]': 'computedClass()',
},
})
export class UbAlertTitleDirective {
readonly class = input<string>()
protected computedClass = computed(() =>
cn('mb-1 font-medium leading-none tracking-tight', this.class()),
)
}
@Directive({
selector: 'div[ubAlertDescription]',
standalone: true,
host: {
'[class]': 'computedClass()',
},
})
export class UbAlertDescriptionDirective {
readonly class = input<string>()
protected computedClass = computed(() =>
cn('text-sm [&_p]:leading-relaxed', this.class()),
)
}Update the import paths to match your project setup.
Usage
import {
UbAlertDirective,
UbAlertDescriptionDirective,
UbAlertTitleDirective,
} from "@/components/ui/alert.directive";<div ubAlert>
<h5 ubAlertTitle>Heads up!</h5>
<div ubAlertDescription>
You can add components and dependencies to your app using the cli.
</div>
</div>Examples
Default
Loading...
Loading...
import {
UbAlertDescriptionDirective,
UbAlertDirective,
UbAlertIconDirective,
UbAlertTitleDirective,
} from '@/components/ui/alert'
import { Component } from '@angular/core'
import { NgIconComponent, provideIcons } from '@ng-icons/core'
import { lucideRocket } from '@ng-icons/lucide'
@Component({
standalone: true,
selector: 'alert-demo-new-york',
imports: [
NgIconComponent,
UbAlertDirective,
UbAlertTitleDirective,
UbAlertDescriptionDirective,
UbAlertIconDirective,
],
viewProviders: [provideIcons({ lucideRocket })],
template: `
<div ubAlert>
<ng-icon ubAlertIcon name="lucideRocket" class="h-4 w-4" />
<h5 ubAlertTitle>Heads up!</h5>
<div ubAlertDescription>
You can add components and dependencies to your app using the cli.
</div>
</div>
`,
})
export class AlertDemoNewYork { }import {
UbAlertDescriptionDirective,
UbAlertDirective,
UbAlertIconDirective,
UbAlertTitleDirective,
} from '@/components/ui/alert'
import { Component } from '@angular/core'
import { NgIconComponent, provideIcons } from '@ng-icons/core'
import { lucideTerminal } from '@ng-icons/lucide'
@Component({
standalone: true,
selector: 'alert-demo-default',
imports: [
NgIconComponent,
UbAlertDirective,
UbAlertTitleDirective,
UbAlertDescriptionDirective,
UbAlertIconDirective,
],
viewProviders: [provideIcons({ lucideTerminal })],
template: `
<div ubAlert>
<ng-icon ubAlertIcon name="lucideTerminal" class="h-4 w-4" />
<h5 ubAlertTitle>Heads up!</h5>
<div ubAlertDescription>
You can add components and dependencies to your app using the cli.
</div>
</div>
`,
})
export class AlertDemoDefault { }Destructive
Loading...
Loading...
import {
UbAlertDescriptionDirective,
UbAlertDirective,
UbAlertIconDirective,
UbAlertTitleDirective,
} from '@/components/ui/alert'
import { Component } from '@angular/core'
import { NgIconComponent, provideIcons } from '@ng-icons/core'
import { lucideRocket } from '@ng-icons/lucide'
@Component({
standalone: true,
selector: 'alert-destructive-new-york',
imports: [
NgIconComponent,
UbAlertDirective,
UbAlertTitleDirective,
UbAlertDescriptionDirective,
UbAlertIconDirective,
],
viewProviders: [provideIcons({ lucideRocket })],
template: `
<div ubAlert variant="destructive">
<ng-icon ubAlertIcon name="lucideRocket" class="h-4 w-4" />
<h5 ubAlertTitle>Heads up!</h5>
<div ubAlertDescription>
You can add components and dependencies to your app using the cli.
</div>
</div>
`,
})
export class AlertDestructiveNewYork { }import {
UbAlertDescriptionDirective,
UbAlertDirective,
UbAlertIconDirective,
UbAlertTitleDirective,
} from '@/components/ui/alert'
import { Component } from '@angular/core'
import { NgIconComponent, provideIcons } from '@ng-icons/core'
import { lucideTerminal } from '@ng-icons/lucide'
@Component({
standalone: true,
selector: 'alert-destructive-default',
imports: [
NgIconComponent,
UbAlertDirective,
UbAlertTitleDirective,
UbAlertDescriptionDirective,
UbAlertIconDirective,
],
viewProviders: [provideIcons({ lucideTerminal })],
template: `
<div ubAlert variant="destructive">
<ng-icon ubAlertIcon name="lucideTerminal" class="h-4 w-4" />
<h5 ubAlertTitle>Heads up!</h5>
<div ubAlertDescription>
You can add components and dependencies to your app using the cli.
</div>
</div>
`,
})
export class AlertDestructiveDefault { }