# Swap React components, live previews & code, EneUI Browse 16 Swap 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/swap > Markdown: https://ui.eneawork.it/components/cat/swap.md **Components:** 16 ## Highlights - [letter-swap](https://ui.eneawork.it/comp/21st-danielpetho--fancy-components/letter-swap), 21st-danielpetho--fancy-components - [random-letter-swap](https://ui.eneawork.it/comp/21st-danielpetho--fancy-components/random-letter-swap), 21st-danielpetho--fancy-components - [scroll-and-swap-text](https://ui.eneawork.it/comp/21st-danielpetho--fancy-components/scroll-and-swap-text), 21st-danielpetho--fancy-components - [swapy-draggable-card](https://ui.eneawork.it/comp/21st-uilayout.contact--ui-layouts/swapy-draggable-card), 21st-uilayout.contact--ui-layouts - [crypto-swap-card](https://ui.eneawork.it/comp/21st-moazamtrade--shadway/crypto-swap-card), 21st-moazamtrade--shadway - [swap-card](https://ui.eneawork.it/comp/21st-ravikatiyar162/swap-card), 21st-ravikatiyar162 - [logo-clouds](https://ui.eneawork.it/comp/21st-nexus-ui--nexus-ui/logo-clouds), 21st-nexus-ui--nexus-ui - [currency-exchange-card](https://ui.eneawork.it/comp/21st-ravikatiyar162/currency-exchange-card), 21st-ravikatiyar162 - [default-swapy](https://ui.eneawork.it/comp/21st-uilayout.contact--ui-layouts/default-swapy), 21st-uilayout.contact--ui-layouts - [be-ui-multi-chain-swap](https://ui.eneawork.it/comp/21st-starc007/be-ui-multi-chain-swap), 21st-starc007 - [be-ui-action-swap](https://ui.eneawork.it/comp/21st-starc007/be-ui-action-swap), 21st-starc007 - [pixel-swap](https://ui.eneawork.it/comp/21st-luv-jeri--000h-cojeev/pixel-swap), 21st-luv-jeri--000h-cojeev ## FAQ ### How many React Swap components are there? 16 Swap components in the catalog, each with a live preview, full source and a one-line install command. ### How do I add a Swap 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 "" 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)