---
title: Glass Folder
description: A 3D glassmorphic folder component with layered depth and interactive rotation effects on hover. Designed using React and Tailwind CSS, it visually mimics a stack of translucent folder sheets, making it ideal for showcasing documents, portfolios, or feature categories in a stylish and futuristic way.
---
## Installation
CLIManual
```bash
npx lightswind@latest add glass-folder
```
Copy and paste the following code into your project.
```tsx
"use client";
import React from "react";
import { cn } from "@/components/lib/utils"; // Optional: For class merging utility
type GlassFolderProps = {
icon?: React.ReactNode;
className?: string;
};
const GlassFolder: React.FC = ({ icon, className }) => {
return (
{/* Top tab */}
{/* Folder layers */}
{/* Front folder layer with icon */}
{icon}
);
};
export default GlassFolder;
```
## Usage
```tsx
import GlassFolder from '@/components/lightswind/glass-folder';
```
```tsx
import GlassFolder from '@/components/lightswind/glass-folder';
import { FileText } from 'lucide-react';
;
```