[FEAT] [Code Quality] Extract Reusable UI Components (Button, Card, Badge)

[ArshVermaGit]

Overview

Currently, our codebase suffers from markup bloat because Tailwind utility classes are repeated across many files for common structural elements like buttons, cards, and badges. This duplication makes future design changes tedious, error-prone, and difficult to maintain globally.

The Problem

Components throughout src/components/ manually define complex combinations of Tailwind classes for standard UI elements. For example, every card duplicates the same border, background, padding, and shadow classes (rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm).

Affected Files

• Distributed throughout src/components/ (e.g., DashboardWidgets.tsx, ProjectMetrics.tsx, ContributionHeatmap.tsx, etc.)

Proposed Enhancement

Extract these commonly used elements into their own standard, reusable UI components.

Acceptance Criteria

• Implement a lib/utils.ts (if it doesn't exist) with a cn utility that combines clsx and tailwind-merge to resolve class conflicts cleanly.
• Card Component: Create src/components/ui/card.tsx (or similar) with base styles to encapsulate standard card layouts.
• Button Component: Create src/components/ui/button.tsx utilizing cva (class-variance-authority) to handle distinct button variants (e.g., default, outline, ghost, destructive) and sizes.
• Badge Component: Create src/components/ui/badge.tsx for standardizing the various metric flags and labels used across the app.
• Gradually refactor existing dashboard components to consume these new reusable primitives instead of hardcoding Tailwind classes.

[ArshVermaGit]

hi @Priyanshu-byte-coder ,I would like to work on this as part of GSSoC 2026. Can you please assign it to me

[github-actions]

@ArshVermaGit You already have 2 open issue(s) assigned. Complete those first before picking up more.

[github-actions]

✅ Closed as completed!

If DevTrack has been useful, a ⭐ star on the repo helps the project grow and reach more developers.