<PageCard>

# React Examples

Learn how to build floating UI components.

<ShowFor packages={['react-dom']}>

<PackageLimited>@floating-ui/react only</PackageLimited>

</ShowFor>

</PageCard>

## Full guides

- [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)
