@solu30/ui-kit · v7.0.0 · 174 componentes · 8 grupos

El Muestrario

Todo lo que el paquete instalado exporta como pieza montable. Elegí una y su ficha la monta de verdad, con sus props y su ruta de import.

Filtrar la grilla

174 componentes montables

Formularios

Lo que el usuario completa para dar un dato: campos, selects, calendarios y edición en línea. Acá vive el piso de safety: validación y error no se simplifican en ningún nivel de minimalidad.

Entrada

@solu30/ui-kit/input65 de 113 exports, en este grupo

Salón abierto hoy

Con carpa

ButtonBotón con once variantes, cinco tamaños, estado de carga e íconos a izquierda y derecha.8 props2.461 imports IconButtonBotón de sólo ícono con tooltip, en cuatro variantes y tres tamaños.4 props461 imports InputCampo de texto crudo con prefijo y sufijo adentro; sin etiqueta, sin error y sin texto de ayuda.3 props457 imports TextAreaCampo de texto multilínea con etiqueta, error, ayuda y alto que puede crecer con el contenido.7 props373 imports TextInputCampo de texto con etiqueta flotante, error, ayuda, íconos a los costados y tres tamaños.13 props367 imports SelectSelector de una opción que suma buscador a partir de cierta cantidad de opciones, con limpieza opcional.17 props325 imports LabelEtiqueta de un campo de formulario, con indicador visual de obligatorio.1 prop251 imports SelectRootRoot component that manages select state.5 props167 imports CollapsibleSectionSección plegable ya armada, con título, ícono o número, badge y acciones en el encabezado.19 props161 imports SwitchInterruptor de encendido y apagado, sin etiqueta propia y con estado indeterminado.11 props137 imports CheckboxCasilla con etiqueta, descripción y estado de carga, que se marca al instante y revierte si el guardado falla.11 props103 imports CurrencyInputCampo de importe que formatea con separadores mientras se escribe y devuelve el número crudo.10 props81 imports SeparatorLínea divisoria horizontal o vertical, decorativa o con semántica de separador.2 props69 imports SwitchWithLabelInterruptor con etiqueta, descripción y estado de carga, en cuatro colores semánticos.9 props68 imports CollapsiblePrimitivo de contenido plegable —raíz, disparador y contenido— sin encabezado ni estilo propios.6 props32 imports EditableFieldFila de etiqueta y valor que se vuelve campo al tocarla, con seis tipos de entrada distintos.10 props20 imports ChipToggleChip de encendido y apagado con ícono y descripción, que se marca al instante y revierte si falla.9 props19 imports ComboboxSelector con búsqueda que además permite crear una opción nueva con el texto que se tipeó.15 props19 imports MultiSelectSelector de varias opciones con chips en el disparador, búsqueda y acciones de elegir todo y limpiar.18 props19 imports CalendarCalendario mensual para elegir fechas, con rangos de color pintados sobre los días.3 props17 imports RadioGroupRootLa raíz del grupo de opciones excluyentes, sobre Radix: una grilla con `gap-2`.4 props16 imports ChipPillPíldora de selección a puro clic, más liviana que ChipToggle: sin estado de carga, sin ícono, sin async.5 props15 imports SliderDeslizador de un valor o de un rango con dos manijas, con etiquetas de mínimo y máximo.15 props15 imports FieldEnvoltura de campo con etiqueta, descripción, error, advertencia y orientación vertical u horizontal.10 props14 imports ChipToggleGroupGrilla responsive que reparte varios ChipToggle en columnas, con título y descripción del grupo.5 props12 imports CopyButtonBotón que copia un texto al portapapeles y cambia su etiqueta al confirmarlo.4 props10 imports OptionCardTarjeta de opción con ícono, título y descripción, que se marca al elegirla.7 props10 imports QuantityStepperControl de cantidad con menos y más, y número tipeable cuando el rango útil es de cientos.11 props10 imports TimePickerSelector de hora en pasos de minutos, con utilidades de duración exportadas al lado.7 props10 imports ColorPickerGrilla de muestras de color para elegir una, con la semántica de teclado de un grupo de radios.6 props9 imports DropZoneZona para soltar archivos o abrir el explorador, con filtro por tipo y por tamaño máximo.10 props8 imports FilterChipChip de filtro activo con una cruz para sacarlo, en cuatro colores.5 props7 imports MultiLangInputCampo de texto con un valor por idioma, para el contenido que se publica traducido.10 props7 imports TagInputCampo que arma una lista de etiquetas: se escribe, se agrega y se sacan de a una.7 props7 imports SimpleFormFieldEnvoltura mínima de campo con etiqueta, obligatorio, error y ayuda; sin advertencia ni orientación, que trae Field.6 imports InlineEditTextTexto que se edita en el lugar, con un botón de lápiz visible como disparador de la edición.5 props5 imports InlineEditTextareaTexto largo que se edita en el lugar, con un llamado a completarlo cuando está vacío.5 props5 imports PeriodSelectorPíldoras de período —hoy, semana, mes, trimestre, año— con rango a medida opcional.7 props5 imports WizardStepHeaderEncabezado de un paso de asistente, con ícono, título y subtítulo.4 props5 imports CellPriceCampo de precio para editar dentro de una celda de tabla, con formato de moneda al soltar el foco.8 props4 imports EmojiPickerPanel de emojis con búsqueda y tono de piel, pensado para componer adentro de un Popover.9 props4 imports ImageUploadSubida de imágenes con grilla de miniaturas y borrado, agnóstica de dónde se guarden los archivos.11 props4 imports InlineNumberFieldCampo numérico para editar dentro de una celda de tabla, con sufijo de unidad opcional.6 props4 imports QuantityUnitFieldCampo de cantidad con selector de unidad al lado, restringible a peso, volumen o unidades sueltas.11 props4 imports StarRatingPuntuación de cinco estrellas interactiva, con etiqueta de categoría configurable por idioma.8 props4 imports AccordionListLista de secciones plegables controlada desde afuera, con indicador de completitud por ítem.7 props3 imports DateRangePickerSelector de rango de fechas con dos meses a la vista y atajos para los rangos más usados.8 props3 imports InlineMarkupFieldCampo de porcentaje de recargo que devuelve el precio nuevo, calculado sobre el costo unitario.5 props3 imports InlineTextValor de texto que se vuelve campo al tocarlo, con guardado asincrónico y modo multilínea.7 props3 imports QuizOptionButtonBotón de opción de examen, con su letra a la izquierda y estado de elegido.6 props3 imports ArrayItemsEditorEditor de una lista de objetos: una tarjeta por ítem, con campos configurables y alta y baja.6 props2 imports ClickableRowFila de ancho completo que es un botón entero, para listados donde se toca cualquier parte de la fila.1 prop2 imports InlineColorFila de color que al tocarla abre un selector con campo hexadecimal, y confirma con Enter.4 props2 imports InlineTextFieldCampo de texto para editar dentro de una celda de tabla, opcionalmente en tipografía monoespaciada.6 props2 imports RadioGroupGrupo de opciones excluyentes con navegación por flechas, construido sobre Radix.2 imports ScaleRatingEscala numérica para puntuar, con mínimo y máximo configurables.6 props2 imports SeasonRangeCalendarCalendario de temporadas que pinta rangos de colores y permite elegir un desde-hasta, con año o sin año.17 props2 imports StarRatingDisplayLas cinco estrellas sólo para mostrar: sin clic, sin animación y sin etiqueta.2 props2 imports WizardNavFooterPie de asistente con los botones de atrás y siguiente, y el de envío en el último paso.8 props2 imports WizardProgressBarBarra de progreso de un asistente, que muestra el paso actual sobre el total.4 props2 imports BusinessHoursCardTarjeta que muestra los horarios de atención como pares de días y horas.4 props1 import ContactFormFormulario de contacto que postea a un endpoint, con Turnstile y campo trampa opcionales.8 props1 import FieldGroupContenedor que reparte varios campos en columnas responsive, con título y descripción de sección.6 props1 import FilterableSectionSección plegable que se muestra, se expande o se esconde según el término de búsqueda que reciba.6 props1 import UnstyledButtonBotón sin ningún estilo de fábrica, como base de cualquier superficie clickeable propia.1 import

Contenido

Piezas que muestran algo sin capturar un dato: tarjetas, métricas, estados vacíos, avatares y líneas de tiempo.

Presentación

@solu30/ui-kit/display35 de 149 exports, en este grupo

Ocupación

87%

▲+12%

vs. mes anterior

ActivePending+12.4%-3.1%

BadgeEtiqueta corta de estado o categoría, con trece colores, cuatro tamaños y variantes de relleno.9 props1.207 imports CardContenedor de superficie con padding, borde y elevación configurables; la base de casi todos los bloques.4 props811 imports SpinnerIndicador de carga que gira, en cuatro tamaños.2 props729 imports SkeletonBloque animado que ocupa el lugar del contenido mientras carga, en cuatro formas y con varias líneas.5 props667 imports EmptyStateEstado vacío con ícono, título, mensaje y hasta dos botones de acción, en tres variantes de marco.10 props576 imports AlertBloque de aviso con título, ícono y cierre opcional, en cinco colores semánticos.8 props300 imports ProgressBarBarra de progreso de 0 a 100; omitir el valor la pasa a indeterminada, que dice «en curso» sin cuánto falta.7 props67 imports AvatarFoto de perfil que cae a iniciales si no carga, y a un ícono de persona o empresa si tampoco hay nombre.7 props53 imports StatusBadgeBadge que resuelve color y texto desde un mapa de estados, con nueve estados de fábrica.7 props46 imports AvatarInitialsCírculo con las iniciales de un nombre y un color derivado de él, sin imagen ni caída.3 props32 imports PageHeaderSkeletonEsqueleto de carga con la forma de un encabezado de página: título, descripción y botones de acción.21 imports MetricCardTarjeta de métrica con valor, texto secundario y tendencia, teñida por un color semántico cerrado.9 props20 imports SkeletonFormEsqueleto de carga con la forma de un formulario, con la cantidad de campos que se le pida.15 imports CapacityBarBarra de consumo sobre un total que cambia de color por umbrales, con llenarla como bueno o como malo.9 props13 imports GlowCardTarjeta con un resplandor de color de fondo, en cuatro tonos fijos.1 prop12 imports SkeletonListItemEsqueleto de carga con la forma de un ítem de lista.12 imports StatCardTarjeta de estadística con ícono en recuadro, valor y tendencia; los colores del ícono se pasan sueltos.8 props12 imports AnimatedCounterNúmero que cuenta desde cero hasta su valor al aparecer; para cifras que cambian en vivo está SlidingNumber.5 props11 imports SkeletonCollapsibleEsqueleto de carga con la forma de una sección plegable y sus filas.9 imports ActivityTimelineLínea de tiempo de auditoría, con el actor, la fecha y qué campos cambió cada evento.8 props7 imports CodeBlockBloque de código con resaltado de sintaxis para HTML y JavaScript, sin dependencias externas.2 props7 imports SparklineGráfico mínimo de una serie, como línea o como barras, para meter adentro de una tarjeta.16 props7 imports StatusDotPunto de color que indica presencia —activo, inactivo, ocupado, error— con pulso opcional.6 props6 imports SkeletonTableRowEsqueleto de carga con la forma de una fila de tabla, con la cantidad de columnas que se le pida.4 imports TotalsBreakdownDesglose de totales por concepto, con los importes formateados en una moneda.3 props4 imports ActionCardTarjeta que además es un botón: ícono, título, subtítulo y badge, en cinco colores semánticos.13 props3 imports InlineStatCifra con su etiqueta en un solo renglón, con plural automático, para meter dentro de otra línea.5 props3 imports MetricRowFila de ancho completo con la etiqueta contra un borde y el valor contra el otro, con tendencia opcional.6 props3 imports AlertsLos cinco colores de Alert ya fijados como atajos: Alerts.Info, Alerts.Success, Alerts.Error, Alerts.Warning y Alerts.Special.1 import AttributeEditorCollapsibleEl mismo editor de atributos con modo resumido: una fila con lo ya configurado y un botón de editar.7 props1 import InfoCardBloque de mensaje en cuatro tonos semánticos, con cierre opcional; a diferencia de Alert, no tiene título propio.5 props1 import ProgressRingAnillo de progreso de 0 a 100 con contenido centrado adentro, sea un porcentaje o un ícono.6 props1 import VideoBackgroundVideo de fondo a sangre completa —YouTube, Vimeo o mp4— con imagen de reemplazo en móvil.4 props1 import AttributeEditorEditor de atributos y sus valores posibles —Color: rojo, verde, azul— con alta y baja de cada uno.4 props0 imports TrendBadgeBadge de variación con flecha, que se pinta según si el número subir sea bueno o malo.6 props0 imports

Overlays y avisos

Lo que se dibuja encima de la pantalla: diálogos, hojas, popovers y menús que hay que cerrar, y avisos que se van solos. Todo lo que interrumpe devuelve el foco al cerrarse.

Respuesta

@solu30/ui-kit/feedback20 de 65 exports se montan

Margen por combo

ModalOverlay configurado por props, con encabezado, pie y cinco posiciones: centro, lateral, inferior o pantalla completa.22 props336 imports ConfirmDialogDiálogo de confirmación ya armado, con título, descripción y dos botones, en variante neutra o de peligro.11 props214 imports SheetRootRoot provider for sheet composition.3 props144 imports SheetPanel que entra deslizándose desde un borde de la pantalla, en seis anchos.11 props127 imports DialogDiálogo centrado que se arma por composición: disparador, contenido, encabezado, pie y cierre.5 props86 imports PopoverPanel flotante anclado a un disparador, que se cierra al hacer clic afuera.4 props79 imports DropdownMenuMenú que se despliega desde un disparador, con ítems, separadores e ítems de tilde.4 props77 imports TooltipRootEl que tiene el estado del tooltip y lo posiciona: envuelve al disparador y al contenido.4 props48 imports AlertDialogDiálogo que no se cierra con Escape ni con clic afuera: obliga a elegir una de sus dos acciones.3 props36 imports InfoTooltipÍcono de ayuda que muestra una aclaración al pasar por encima; a diferencia de Tooltip, no envuelve nada.3 props30 imports ToastProviderSe monta una sola vez en la raíz de la app y dibuja los toasts que dispara la API toast.2 props25 imports TooltipBurbuja de ayuda que aparece al apuntar o enfocar el elemento que envuelve.6 props22 imports CommandRaíz de una lista de comandos que se filtra al escribir, para armar buscadores manejados con el teclado.4 props11 imports SideSheetEl panel lateral estándar del ecosistema: siempre desde la derecha y a 700px, con título y pie.6 props11 imports CommandInputCampo de búsqueda de una lista de comandos; va adentro de Command o de CommandDialog.9 props7 imports CommandDialogLa lista de comandos montada dentro de un diálogo, para armarla pieza por pieza.4 props1 import FilePreviewModalVista previa de un archivo —imagen, PDF o descarga— con acciones de bajar y de abrir aparte.8 props1 import MicroToastPíldora chica de aviso que aparece y se va, con la visibilidad controlada por el host.2 props1 import CommandPalettePaleta de comandos ya armada a partir de grupos de ítems, con atajos y navegación por teclado.6 props0 imports GuidedTourVisita guiada por pasos (coachmarks): resalta un elemento anclado por `[data-tour="clave"]`, muestra un cartel con título y texto, y deja avanzar, retroceder o cerrar.11 props0 imports

Presentación

@solu30/ui-kit/display3 de 149 exports, en este grupo

LightboxVisor de una foto a pantalla completa, con el índice visible controlado desde afuera por el host.5 props4 imports PhotoGalleryModalGalería de fotos a pantalla completa con tira de miniaturas, que maneja su propio índice.5 props3 imports ContentReportModalModal para reportar contenido, con una lista de motivos a elegir y una nota libre opcional.8 props1 import

Datos

Tabla con filtros por columna, encabezados ordenables y búsqueda con debounce: la estructura para leer datos, no para decorarlos.

Datos

@solu30/ui-kit/data-display11 de 30 exports se montan

Salón	Fecha	Invitados
Los Aromos	sáb 5	180
Terraza Norte	vie 11	90
Los Aromos	sáb 19	240

TableLa tabla primitiva y sus partes con los estilos del kit; el orden y el filtrado los pone el consumidor.207 imports TableSkeletonEsqueleto de carga con la forma de una tabla, con las filas y columnas que se le pidan.4 props89 imports SearchInputCampo de búsqueda con lupa y botón de limpiar, con demora opcional al avisar.7 props84 imports DebouncedSearchInputBuscador que retiene las teclas y avisa recién tras una pausa, para no re-renderizar la tabla entera.10 props41 imports ColumnHeaderEncabezado de columna con orden y filtro, donde el contenido del filtro se pasa como nodo.10 props27 imports TextColumnFilterFiltro de columna por texto libre, con botón de limpiar.11 imports SelectColumnFilterFiltro de columna por lista de opciones con tilde, para las columnas de categoría.10 imports NumberRangeColumnFilterFiltro de columna por rango numérico, con un campo de mínimo y otro de máximo.5 imports DateRangeColumnFilterFiltro de columna por rango de fechas, con desde, hasta y chips de rangos prearmados.3 imports FilterDropdownBotón píldora que abre una lista de opciones con tilde y muestra cuántas quedaron elegidas.8 props3 imports FilterableHeaderEncabezado de columna que ya trae su filtro adentro, de texto o de selección múltiple.9 props2 imports

Navegación

Lo que el usuario acciona para moverse: pestañas, barras, sidebars y navegación móvil.

Navegación

@solu30/ui-kit/navigation21 de 32 exports, en este grupo

Datos del evento

Salón y horario

Seña y contrato

TabsRootLa raíz del modo composición, para cuando necesitás controlar el layout de las pestañas y del contenido.5 props79 imports SegmentedControlControl segmentado de opciones con texto e íconos, que también sirve como navegación por enlaces.2 props64 imports TabsPestañas a partir de una lista de ítems, en tres variantes visuales y con indicador animado.7 props52 imports TabbedPanelPanel con pestañas armado por piezas: raíz, barra de pestañas, barra de herramientas y contenido.35 imports DetailSheetTabsPestañas fijas arriba del scroll de un panel lateral, que reinician el scroll al cambiar de pestaña.7 props26 imports ViewModeTogglePar de botones de ícono para alternar la vista de un listado entre grilla y lista.5 props10 imports SidebarNavigationNavegación lateral completa, con grupos, badges, modo colapsado y cajón para pantallas chicas.13 props9 imports ThemeToggleBotón que alterna entre tema claro y oscuro, como ícono o como fila con etiqueta.3 props7 imports StepIndicatorFila de pasos con su estado —hecho, activo, pendiente, error— en puntos, barra o números.5 props6 imports ContextualSidebarContentEl cuerpo del ContextualSidebar sin su marco, para hosts que ya tienen su propio aside.16 props5 imports LanguageSwitcherSelector de idioma con bandera, que abre su propia lista desde un disparador.6 props4 imports MobileBottomNavBarra de navegación fija al pie en móvil, con badges y un botón de más que abre un panel.10 props4 imports SidebarUserMenuMenú de usuario para el pie de la barra lateral, con avatar, ítems propios y cierre de sesión.9 props4 imports MobileTabNavigationTira de pestañas con scroll horizontal para móvil, que centra sola la pestaña activa.6 props3 imports BreadcrumbsFromPathMigas de pan derivadas del pathname actual, con un mapa opcional de nombres por segmento.5 props2 imports HeaderBarEncabezado de página con título, subtítulo, migas de pan y acciones a la derecha.8 props2 imports SidebarNavGroupsSólo la lista de ítems de la navegación lateral, sin marco, sin colapso y sin cajón móvil.8 props2 imports CarouselNavButtonsPar de botones de anterior y siguiente, que se deshabilitan solos en cada extremo.7 props1 import ContextualSidebarBarra lateral de secciones en acordeón, con panel contextual de segundo nivel y modo colapsado.22 props1 import LanguageSwitcherDropdownSólo la lista de idiomas del selector, para meter adentro de un menú que ya está abierto.5 props1 import LiquidTabBarBarra de navegación líquida: la pestaña elegida es una gota y el borde superior se hunde debajo de ella, inclinándose hacia donde viaja.9 props0 imports

Layout y estructura

Lo que sostiene una pantalla en vez de ocuparla: andamiaje, ritmo y marcos. Sueltas no significan nada, y por eso su ficha las monta adentro de un panel.

Presentación

@solu30/ui-kit/display12 de 149 exports, en este grupo

InlineFila horizontal que centra y envuelve a sus hijos; es Stack en horizontal con esos defaults.1 prop33 imports SectionCardTarjeta de sección con encabezado, plegado opcional y contador de errores en el título.12 props30 imports KPICardGridGrilla de tarjetas de indicador con ícono, valor, color semántico y sparkline opcional.5 props19 imports SectionHeaderEncabezado de sección con ícono, título, badge y descripción a la izquierda, y una acción a la derecha.9 props17 imports InfoSectionLista de pares etiqueta y valor en una o dos columnas, con enlaces de mail, teléfono y botón de copiar.3 props12 imports SectionEyebrowLínea corta que va arriba del título de una sección, como badge o como texto suelto.3 props9 imports StackContenedor flex que apila a sus hijos en vertical u horizontal, con el espaciado tomado de tokens.5 props5 imports EntityDetailsPanelPanel de detalle de una entidad, con secciones plegables, acciones y estados de carga y de error.13 props3 imports PhoneFrameMarco de teléfono, con bisel, notch y barra inferior, para envolver la captura de una pantalla móvil.3 props3 imports BrowserFrameMarco de navegador de escritorio, con semáforo y barra de URL, para envolver la captura de una pantalla.6 props2 imports CasosSectionTemplateSección de casos de uso para landings: carrusel de tarjetas con mockup, problema y solución.5 props1 import GenericDashboardMockupDibujo estático de un panel de control, usado como relleno dentro de los marcos de mockup.0 imports

Navegación

@solu30/ui-kit/navigation1 de 32 exports, en este grupo

AppLayoutAndamiaje de aplicación que compone sidebar, encabezado y contenido, con navegación móvil incluida.13 props1 import

Movimiento

El movimiento que acompaña a una pantalla: transiciones, contadores animados y las piezas portadas de motion-primitives.

Movimiento

@solu30/ui-kit/animation5 de 7 exports se montan

Leyendo el contrato…Buscando cláusulas…Redactando el resumen…Cerrando el presupuesto…

AnimatedSectionBloque que aparece cuando entra en pantalla, con cinco animaciones de entrada y retardo configurable.4 props97 imports CollapseEnvoltura que anima la altura de un contenido que se abre y se cierra sin conocerla de antemano.3 props7 imports SlidingNumberNúmero que rueda dígito a dígito cuando cambia, con los separadores del idioma que se le pase.7 props1 import InfiniteSliderCinta que desplaza a sus hijos en loop continuo, con pausa cuando el puntero está encima.7 props0 imports ProgressiveBlurDegradado de desenfoque hacia un borde, como señal de que hay más contenido fuera de la vista.3 props0 imports

Utilidades

Infraestructura sin markup propio: lógica y formateo que otras piezas consumen. El listado suma acá las 133 piezas de comportamiento (hooks) y formateo (utils) que el kit publica sin ficha montable — no es un solo hook suelto.

Presentación

@solu30/ui-kit/display1 de 149 exports, en este grupo

ErrorBoundaryFrontera que atrapa los errores de render de sus hijos y muestra una pantalla con reintento.8 props30 imports

Comportamiento

@solu30/ui-kit/hooks58 exports

useIsMobile() · useIsTablet() · useIsDesktop()detectando…angostá la ventana y cambia solo

Sin markup propio: se importan como función, así que no hay ficha que montar. Ver la familia entera.

Utilidades

@solu30/ui-kit/utils76 exports

formatCurrency(1500, 'ARS', 'es-AR', 0)$ 1.500

formatDurationMinutes(135)2h 15min

truncate('Salón Los Aromos — quinta', 18)Salón Los Aromos …

Sin markup propio: se importan como función, así que no hay ficha que montar. Ver la familia entera.