A stackable news card component that displays updates in an interactive card format. Built for Dub.co's notification system.
Features
import { News, type NewsArticle } from "@/components/ui/sidebar-news";
const DEMO_ARTICLES: NewsArticle[] = [
{
href: "https://dub.co/changelog/regions-support",
title: "Regions support in analytics",
summary: "You can now filter your analytics by regions",
image: "https://cdn.21st.dev/assets/mirror/d7/d703326cadf4805916e9ac971f4d16f3872b0cd0031039282851b15013cfc82f.png",
},
{
href: "https://dub.co/blog/soc2",
title: "Dub is now SOC 2 Type II Compliant",
summary:
"We're excited to announce that Dub has successfully completed a SOC 2 Type II audit to further demonstrate our commitment to security.",
image: "https://cdn.21st.dev/assets/mirror/d4/d44b0be0a5e9cfebfbd34744cc67ebbe2d74bc44c7143f93798adac70de2486f.jpg",
},
{
href: "https://dub.co/changelog/utm-templates",
title: "UTM Templates",
summary:
"You can now create UTM templates to streamline UTM campaign management across your team.",
image: "https://cdn.21st.dev/assets/mirror/44/4423659e60d31e357ed495d096f7fe24115340d38552b805b9867a256f59bc24.jpg",
},
];
export function NewsDemo() {
return (
<div className="h-[600px] w-56 relative bg-gradient-to-br from-background to-muted">
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-56">
<News articles={DEMO_ARTICLES} />
</div>
</div>
);
}
Part of Dub — browse the full library on 21st.dev.