OpenSourceUIOpenSourceUIOpensource UI
GitHubTwitter/X
  1. Home
  2. Components
  3. Folder
  4. Opensource Folder Tab Card
Back to FolderComponents / Folder

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

Card 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. 1

    Run in your terminal:

    $npm install clsx tailwind-merge lucide-react
  2. 2

    Copy lib/cn.ts below. Skip if you already have cn().

  3. 3

    Copy the code below and create components/folder/opensource-folder-tab-card.tsx in your project.

  4. 4

    Import and render:

    Example

    import { OpensourceFolderTabCard } from "@/components/folder/opensource-folder-tab-card";

    <OpensourceFolderTabCard title="UI blocks" primaryValue="116" primaryLabel="Components" />

lib/cn.ts

1
2
3
import { cn } from '@/lib/cn';
 
// Full source is available in the repository checkout.

components/folder/opensource-folder-tab-card.tsx

1
2
// Full source: components/components/folder/opensource-folder-tab-card.tsx
// The Cloudflare worker does not expose the source tree at request time.
PreviousNext

On this

page

Jump to a section on this page.

  • lib/cn.ts
  • components/folder/opensource-folder-tab-card.tsx

Sponsor spot · demo preview

Logo

Your brand name

Your tagline or category

A short pitch about your product or service goes here. This is a preview of how sponsor cards will look in this sidebar.

Your call to action

This slot is available. Sponsor Opensource UI and reach developers browsing components every day.