Diseñar una aplicación con una estética profesional y acorde a un consultorio odontológico, utilizando shadcn/ui y Tailwind CSS, es una gran manera de asegurar una interfaz limpia y funcional.
Notas Adicionales para una Apariencia Profesional:
Fuentes: Considera usar una fuente sans-serif limpia como "Inter", "Roboto", "Open Sans" o "Lato". Puedes importarlas desde Google Fonts o Bunny Fonts como ya vimos.
Espaciado Consistente: Utiliza la escala de espaciado de Tailwind (
p-x,m-y,gap-z) de manera consistente en toda tu aplicación.Iconografía: Integra iconos de librerías como
lucide-react(queshadcn/uiutiliza) o Font Awesome para añadir claridad visual a los botones y elementos de navegación.Estado de Focus: Asegúrate de que los estados de
focuspara los elementos interactivos (botones, inputs) sean claros y accesibles. Tailwind proporciona clases para esto (focus:outline-none,focus:ring).Transiciones: Las transiciones suaves (
transition-colors,duration-150) en los estadoshoveryfocusañaden un toque pulido.
Esta tabla te proporciona una base sólida para estilizar tu aplicación de consultorio odontológico con un aspecto profesional y moderno, aprovechando la flexibilidad de Tailwind CSS y la estructura de shadcn/ui.
Lista de clases para la estética de la aplicación de consultorio odontológico.
¡Bienvenido a tu Consultorio!
Gestión profesional para tu práctica odontológica.
divflex w-full items-center justify-center opacity-100 transition-opacity duration-750 lg:grow starting:opacity-0flex w-full items-center justify-center opacity-100 transition-opacity duration-750 lg:grow starting:opacity-0Fondo de la Aplicacióndivbodybg-[#FDFDFC] text-[#1b1b18] font-sansdark:bg-[#0a0a0a] dark:text-[#EDEDEC] font-sansInterBarra de Navegación (Superior)navdivflexflex items-center justify-between p-4 bg-white shadow-sm border-b border-gray-200 rounded-b-lgdark:bg-[#1A202C] dark:border-gray-700 dark:shadow-mdLogo del Consultorioimgspanh-10 w-auto object-containh-10 w-auto object-containBotón Primario (Acción Principal)Buttoninline-flex items-center justify-center rounded-md px-6 py-3 text-base font-medium bg-[#00A896] text-white shadow-sm hover:bg-[#008F7E] focus:outline-none focus:ring-2 focus:ring-[#00A896] focus:ring-offset-2 transition-colors duration-200dark:bg-[#007366] dark:hover:bg-[#005C4F] dark:focus:ring-[#007366]Botón Secundario (Acción Menor)Buttoninline-flex items-center justify-center rounded-md px-5 py-2.5 text-base font-medium bg-gray-100 text-gray-800 border border-gray-300 shadow-sm hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transition-colors duration-200dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:ring-gray-500Tarjeta de ContenidoCarddivbg-white rounded-lg shadow-md overflow-hidden border border-gray-200 p-6dark:bg-[#1A202C] dark:border-gray-700 dark:shadow-lgTítulo de Sección (dentro de tarjeta)h2text-2xl font-semibold text-gray-900 mb-4dark:text-whiteCampo de Formulario (Input)Inputflex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-[#00A896] focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:ring-[#00A896]Etiqueta de Formulario (Label)labelblock text-sm font-medium text-gray-700 mb-1dark:text-gray-300Mensaje de Error de Formulariopspantext-sm text-red-600 mt-1dark:text-red-400Tabla de DatosTablew-full text-sm text-left text-gray-500 border-collapsedark:text-gray-400Encabezado de Tabla (<th>)TableHeaderthpx-6 py-3 bg-gray-50 text-xs font-medium text-gray-700 uppercase tracking-wider border-b border-gray-200dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600Celda de Tabla (<td>)TableCelltdpx-6 py-4 whitespace-nowrap text-gray-800 border-b border-gray-200dark:text-gray-200 dark:border-gray-700Enlace de Navegación (Texto)Linkatext-[#007BFF] hover:underline transition-colors duration-150dark:text-[#66B3FF] dark:hover:underlinePaginación (Contenedor)divPaginationflex items-center justify-between mt-6 p-4 bg-white rounded-lg shadow-sm border border-gray-200dark:bg-[#1A202C] dark:border-gray-700 dark:shadow-mdBotón de PaginaciónButtoninline-flex items-center px-3 py-1.5 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600Switch/ToggleSwitchdata-[state=checked]:bg-[#00A896] data-[state=unchecked]:bg-gray-200dark:data-[state=checked]:bg-[#007366] dark:data-[state=unchecked]:bg-gray-600Badge/Etiqueta (Estado)Badgeinline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-blue-100 text-blue-800dark:bg-blue-800 dark:text-blue-100Separador (Línea)hrdivmy-6 border-t border-gray-200dark:border-gray-700Mensaje de Éxito (Toast/Banner)divp-4 rounded-md bg-green-50 text-green-800 border border-green-200dark:bg-green-900 dark:text-green-200 dark:border-green-700Mensaje de Error (Toast/Banner)divp-4 rounded-md bg-red-50 text-red-800 border border-red-200dark:bg-red-900 dark:text-red-200 dark:border-red-700Modal/Dialogo (Fondo Oscuro)DialogOverlayfixed inset-0 z-50 bg-black/80fixed inset-0 z-50 bg-black/80Modal/Dialogo (Contenido)DialogContentfixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lgdark:bg-[#1A202C] dark:border-gray-700
No hay comentarios:
Publicar un comentario