> ## Content Index
> Fetch the complete content index at: https://reactpractice.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Build a restaurant reservation widget
- URL: https://reactpractice.dev/exercise/build-a-restaurant-reservation-widget/
- Published: 2024-12-05T12:40:17.000Z
- Updated: 2026-06-01T01:57:53.000Z
- Author: Corina Udrescu
- Tags: Building components, #corina-2, Exercises, #Import 2026-06-09 12:07

Build a React component that allows users to book a table at a restaurant.  
Users should be able to choose the number of persons they want to book for, the date and the time.

Here is the user flow to guide your work:

- initially, show just a button with the text "Book a table"
- on click, a dialog opens for the user to choose the date, time and number of persons
- when the user clicks "Book", he can enter his name and phone number and confirm the reservation;
- at the end of the flow, since we don't have a backend endpoint to POST the information to, you can just `console.log` the booking details

![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2024/12/5-time-dropdown.png)

![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2024/12/9-person-dropdown.png)

![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2024/12/8-contact-detail-form.png)

For the UI, I recommend [Headless UI](https://headlessui.com/?ref=reactpractice.dev), which goes very well with Tailwind CSS. But feel free to use whatever you prefer.

Things you will learn / practice

- working with dialogs, popovers, dropdowns
- working with forms
- working with dates

Good luck! 🍀

When you're ready to check your work, check out the [official detailed solution](https://reactpractice.dev/solution/tutorial-build-a-restaurant-reservation-widget/).

0:00 

/0:18 

1×