# Colorful components

> Brighten up your interfaces with 9 colored components for React and Tailwind CSS, perfect for vibrant and engaging designs.

200 components available. Showing the first 60 — browse the rest at https://21st.dev/community/components/s/colorful.

- [Shader Animation](https://21st.dev/@designali-in/components/shader-animation.md) — by Ali Imam
- [WebGL Shader](https://21st.dev/@designali-in/components/web-gl-shader.md) — by Ali Imam
- [Background Gradient Animation](https://21st.dev/@manuarora700/components/background-gradient-animation.md) — by Manu Arora
- [Shader Lines](https://21st.dev/@designali-in/components/shader-lines.md) — by Ali Imam
- [Wavy Background](https://21st.dev/@manuarora700/components/wavy-background.md) — by Manu Arora
- [Animated Gradient Background](https://21st.dev/@hammamikhairi/components/animated-gradient-background.md) — by 0xkhairi Khairi
- [Gradient Dots](https://21st.dev/@sshahaider/components/gradient-dots.md) — by Efferd
- [Button Colorful with Hover Effect](https://21st.dev/@kokonutd/components/button-colorful.md) — by Kokonut Baffier
- [Gooey Filter](https://21st.dev/@danielpetho/components/gooey-filter.md) — by Daniel Petho
- [Animated Gradient With SVG](https://21st.dev/@danielpetho/components/animated-gradient-with-svg.md) — by Daniel Petho
- [Woven Light Hero](https://21st.dev/@dhileepkumargm/components/woven-light-hero.md) — by Dhileep Kumar GM
- [Glow Effect](https://21st.dev/@ibelick/components/glow-effect.md) — by Julien Thibeaut
- [Gradient Background](https://21st.dev/@sshahaider/components/gradient-background.md) — by Efferd
- [Gradient Background](https://21st.dev/@sshahaider/components/gradient-background/custom-colors.md) — by Efferd
- [Sky Toggle](https://21st.dev/@ravikatiyar162/components/sky-toggle.md) — by Ravi Katiyar
- [Bounce card features](https://21st.dev/@uniquesonu/components/bounce-card-features.md) — by Sonu
- [Gradient Card](https://21st.dev/@ravikatiyar162/components/gradient-card.md) — by Ravi Katiyar
- [Warp Background](https://21st.dev/@dillionverma/components/warp-background.md) — by Dillion Verma
- [Aurora Flow](https://21st.dev/@lovesickfromthe6ix/components/aurora-flow.md) — by scott clayton
- [Interactive Text Particle](https://21st.dev/@easemize/components/interactive-text-particle.md) — by Hossain Jahed
- [Cosmos Spectrum](https://21st.dev/@designali-in/components/cosmos-spectrum.md) — by Ali Imam
- [Dock Tabs](https://21st.dev/@designali-in/components/dock-tabs.md) — by Ali Imam
- [Background Gradient Animation](https://21st.dev/@designali-in/components/background-gradient-animation/background-gradient-animation.md) — by Ali Imam
- [Pricing Container](https://21st.dev/@anurag-mishra22/components/pricing-container.md) — by Anurag Mishra
- [Aniamted Pricing Cards](https://21st.dev/@aghasisahakyan1/components/aniamted-pricing-cards.md) — by Erik X
- [File Card Collections](https://21st.dev/@urmauur/components/file-card-collections.md) — by Faisal Amir
- [Marquee Effect](https://21st.dev/@bundui/components/marquee-effect.md) — by Shadcn UI Kit
- [Donut Chart](https://21st.dev/@ravikatiyar162/components/donut-chart.md) — by Ravi Katiyar
- [Badge](https://21st.dev/@sean0205/components/badge-2/with-icon.md) — by Sean Hello
- [Hero 01](https://21st.dev/@designali-in/components/hero-01.md) — by Ali Imam
- [Badge](https://21st.dev/@sean0205/components/badge-2/with-dot.md) — by Sean Hello
- [Badge](https://21st.dev/@sean0205/components/badge-2/circle.md) — by Sean Hello
- [Badge](https://21st.dev/@sean0205/components/badge-2.md) — by Sean Hello
- [Alert](https://21st.dev/@sean0205/components/alert-1.md) — by Sean Hello
- [Radio Group](https://21st.dev/@originui/components/radio-group/color-picker.md) — by Origin UI
- [Squishy Pricing](https://21st.dev/@vaib215/components/squishy-pricing.md) — by Vaibhav Kumar Singh
- [Service Card](https://21st.dev/@lavikatiyar/components/service-card.md) — by Lavi Katiyar
- [Services Card](https://21st.dev/@ravikatiyar162/components/services-card.md) — by Ravi Katiyar
- [Balloons Pop background](https://21st.dev/@ashishrajwaniai01/components/balloons-pop-background.md) — by ashish rajwani
- [Rotating Gradient Right](https://21st.dev/@ruixen.ui/components/rotating-gradient-right.md) — by Ruixen UI
- [Gauge](https://21st.dev/@designali-in/components/gauge/gauge.md) — by Ali Imam
- [Marketing Badges](https://21st.dev/@jatin-yadav05/components/marketing-badges.md) — by Jatin Yadav
- [Stack Card](https://21st.dev/@itsankitverma/components/stack-card.md) — by Ankit Verma
- [Particle Animation](https://21st.dev/@kedhareswer.12110626/components/particle-animation.md) — by Kedhareswer Naidu
- [Noisy Gradient Backgrounds](https://21st.dev/@easemize/components/noisy-gradient-backgrounds.md) — by Hossain Jahed
- [Animated 3D Card](https://21st.dev/@shailendrakumar19999/components/animated-3d-card.md) — by Shailendra
- [Pie Chart](https://21st.dev/@LegionWebDev/components/pie-chart/radial-chart.md) — by Legion Dev
- [Stripe like gradient-shader](https://21st.dev/@meerbahadin10/components/stripe-like-gradient-shader.md) — by Meer bahadin
- [Turbulent Flow](https://21st.dev/@lovesickfromthe6ix/components/turbulent-flow.md) — by scott clayton
- [Folder Components](https://21st.dev/@urmauur/components/folder-components.md) — by Faisal Amir
- [Pie Chart](https://21st.dev/@LegionWebDev/components/pie-chart/sized-pie-chart.md) — by Legion Dev
- [Colorful Bento Grid](https://21st.dev/@radu/components/colorful-bento-grid.md) — by Radu Popescu
- [Feedback Slider](https://21st.dev/@ln-dev7/components/feedback-slider.md) — by LN
- [QR Code](https://21st.dev/@tom_ui/components/qr-code/colors.md) — by tom
- [Living Nebula](https://21st.dev/@dhileepkumargm/components/living-nebula.md) — by Dhileep Kumar GM
- [Interactive-Gradient-Background](https://21st.dev/@rahil1202/components/interactive-gradient-background.md) — by Rahil Vahora
- [Loader](https://21st.dev/@ruhith369/components/loader.md) — by ruhith
- [Blobs](https://21st.dev/@designali-in/components/blobs.md) — by Ali Imam
- [book slider](https://21st.dev/@aarispathan15/components/book-slider.md) — by Aaris Khan
- [Interactive Particle Typography](https://21st.dev/@minhxthanh/components/interactive-particle-typography-1.md) — by Le Thanh

Full component directory: https://21st.dev/llms.txt