# Pattern components > Incorporate visual interest using 10 pattern-based React components, crafted with Tailwind CSS for stylish backgrounds and accents. 63 components available. Showing the first 60 — browse the rest at https://21st.dev/community/components/s/pattern. - [BG Patterns](https://21st.dev/@sshahaider/components/bg-pattern.md) — by Efferd - [Background Components](https://21st.dev/@meghtrix/components/background-components/basic-grid.md) — by meghtrix - [Background Components](https://21st.dev/@meghtrix/components/background-components/dashed-grid-light.md) — by meghtrix - [Background Components](https://21st.dev/@meghtrix/components/background-components/paper-texture.md) — by meghtrix - [Background Components](https://21st.dev/@meghtrix/components/background-components/white-grid-with-dots.md) — by meghtrix - [Background Components](https://21st.dev/@meghtrix/components/background-components/diagonal-stripes.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/diagonal-grid-electric.md) — by meghtrix - [Tiles](https://21st.dev/@lukacho/components/tiles.md) — by lukacho/ui - [Statistics Card](https://21st.dev/@aghasisahakyan1/components/statistics-card.md) — by Erik X - [Area Chart](https://21st.dev/@bklitai/components/area-chart/area-chart-selection.md) — by bklitai - [Background snippets](https://21st.dev/@ibelick/components/background-snippets/background-grid-masked-dark-gray.md) — by Julien Thibeaut - [Background snippets](https://21st.dev/@ibelick/components/background-snippets/background-dots-gray.md) — by Julien Thibeaut - [Card with Grid Ellipsis Pattern](https://21st.dev/@Ali-Hussein-dev/components/card-with-grid-ellipsis-pattern.md) — by Indie UI - [Pixel Grid](https://21st.dev/@designali-in/components/pixel-grid.md) — by Ali Imam - [Dot Pattern](https://21st.dev/@dillionverma/components/dot-pattern.md) — by Dillion Verma - [Funnel Chart](https://21st.dev/@bklitai/components/funnel-chart/funnel-pattern-fill.md) — by bklitai - [Card With Lines Patter](https://21st.dev/@Ali-Hussein-dev/components/card-with-lines-patter.md) — by Indie UI - [Grid Background](https://21st.dev/@meghtrix/components/grid-background.md) — by meghtrix - [Bar Chart](https://21st.dev/@LegionWebDev/components/bar-chart/hatched-bar-chart.md) — by Legion Dev - [Grid Background](https://21st.dev/@meghtrix/components/grid-background/dark-sphere-grid.md) — by meghtrix - [Grid Background](https://21st.dev/@meghtrix/components/grid-background/black-grid-with-white-dots.md) — by meghtrix - [Grid Background](https://21st.dev/@meghtrix/components/grid-background/dark-noise-colored.md) — by meghtrix - [Grid Background](https://21st.dev/@meghtrix/components/grid-background/black-basic-grid.md) — by meghtrix - [Grid Background](https://21st.dev/@meghtrix/components/grid-background/complex-multiplier.md) — by meghtrix - [Grid Background](https://21st.dev/@meghtrix/components/grid-background/magneta-orb-grid.md) — by meghtrix - [Grid Background](https://21st.dev/@meghtrix/components/grid-background/dark-grid-lines.md) — by meghtrix - [Grid Background](https://21st.dev/@meghtrix/components/grid-background/dark-basic-grid.md) — by meghtrix - [Grid Background](https://21st.dev/@meghtrix/components/grid-background/small-grid.md) — by meghtrix - [Grid Background](https://21st.dev/@meghtrix/components/grid-background/gradient-left-diagonal-lines.md) — by meghtrix - [Grid Background](https://21st.dev/@meghtrix/components/grid-background/cross-diagonal-lines.md) — by meghtrix - [Grid Background](https://21st.dev/@meghtrix/components/grid-background/neon-vertical-lines.md) — by meghtrix - [Grid Background](https://21st.dev/@meghtrix/components/grid-background/dark-dotted-grid.md) — by meghtrix - [Grid Background](https://21st.dev/@meghtrix/components/grid-background/diagonal-grid-synthwave.md) — by meghtrix - [Grid Background](https://21st.dev/@meghtrix/components/grid-background/diagonal-grid-electric.md) — by meghtrix - [Grid Background](https://21st.dev/@meghtrix/components/grid-background/gradient-right-diagonal-lines.md) — by meghtrix - [Grid Background](https://21st.dev/@meghtrix/components/grid-background/matrix-green.md) — by meghtrix - [Pattern Text](https://21st.dev/@sshahaider/components/pattern-text.md) — by Efferd - [Streamgraph](https://21st.dev/@airbnb-visx/components/streamgraph.md) — by Airbnb - [Card with Grid Pattern](https://21st.dev/@Ali-Hussein-dev/components/card-with-grid-pattern.md) — by Indie UI - [Shamayim Toggle Switch](https://21st.dev/@maxim.bort.devel/components/shamayim-toggle-switch.md) — by Maxim Bortnikov - [Animated Button](https://21st.dev/@beratberkayg/components/animated-button.md) — by beratberkay - [Neon Dither](https://21st.dev/@moazamtrade/components/neon-dither.md) — by shadway - [Bar Chart](https://21st.dev/@bklitai/components/bar-chart/bar-chart-pattern.md) — by bklitai - [Generative Geometry](https://21st.dev/@xubohuah/components/generative-geometry.md) — by KainXu - [Card with Ellipsis Pattern](https://21st.dev/@Ali-Hussein-dev/components/card-with-ellipsis-pattern.md) — by Indie UI - [Voronoi](https://21st.dev/@airbnb-visx/components/voronoi.md) — by Airbnb - [Grid Pattern](https://21st.dev/@designali-in/components/grid-pattern.md) — by Ali Imam - [Crypto Dashboard](https://21st.dev/@reuno-ui/components/crypto-dashboard/background-plus.md) — by reuno-ui - [Vertical Bars](https://21st.dev/@uilayout.contact/components/vertical-bars.md) — by UI Layouts - [Patterns](https://21st.dev/@airbnb-visx/components/patterns.md) — by Airbnb - [Neon Maze](https://21st.dev/@muntazirzaidi/components/neon-maze/neon-maze.md) — by muntazirzaidi - [Vector Field](https://21st.dev/@designali-in/components/vector-field.md) — by Ali Imam - [Polygons](https://21st.dev/@airbnb-visx/components/polygons.md) — by Airbnb - [Sliding Ease](https://21st.dev/@uilayout.contact/components/sliding-ease.md) — by UI Layouts - [Minimal Button](https://21st.dev/@radiumcoders/components/minimal-button.md) — by jay sharma - [Hero Modern](https://21st.dev/@brijr/components/hero-modern/hero-five.md) — by brijr - [Hero Modern](https://21st.dev/@brijr/components/hero-modern.md) — by brijr - [Moving Circles Shader](https://21st.dev/@aghasisahakyan1/components/moving-circles-shader.md) — by Erik X - [Fishy File Drop](https://21st.dev/@maxim.bort.devel/components/fishy-file-drop.md) — by Maxim Bortnikov Full component directory: https://21st.dev/llms.txt