Saltar al contenido

Vaul

Un componente de cajón sin estilos, diseñado para integrarse fácilmente en aplicaciones React y mejorar las interacciones en dispositivos móviles.

Vaul es un componente de cajón sin estilos, diseñado específicamente para aplicaciones React. Sirve como alternativa a los diálogos y está optimizado para tabletas y dispositivos móviles. El componente se ha creado pensando en la flexibilidad, para que los desarrolladores puedan personalizar su comportamiento y apariencia en las aplicaciones.

Una de sus características principales es que puede ampliar la escala del fondo al abrirse el cajón, lo que crea una experiencia más envolvente. El cajón se puede controlar mediante código, de modo que los desarrolladores pueden gestionar su estado abierto con la gestión de estado de React.

Vaul ofrece una API sencilla para integrarlo, con componentes claramente definidos como Drawer.Root, Drawer.Trigger, Drawer.Content y Drawer.Overlay, que permiten mantener una estructura organizada al incorporarlo en las aplicaciones. La biblioteca admite varias funciones, como puntos de ajuste para mejorar la interacción, personalización del contenedor del cajón y opciones para impedir que se cierre al descartarlo.

Este componente es ideal para desarrolladores que quieran implementar un cajón adaptable y optimizado para móviles sin las limitaciones de los componentes con estilos que podrían entrar en conflicto con el sistema de diseño de su aplicación.

Para consultar ejemplos completos de uso, los usuarios pueden explorar una serie de demostraciones interactivas en CodeSandbox, que muestran distintas funciones del componente, como los controles de desplazamiento y los puntos de ajuste personalizados.

Características

  • Componente de cajón sin estilos
  • Optimizado para móviles y tabletas
  • Escalado del fondo
  • Puntos de ajuste personalizables
  • Control programático del estado abierto
  • Compatible con cajones anidados
  • Posicionamiento flexible del contenido
  • Portal personalizado para el renderizado

Elementos relacionados

Componentes React sin estilos y sin interfaz predefinida para crear interfaces accesibles y muy personalizables con control total de los estilos.

Estrellas en GitHub
5.2K
Actualizado el
Aug 17, 2025
Licencia
MIT License

Amplio conjunto de componentes UI de código abierto para crear aplicaciones Vue.js de forma sencilla y eficiente.

Estrellas en GitHub
11.0K
Actualizado el
Dec 6, 2024
Licencia
MIT License

Primitivas de React accesibles, de código abierto y sin estilos para aplicaciones web y sistemas de diseño de alta calidad.

Estrellas en GitHub
16.0K
Actualizado el
Dec 6, 2024
Licencia
MIT License

Esta solución de UI de código abierto permite crear sistemas de diseño sofisticados con componentes personalizables que se adaptan a distintos estilos visuales y estándares de accesibilidad.

Estrellas en GitHub
3.9K
Actualizado el
Dec 6, 2024
Licencia
MIT License

Cree aplicaciones web accesibles de forma rápida y eficiente con un conjunto completo de componentes esenciales, fáciles de usar y muy personalizables.

Estrellas en GitHub
38.1K
Actualizado el
Dec 6, 2024
Licencia
MIT License

Este componente ofrece una solución completa de menú de comandos para React, centrada tanto en la experiencia de usuario como en la flexibilidad para desarrolladores.

Estrellas en GitHub
10.0K
Actualizado el
Dec 6, 2024
Licencia
MIT License

Un proyecto que facilita la creación de sitios web de documentación y se centra en el contenido y la usabilidad.

Estrellas en GitHub
57.0K
Actualizado el
Dec 6, 2024
Licencia
MIT License

Una colección versátil de componentes con un diseño atractivo para mejorar sus proyectos web y agilizar su proceso de diseño.

Acerca de KickstartUI

KickstartUI es tu destino definitivo para descubrir los mejores frameworks, bibliotecas y herramientas de compilación de UI. Seleccionamos meticulosamente recursos de primera categoría para ayudar a los desarrolladores a dar vida a sus ideas de UI. Tanto si estás creando una aplicación web adaptable, diseñando una interfaz móvil o elaborando un prototipo interactivo, nuestra plataforma ofrece las herramientas esenciales para acelerar tus proyectos y mejorar la experiencia de usuario. Explora nuestra amplia colección para estar al día de las últimas tendencias, descubrir nuevas posibilidades y mejorar tus diseños de UI. ¿Listo para empezar tu próximo proyecto? Explora nuestros recursos destacados o busca herramientas específicas que se adapten a tus necesidades.