Components
Loading preview...
A compound badge designed to display an announcement.
@haydenbleasel
npx shadcn@latest add https://21st.dev/r/haydenbleasel/announcement'use client';
import {
Announcement,
AnnouncementTag,
AnnouncementTitle,
} from '@/components/ui/announcement';
import { ArrowUpRightIcon } from 'lucide-react';
const Example = () => (
<div className="flex flex-col w-full h-screen items-center justify-center gap-4">
<Announcement themed className="bg-emerald-100 text-emerald-700">
<AnnouncementTag>Success</AnnouncementTag>
<AnnouncementTitle>
New feature added
<ArrowUpRightIcon size={16} className="shrink-0 opacity-70" />
</AnnouncementTitle>
</Announcement>
</div>
);
export { Example};