Components
Loading preview...
The Glow Tree component is a visually engaging and interactive file explorer built with Shadcn UI styling utilities and lucide-react icons. It displays hierarchical data, such as files and folders, with smooth expand and collapse animations using Framer Motion. Each node can optionally have a glowing effect, creating a pulsating highlight that draws attention to important files or folders. The component supports selection, updating the styling of the currently selected node for both light and dark themes. It is fully client-side, lightweight, and designed to provide a futuristic, dynamic experience while remaining easy to integrate and customize.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/glow-treeimport GlowTree from "@/components/ui/glow-tree";
export default function DemoOne() {
return (
<div className= "max-w-md mx-auto mt-6 p-4 border rounded-lg bg-white dark:bg-gray-800" >
< GlowTree onSelect = { node => console.log("Selected Node:", node) } />
<p className="mt-3 text-sm text-gray-600 dark:text-gray-300" > This Glow Tree features glowing icons, pulsating highlights, and smooth animations for light and dark themes.
< /p>
< /div>
);
}