affectUI › Illustrations › Card illustrations

Glass Folder

Glassy blue folder with documents behind a frosted pocket that tips open on hover.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/glass-folder.json · Import from @/components/ui/glass-folder

When to use

Feature cards about files, uploads, storage or a knowledge base; empty states for documents
Bento grids that need a calm, friendly illustration above the text

When not to use

Showing real files – the documents are decorative and contain placeholder lines only
Dark sections – the folder and documents are drawn for a light theme

Usage

import { GlassFolder } from "@/components/ui/glass-folder";

export function FeatureCard() {
  return (
    <article style={{ maxWidth: 360 }}>
      <GlassFolder />
      <h3>Card title</h3>
      <p>Short description of the feature.</p>
    </article>
  );
}

Props

Name	Type	Default	Description
`label`	`string`	`"Blue folder holding three documents…"`	Accessible description of the illustration
`className`	`string`		Extra class on the root, e.g. for width or margins

Accessibility

Exposed as one image with a descriptive label; the folder parts inside are hidden from screen readers
The hover effect is purely decorative, nothing needs to be reached with the keyboard

Responsive

Transparent background, so it sits on any light surface
Keeps a 3 : 2 aspect ratio and scales to the width of its container – every detail is sized in container units

Requirements

React 19