@solu30/ui-kit · v5.8.1 · 161 componentes
El Muestrario
Si vas a construir una pantalla, acá está si la pieza ya existe y de qué subpath sale. Nada de lo que sigue es una captura: es el componente real, importado del paquete instalado — si el kit se rompe, esta página se rompe con él.
La vitrina
Tres pantallas armadas sólo con piezas del kit, cada una con el accent real de su producto — dos de escritorio, una de teléfono. Al lado de cada una, la lista exacta de lo que la compuso: sirve para ver qué combinación resuelve una pantalla entera antes de escribirla.
Salón Los Aromos
Ocupación · septiembre 2026
Fines de semana vendidos
Verde: señado · Ámbar: reservado sin seña
Horarios de atención
Salón Los Aromos
- Martes a viernes
- 10:00 – 19:00
- Sábados
- 10:00 – 00:00 según evento
- Domingos y lunes
- Cerrado — solo eventos con reserva
Eventos de septiembre
Los del calendario — el cancelado ya no ocupa fecha
| Fecha | Evento | Cliente | Invitados | Estado | Señado |
|---|---|---|---|---|---|
| 05-sept | 15 años Sofía Duarte | Familia Duarte | 120 | Señada | $ 1.850.000 |
| 11-sept | Casamiento Guzmán-Ferreyra | Lucía Guzmán | 180 | Señada | $ 3.200.000 |
| 16-sept | Cumpleaños infantil Torres | Familia Torres | 40 | Cancelada | — |
| 19-sept | Aniversario Molinos del Sur | Molinos del Sur S.A. | 80 | Señada | $ 950.000 |
| 25-sept | Casamiento Aguirre-López | Familia Aguirre | 160 | Sin seña | — |
| 26-sept | Cumpleaños 50 · Marcelo Ibáñez | Marcelo Ibáñez | 60 | Señada | $ 640.000 |
Ocupación del salón
El dueño abre el panel el lunes y en un vistazo entiende cómo viene el mes: qué fechas ya se vendieron, cuánta capacidad está comprometida, qué eventos hay esta semana y cuáles todavía no confirmaron seña.
Se compuso con:
- BrowserFrame
- KPICardGrid
- CapacityBar
- SeasonRangeCalendar
- BusinessHoursCard
- Card
- CardHeader
- CardContent
- Table
- TableHeader
- TableBody
- TableRow
- TableHead
- TableCell
- Badge
- formatCurrency
- formatDateShort
- IconBook
- IconChart
- IconClipboard
- IconBell
| Cancha | Cliente | Hora | Duración | Monto | |
|---|---|---|---|---|---|
| Pádel 1 | Martín Aguirre351 612-4471 | 09:00 | 90 min | Confirmada | $ 8.500 |
| Pádel 2 | Rocío Funes351 588-2201 | 09:00 | 60 min | Confirmada | $ 6.000 |
| Tenis 1 | "Colo" Ibarra351 640-9983 | 10:00 | 60 min | Seña pendiente | $ 5.500 |
| Pádel 3 | Sol Bazán351 573-1120 | 10:30 | 90 min | Confirmada | $ 8.500 |
| Pádel 1 | Nacho Ferreyra351 699-4432 | 11:00 | 60 min | Cancelada | — |
| Tenis 2 | Male Quiroga351 555-8871 | 12:00 | 60 min | Confirmada | $ 6.200 |
| Pádel 4 | "Turco" Farías351 621-3390 | 13:00 | 90 min | Seña pendiente | $ 8.500 |
| Mostrando 7 de 13 reservas de hoy — sin paginado en el kit, el resto se ve acotando la búsqueda o los filtros. | |||||
Tablero de reservas
Todas las reservas del día en una sola vista: qué cancha, con quién, a qué hora, si ya pagó la seña — sin abrir cada turno para saber su estado.
Se compuso con:
- BrowserFrame
- StatsRow
- Toolbar
- FilterDropdown
- Button
- Table
- TableHeader
- TableBody
- TableFooter
- TableRow
- TableHead
- TableCell
- ColumnHeader
- FilterableHeader
- Badge
- EmptyState
- useTableState
- formatCurrency
- IconPlus
- IconSearch
Harina de Almendras Fina
NaturalMix · 500g
Precio
Cantidad para el ticket
Ficha de producto
El empleado toca un producto atrás del mostrador: ve cuánto stock queda, corrige el precio ahí mismo si hace falta, y carga la cantidad para el ticket — todo con el pulgar, sin soltar el teléfono.
Se compuso con:
- PhoneFrame
- Card
- CardHeader
- CardContent
- CardFooter
- Avatar
- StatusBadge
- ChipPill
- InfoCard
- CellPrice
- QuantityStepper
- Button
Las piezas
Las ocho familias, cada una con dos o tres de sus componentes corriendo de verdad acá abajo. Son piezas sueltas y son interactivas: el menú se abre, el interruptor cambia, el paso del asistente se pinta. Cada tarjeta lleva al muestrario completo de su familia, donde están todas las configuraciones.
Ocupación
87%
▲+12%vs. mes anterior
@solu30/ui-kit/displayver las 149 →| Salón | Fecha | Invitados |
|---|---|---|
| Los Aromos | sáb 5 | 180 |
| Terraza Norte | vie 11 | 90 |
| Los Aromos | sáb 19 | 240 |
@solu30/ui-kit/data-displayver las 30 →@solu30/ui-kit/navigationver las 31 →@solu30/ui-kit/animationver las 22 →useIsMobile() · useIsTablet() · useIsDesktop()detectando…angostá la ventana y cambia solo@solu30/ui-kit/hooksver las 58 →formatCurrency(1500, 'ARS', 'es-AR', 0)$ 1.500formatDurationMinutes(135)2h 15mintruncate('Salón Los Aromos — quinta', 18)Salón Los Aromos …@solu30/ui-kit/utilsver las 75 →Las variables
Ningún componente elige un color: lo pide por nombre. Los cuadros de abajo se pintan con la variable en vivo, no con un hex copiado — un hex copiado se desincroniza en silencio y el muestrario pasa a mentir sin que nadie lo note.
Superficies
Cuatro planos de profundidad. La regla es que una superficie nunca se apila sobre sí misma: si dos cajas anidadas usan el mismo, falta un plano.
Contenido
Un solo token de texto con opacidades, no cinco grises sueltos. La jerarquía sale de /70, /50 y /30 — así el contraste se mantiene al invertir el tema.
Acento
Uno solo, y con función. El acento marca la acción principal; si aparece dos veces en la misma pantalla, una de las dos no era la principal.
Estado
Nombres de función, no de paleta. Un componente que pide "amber" en vez de "warning" se rompe el día que la marca cambia de amarillo.
Datos
Los siete de serie más dos pares de soporte: uno para lo que enmarca el gráfico (grid, label, crosshair) y otro para escalas de intensidad continua. Un dashboard que mezcla estos con los de Estado pierde la distinción entre "esto es un dato" y "esto es un status".
De dónde sale cada una
Las mismas ocho familias de arriba, agrupadas por lo que hacen y no por lo que parecen. La ruta que va debajo de cada nombre es literal: es lo que se escribe entre comillas en el import.
Lo que se ve
Presentación@solu30/ui-kit/displayTarjetas, métricas, estados vacíos, avatares, líneas de tiempo y los 72 íconos propios.149exportsDatos@solu30/ui-kit/data-displayTabla con filtros por columna, encabezados ordenables y búsqueda con debounce.30exportsLo que se toca
Entrada@solu30/ui-kit/inputCampos, selects, calendarios, edición en línea y los editores de arreglos.113exportsNavegación@solu30/ui-kit/navigationPestañas, barras, sidebars, navegación móvil y el layout de aplicación completo.31exportsEl criterio
Las 161 piezas del directorio son la mitad visible. La otra mitad es lo que quedó afuera: de 33 componentes evaluados en tres kits ajenos entraron 11, y los 11 entraron cambiados — ninguno por una cuestión de estilo. Los ocho defectos que trae el código de galería, cada uno con el caso real que lo destapó, están en su propia página.
El código de otro no entra como está
Once portados de un repositorio de seis mil estrellas, once con al menos un defecto real de accesibilidad, compatibilidad o dependencias. Cero de sus 33 componentes respetan movimiento reducido. Y la auditoría que no portó nada terminó encontrando un error nuestro: cinco de siete colores de gráficos apuntaban a variables inexistentes.
Ver el criterio completo — las tres fuentes medidas, los ocho defectos y las cinco adaptaciones que un port tiene que hacer para estar terminado.
Condiciones
Se mira, no se descarga
Esta página es un muestrario, no un repositorio. No hay código para copiar, ni botón de descarga, ni paquete público: @solu30/ui-kit se publica en un registry privado y sin credenciales no se instala. Y la parte honesta: cualquiera con las herramientas del navegador puede leer el marcado de un botón. No hay nada que esconder acá — esta página existe para que los doce repos que consumen el kit dejen de reinventar una pieza que ya está hecha.
El movimiento todavía no tiene el gate que sí tiene el color, y la brecha cambió de forma con el bump a 5.8.1 — no de tamaño:
AnimatedCounter,GlowCardySkeletonno respetan movimiento reducido, ni desde el sistema operativo ni desde el interruptor.Spinneres la excepción nueva: desde 5.8.1 escucha al sistema operativo —pasa de girar a un pulso quieto— pero el interruptor sigue sin tocarlo, porque no corre sobre su motor.MotionSectionyStaggerContainersí corren sobre framer-motion y tampoco lo obedecen, cada una por su cuenta: la primera se blinda con su propioreducedMotion="user"fijo —un framer-motion anidado siempre gana sobre el de un padre—; la segunda ni pasa por ese motor, anima con CSS puro y su propia guarda de sistema operativo (KIT-060).
La ficha técnica
- Componentes
- 161
- Subpaths
- 19
- Variables de color
- 78
- Gates en CI
- 33
- Superficies verificadas
- 28
- Versión
- 5.8.1
Números medidos el 18 de agosto de 2026 sobre cmp-packages @ main · cada uno con el comando que lo reproduce en kit/registry.ts · el muestrario tiene su propio gate: si una familia cambia de tamaño y esta página no, el commit rebota.