NeobrutalistaReact UI componentes
Componentes React accesibles con el estilo neobrutalista — bordes gruesos, sombras marcadas, color a todo volumen. Cada uno viene en versión Radix UI, Base UI y React Aria, se instala con la CLI de shadcn y llega como código que es tuyo.
- 50+ componentes
- Bordes gruesos, sombras marcadas
- shadcn CLI instalar
- Radix · Base UI · React Aria
- Radix · Base UI · React Aria
- Accesible de forma predeterminada
- El código es tuyo
- MCP asistencia técnica para servidores
- Modo oscuro y RTL
- Pequeñas marcas que no pasan desapercibidas
Todos los componentes
Acordeón
Un conjunto de secciones ampliables dispuestas verticalmente para las preguntas frecuentes, la configuración y las páginas con mucho contenido, con ese estilo neobrutalista de bordes y sombras.
Alerta
Un texto explicativo integrado para los errores del formulario, las advertencias y las confirmaciones de éxito: paneles con los colores de estado, bordes neobrutalistas y sombras marcadas.
Alternar
Un botón de encendido/apagado de dos posiciones para los controles de formato, silencio y fijación de la barra de herramientas, con ese estilo neobrutalista de bordes y sombras.
Área de desplazamiento
Un contenedor desplazable con barras de desplazamiento personalizadas y compatibles con todos los navegadores para paneles de chat, barras laterales y árboles de archivos, con un control deslizante de estilo neobrutalista de aspecto robusto.
Área de texto
Un campo de texto de varias líneas para comentarios, biografías y mensajes de asistencia, con ese estilo neobrutalista de bordes y sombras.
Avatar
Una imagen de usuario con las iniciales como alternativa para los menús de perfil, los hilos de comentarios y las listas de equipos, con ese estilo neobrutalista de bordes gruesos.
Barra de menu
Una barra horizontal con menús desplegables para barras de herramientas, editores y paneles de control al estilo de las apps, con ese estilo neobrutalista de bordes y sombras.
Barra lateral
Un panel de navegación plegable tipo «app-shell» para paneles de control, documentos y herramientas de administración, con ese estilo neobrutalista de bordes y sombras.
Botón
Un botón en el que puedes hacer clic para enviar formularios, abrir barras de herramientas y confirmar acciones irreversibles, con bordes gruesos y una sombra que se acentúa al hacer clic.
Cajón
Una hoja controlada por gestos que se desliza desde cualquier borde para menús móviles, filtros y formularios rápidos, con bordes y sombras de estilo neobrutalista.
Calendario
Un selector de fechas con cuadrícula mensual para reservas, planificación y selección de intervalos, con ese estilo neobrutalista de bordes y sombras.
Campo
Campos para etiquetas, controles, textos de ayuda y mensajes de error en paneles de configuración, formularios de pago y procesos de registro, con un diseño de formularios de estilo neobrutalista.
Carrusel
Una presentación con deslizamiento para galerías de productos, testimonios y secciones destacadas, con marcos de estilo neobrutalista y sombras marcadas.
Casilla
Un conmutador binario para las casillas de consentimiento, los filtros de selección múltiple y la selección masiva de filas, con ese estilo neobrutalista de bordes y sombras.
Comando
Una paleta de comandos que se maneja con el teclado para los menús de ⌘K, la búsqueda global y las acciones rápidas, con ese estilo neobrutalista de bordes y sombras.
Control deslizante
Un campo de entrada arrastrable para seleccionar un valor o un rango —volumen, filtros de precio, ajustes— con ese estilo neobrutalista de bordes y sombras.
Cuadro combinado
Un campo de autocompletado que filtra las opciones a medida que escribes —seleccionadores de países, campos de etiquetas, menús desplegables largos— con bordes y sombras de estilo neobrutalista.
Diálogo
Una ventana modal para confirmaciones, formularios rápidos y avisos de acciones irreversibles, que se superpone a la página con bordes gruesos y una sombra marcada.
Diálogo de alerta
Una ventana modal que detiene el proceso en caso de acciones destructivas —borrar, cerrar sesión, descartar— con un diseño neobrutalista de bordes y sombras.
Dirección
Un proveedor de contexto que cambia la orientación de los componentes de izquierda a derecha (LTR) a derecha a izquierda (RTL), para que los menús, los controles deslizantes y las pestañas se muestren correctamente en árabe, hebreo y persa.
Elemento
Una fila flexible con espacios para medios, título, descripción y acción, pensada para feeds de notificaciones, listas de configuración y filas de archivos, con un estilo neobrutalista.
Entrada
Un campo de texto de una sola línea para iniciar sesión, barras de búsqueda y formularios de pago, con el estilo neobrutalista de borde grueso y sombra marcada.
Entrada OTP
Campos para introducir códigos de un solo uso para la autenticación de dos factores (2FA), la verificación de inicio de sesión y las pantallas de PIN: campos que admiten pegar texto, con bordes de estilo neobrutalista y sombras marcadas.
Esqueleto
Un bloque de marcador de posición que parpadea para tarjetas, avatares y tablas mientras se cargan los datos, con ese estilo neobrutalista de bordes gruesos.
Etiqueta
Un texto de ayuda para los campos de entrada, las casillas de selección, los botones de selección y los grupos de botones de opción: al hacer clic se activa el control; el texto está escrito con la fuente neobrutalista del título.
Grupo de alternancia
Grupos de botones de dos estados para barras de herramientas de editor, selectores de vista y barras de filtro, con el estilo neobrutalista de bordes y sombras.
Grupo de botones
Combina botones divididos, barras de herramientas y complementos de entrada en una sola unidad enmarcada: un borde grueso, una sombra marcada y una pulsación compartida.
Grupo de entradas
Añade iconos, botones y sugerencias de teclado a los campos de búsqueda, los campos de URL y los editores de chat, con bordes y sombras de estilo neobrutalista.
Grupo de opciones
Un conjunto de botones de opción de selección única para los formularios de planes, opciones de envío y configuración, con ese estilo neobrutalista de bordes y sombras.
Hoja lateral
Un panel que se desliza desde el borde de la pantalla para mostrar menús de navegación, filtros y formularios de edición, con ese estilo neobrutalista de bordes y sombras.
Indicador de carga
Un indicador de carga animado para envíos pendientes, recuperaciones de datos y estados de ocupado en línea: un icono listo para usar con cualquier control neobrutalista.
Información emergente
Sugerencias al pasar el cursor y al seleccionar botones con iconos, atajos de teclado y etiquetas truncadas, con el estilo neobrutalista de bordes y sombras.
Insignia
Una pequeña etiqueta para estados, recuentos y etiquetas en tarjetas, tablas y elementos de navegación, con ese estilo neobrutalista de bordes y sombras.
Interruptor
Un botón de encendido/apagado para ajustar al instante cosas como las notificaciones, el modo oscuro o las opciones de funciones, con ese estilo neobrutalista de bordes y sombras.
Menú contextual
Un menú contextual al hacer clic con el botón derecho sobre filas de archivos, lienzos y cuadrículas de datos: acciones contextuales con ese estilo neobrutalista de bordes y sombras.
Menú de navegación
Una barra horizontal con enlaces y paneles desplegables para los encabezados de la web, los menús de navegación de documentos y las plantillas de aplicaciones, con bordes de estilo neobrutalista y sombras marcadas.
Menú desplegable
Un menú que se abre al pulsar un botón y que incluye acciones para las filas, opciones para cambiar de cuenta y opciones de visualización, todo ello con ese estilo neobrutalista de bordes y sombras.
Migas de pan
Muestra dónde se encuentra la página dentro de la jerarquía del sitio —rutas de enlaces para documentos, categorías de la tienda y paneles de control— en una tipografía neobrutalista en negrita.
Paginación
Enlaces a páginas numeradas con controles de «anterior» y «siguiente» para los resultados de búsqueda, las tablas y los archivos, con el estilo neobrutalista de bordes y sombras.
Pestañas
Cambia entre los paneles de contenido en capas —páginas de configuración, paneles de control y vistas previas de código— con ese estilo neobrutalista de bordes y sombras.
Plegable
Un conjunto de botones y paneles para árboles de archivos, ajustes avanzados y secciones «ver más», con ese estilo neobrutalista de bordes y sombras.
Popover
Un panel flotante vinculado a un disparador para selectores de fecha, filtros y formularios en línea, con ese estilo neobrutalista de bordes y sombras.
Progreso
Una barra estrecha que se va llenando a medida que se completa una tarea —subidas, instalaciones, procesos de incorporación de varios pasos— con ese estilo neobrutalista de bordes y sombras.
Redimensionable
Paneles divididos que se pueden arrastrar para editores de código, árboles de archivos y diseños de paneles de control, con ese estilo neobrutalista de bordes y sombras.
Relación de aspecto
Limita las imágenes, los vídeos incrustados y los mapas a una proporción fija cuando se redimensionan: la herramienta de diseño que mantiene las tarjetas neobrutalistas alineadas con la cuadrícula.
Selector
Un menú desplegable para elegir una opción —campos de país, órdenes de clasificación, ajustes de tema— con bordes gruesos de estilo neobrutalista y sombras marcadas.
Selector de fecha
Un calendario emergente para seleccionar fechas sueltas, intervalos y cumpleaños en formularios y filtros, con bordes de estilo neobrutalista y sombras marcadas.
Selector nativo
El selector HTML nativo rediseñado para formularios, filtros y selectores de países: un menú desplegable renderizado por el sistema operativo con bordes y sombras de estilo neobrutalista.
Separador
Una línea horizontal o vertical que separa menús, barras de herramientas y listas, dibujada con el mismo color de borde liso que los marcos neobrutalistas.
Sonner
Notificaciones en forma de tostadas apiladas para confirmaciones de guardado, subidas de archivos y ventanas de deshacer, con ese estilo neobrutalista de bordes y sombras.
Tabla
Una tabla HTML semántica para facturas, listas administrativas y tablas de precios: filas con bordes, encabezados en negrita y una sombra marcada de estilo neobrutalista.
Tabla de datos
Tablas ordenables, filtrables y paginadas para paneles de administración, cuadros de mando y listas de pedidos, con ese estilo neobrutalista de bordes y sombras.
Tarjeta
Un recuadro con borde para paneles de control, niveles de precios y cuadrículas de productos: cabecera, contenido y pie de página con el efecto de sombra marcada al estilo neobrutalista.
Tarjeta al pasar
Una vista previa flotante que se abre al pasar el cursor por encima —vislumbres de perfiles, vistas previas de enlaces, términos del glosario— con ese estilo neobrutalista de bordes y sombras.
Tecla
Teclas del teclado con indicaciones de atajos en menús, información sobre herramientas y paletas de comandos: un elemento «kbd» nativo con bordes y sombras de estilo neobrutalista.
Tipografía
Recetas básicas para títulos, texto de cuerpo, listas, tablas y código en línea, con un estilo tipográfico «neobrutalista» de aspecto robusto.
Vacío
Un marcador de posición para búsquedas sin resultados, paneles en blanco y pantallas de inicio: icono, título y acción enmarcados en bordes de estilo neobrutalista.