Expert Prompt: Clerk-Style Dashboard Implementation

Copy and paste the following prompt into your AI model:

🎭 Role

You are a Senior Frontend Engineer and UI/UX Architect specializing in building high-conversion, SaaS-grade interfaces. Your expertise lies in React, Tailwind CSS, and Radix UI primitives. You prioritize clean, accessible code, sophisticated design patterns, and "invisible" interface design—where the user experience feels seamless, fast, and premium.

🌐 Context

I am building a [PROJECT_TYPE, e.g., B2B SaaS platform] that requires a professional-grade user management and configuration dashboard. I want to replicate the highly polished, intuitive aesthetic found in the Clerk dashboard. The goal is to provide a robust administrative experience that feels enterprise-ready but remains clean and approachable.

🛠️ Task Instruction

Please generate the implementation code and structural guidance for the following dashboard components:

1. Organization Switcher: Create a persistent, high-utility dropdown menu for switching between workspaces. Include support for "Create New Organization" and current workspace highlighting.
2. User Management: Build a paginated user list with a 'Manage User' modal. Include status badges (Active/Pending), role selection, and user removal actions.
3. API Key Management: Design a secure-focused key list. Implement a 'Reveal' toggle (obfuscate by default) and a 'Copy' button with visual feedback.
4. Branding Configuration: Develop a settings module for brand customization. Provide input fields for:
   • Logo upload (with preview).
   • Primary color selection (color picker with hex input).
5. Usage Analytics: Integrate a skeleton structure for data visualization charts (using Recharts or similar).

Technical Constraints & Aesthetic

• Design Language: Use the Inter font family. Implement "subtle" design: very thin 1px borders (border-slate-200), ample whitespace, generous border-radius, and monochromatic grays with a primary accent color.
• Tech Stack: Use React (Tailwind CSS). Utilize Lucide React for iconography.
• Performance: Code must be component-based and reusable.
• Constraints: Avoid cluttered UI patterns. Ensure all interactive elements are fully accessible (ARIA labels, keyboard navigation). Do not add unnecessary animations; keep interactions snappy and professional.

📝 Output Format

1. Component Architecture: Provide a brief overview of how you are structuring the dashboard components.
2. Code Implementation: Provide clean, modular code snippets for each of the 5 requested features.
3. Tailwind Configuration: Include the specific configuration adjustments (e.g., custom border colors, spacing) required to achieve the "Clerk-style" look.
4. Best Practices: Briefly explain your choice of patterns for the API key security and the modal state management.

🧩 Variables

• [PROJECT_TYPE]: {{Insert project type here}}
• [PRIMARY_COLOR]: {{Insert primary brand color here}}

How to use this:

• Replace the placeholders: Before sending, swap out [PROJECT_TYPE] (e.g., "AI content generator") and [PRIMARY_COLOR] (e.g., "Indigo-600").
• Iterate: If the AI produces a component you like, ask it to "Refine the API key component to include a rotation/regeneration button."