# CSS components > Enhance your Next.js and React projects with 8 versatile CSS-based UI components tailored for easy Tailwind CSS integration. 57 components available. Showing all of them below. - [Gradient Button](https://21st.dev/@serafimcloud/components/gradient-button.md) — by Serafim - [BG Patterns](https://21st.dev/@sshahaider/components/bg-pattern.md) — by Efferd - [Background Components](https://21st.dev/@meghtrix/components/background-components/diagonal-stripes.md) — by meghtrix - [Background Components](https://21st.dev/@meghtrix/components/background-components/crosshatch-art.md) — by meghtrix - [Background Components](https://21st.dev/@meghtrix/components/background-components/diagonal-grid-light.md) — by meghtrix - [Background Components](https://21st.dev/@meghtrix/components/background-components/contcentric-squares.md) — by meghtrix - [Background snippets](https://21st.dev/@ibelick/components/background-snippets/background-grid-gray.md) — by Julien Thibeaut - [Flip Links](https://21st.dev/@vaib215/components/flip-links.md) — by Vaibhav Kumar Singh - [Graaadeints](https://21st.dev/@designali-in/components/graaadeints.md) — by Ali Imam - [Animated 3D MacBook Air](https://21st.dev/@easemize/components/animated-3d-mac-book-air.md) — by Hossain Jahed - [RocketLoader](https://21st.dev/@dhileepkumargm/components/rocket-loader.md) — by Dhileep Kumar GM - [Animated Spinner](https://21st.dev/@designali-in/components/animated-spinner.md) — by Ali Imam - [Glass Effect](https://21st.dev/@cult-ui/components/glass-effect.md) — by cult/ui - [Loading Indicator](https://21st.dev/@uniquesonu/components/loading-indicator.md) — by Sonu - [LoaderGrid](https://21st.dev/@ruhith369/components/loader-grid.md) — by ruhith - [Css Link](https://21st.dev/@reuno-ui/components/css-link.md) — by reuno-ui - [Cool Blob Effect](https://21st.dev/@h0bb5/components/cool-blob-effect.md) — by Dylan Hobbs - [CSS Image Stacking](https://21st.dev/@uilayout.contact/components/css-image-stacking.md) — by UI Layouts - [Pipo](https://21st.dev/@gustavo.camara/components/pipo.md) — by Gustavo - [Almoayyed](https://21st.dev/@gordongedacheril1/components/almoayyed.md) — by Gordon Edacheril - [background rowds shop v1](https://21st.dev/@gabporcius/components/background-rowds-shop-v1.md) — by Gabriel Porcius - [Soft Pastel Blend](https://21st.dev/@serafimcloud/components/soft-pastel-blend.md) — by Serafim - [Deep Sea](https://21st.dev/@serafimcloud/components/deep-sea.md) — by Serafim - [Marine Horizon](https://21st.dev/@serafimcloud/components/marine-horizon.md) — by Serafim - [Oceanic Shimmer](https://21st.dev/@serafimcloud/components/oceanic-shimmer.md) — by Serafim - [Golden Halo](https://21st.dev/@serafimcloud/components/golden-halo.md) — by Serafim - [Iris Bloom](https://21st.dev/@serafimcloud/components/iris-bloom.md) — by Serafim - [Text Underline](https://21st.dev/@soralabs/components/text-underline.md) — by Sora UI - [Floral Veil](https://21st.dev/@serafimcloud/components/floral-veil.md) — by Serafim - [Lapis Peach Swirl](https://21st.dev/@serafimcloud/components/lapis-peach-swirl.md) — by Serafim - [Vermilion Rings](https://21st.dev/@serafimcloud/components/vermilion-rings.md) — by Serafim - [Watermelon Marigold](https://21st.dev/@serafimcloud/components/watermelon-marigold.md) — by Serafim - [Silk Blend gradient](https://21st.dev/@amit.haski/components/silk-blend-gradient.md) — by Amit Haski - [Jade Sky](https://21st.dev/@serafimcloud/components/jade-sky.md) — by Serafim - [Ocean Sky](https://21st.dev/@serafimcloud/components/ocean-sky.md) — by Serafim - [Rosewood Blush](https://21st.dev/@serafimcloud/components/rosewood-blush.md) — by Serafim - [Coral Gloom](https://21st.dev/@serafimcloud/components/coral-gloom.md) — by Serafim - [Color Carousel](https://21st.dev/@serafimcloud/components/color-carousel.md) — by Serafim - [Bright Lagoon](https://21st.dev/@serafimcloud/components/bright-lagoon.md) — by Serafim - [Orchid Petal Sky](https://21st.dev/@serafimcloud/components/orchid-petal-sky.md) — by Serafim - [Cotton Bubblegum Lilac](https://21st.dev/@serafimcloud/components/cotton-bubblegum-lilac.md) — by Serafim - [Iris Petal](https://21st.dev/@serafimcloud/components/iris-petal.md) — by Serafim - [Marine Foam](https://21st.dev/@serafimcloud/components/marine-foam.md) — by Serafim - [Forest Meadow](https://21st.dev/@serafimcloud/components/forest-meadow.md) — by Serafim - [Violet Orbit](https://21st.dev/@serafimcloud/components/violet-orbit.md) — by Serafim - [Jade Orb](https://21st.dev/@serafimcloud/components/jade-orb.md) — by Serafim - [Ocean Rings](https://21st.dev/@serafimcloud/components/ocean-rings.md) — by Serafim - [Oceanic Glow](https://21st.dev/@serafimcloud/components/oceanic-glow.md) — by Serafim - [Violet Starlight](https://21st.dev/@serafimcloud/components/violet-starlight.md) — by Serafim - [Desert Horizon](https://21st.dev/@serafimcloud/components/desert-horizon.md) — by Serafim - [Plum Peach Butter](https://21st.dev/@serafimcloud/components/plum-peach-butter.md) — by Serafim - [Deep Horizon](https://21st.dev/@serafimcloud/components/deep-horizon.md) — by Serafim - [Violet Nocturne](https://21st.dev/@serafimcloud/components/violet-nocturne.md) — by Serafim - [Sunset Bloom](https://21st.dev/@serafimcloud/components/sunset-bloom.md) — by Serafim - [Oceanic Depths](https://21st.dev/@serafimcloud/components/oceanic-depths-2.md) — by Serafim - [Violet Radiance](https://21st.dev/@serafimcloud/components/violet-radiance.md) — by Serafim - [Violet Radiance II](https://21st.dev/@serafimcloud/components/violet-radiance-ii.md) — by Serafim Full component directory: https://21st.dev/llms.txt