TailwindCSS + DaisyUI Layout Demo

  • Elegir tema

Explora diferentes layouts responsive con TailwindCSS, DaisyUI y Boxicons

Sidebar Layout

Menú lateral izquierdo con navegación vertical

Navegación lateral
Contenido centrado
Responsive design
Ver Demo

Top Menu Layout

Barra de navegación superior horizontal

Header fijo
Ancho completo
Mobile friendly
Ver Demo

Clean Layout

Layout limpio sin menú, contenido centrado

Sin navegación
Foco en contenido
Minimalista
Ver Demo

Formularios

Inputs estandarizados con estilos consistentes

Estilos estandarizados
Estados hover/focus
Iconos integrados
Ver Demo

Autenticación

Sistema de login y registro con Devise

Login seguro
Recuperar contraseña
Registro de usuarios
Iniciar Sesión

Paginación

Demo de paginación con Pagy y usuarios

Pagy integration
TailwindCSS styled
5 usuarios por página
Ver Demo

Email Demo

Envío de emails con letter_opener y premailer

Letter opener
CSS inline styles
HTML templates

Configuración de Themes

Selector de Themes

• Ubicación: Disponible en todas las páginas a través del icono de paleta

• Auto: Sigue el tema del sistema operativo

• Light/Dark: Themes básicos claros y oscuros

• Themes especiales: cupcake, corporate, retro, cyberpunk, valentine, synthwave

• Persistencia: Tu selección se guarda automáticamente

Theme por Defecto 

// En application.html.erb
<html data-theme="auto">
// Opciones disponibles:
auto, light, dark, cupcake,
corporate, retro, cyberpunk,
valentine, synthwave

Cambio de theme por defecto

Modifica el atributo data-theme en el layout principal

Características

Responsive

Adaptable a todos los dispositivos

DaisyUI + TailwindCSS

Utility-first CSS con componentes

Componentes

Partials reutilizables

Boxicons

Iconos de alta calidad