Components
Loading preview...
This is a full-featured, interactive News Feed Component with expandable cards, animated transitions, bookmark toggling, and live content rendering. It supports a three-tier visual priority system via status bars, uses LayoutGroup and AnimatePresence for shared layout animations, and conditionally disables motion for accessibility. Each card opens into a full-screen modal with detailed content, image overlays, and contextual metadata. Perfect for AI news agents, editorial dashboards, political data platforms, or any high-fidelity news experience requiring real-time interactivity and immersive storytelling.
npx shadcn@latest add https://21st.dev/r/isaiahbjork/news-cards"use client";
import { NewsCards } from "@/components/ui/news-cards";
import { useState } from "react";
export default function Demo() {
const [enableAnimations, setEnableAnimations] = useState(true);
return (
<div className="min-h-screen bg-background text-foreground">
<div className="container mx-auto py-8">
<NewsCards
enableAnimations={enableAnimations}
/>
</div>
</div>
);
}