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
- 204
- componentes, cada uno con su ficha
- 678
- variables CSS que puedes cambiar
- 2134
- iconos, del mismo trazo
- 7
- 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, y medido
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
Más que componentes
Lo que viene en el mismo paquete, 0.17.1.
npx amset-ui crea una aplicación, monta la biblioteca en la tuya, la diagnostica, migra tu código y genera tu tema.7 pantallas enteras —panel, clientes, factura, ajustes, entrar— y dos plantillas, Next y Vite.
12 piezas para una interfaz de asistente y la barra de un editor de texto para Tiptap o Lexical.
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 los tokens en Figma.npx amset-ui migrate reescribe tu código cuando la biblioteca cambia un nombre.Lo que necesita una aplicación, de una pieza a otra
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.
19 componentes
19 componentes
Entrada de datos, con su etiqueta, su ayuda y su error.
26 componentes
26 componentes
Elegir entre opciones: una, varias o ninguna.
21 componentes
21 componentes
Calendarios, horarios y huecos disponibles.
14 componentes
14 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.
3 componentes
3 componentes
Las piezas que colocan todo lo demás.
6 componentes
6 componentes
Donde se apoya el contenido.
18 componentes
18 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.
19 componentes
19 componentes
Las piezas de un panel de administración: tablas, tableros y filtros.
7 componentes
7 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.
9 componentes
9 componentes
Las piezas de una interfaz de asistente: mensajes, razonamiento, herramientas y entrada de texto.
12 componentes
12 componentes
Funcionando, no en una captura
Todo lo que ves aquí son componentes reales de la biblioteca: pulsa, ordena, filtra y elige.
Fechas
Estado
Elección
Acciones
Personas
Un asistente entero, no piezas sueltas
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.
Hecha para trabajar, no para enseñar
AMSET la construye para sus propios productos y la usa cada día, así que lo que ves aquí es lo que esos productos 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 la era del prompt-to-UI 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.17.1, del 19 de octubre de 2026
Flagya no rompe la hidratación cuando el servidor ya tenía su regiónmigrateydoctorven las hojas de antes importadas desde CSSnpx amset-ui create: una aplicación nueva con la biblioteca ya puesta- Bloques: siete pantallas enteras que
npx amset-ui addcopia al proyecto useLocale()se exportaTablecononRowPress: la fila se abre también con Intro.
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.