Opensource Folder Tab Card
Free Folder React component — OpensourceFolderTabCard. MIT licensed, copy-paste ready for Next.js and Tailwind CSS.
Folder tab card with black frame, top-half image, and dark panel showing library stats. Opensource App branding by default.
Preview

Opensource App
Card Design
UI blocks
Copy & paste ready
116Components
Free Open source
Setup
How to use
Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.
- 1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react - 2
Copy
lib/cn.tsbelow. Skip if you already havecn(). - 3
Copy the code below and create
components/folder/opensource-folder-tab-card.tsxin your project. - 4
Import and render:
Exampleimport { OpensourceFolderTabCard } from "@/components/folder/opensource-folder-tab-card";
lib/cn.ts
import { cn } from '@/lib/cn';// Full source is available in the repository checkout.
components/folder/opensource-folder-tab-card.tsx
// Full source: components/components/folder/opensource-folder-tab-card.tsx// The Cloudflare worker does not expose the source tree at request time.