Shadw UIShadw UI logo
🚀 Beta mode be careful of the bugs

Alert

Displays a callout for user attention.

Preview

The Alert component is used to display important messages to users. It comes with several sub components to structure the content effectively.

Alert 09

Some information is missing!

Link

Installation

pnpm dlx shadcn@latest add https://shadwui.com/r/card.json

Usage

import { Card, CardContent } from "@/components/shadwui/card"
<Card className="py-4 w-96">
  <CardContent className="py-0">
    <h5>
      Get the most out of your app with real-time updates and analytics.
    </h5>
 
    <Link href="#" className="font-medium underline hover:no-underline">
      Upgrade
    </Link>
  </CardContent>
</Card>

Examples

01

Alert 01
It‘s live and ready to use! Start exploring the latest addition to your toolkit.

02

Alert 02

Some information is missing!

03

Alert 03

An error occurred!

04

Alert 04

An error occurred!

05

Alert 05

Completed successfully!

06

Alert 06

Completed successfully!

07

Alert 07

Just a quick note!

08

Alert 08

Just a quick note!

09

Alert 09

Some information is missing!

Link

10

Alert 10

Some information is missing!

Link

Options

componentDescriptionExample Output
CardA container with rounded corners, border, background, and shadow.<Card>Content</Card>
CardTitleA styled title with font-semibold and tracking-tight.<CardTitle>Title</CardTitle>
CardHeaderA flex container with padding, typically used for the card's header section.<CardHeader>Header</CardHeader>
CardDescriptionA text description with smaller font and muted foreground color.<CardDescription>Description</CardDescription>
CardContentA container with padding, used for the main content of the card.<CardContent>Main content here</CardContent>
CardFooterA flex container with padding, typically used for the card's footer section.<CardFooter>Footer content</CardFooter>
Edit on GitHub

Previous

Description

Next

Badge

On this page