Components
Loading preview...
The MagicTree component is a visually engaging and interactive file explorer built with shadcn/ui styling and lucide-react icons. It displays hierarchical data with smooth expand and collapse animations, making it easy to navigate nested folders and files. Selected nodes are highlighted with a distinct icon and background, while special nodes can feature a sparkling effect for added visual flair. This component is fully customizable, supports default data, and provides an intuitive interface for exploring and managing files in a creative, magical-themed layout.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/magic-tree"use client";
import MagicTree from "@/components/ui/magic-tree";
import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
// -------- Demo Data with More Stuff --------
const demoMagicData: MagicNode[] = [
{
id: "1",
name: "Magical Folder",
type: "folder",
sparkle: true,
children: [
{ id: "1-1", name: "Shiny File.txt", type: "file", sparkle: true },
{
id: "1-2",
name: "Hidden Gems",
type: "folder",
children: [
{ id: "1-2-1", name: "Gem.js", type: "file", sparkle: true },
{ id: "1-2-2", name: "Magic.json", type: "file" },
],
},
],
},
{ id: "2", name: "Plain File.md", type: "file" },
{
id: "3",
name: "Enchanted Scripts",
type: "folder",
children: [
{ id: "3-1", name: "spell.ts", type: "file", sparkle: true },
{ id: "3-2", name: "potion.py", type: "file" },
{
id: "3-3",
name: "Artifacts",
type: "folder",
sparkle: true,
children: [
{ id: "3-3-1", name: "wand.js", type: "file", sparkle: true },
{ id: "3-3-2", name: "cloak.css", type: "file" },
],
},
],
},
];
// -------- Demo Component --------
export default function MagicTreeDemo() {
return (
<Card className= "max-w-2xl mx-auto mt-6 border shadow-lg" >
<CardHeader>
<CardTitle>✨ Magic Tree Enhanced Demo ✨</CardTitle>
< /CardHeader>
< CardContent >
<MagicTree data={ demoMagicData } onSelect = {(node) => console.log("Selected Node:", node)
} />
< Separator className = "my-3" />
<p className="text-sm text-muted-foreground" > This enhanced demo contains multiple layers, sparkles, and nested folders to showcase the unique interactive magic tree component.< /p>
< /CardContent>
< /Card>
);
}