Alert

Displays a callout for user attention.

Payment successful

Your payment of $29.99 has been processed. A receipt has been sent to your email address.

New feature available

We've added dark mode support. You can enable it in your account settings.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/alert"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ AlertDemo() {	<div class="grid w-full max-w-md items-start gap-4">		@alert.Alert() {			@icon.CircleCheck()			@alert.Title() {				Payment successful			}			@alert.Description() {				Your payment of $29.99 has been processed. A receipt has been sent to your email address.			}		}		@alert.Alert() {			@icon.Info()			@alert.Title() {				New feature available			}			@alert.Description() {				We've added dark mode support. You can enable it in your account settings.			}		}	</div>}

Installation

shadcn-templ add alert

Copy and paste the following code into your project.

components/alert/alert.templ

package alert import "github.com/axadrn/shadcn-templ/v2/utils" type Variant string const (	VariantDefault     Variant = "default"	VariantDestructive Variant = "destructive") type Props struct {	ID         string	Class      string	Attributes templ.Attributes	Variant    Variant} type TitleProps struct {	ID         string	Class      string	Attributes templ.Attributes} type DescriptionProps struct {	ID         string	Class      string	Attributes templ.Attributes} type ActionProps struct {	ID         string	Class      string	Attributes templ.Attributes} templ Alert(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="alert"		role="alert"		class={			utils.CN(				"cn-alert group/alert relative w-full",				variantClasses(p.Variant),				p.Class,			),		}		{ p.Attributes... }	>		{ children... }	</div>} templ Title(props ...TitleProps) {	{{ var p TitleProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="alert-title"		class={			utils.CN(				"cn-alert-title [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",				p.Class,			),		}		{ p.Attributes... }	>		{ children... }	</div>} templ Description(props ...DescriptionProps) {	{{ var p DescriptionProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="alert-description"		class={			utils.CN(				"cn-alert-description [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",				p.Class,			),		}		{ p.Attributes... }	>		{ children... }	</div>} // Action sits in the top-right corner, e.g. a button or badge.templ Action(props ...ActionProps) {	{{ var p ActionProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="alert-action"		class={ utils.CN("cn-alert-action", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} func variantClasses(variant Variant) string {	switch variant {	case VariantDestructive:		return "cn-alert-variant-destructive"	default:		return "cn-alert-variant-default"	}}

Update the import paths to match your project setup.

Usage

import "github.com/axadrn/shadcn-templ/v2/components/alert"

@alert.Alert() {	@icon.Info()	@alert.Title() {		Heads up!	}	@alert.Description() {		You can add components to your app using the cli.	}	@alert.Action() {		@button.Button(button.Props{Variant: button.VariantOutline}) {			Enable		}	}}

Composition

Use the following composition to build an Alert:

alert.Alert├── icon├── alert.Title├── alert.Description└── alert.Action

Basic

A basic alert with an icon, title and description.

Account updated successfully

Your profile information has been saved. Changes will be reflected immediately.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/alert"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ AlertBasic() {	@alert.Alert(alert.Props{Class: "max-w-md"}) {		@icon.CircleCheck()		@alert.Title() {			Account updated successfully		}		@alert.Description() {			Your profile information has been saved. Changes will be reflected immediately.		}	}}

Destructive

Use Variant: alert.VariantDestructive to create a destructive alert.

Payment failed

Your payment could not be processed. Please check your payment method and try again.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/alert"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ AlertDestructive() {	@alert.Alert(alert.Props{Variant: alert.VariantDestructive, Class: "max-w-md"}) {		@icon.CircleAlert()		@alert.Title() {			Payment failed		}		@alert.Description() {			Your payment could not be processed. Please check your payment method and try again.		}	}}

Action

Use alert.Action to add a button or other action element to the alert.

Dark mode is now available

Enable it under your profile settings to get started.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/alert"	"github.com/axadrn/shadcn-templ/v2/components/button") templ AlertAction() {	@alert.Alert(alert.Props{Class: "max-w-md"}) {		@alert.Title() {			Dark mode is now available		}		@alert.Description() {			Enable it under your profile settings to get started.		}		@alert.Action() {			@button.Button(button.Props{Size: button.SizeXs}) {				Enable			}		}	}}

Custom Colors

You can customize the alert colors by adding custom classes such as bg-amber-50 dark:bg-amber-950 to the Alert component.

Your subscription will expire in 3 days.

Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/alert"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ AlertColors() {	@alert.Alert(alert.Props{Class: "max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50"}) {		@icon.TriangleAlert()		@alert.Title() {			Your subscription will expire in 3 days.		}		@alert.Description() {			Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.		}	}}

API Reference

Alert

The Alert component displays a callout for user attention.

Prop	Type	Default
`Variant`	`VariantDefault \| VariantDestructive`	`VariantDefault`
`Class`	`string`	-

Title

The alert.Title component displays the title of the alert.

Prop	Type	Default
`Class`	`string`	-

Description

The alert.Description component displays the description or content of the alert.

Prop	Type	Default
`Class`	`string`	-

Action

The alert.Action component displays an action element (like a button) positioned absolutely in the top-right corner of the alert.

Prop	Type	Default
`Class`	`string`	-

Accordion Alert Dialog

On This Page

Installation Usage Composition Basic Destructive Action Custom Colors API Reference Alert Title Description Action

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.