About
A stackable news card component that displays updates in an interactive card format. Built for Dub.co's notification system. Features - Stacked card layout with hover animations - Swipe-to-dismiss functionality - Touch-friendly mobile interactions - Completion animation state - Progressive card reveal on hover
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Sidebar News to your project and fits it to your theme.
Code
How Sidebar News is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
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>
);
}
More by Dub.co
View all
Banner
236
More in Cards
View all
Statistics Card 2
264
Course Design Cards
1.1K
Card
70
Stats cards with links
39
The Item one
3
Card Studio
7
Statistics Card 7
292
Item
10
