Components
ParticleFlowCalendar
The Particle Flow Calendar is an innovative, visually engaging calendar component where each day is represented as a particle in a circular flow. Users can add events that appear as glowing bursts along the particle’s path, creating a dynamic and interactive visualization of their schedule. It includes a month and year navigation system, allowing users to quickly switch between months, while a bottom overview card lists all events for the selected month for easy reference. Built entirely with ShadCN UI components, it features a responsive design with light and dark theme support, ensuring that particle colors, borders, and backgrounds adapt seamlessly to the user’s preferred theme. The glowing pulses and interactive popovers provide immediate, intuitive feedback on event details, making it ideal for visually tracking events in a fun and engaging way.
Loading preview...
"use client"
import * as React from "react"
import { ParticleFlowCalendar } from "@/components/ui/particle-flow-calendar"
export default function DemoPage() {
return (
<div className="min-h-screen flex flex-col items-center justify-start py-10 dark:bg-black gap-10">
<h1 className="text-2xl font-semibold text-black dark:text-white">Particle Flow Calendar Demo</h1>
<ParticleFlowCalendar />
</div>
)
}