uğur sözen

Quality Scorecard Grid

Cards

About

A six-card grid that displays quality metrics with icons, progress bars, and numeric scores for tracking system health and compliance.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Quality Scorecard Grid to your project and fits it to your theme.

Code

How Quality Scorecard Grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Feature23, feature23Demo } from "@/components/ui/feature23";

export default function Default() {
  return <Feature23 {...feature23Demo} />;
}

Dependencies

More by uğur sözen

View all
  • Worth Keeping CTA

    Worth Keeping CTA

    198
  • Comparison Slider with Highlights

    Comparison Slider with Highlights

    191
  • Before/After Image Slider

    Before/After Image Slider

    120
  • Invoice History Table

    Invoice History Table

    66
  • Recipe Card

    Recipe Card

    38
  • PIN Keypad Unlock

    PIN Keypad Unlock

    34
  • Shop by Category Grid

    Shop by Category Grid

    33
  • Trigger to Action

    Trigger to Action

    33

More in Cards

View all
  • Stats cards with links

    Stats cards with links

    120
  • Course Design Cards

    Course Design Cards

    1.1K
  • Statistics Card 2

    Statistics Card 2

    258
  • Card

    Card

    56
  • Card Studio

    Card Studio

    9
  • Statistics Card 7

    Statistics Card 7

    289
  • The Item one

    The Item one

    3
  • Weather Card

    Weather Card

    52