# Modern React components, live previews & code, EneUI Browse 13 Modern 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/modern > Markdown: https://ui.eneawork.it/components/cat/modern.md **Components:** 13 ## Highlights - [hover-footer](https://ui.eneawork.it/comp/21st-mdafsarx--nur-ui/hover-footer), 21st-mdafsarx--nur-ui - [full-screen-signup](https://ui.eneawork.it/comp/21st-preetsuthar17--hextaui/full-screen-signup), 21st-preetsuthar17--hextaui - [modern-hero-section](https://ui.eneawork.it/comp/21st-ravikatiyar162/modern-hero-section), 21st-ravikatiyar162 - [music-player-widget](https://ui.eneawork.it/comp/21st-smammar/music-player-widget), 21st-smammar - [cta-with-marquee](https://ui.eneawork.it/comp/21st-lyanchouss--daliagents/cta-with-marquee), 21st-lyanchouss--daliagents - [video-player](https://ui.eneawork.it/comp/21st-preetsuthar17--hextaui/video-player), 21st-preetsuthar17--hextaui - [fallback-card](https://ui.eneawork.it/comp/21st-lyanchouss--daliagents/fallback-card), 21st-lyanchouss--daliagents - [button-6](https://ui.eneawork.it/comp/21st-uilayout.contact--ui-layouts/button-6), 21st-uilayout.contact--ui-layouts - [arrow-dots-button](https://ui.eneawork.it/comp/21st-nextjsshop--nextjsshop/arrow-dots-button), 21st-nextjsshop--nextjsshop - [sneaky-button](https://ui.eneawork.it/comp/21st-nextjsshop--nextjsshop/sneaky-button), 21st-nextjsshop--nextjsshop - [color-palette-card](https://ui.eneawork.it/comp/21st-ravikatiyar162/color-palette-card), 21st-ravikatiyar162 - [modern-verticle-progress](https://ui.eneawork.it/comp/21st-bucharitesh/modern-verticle-progress), 21st-bucharitesh ## FAQ ### How many React Modern components are there? 13 Modern components in the catalog, each with a live preview, full source and a one-line install command. ### How do I add a Modern 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)