React Examples

To understand the examples, first make sure you have read Interactions!

Full guides

Learn how to build these common floating UI components, complete with a reusable component example. These components heavily leverage the React Context API to create “compound components”, one of the best use cases for using context.

• Tooltip
• Popover
• Dialog

Other

Learn how to create other types of floating UI components by reading a CodeSandbox demo. Note that these demos are far less complete and may be a bit hard to understand without the full guide, but you can tinker with them and see how things work.

• Dropdown Menu (including submenus)
• Context Menu
• Select
• Select with Composable Children
• macOS Select
• Virtualized Select
• Autocomplete (combobox)
• Emoji picker
• Text selection