import {Zap} from 'react-feather';

# React Examples

To understand the examples, first make sure you have read
[Interactions](/docs/react#interactions)!

## Full guides

Learn how to build these common floating UI components, complete
with a reusable component example.

- [Tooltip](/docs/tooltip)
- [Popover](/docs/popover)
- [Dialog](/docs/dialog)

## Other

Learn how to create other types of floating UI components by
reading a CodeSandbox demo.

- [Dropdown Menu (including submenus)](https://codesandbox.io/s/admiring-lamport-5wt3yg?file=/src/DropdownMenu.tsx)
- [Context Menu](https://codesandbox.io/s/trusting-rui-2duieo?file=/src/ContextMenu.tsx)
- [Select](https://codesandbox.io/s/gallant-sea-rcg43b?file=/src/Select.tsx)
- [Select with Composable Children](https://codesandbox.io/s/floating-ui-react-select-with-composable-children-qsuw76?file=/src/App.tsx)
- [macOS Select](https://codesandbox.io/s/shy-snowflake-kp6479?file=/src/Select.tsx)
- [Virtualized Select](https://codesandbox.io/s/l10rjs?file=/src/App.tsx)
- [Autocomplete (combobox)](https://codesandbox.io/s/fragrant-water-bsuirj?file=/src/App.tsx)
- [Emoji picker](https://codesandbox.io/s/nameless-glade-kz3pfc?file=/src/App.tsx)
- [Text selection](https://codesandbox.io/s/floating-ui-react-range-selection-tkpj9v?file=/src/App.tsx)