# Grainy React components, live previews & code, EneUI Browse 15 Grainy 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/grainy > Markdown: https://ui.eneawork.it/components/cat/grainy.md **Components:** 15 ## Highlights - [elegant-dark-pattern](https://ui.eneawork.it/comp/21st-jatin-yadav05/elegant-dark-pattern), 21st-jatin-yadav05 - [hero-2-1](https://ui.eneawork.it/comp/21st-preetsuthar17--hextaui/hero-2-1), 21st-preetsuthar17--hextaui - [paper-design-shader-background](https://ui.eneawork.it/comp/21st-moazamtrade--shadway/paper-design-shader-background), 21st-moazamtrade--shadway - [flow-gradient-hero-section](https://ui.eneawork.it/comp/21st-hardikkashiyani123456788/flow-gradient-hero-section), 21st-hardikkashiyani123456788 - [gradient-shader-card](https://ui.eneawork.it/comp/21st-daniel__designs/gradient-shader-card), 21st-daniel__designs - [noisy-gradient-backgrounds](https://ui.eneawork.it/comp/21st-jahed/noisy-gradient-backgrounds), 21st-jahed - [vhs-hero-section](https://ui.eneawork.it/comp/21st-lovesickfromthe6ix/vhs-hero-section), 21st-lovesickfromthe6ix - [shader-r](https://ui.eneawork.it/comp/21st-ola.leandroaraujo/shader-r), 21st-ola.leandroaraujo - [background-snippets-noise-effect11](https://ui.eneawork.it/comp/21st-larsen66/background-snippets-noise-effect11), 21st-larsen66 - [pipo](https://ui.eneawork.it/comp/21st-gustavo.camara/pipo), 21st-gustavo.camara - [valley-of-the-mind](https://ui.eneawork.it/comp/21st-davekatague/valley-of-the-mind), 21st-davekatague - [shadow-blending](https://ui.eneawork.it/comp/21st-serafimcloud/shadow-blending), 21st-serafimcloud ## FAQ ### How many React Grainy components are there? 15 Grainy components in the catalog, each with a live preview, full source and a one-line install command. ### How do I add a Grainy 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)