I can see these are screenshots of an "Add New Prompts" modal dialog with multiple tabs (Custom, Upload CSV, Generate) for managing prompts. The current design is dated with plain buttons, minimal spacing, and basic typography. The user wants me to modernize this into a premium, clean interface using shadcn/ui components with proper visual hierarchy, spacing, shadows, and transitions.

Let me explore the codebase first to understand the current structure, then I'll redesign this modal with modern aesthetics.

Now I'll create a modern, premium redesign of the "Add New Prompts" modal dialog using shadcn/ui components. I'll create a comprehensive component with proper spacing, typography, shadows, and interactions.

Now let me create a demo page that showcases this redesigned modal:

I've redesigned the UI into a modern, premium modal component using shadcn/ui components only. Here's what I've created:

Key Improvements:

✨ Modern Design System

• Clean, elevated aesthetic with proper visual hierarchy
• Soft shadows and subtle hover effects throughout
• Professional typography with improved spacing and scale
• Premium feel matching high-end SaaS products

🎨 Component Structure

• Tabs: Custom, Upload CSV, and Generate with icons
• Cards: Modern prompt list items with hover transitions
• Dialog: Spacious, well-organized modal with clear sections
• Inputs & Selects: Refined form fields with focus states
• Buttons: Smooth transitions with hover shadows
• Badges: Source indicators for better categorization

📱 Fully Responsive

• Mobile-first design with proper breakpoints
• Touch-friendly button sizes (32x32px minimum)
• Adaptive grid layouts for different screen sizes
• Hidden labels on mobile with icons visible

✨ Premium Details

• Dashed border hover effects on file upload
• Smooth transitions on all interactive elements
• Proper spacing using Tailwind scale (gap-2, p-4, etc.)
• Edit and delete actions with semantic icons
• Empty state message for better UX
• Scrollable prompt list with max-height

The modal includes all three input methods (Custom, CSV, Generate) with a clean prompt list display and modern action buttons. The component is fully functional and ready to use with your backend!

I'll improve the dialog UI design to make it truly modern and premium. Let me first read the current component and then generate design inspiration.

Now I'll redesign the modal with a modern, premium aesthetic. I'll improve the visual hierarchy, spacing, shadows, and overall design to match enterprise-grade SaaS standards.

Now let me update the demo page to showcase the improved modal:

I've completely redesigned the modal UI with a modern, premium aesthetic. Here's what I improved:

Layout & Structure

• Sticky header and footer for better navigation on smaller screens
• Clear visual separation with subtle border dividers
• Better use of whitespace and breathing room
• Organized sections with proper padding (6 units throughout)

Visual Hierarchy

• Enhanced typography with proper font weights and sizes
• Improved label styling with font-semibold for better prominence
• Better spacing between form groups (gap-4 for inputs, gap-3 for labels)
• Clearer section titles with icons for visual interest

Tabs & Interactions

• Refined tabs with subtle borders instead of solid backgrounds
• Improved hover states with smooth transitions
• Better visual feedback on active tabs
• Consistent icon usage across all tabs

Form Elements

• CSV upload area redesigned with hover effects and icon backgrounds
• Better input field focus states
• Cleaner select/dropdown styling
• Improved button interactions with hover shadows

Prompts List

• Redesigned prompt cards with better spacing and backgrounds
• Hidden action buttons that appear on hover (opacity transition)
• Better empty state messaging with icon and description
• Source badges with improved styling
• Scrollable list with proper max-height

Premium Details

• Soft shadows and subtle border colors using /40 opacity
• Smooth all transitions for interactive elements
• Consistent rounded corners (lg class)
• Better color contrast and hierarchy
• Disabled state for save button when no prompts exist

The modal now has a high-end SaaS feel with professional spacing, typography, and interactions that create a premium user experience.