# Floating Action Button React components, live previews & code, EneUI

Browse 11 Floating Action Button React and shadcn components: live preview, full source and a one-line install command for each. Copy into your project or hand it to your AI agent.

> Page: https://ui.eneawork.it/components/cat/floating-action-button
> Markdown: https://ui.eneawork.it/components/cat/floating-action-button.md

**Components:** 11


## Highlights

- [floating-action-menu](https://ui.eneawork.it/comp/21st-chetanverma16--chetanverma-ui/floating-action-menu), 21st-chetanverma16--chetanverma-ui
- [floating-action-button](https://ui.eneawork.it/comp/21st-serafimcloud/floating-action-button), 21st-serafimcloud
- [stacking-navbar](https://ui.eneawork.it/comp/21st-chetanverma16--chetanverma-ui/stacking-navbar), 21st-chetanverma16--chetanverma-ui
- [unsaved-changes](https://ui.eneawork.it/comp/21st-stvenchg/unsaved-changes), 21st-stvenchg
- [floating-button](https://ui.eneawork.it/comp/21st-bundui--bundui/floating-button), 21st-bundui--bundui
- [scroll-button](https://ui.eneawork.it/comp/21st-ibelick--motion-primitives/scroll-button), 21st-ibelick--motion-primitives
- [family-button](https://ui.eneawork.it/comp/21st-cult-ui--cult-ui/family-button), 21st-cult-ui--cult-ui
- [floating-button](https://ui.eneawork.it/comp/21st-ln-dev7--lndev-ui/floating-button), 21st-ln-dev7--lndev-ui
- [float-button](https://ui.eneawork.it/comp/21st-antdesign--ant-design/float-button), 21st-antdesign--ant-design
- [mercury-dial](https://ui.eneawork.it/comp/21st-crafterui/mercury-dial), 21st-crafterui
- [button-ant](https://ui.eneawork.it/comp/21st-antdesign--ant-design/button-ant), 21st-antdesign--ant-design

## FAQ

### How many React Floating Action Button components are there?

11 Floating Action Button components in the catalog, each with a live preview, full source and a one-line install command.

### How do I add a Floating Action Button component to my project?

Open a component and hit Copy code (or Install) to drop the source into your components folder, or run npx shadcn add "<url>" with the command shown on the page.

### Are they free?

Yes, browsing is always free and copying runs on a free daily quota; Premium removes the limit.

### Do they work with Next.js and Tailwind?

Yes, React components styled with Tailwind and shadcn/ui, compatible with Next.js, Vite and CRA.

## Related

- [All categories](/components)
- [Libraries](/libraries)