Componentes de React accesibles,
con tu marca y sin dependencias.
@amset/ui es una biblioteca de componentes para React, de un botón a una tabla de gestión. Se tiñe con tu color, funciona con teclado y con lector de pantalla, y no arrastra ni una dependencia de npm. Es libre y lleva licencia MIT.
- Licencia MIT
- React 18 y 19
- TypeScript
- Tema claro y oscuro
- Español e inglés
Básico
ProfesionalSoporte prioritario
Empresa
Facturado este mes
12.480 €
+8,4 %sube
Pedidos sin pagar
4
De 128 del mes
Subiendo la factura42 %
Importando clientes62 %
Procesando el pedido en el servidor
Subiendo el albaránError al subir
- 244
- componentes, cada uno con su ficha
- 725
- variables CSS que puedes cambiar
- 2134
- iconos, del mismo trazo
- 11
- pantallas enteras para copiar
- 0
- dependencias de npm
Cero dependencias de npm
Declara react y react-dom como pares, y nada más: ni una librería de terceros, ni instalada ni copiada dentro. El teclado, el foco y la accesibilidad salen de los elementos nativos del navegador y de código propio, así que no heredas actualizaciones ni avisos de seguridad de paquetes ajenos.
Tu marca, con un comando
Le das tu paleta en hexadecimal y escribe el tema entero: todos los roles de color, en claro y en oscuro. Y se niega a emitir una combinación que no pase el contraste mínimo.
Accesible, con pruebas
Teclado, foco y lector de pantalla en todos los componentes, comprobados con axe en claro, en oscuro y en móvil sobre cada ficha del banco de pruebas.
Solo pesa lo que usas
Un fichero por componente y nada de efectos colaterales: el empaquetador se lleva lo que importas y deja el resto. Una pantalla con un campo no arrastra la tabla.
En marcha en tres pasos
Funciona con Vite, Next y webpack. En Next, un proveedor lleva todos los enlaces por su enrutador. No hay que importar una hoja de estilos: cada componente trae la suya.
Créala o móntala
Una aplicación nueva con la biblioteca puesta, o la biblioteca en la tuya. Lo único que necesita es React.
npx amset-ui create mi-app # en un proyecto que ya existe:npx amset-ui initÚsala
Los componentes se montan con su API: variante, tono y tamaño, sin escribir clases.
import { Button, TextField } from '@amset/ui' <TextField label="Correo" type="email" /><Button variant="solid" tone="accent">Guardar</Button>Ponle tu color
Das tu paleta en hexadecimal y el comando escribe el tema, en claro y en oscuro.
npx amset-ui themeEn npm público llega próximamente. Hasta entonces se instala desde el registro de paquetes de AMSET: la guía de Primeros pasos lo explica paso a paso. Guía de instalación
O cópialo en tu proyecto
Si prefieres tener el código delante en vez de instalarlo, amset-ui add copia el código fuente de un componente y de todo lo que usa, con sus hojas de estilo. Desde ese momento es tuyo: un fichero que cambies no se pisa al volver a copiarlo. Las pantallas enteras, como el panel o la factura, también se copian.
npx amset-ui add button iban-fieldnpx amset-ui add dashboardMás que componentes
Lo que viene en el mismo paquete, 0.35.0.
npx amset-ui crea una aplicación, monta la biblioteca en la tuya, la diagnostica, migra tu código y genera tu tema.11 pantallas enteras —panel, clientes, factura, ajustes, entrar— y dos plantillas, Next y Vite.
16 piezas para una interfaz de asistente y el editor de texto propio, con revisión, versiones y fórmulas.
Accesibilidad, peso frente a otras bibliotecas, seguridad y licencia, con lo que se mide y lo que no.
AGENTS.md, llms.txt, api.json, una skill, el servidor MCP y Figma.npx amset-ui migrate reescribe tu código cuando la biblioteca cambia un nombre.Los componentes, por familias
Desde el botón hasta la tabla con filtros, el calendario o el carrito. Cada componente tiene su ficha con cuándo usarlo y cuándo no, el teclado, lo que anuncia un lector de pantalla y un ejemplo funcionando.
Lo que el usuario pulsa para que pase algo.
20 componentes
20 componentes
Entrada de datos, con su etiqueta, su ayuda y su error.
32 componentes
32 componentes
Elegir entre opciones: una, varias o ninguna.
24 componentes
24 componentes
Calendarios, horarios y huecos disponibles.
15 componentes
15 componentes
Moverse por la aplicación sin perderse.
16 componentes
16 componentes
El armazón de una pantalla: cabecera, columnas y lo que se queda pegado.
4 componentes
4 componentes
Las piezas que colocan todo lo demás.
6 componentes
6 componentes
Donde se apoya el contenido.
19 componentes
19 componentes
Lo que se abre por encima de la página.
14 componentes
14 componentes
Avisar de lo que pasa: cargando, hecho, error o sin conexión.
2 componentes
2 componentes
Enseñar números y listas sin que duela leerlos.
21 componentes
21 componentes
Las piezas de un panel de administración: tablas, tableros y filtros.
26 componentes
26 componentes
Todo lo que lleva de un producto a un pedido.
12 componentes
12 componentes
Títulos, texto, citas y código con la misma voz.
10 componentes
10 componentes
Las piezas de una interfaz de asistente: mensajes, razonamiento, herramientas y entrada de texto.
16 componentes
16 componentes
Pruébalos aquí
Todo lo que ves aquí son componentes reales de la biblioteca: pulsa, ordena, filtra y elige.
Fechas
Estado
Elección
Acciones
Personas
Un editor de texto propio
RichTextEditor es un campo de texto enriquecido propio, sin dependencias de terceros. Tiene tablas, bloques, comentarios y sugerencias, historial de versiones, fórmulas en TeX y corrector ortográfico (el diccionario lo pones tú). Guarda el documento como JSON y RichTextView lo pinta igual en el servidor. Vive en su propia subruta: quien no lo usa no carga ni un byte.
import { RichTextEditor } from '@amset/ui/rich-text' <RichTextEditor label="Notes" format="html" defaultValue={html} onChange={setHtml} />Un asistente de chat completo
Mensajes, razonamiento, herramientas, adjuntos, sugerencias y selector de motor, juntos y funcionando. Escribe algo, pulsa una sugerencia o adjunta un fichero: lo que contesta es un guion, todo lo demás es la biblioteca.
La usamos cada día
AMSET la hizo para sus propios productos y la usa cada día. Lo que ves aquí es lo que ejecutan.
El asistente de AMSET
Una aplicación densa, con menús, tablas, formularios y capas flotantes, en claro y en oscuro.
Tiendas online
Catálogo, carrito, pago y seguimiento del pedido, con la marca de cada tienda.
Paneles de gestión
Facturas, citas, tableros y tablas con miles de filas, para equipos que pasan el día delante.
Para tu asistente de código Para agentes
El paquete se describe a sí mismo para tu asistente de código (Claude Code, Cursor y cualquier otro): AGENTS.md, llms.txt, las props reales en api.json, una skill, y el servidor MCP @amset/mcp.
Le pides esto a tu editor
Créame un panel de administración para gestionar usuarios con tabla paginada, filtro dinámico y un drawer de edición usando la paleta corporativa #00d4ff.
Y la IA escribe código con
- Componentes y props reales, leídos del
@amset/uique tiene instalado tu proyecto (api.json), no inventados. - Código compilado contra la biblioteca antes de dártelo: una prop que no existe no pasa.
- Accesibilidad de serie: etiquetas, teclado y foco ya resueltos.
- Tu marca aplicada con un tema generado a partir de tu color, que se rechaza si no da el contraste.
Qué ficheros trae el paquete, cómo usarlos y el servidor MCP: Para agentes y herramientas
Lo último
Lo que llegó en la última versión, sacado del registro de cambios del paquete.
0.35.0, del 3 de noviembre de 2026
Table: varios rangos de celdas sueltos a la vezTable: salir de una edición que no se puede guardar, rango sin grupos plegados, cuenta de filas paginadas, error de carga, elegir todo lo filtrado, pegado por lotes y ajustar el ancho al contenidoDataImportWizard: importar por tandas con avance y cancelar, CSV en UTF-16, hojas ocultas, celdas combinadas y errores de fórmulaFileManager: subir de uno en uno con cancelar y reintentar, resultado por elemento al borrar o mover, tamaño máximo y nombres repetidosSchemaForm: listas de posiciones fijas de draft-07, objetos sin campos, valores que llegan tarde, «sin cambios» tras guardar, claves con punto o numéricas, y error y foco de una listaDataImportWizard: la fila de cada error es la del fichero, tope de descompresión y avisos que dicen el motivoFileManageryMediaManager: lo soltado pasa poraccept, barra de varias subidas, atajos y «Cargar más»Table: vacíos al final en los dos sentidos, selección por página y sin filas ocultas, búsqueda en árbol y fechas locales al exportar
Preguntas frecuentes
¿La pruebas?
Empieza por un componente suelto y mira su ficha: cómo se usa, cuándo sí y cuándo no, el teclado y la accesibilidad.