30 | Explore different implementations and use cases of the Vaul Base 31 | drawer component. 32 |
33 | 34 |42 | {example.description} 43 |
44 |20 | An unstyled drawer component for React, built with Base UI. 21 |
22 |35 | It serves as a replacement for Dialog on mobile and tablet 36 | devices. 37 |
38 |39 | It is unstyled and features gesture-driven animations. 40 | Originally created by{" "} 41 | 47 | Emil Kowalski 48 | 49 | , it was adapted for Base UI by{" "} 50 | 56 | Bora Baloglu 57 | 58 | . 59 |
60 |61 | The component utilizes{" "} 62 | 68 | Base UI's Dialog 69 | {" "} 70 | internally. 71 |
72 |73 | 77 | Here are additional examples 78 | {" "} 79 | demonstrating the component in use. 80 |
81 |18 | This drawer slides up smoothly from the bottom of your screen. 19 |
20 |21 | Try interacting with it - you can drag it up and down with your 22 | finger or mouse. The natural gestures make it feel right at home 23 | on mobile devices. 24 |
25 |26 | When you're done, just swipe down or click outside to dismiss 27 | it. Simple and intuitive! 28 |
29 |
16 | You are not limited to open the drawer from bottom, you can use{" "}
17 |
18 | top
19 |
20 | ,{" "}
21 |
22 | bottom
23 |
24 | ,{" "}
25 |
26 | left
27 |
28 | , or{" "}
29 |
30 | right
31 | {" "}
32 | directions.
33 |
18 | Nested drawers are perfect for creating hierarchical navigation or 19 | displaying related content in a layered interface. 20 |
21 |
33 | To create a nested drawer, simply place a{" "}
34 |
35 | Drawer.NestedRoot
36 | {" "}
37 | component inside another drawer's content area.
38 |
20 | Non-dismissible drawers are perfect for scenarios where users must 21 | complete an action before closing, like forms or important 22 | confirmations. 23 |
24 |
25 | To create a non-dismissible drawer, set the{" "}
26 |
27 | dismissible
28 | {" "}
29 | prop to false on the{" "}
30 |
31 | Drawer.Root
32 | {" "}
33 | component.
34 |
18 | Notice how the background content scales and transforms as you 19 | drag this drawer. 20 |
21 |22 | This effect creates a sense of depth and dimension, making the 23 | drawer feel more integrated with your application's 24 | interface. 25 |
26 |
27 | The scaling is achieved by simply adding the{" "}
28 |
29 | shouldScaleBackground
30 | {" "}
31 | prop to the{" "}
32 |
33 | Drawer.Root
34 | {" "}
35 | component.
36 |
18 | The 6:47 AM train to London
19 | was unusually quiet that morning. Sarah counted only four other
20 | passengers in her car, all of them hidden behind newspapers or
21 | phones. She had seven minutes until her stop, just enough time to
22 | review her presentation one last time.
23 |
24 |
25 | That's when he sat down across from her. Mid-thirties, wearing a
26 | slightly wrinkled suit and carrying a small potted plant. Of all
27 | the empty seats on the train, he chose this one. Sarah shifted
28 | uncomfortably, trying to signal her disinterest in conversation
29 | through body language.
30 |
31 |
32 | "It's a peace lily," he said,
33 | noticing her glance at the plant. His voice was tired but kind.
34 |
35 | "They're supposed to be impossible to kill, but somehow I
36 | managed it."
37 | {" "}
38 | He smiled weakly.{" "}
39 |
40 | "I'm bringing it to my mother's. She has this way of bringing
41 | things back to life."
42 |
43 |
44 |
45 | Sarah checked her watch.{" "}
46 | 6:48 AM. Six minutes left.
47 | She could give a polite nod and return to her presentation, or...
48 |
49 |
50 | "What happened to it?" she found
51 | herself asking.
52 |
53 |
54 | "Life, I suppose," he replied,
55 | gently touching one of the drooping leaves.{" "}
56 |
57 | "I got it when I started my new job last year. Executive
58 | position, corner office, the whole dream. I thought I could
59 | handle everything - the job, the plant, the relationship..."
60 | {" "}
61 | He trailed off.{" "}
62 |
63 | "Turns out I couldn't even keep a supposedly unkillable plant
64 | alive."
65 |
66 |
67 |
68 | 6:49 AM. Sarah closed her
69 | laptop. Her own corner office suddenly felt less important.
70 |
71 |
72 | "I have a peace lily too," she
73 | said.{" "}
74 |
75 | "Got it three years ago, when I started therapy."
76 |
77 |
78 |
79 | His eyes met hers, curious but not intrusive.{" "}
80 |
81 | "Did it help? The therapy, I mean."
82 |
83 |
84 |
85 |
86 | "It did. It taught me that sometimes things need to die for
87 | better things to grow."
88 | {" "}
89 | She gestured to his plant.{" "}
90 |
91 | "Maybe your lily's just making room for something new."
92 |
93 |
94 |
95 | 6:50 AM. They shared a
96 | moment of understanding that felt deeper than their brief
97 | acquaintance should allow.
98 |
99 |
100 | "I quit yesterday," he said.{" "}
101 |
102 | "The executive job. Couldn't remember the last time I saw my
103 | kids awake."
104 |
105 |
106 |
107 | Sarah felt her throat tighten.{" "}
108 |
109 | "My presentation today... it's for a promotion. More
110 | responsibility, more hours..."
111 | {" "}
112 | She looked at her laptop, then back at him.{" "}
113 | "More dying plants?"
114 |
115 |
116 | 6:51 AM.{" "}
117 | "You know," he said,{" "}
118 |
119 | "my mother doesn't just save plants. She makes this incredible
120 | breakfast on Sunday mornings. My kids call it 'Grandma's
121 | life-fixing pancakes.'"
122 | {" "}
123 | He smiled, a real one this time.{" "}
124 |
125 | "When was the last time you had life-fixing pancakes?"
126 |
127 |
128 |
129 | Sarah couldn't remember. Her weekends had become extensions of her
130 | workweek, filled with emails and preparation for Mondays.
131 |
132 |
133 | "Too long," she admitted.
134 |
135 |
136 | 6:52 AM.{" "}
137 | "Sometimes I wonder," he mused,{" "}
138 |
139 | "if we've got it all backwards. We spend our lives chasing
140 | things that look good on paper, while the real stuff - the
141 | pancakes, the alive plants, the bedtime stories - keeps slipping
142 | away."
143 |
144 |
145 |
146 | Sarah's stop was approaching. Two minutes left.
147 |
148 |
149 | "What will you do now?" she asked.
150 |
151 |
152 | 6:53 AM.{" "}
153 |
154 | "Start small. Save this plant. Make pancakes. Read stories."
155 | {" "}
156 | He paused.{" "}
157 |
158 | "Maybe start a small business, something that matters. I used to
159 | teach before the corporate world caught me."
160 |
161 |
162 |
163 | The train began to slow. Sarah looked at her laptop again, then at
164 | her watch. One minute left. She thought about her presentation,
165 | about corner offices, about peace lilies and pancakes.
166 |
167 |
168 | 6:54 AM. The train stopped.
169 | Sarah stood up, but instead of picking up her laptop, she pulled
170 | out a business card.
171 |
172 |
173 |
174 | "When you start that business,"
175 | {" "}
176 | she said, writing her personal email on the back,
177 |
178 | "let me know. I might know some people who need reminding about
179 | what matters."
180 |
181 |
182 |
183 | He took the card, smiled, and nodded.
184 |
185 |
186 | As Sarah stepped onto the platform, she pulled out her phone. She
187 | had just enough time to email her boss before the morning meeting:
188 |
189 |
190 |
191 | "Need to reschedule presentation. Family emergency. It's about a
192 | peace lily."
193 |
194 |
195 |
196 | She walked out of the station into the morning sun, leaving behind
197 | a future she had planned for and walking toward one she couldn't
198 | yet see.
199 |
200 |
201 |
202 | Sometimes seven minutes is all it takes to change everything.
203 |
204 |
41 | This drawer has three snap points: 240px, 400px, and full 42 | height. Drag the drawer to see it snap to these positions. 43 |
44 |49 | Snap points let users drag a drawer to set positions, enhancing 50 | the user experience with consistent drawer heights. This drawer 51 | can snap to 240px, 400px, and full height. 52 |
53 |60 | You've discovered all three levels! From the subtle peek at 61 | 240px, through the comfortable view at 400px, all the way to 62 | this majestic full-height mode. 63 |
64 |18 | This drawer has an input field. Try typing in the input field. 19 |
20 | 24 |