skills.rest
NalinDalal
NalinDalalCOMMUNITY
Explore all skills by this author →
Website𝕏@nalin82929GitHub

ask-vaul

Implements accessible gesture-driven drawers and bottom sheets in React using the Vaul library.

1|Updated Aug 17, 2026
Search Tags:#React#gestures#drawer#mobile UI#bottom sheet#vaul#snap points
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill ask-vaul-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ask-vaul
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/ask-vaul
Command: npx skills add https://github.com/NalinDalal/skillset --skill ask-vaul-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vaul.

What problem does it solve? Building mobile-friendly drawers and bottom sheets with drag gestures, snap points, and proper accessibility is difficult to implement from scratch, and developers often ship overlays that break focus management or feel wrong on touch devices. ## Core Features & Use Cases - Bottom Sheets with Snap Points: Configure multi-tier snap positions (e.g., [0.3, 0.6, 1]) for filter panels, quick actions, and forms. - Side Drawers & Navigation: Build right/left slide-in drawers for mobile navigation menus with built-in focus trap and ESC-to-close. - Advanced Patterns: Nested drill-down drawers, forms inside drawers with react-hook-form and zod, and custom trigger/handle layouts. - Use Case: You need a mobile filter panel that opens as a half-height bottom sheet, expands to full height on drag, and contains a scrollable form with Reset/Apply actions. ## Quick Start Ask the agent to add a mobile bottom sheet drawer with snap points using Vaul for the filter panel on this page.

Frequently Asked Questions about ask-vaul

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a bottom sheet drawer in React?▼

Install the vaul package and use its Drawer, DrawerTrigger, and DrawerContent components with direction="bottom" and snapPoints like [0.5, 0.9, 1]. Vaul handles drag gestures, spring physics, and accessibility automatically.

How do snap points work in Vaul drawers?▼

Snap points are an array of 0-1 percentages defining resting heights, such as [0.3, 0.6, 1] for three tiers. Users drag between tiers, and you can set a single value like [1] for full-height-only drawers.

Does Vaul support side drawers for mobile navigation?▼

Yes, set direction to "left" or "right" with snapPoints={[1]} to build slide-in navigation drawers. Vaul includes focus trapping, ESC to close, and focus restore to the trigger on close.

Why is my Vaul drawer not opening?▼

The most common cause is DrawerTrigger wrapping a div instead of a button element. Also verify snap point values are between 0 and 1 and that scrollable content lives inside DrawerContent, not the Drawer root.

Can I put a form inside a Vaul drawer?▼

Yes, place a react-hook-form form with zodResolver validation inside DrawerContent, typically with snapPoints={[0.9, 1]} for near-full height. Vaul handles the mobile keyboard covering inputs when full height is included.

Related Skills

Explore More Software Engineering Skills→
Ishaq74Ishaq74

tailwind-css-patterns

Provides Tailwind CSS utility patterns for responsive layouts, components, dark mode, and accessibility.

Community
Intermediate
Jem-OpenJem-Open
3

jem-ui-patterns

Compose app-level UI patterns with @jem-open/jem-ui components.

Official
Advanced
TechCorp25TechCorp25

interaction-design

Implement microinteractions, motion design, and UI feedback patterns with React and CSS.

Community
Intermediate
Arnutt-NArnutt-N

modal-manager

Coordinate consistent modal and dialog components across HR-IMS frontends.

Community
Advanced