⌕ /
Catálogo visual interno · v0.4 Research Edition

Consulta, selecciona y reutiliza.

Design System AI-ready para que ChatGPT consulte componentes y patterns antes de diseñar una interfaz nueva.

39componentes
6patterns
AIready
✦ AI Registry activocatalog.json · API JSON · llms.txt · reglas IA
ResearchScreensPatternsCatalog JSONAPI Health
Todos los sistemas Hotel Restaurante Educación CRM Flotas
39 resultados
ReUI / shadcn
↗
Ventas de hoyS/ 4,850+12.4% vs. ayer

KPI Card

Dashboard

Métrica principal con tendencia, icono y contexto comparativo.

HotelRestauranteEducaciónCRMFlotas
#kpi#métrica#ventas
Detalle
Magic UI
Ocupación84%42 de 50 habitaciones
Check-ins18
IngresosS/ 8.4k

Bento Metrics

Dashboard

Panel compacto tipo bento para resumir varios indicadores.

HotelRestauranteEducaciónCRM
#bento#dashboard#resumen
Detalle
ReUI
Reservas184+8.2%

Mini Chart Card

Dashboard

Tarjeta KPI con sparkline SVG sin librerías externas.

HotelRestauranteCRMFlotas
#chart#sparkline#kpi
Detalle
Rare UI / custom
78%
Meta mensual156 / 200

Progress Ring

Dashboard

Progreso circular para metas, cumplimiento o avance.

EducaciónCRMFlotas
#progreso#metas#score
Detalle
shadcn
IngresosS/ 12,840 +9%
Pedidos326 +4%
Ticket promedioS/ 39.40 -1%

Stat List

Dashboard

Listado limpio de métricas secundarias con variación.

HotelRestauranteEducación
#estadísticas#lista#resumen
Detalle
ReUI
ClienteEstadoTotal
Ana TorresPagadoS/ 420
Luis VegaPendienteS/ 185
María RuizPagadoS/ 690

Data Table

Data

Tabla empresarial responsive con estados y acciones.

HotelRestauranteEducaciónCRMFlotas
#tabla#datos#acciones
Detalle
Origin UI

Filter Chips

Data

Filtros rápidos con selección múltiple y contador.

HotelRestauranteCRM
#filtros#chips#buscar
Detalle
shadcn
⌕
Aún no hay resultadosPrueba cambiando los filtros.

Empty State

Data

Estado vacío accionable para listas sin información.

HotelRestauranteEducaciónCRM
#vacío#empty#cta
Detalle
ReUI
Reserva confirmada10:42
Pago verificado10:39
Solicitud creada10:31

Timeline

Data

Historial vertical de eventos, cambios y auditoría.

HotelEducaciónCRMFlotas
#timeline#historial#auditoría
Detalle
Origin UI
✓ Datos válidos

Floating Input

Forms

Campo con etiqueta flotante y estado de validación.

HotelRestauranteEducaciónCRM
#input#formulario#floating
Detalle
Rare UI

OTP Input

Forms

Ingreso OTP con navegación automática entre casillas.

HotelRestauranteEducaciónCRM
#otp#seguridad#login
Detalle
ReUI
✓Datos
2Pago
3Confirmar

Stepper

Forms

Flujo por pasos para reservas, registros u onboarding.

HotelRestauranteEducación
#pasos#wizard#formulario
Detalle
Kibo UI
⇧
Arrastra archivos aquíPDF, JPG o PNG · máx. 10 MB

File Dropzone

Forms

Zona de carga drag & drop con feedback inmediato.

HotelEducaciónCRM
#archivo#upload#dropzone
Detalle
shadcn

Segmented Control

Forms

Selector compacto para alternar vistas o estados.

HotelRestauranteCRM
#segmentado#toggle#selector
Detalle
custom
Facturación SUNATOperativoÚltima sincronización: ahora
99.9%

Status Card

Feedback

Estado operativo con señal visual y detalle secundario.

HotelRestauranteCRMFlotas
#estado#online#servicio
Detalle
shadcn
✓GuardadoLos cambios se aplicaron.
iSincronizandoActualizando datos…

Toast Stack

Feedback

Notificaciones apiladas para éxito, aviso y error.

HotelRestauranteEducaciónCRMFlotas
#toast#alerta#notificación
Detalle
Rare UI / Magic UI

Skeleton Loader

Feedback

Placeholder elegante durante cargas asíncronas.

HotelRestauranteEducaciónCRM
#loading#skeleton#ajax
Detalle
custom
✓
¡Listo!La operación terminó correctamente.

Success Check

Feedback

Confirmación visual compacta para acciones completadas.

HotelRestauranteEducaciónCRM
#éxito#check#confirmación
Detalle
shadcn / Kibo UI
⌕ Buscar acción…⌘ K
＋ Nueva reservaN
⌁ Buscar clienteC
↗ Generar reporteR

Command Palette

Navigation

Buscador rápido de acciones tipo Cmd+K.

HotelRestauranteEducaciónCRM
#command#buscar#acciones
Detalle
ReUI
A
⌂ Inicio
▦ Reservas
◫ Clientes
⚙ Ajustes

Sidebar Navigation

Navigation

Navegación lateral compacta con sección activa.

HotelRestauranteEducaciónCRMFlotas
#sidebar#menú#navegación
Detalle
Magic UI
Resumen del proyecto12 tareas · 4 responsables

Animated Tabs

Navigation

Pestañas con indicador deslizante y estados claros.

HotelRestauranteEducaciónCRM
#tabs#pestañas#motion
Detalle
Kibo UI
Panel móvilContenido de ejemplo

Bottom Navigation

Navigation

Navegación inferior optimizada para uso táctil.

HotelRestauranteEducaciónCRM
#mobile#nav#touch
Detalle
Kibo UI / ReUI
Pendiente#184
Confirmar reserva corporativa

Hotel Central · Hab. 304

ARHoy · 16:00

Kanban Card

Business

Tarjeta de tarea o cliente para pipelines y tableros.

HotelRestauranteCRM
#kanban#crm#tareas
Detalle
custom
304
Reserva #H-1842Andrea Salazar17 Sep → 20 Sep · 3 noches
Confirmada

Booking Card

Business

Reserva hotelera con huésped, fechas, habitación y estado.

Hotel
#hotel#reserva#habitación
Detalle
custom
Mesa 0808:42
2× Pollo a la brasa
1× Lomo saltado
Alta prioridad12:48

Kitchen Order Ticket

Business

Ticket de cocina compacto con prioridad y cronómetro.

Restaurante
#restaurante#pedido#cocina
Detalle
custom
LC
Lucía Castillo · 5.ºIndaga mediante métodos científicos
Nivel AD · 82%

Student Progress

Business

Progreso académico con competencia, nivel y evidencia.

Educación
#educación#alumno#progreso
Detalle
custom
▰
Unidad FL-028En ruta46 km/h · GPS fuerte

Vehicle Status

Business

Estado de vehículo con velocidad, señal GPS y conductor.

Flotas
#flotas#gps#vehículo
Detalle
ReUI
JC
Juan CárdenasHotel Miraflores
S/ 4,800
Propuesta enviadaPróx. llamada: 15:30

CRM Lead Card

Business

Lead comercial con valor, etapa, responsable y próxima acción.

CRM
#crm#lead#pipeline
Detalle
Rare UI
Usuarios activos0este mes

Animated Counter

Motion

Contador ascendente para métricas destacadas.

HotelRestauranteEducaciónCRM
#contador#animación#metricas
Detalle
Magic UI

Shimmer Button

Motion

Botón premium con brillo animado y buen contraste.

HotelRestauranteEducaciónCRM
#botón#shimmer#cta
Detalle
Magic UI
Reservas +18%Ocupación 84%Ingresos S/ 8.4K4 check-ins próximosReservas +18%Ocupación 84%

Marquee Strip

Motion

Cinta continua para marcas, estados o mensajes destacados.

HotelRestauranteEducación
#marquee#ticker#loop
Detalle
Aceternity UI
AutomatizaciónProcesos más inteligentesUn hover sutil que aporta profundidad.

Spotlight Card

Motion

Tarjeta con halo que responde al cursor.

HotelRestauranteCRM
#spotlight#hover#card
Detalle
Magic UI
Actualizado hace 2 minTodo bajo control.

Las métricas más importantes están sincronizadas.

Blur Reveal

Motion

Entrada suave con desenfoque para contenido recién cargado.

HotelEducaciónCRM
#blur#reveal#entrada
Detalle
Rare UI
✦
Analizando información

AI Thinking

AI

Indicador de generación IA sin bloquear la interfaz.

HotelRestauranteEducaciónCRM
#ia#loading#thinking
Detalle
custom / shadcn
PHP 8.4

AI Prompt Composer

AI

Caja de prompt con adjuntos, acciones y envío.

HotelRestauranteEducaciónCRM
#ia#prompt#chat
Detalle
custom
✦
APREP AI

Encontré 3 acciones que pueden mejorar este proceso.

AI Message

AI

Burbuja de respuesta con acciones y referencias visuales.

HotelRestauranteEducaciónCRM
#ia#chat#respuesta
Detalle
Rare UI / custom
Generando reporte72%
  1. ✓ Analizando datos
  2. ✓ Creando estructura
  3. ● Redactando conclusiones

Generation Progress

AI

Progreso por fases para tareas largas de IA.

EducaciónCRM
#ia#progreso#generación
Detalle
shadcn / Kibo UI
Vista principal
Acciones rápidas

Mobile Bottom Sheet

Mobile

Panel inferior táctil para acciones rápidas en móvil.

HotelRestauranteEducaciónCRM
#mobile#sheet#drawer
Detalle
custom
MR
María RojasReserva pendiente · 10:40
›

Swipe Action Row

Mobile

Fila móvil con acciones reveladas por gesto lateral.

HotelRestauranteCRM
#swipe#mobile#acciones
Detalle
Copiado