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

Banner

Displays a callout for user attention.

Preview

The Banner component, is essential for showing messages to users, such as system status or errors.

Banner 09
Black Friday Sale!
It kicks off today and is available for just 24 hours—don‘t miss out!
00h00m00s

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

Banner 01
✨ Introducing transactional marketing email templates.

02

Banner 02
Get the most out of your app with real-time updates and analytics.
Upgrade

03

Banner 03
We just added something awesome to make your experience even better.
Learn more

04

Banner 04
We just added some thing to make your experience even better.
Learn more

05

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

06

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

07

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

08

Banner 08
Boost your experience
The new feature is live! Try it out and let us know what you think.

09

Banner 09
Black Friday Sale!
It kicks off today and is available for just 24 hours—don‘t miss out!
00h00m00s

10

Banner 10
📫 Subscribe to our newsletter and get 10% off your first order!·Subscribe

more...

Banner 11
v2.1.0•New features and bug fixes are available.
Banner 12
There‘s something that might require your action. Please review the details.
Learn more
Banner 13
We couldn‘t complete your request. Please try again or check your connection.
Learn more
Banner 14
Your request was completed without any issues. Great job!
Learn more
Banner 15
Your request was completed without any issues. Great job!
Learn more

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

Badge

Next

Breadcrumb

On this page