ScrollArea
@solu30/ui-kit44 usos · 29 archivosÁrea con barra de scroll propia, coherente entre navegadores y con el tema. Sólo existe en la raíz del paquete: el subpath `display` no la expone.
- className ×44
01
Presentación
display · Presentación
149 exportsTarjetas, métricas, estados vacíos, avatares, líneas de tiempo y los 72 íconos propios. Es la familia más grande porque es la que más se repite entre verticales: una métrica se ve igual en un salón de eventos que en una heladería.
defaultprimarysuccesswarningerrorinfopurple
defaultprimarysuccesswarningerrorinfopurple
defaultprimarysuccesswarningerrorinfopurple
defaultprimarysuccesswarningerrorinfopurple
Ocupación
87%
▲+12%vs. mes anterior
Reservas
148
▲+9agosto
Cancelaciones
6
▼-2agosto
ActivePendingcancelleddraft
+12.4%-3.1%0.0%-8.0%
Salón principal38/50 76%
Terraza11/50 22%
28%
64%
91%
Sin reservas todavía
Cuando entre la primera, aparece acá con su ficha completa.
default
elevated
outline
bordered
solid
padding none
padding sm
padding md
padding lg
Salón Los Álamos
Sábado 21:00 · 180 invitados
Salón principal + terraza. Catering incluido, DJ a cargo del cliente.
MS
MS
MS
MS
MS
HL
HL
HL
HL
HL
A
sin alt → ícono genéricoMS
DR
CL
Creada
14 ago, 10:05 a. m. • Diego Reynoso
Reserva creada para el charter Náutica del Sur, 8 pasajeros.
Cambio de estado
15 ago, 09:12 a. m. • Lucía FaríasCliente avisado
Editada
16 ago, 06:40 p. m. • Diego Reynoso
El cliente pidió correr el horario por el clima.
Cancelada
17 ago, 08:00 a. m. • Sistema
Cancelada automáticamente — no se acreditó la seña en 48h.
El pronóstico marca viento leve — no afecta la salida del sábado.
Seña acreditada, cupo confirmado.
Faltan 2 días y todavía no llegó la lista de invitados.
El proveedor de catering canceló — reasignar antes del jueves.
Ocupación del salón
87%
▲12%vs. julioagosto, fines de semana
Salidas canceladas
3
▼2%por clima, agosto
Reservas del mes
148+9.0
Cancelaciones
6-2.0
Alquiler de lancha420.000,00 ARS
Combustible65.000,00 ARS
Tripulación90.000,00 ARS
Catering55.000,00 ARS
default
68%
success
68%
warning
68%
error
68%
Accommodation
Activities
Allergies
Anchor
ArrowLeft
ArrowRight
Bell
Beverages
Book
Briefcase
Chart
Chat
Check
CheckAll
ChevronDown
ChevronLeft
ChevronRight
Clipboard
Clock
Command
Comms
Compass
Cuisine
Dietary
EmergencyContact
ExperienceLevels
ExternalLink
Eye
Flight
Folder
Globe
Grid
Heart
Home
Inbox
Instagram
Lightbulb
Lightning
Lucy
Mail
Map
Menu
Mic
Moon
MusicNote
Network
Occasion
Pencil
Phone
PhysicalInfo
Pin
Plus
Rocket
Rss
Ruler
Search
Send
Settings
Shield
Sparkles
Star
Swarm
Target
Tasks
Team
TripInfo
User
Video
Waves
WhatsApp
Wrench
X
14 piezas de Presentación que GestorSalon usa y esta galería no mostraba
Medido, no elegido: sale de cruzar los 254 símbolos del kit que aparecen en el código de GestorSalon contra los que estos especímenes montaban. Cada ficha trae el especificador de import y las props que el producto realmente le pasa.
StatusDot
@solu30/ui-kit/display2 usos · 2 archivosEl punto de estado con cinco valores semánticos y pulso opcional. Ojo con `label`: es el `aria-label` del punto, no un texto visible — la pieza no renderiza ni un carácter. `disableAnimation` apaga el pulso sin sacar el punto, para las tablas largas donde veinte puntos latiendo son ruido.
- status ×2
- size ×2
- pulse ×2
- label ×2
- className ×2
Salón libreEvento en cursoReservadoSeña vencidaFuera de servicio
El punto late sólo en `active`, y deja de latir solo con «movimiento reducido» activado — medido en la página con las dos preferencias, no supuesto.
SectionHeader
@solu30/ui-kit/display1 usos · 1 archivosEl encabezado de sección con ícono, insignia, descripción y acción a la derecha. `SectionEyebrow` es la línea de contexto que va arriba; `SectionCard` es la sección entera, plegable, con su propio encabezado.
- icon ×1
- title ×1
- description ×1
Agosto 2026
Reservas del mes
10 confirmadasOrdenadas por fecha de evento, no por fecha de carga.
Ofelia Vera · ofelia@ejemplo.com · +54 351 555 0142
PercentageBadge
@solu30/ui-kit4 usos · 3 archivosInsignia de porcentaje que elige su propio color según dos umbrales. Sólo en la raíz del paquete.
- value ×4
- className ×1
12%38%74%96%
El verde y el rojo los decide la propia pieza a partir de `thresholds` (20 y 50 por defecto). Es la diferencia con un `Badge` al que hay que pasarle el color: acá el criterio de «qué es poco» vive en un solo lugar y no en cada pantalla.
GradientText
@solu30/ui-kit10 usos · 10 archivosTexto con degradado, pedido por clases de Tailwind. Sólo en la raíz del paquete.
- as ×10
- from ×10
- to ×10
- className ×10
Ocupación récord
`from` y `to` son clases de Tailwind, no colores escritos a mano. Por eso el degradado sigue al tema del vertical: en GestorSalon arranca en su verde, acá en el acento de este sitio, y nadie tuvo que duplicar la definición para el modo oscuro.
CodeBlock
@solu30/ui-kit/display5 usos · 1 archivosBloque de código monoespaciado con su propio fondo. Lo usa la pantalla de importación de GestorSalon para mostrar el formato de archivo esperado.
- code ×5
import { SheetRoot } from '@solu30/ui-kit/feedback'PageHeaderSkeleton
@solu30/ui-kit/display11 usos · 11 archivosEl esqueleto del encabezado de página mientras cargan los datos. Once archivos de GestorSalon lo usan: es el que evita que el título salte cuando llega la respuesta.
- actions ×2
- hasDescription ×1
El esqueleto del encabezado de página, con la misma altura que el encabezado real. Es la pieza que evita el salto de layout cuando llegan los datos.
DashboardContainer
@solu30/ui-kit5 usos · 5 archivosEl ancho máximo de una pantalla de tablero, como componente. Sólo en la raíz del paquete.
- className ×5
Toda la API son tres valores: 5xl (el de acá, y el que viene por defecto), 6xl y 7xl. Que sean tres y no cualquier clase de Tailwind es el punto: el ancho de una pantalla de tablero deja de ser una decisión que se toma otra vez en cada página.
Las tres que no se demuestran acá, y las dos que son sólo tipos
`SectionEyebrow` y `SectionCard` están montadas en el espécimen de encabezados de arriba. `Lightbox` toma la pantalla completa: montarlo en una galería significa que quien pasa el mouse se come un visor a pantalla completa sin haberlo pedido. `DynamicIcon` resuelve el ícono por nombre en tiempo de ejecución contra el paquete de íconos, y una demo suya es una lista de nombres, no una pieza. Los dos últimos no se renderizan porque no son valores: son los tipos con los que se declaran las props de `Badge` y la acción de un `EmptyState`.
| Símbolo | De dónde | Usos | Props que le pasa GestorSalon |
|---|---|---|---|
| SectionEyebrow | @solu30/ui-kit/display | 2 | variant ×2 |
| SectionCard | @solu30/ui-kit/display | 1 | icon ×1 · title ×1 · subtitle ×1 · collapsible ×1 · defaultCollapsed ×1 · className ×1 |
| Lightbox | @solu30/ui-kit/display | 1 | photos ×1 · selectedIndex ×1 · onClose ×1 · onNavigate ×1 · alt ×1 |
| DynamicIcon | @solu30/ui-kit/dynamic-icon | 1 | name ×1 · icons ×1 · className ×1 |
| BadgeProps | sólo tipo | 0 | — |
| EmptyStateAction | sólo tipo | 0 | — |