Alert

Docs

Alert

Displays a callout for user attention.

Preview

Code

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

CLI

Manual

npx shadcn-ng@latest add alert

Copy and paste the following code into your project.

import { cn } from '@/lib/utils'

import { computed, Directive, input } from '@angular/core'

import { cva, type VariantProps } 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()),
  )
}

import { cn } from '@/lib/utils'

import { computed, Directive, input } from '@angular/core'

import { cva, type VariantProps } 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()),
  )
}

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

Preview

Code

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

Preview

Code

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 { }

Accordion Avatar