Components
Loading preview...
A minimal, dark-themed file tree component with smooth expand/collapse animations, color-coded file icons, and subtle hover glow effects.
@jatin-yadav05
npx shadcn@latest add https://21st.dev/r/jatin-yadav05/file-treeimport { FileTree } from "@/components/ui/file-tree";
const fileStructure = [
{
name: "src",
type: "folder" as const,
children: [
{
name: "components",
type: "folder" as const,
children: [
{ name: "button.tsx", type: "file" as const, extension: "tsx" },
{ name: "card.tsx", type: "file" as const, extension: "tsx" },
{ name: "input.tsx", type: "file" as const, extension: "tsx" },
],
},
{
name: "hooks",
type: "folder" as const,
children: [
{ name: "use-theme.ts", type: "file" as const, extension: "ts" },
{ name: "use-auth.ts", type: "file" as const, extension: "ts" },
],
},
{ name: "app.tsx", type: "file" as const, extension: "tsx" },
{ name: "index.tsx", type: "file" as const, extension: "tsx" },
],
},
{
name: "public",
type: "folder" as const,
children: [
{ name: "logo.svg", type: "file" as const, extension: "svg" },
{ name: "favicon.png", type: "file" as const, extension: "png" },
],
},
{ name: "package.json", type: "file" as const, extension: "json" },
{ name: "README.md", type: "file" as const, extension: "md" },
{ name: "styles.css", type: "file" as const, extension: "css" },
]
export default function Home() {
return (
<main className="min-h-screen flex items-center justify-center p-8">
<div className="w-full max-w-xs">
<FileTree data={fileStructure} />
</div>
</main>
)
}