A
Anonymous

Doctor Management - Copy this React, Tailwind Component to your project

Navigation Bar (Top): Left Side: A company logo on the far left. Center: A centered search bar labeled "Search doctors or keywords" with a clean magnifying glass icon. Right Side: A profile icon for user settings, along with a notifications icon for quick alerts. Sidebar (Left): Logo: A compact, circular logo at the top. Menu Options: Dashboard: Graphical icon next to the label. Patient List: Link to manage patients. Doctor List: Highlighted to show it's the current page, with a doctor icon. Service List: Quick access to services. Logout Button: At the bottom for quick access. Main Section: Header: A prominent "Doctor Management" title with a subtitle explaining the number of doctors currently listed. Add New Doctor Button: A large, rounded "Add Doctor" button at the top right corner with a soft green color and a plus icon. Search & Filter: Search Bar: Positioned above the table, labeled “Search doctors by name or specialty” with a filter dropdown for advanced options (e.g., gender, specialty, status). Filter Button: A rounded filter button to the right of the search bar, allowing multiple criteria filtering. Doctor Table: Columns: Image: A small circular doctor profile image. Name: Full name in bold, with job title under the name. Gender: A gender icon or label (e.g., M/F). Position: Job title, such as “Senior Surgeon” or “Consultant.” Specialty: Medical specialty like “Cardiologist” or “Dermatologist.” Status: Availability status with colored badges (e.g., green for active, gray for inactive). Actions: Edit Button: Soft blue “Edit” button with a pencil icon. Delete Button: Red “Delete” button with a trash icon. Pagination: Previous and Next Buttons: Stylish, rounded buttons with page numbers in between (large enough to be clickable). Per Page Dropdown: Option to view 10, 20, or 50 doctors per page. Color Scheme & Style: Use neutral and soft colors (light grays, whites, soft blues). Rounded corners on buttons and tables for a more modern look. Minimalistic with plenty of white space to avoid clutter.

Prompt
Component Preview

About

DoctorManagement - A sleek UI with a search bar, doctor table, and filter options, built with react and tailwind. Manage doctors easil. Get component free!

Share

Last updated 1 month ago