318+ Features Components for React & Tailwind | 21st

21st home

SearchClear

Components Themes Templates

Category

All

Marketing Blocks

UI Components

Time

All time

Last week

Last month

Last 3 months

Last year

Primitive library

All

Radix UI

Base UI

React Aria

Ariakit

Headless UI

Other primitives

Tailwind version

All

Tailwind v4

Tailwind v3

License

No options

Library

No options

Built with

No options

Author

No authors yet

Tags (5) Clear

feature-card

0

feature-grid

0

feature-section

0

feature-showcase

0

features

318

Marketing Blocks

Announcements

71

Backgrounds

365

Borders

111

Calls to Action

501

Clients

17

Comparisons

31

Docks

49

FAQs

191

Footers

65

Galleries

272

Heroes

1.2K

Hooks

51

Images

428

Maps

51

Marquees

113

Navigation Menus

477

Pricing Sections

216

Scroll Areas

293

Shaders

404

Stats & KPIs

153

Steppers

124

Team Sections

119

Testimonials

161

Texts

663

Timelines

74

Videos

162

UI Components

Accordions

234

AI Chats

248

Alerts

240

Avatars

597

Badges

605

Buttons

2K

Calendars

239

Cards

1.8K

Carousels

239

Charts & Data Viz

246

Checkboxes

238

Cursors

152

Dashboards

400

Date Pickers

250

Dialogs / Modals

328

Dropdowns

506

Empty States

77

File Trees

61

File Uploads

154

Forms

1.5K

Globes

41

Grids & Bento

620

Icons

851

Inputs

949

Links

354

Lists

349

Menus

287

Notifications

247

Numbers

54

Onboarding

53

Paginations

130

Popovers

179

Profiles

270

Progress

375

Radio Groups

152

Search Bars

218

Selects

316

Sidebars

95

Sign Ins

103

Sign ups

58

Sliders

217

Spinner Loaders

480

Tables

313

Tabs

239

Tags

74

Text Areas

187

Toasts

79

Toggles

532

Tooltips

267

Components/features

Search K

Pricing Sign in

• Features 8 \ by Méschac Irung](/content/@meschacirung/components/features-8/index.html)
• Feature Sections \ by prebuiltui](/content/@prebuiltui/components/feature-sections/index.html)
• Feature Showcase \ by Ruixen](/content/@ruixen.ui/components/feature-showcase/index.html)
• Grid Feature Cards \ by Shaban Haider](/content/@sshahaider/components/grid-feature-cards/index.html)
• Dark Grid \ by Liana Pepanyan](/content/@lyanchouss/components/dark-grid/index.html)
• Feature Modern \ by brijr](/content/@brijr/components/feature-modern/feature-three/index.html)
• featuresgrid \ by Mokshith_Codez GUJJETI](/content/@mokshithcodez/components/featuresgrid/index.html)
• Features 10 \ by Méschac Irung](/content/@meschacirung/components/features-10/index.html)
• Features Grid \ by gooseui](/content/@gooseui/components/features-grid/index.html)
• Integrations Grid \ by Shaban Haider](/content/@sshahaider/components/integrations-4-2/index.html)
• Feature \ by Tommy Jepsen](/content/@tommyjepsen/components/feature/index.html)
• Integrations Section \ by Méschac Irung](/content/@meschacirung/components/integrations-3/index.html)
• Integrations Card Grid \ by Méschac Irung](/content/@meschacirung/components/integrations-three/index.html)
• Feature 197 \ by Shadcnblocks.com Austin](/content/@shadcnblockscom/components/accordion-feature-section/index.html)
• Features 4 \ by Méschac Irung](/content/@meschacirung/components/features-4/index.html)
• Feature with advantages \ by Tommy Jepsen](/content/@tommyjepsen/components/feature-with-advantages/index.html)
• Hero \ by Sam sir](/content/@sam344334/components/hero/index.html)
• Feature Service Section \ by ui layout](/content/@uilayout.contact/components/feature-service/index.html)
• Globe Feature Section \ by Ruixen](/content/@ruixen.ui/components/globe-feature-section/index.html)
• Yield Card \ by M.bin Salman](/content/@muhammad-binsalman/components/yield-card/index.html)
• Bento \ by KinfeMichael Tariku](/content/@kinfe123/components/bento/index.html)
• BentoItem \ by Dhileep Kumar GM](/content/@dhileepkumargm/components/bento-item/index.html)
• Grid Card \ by Shaban Haider](/content/@sshahaider/components/grid-card/index.html)
• Feature Section with Grid \ by Tommy Jepsen](/content/@tommyjepsen/components/feature-section-with-grid/index.html)
• Feature Sections \ by prebuiltui](/content/@prebuiltui/components/feature-sections/features-section-dark-theme/index.html)
• Feature Modern \ by brijr](/content/@brijr/components/feature-modern/index.html)
• Features \ by Méschac Irung](/content/@meschacirung/components/features/features-with-page/index.html)
• Features 7 \ by Méschac Irung](/content/@meschacirung/components/features-7/index.html)
• Features 6 \ by Méschac Irung](/content/@meschacirung/components/features-6/index.html)
• Color Change Card \ by Vaibhav Kumar Singh](/content/@vaib215/components/color-change-card/index.html)
• Terminal Control Section Animated \ by Le Thanh](/content/@minhxthanh/components/terminal-control-section-animated/index.html)
• Feature Section with hover effects \ by Manu Arora](/content/@manuarora700/components/feature-section-with-hover-effects/index.html)
• Feature Section with card gradient \ by Manu Arora](/content/@manuarora700/components/feature-section-with-card-gradient/index.html)
• Feature Section \ by Ayushmaan Singh](/content/@ayushmxxn/components/feature-section/index.html)
• FinTech Landing Page \ by Abhinav C](/content/@abhinavcdev/components/fin-tech-landing-page/index.html)
• Framework Agnostic \ by Aman Shakya](/content/@amanshakya1808/components/framework-agnostic/index.html)
• Spotlight Card \ by Berkcan Gümüşışık](/content/@berkcangumusisik/components/spotlight-card/index.html)
• Feature with Image Carousel \ by Tommy Jepsen](/content/@tommyjepsen/components/feature-with-image-carousel/index.html)
• Feature Section with Bento Grid \ by Tommy Jepsen](/content/@tommyjepsen/components/feature-section-with-bento-grid/index.html)
• Feature 72 \ by Shadcnblocks.com Austin](/content/@shadcnblockscom/components/feature-72/index.html)
• Feature Card \ by Ravi Katiyar](/content/@ravikatiyar162/components/feature-card-1/index.html)
• Bento Grid \ by Shadcnblocks.com Austin](/content/@shadcnblockscom/components/casestudy-5/index.html)
• Ruixen Bento Cards \ by Ruixen](/content/@ruixen.ui/components/ruixen-bento-cards/index.html)
• Sticky scroll cards section \ by Le Thanh](/content/@minhxthanh/components/sticky-scroll-cards-section/index.html)
• FeatureGrid – Enterprise-Grade \ by Sonu kumar](/content/@uniquesonu/components/feature-grid-enterprise-grade/index.html)
• Combined Featured Section \ by Ruixen](/content/@ruixen.ui/components/combined-featured-section/index.html)
• Feature \ by Jessi](/content/@moazamtrade/components/feature/index.html)
• Bounce card features \ by Sonu kumar](/content/@uniquesonu/components/bounce-card-features/index.html)
• Feature Sections \ by prebuiltui](/content/@prebuiltui/components/feature-sections/features-section-with-gradient-bg/index.html)
• Feature Modern \ by brijr](/content/@brijr/components/feature-modern/feature-six/index.html)
• Features \ by Méschac Irung](/content/@meschacirung/components/features/features-1/index.html)
• Features 2 \ by Méschac Irung](/content/@meschacirung/components/features-2/index.html)
• Features 1 \ by Méschac Irung](/content/@meschacirung/components/features-1/index.html)
• Pricing With Chart \ by Shaban Haider](/content/@sshahaider/components/pricing-with-chart/index.html)
• How It Works \ by chamaac](/content/@chamaac/components/how-it-works/index.html)
• PARALLAX SCROLL FEATURE SECTION \ by Sumona Biswas](/content/@sumonadotwork/components/parallax-scroll-feature-section/index.html)
• Blog 7 \ by Shadcnblocks.com Austin](/content/@shadcnblockscom/components/blog7/index.html)
• Service Grid \ by Ravi Katiyar](/content/@ravikatiyar162/components/service-grid/index.html)
• Security Card \ by Aman Shakya](/content/@amanshakya1808/components/security-card/index.html)
• Feature 108 \ by Shadcnblocks.com Austin](/content/@shadcnblockscom/components/shadcnblocks-com-feature108/index.html)
• Ruixen Feature Section \ by Ruixen](/content/@ruixen.ui/components/ruixen-feature-section/index.html)
• Gradient Card \ by Ravi Katiyar](/content/@ravikatiyar162/components/gradient-card/index.html)
• Colorful Bento Grid \ by Radu Popescu](/content/@radu/components/colorful-bento-grid/index.html)
• Comparison Slider with Highlights \ by uğur sözen](/content/@ziegfiroyt/components/reveal2/index.html)
• Feature with image \ by Tommy Jepsen](/content/@tommyjepsen/components/feature-with-image/index.html)
• Services Card \ by Ravi Katiyar](/content/@ravikatiyar162/components/services-card/index.html)
• Feature Bento \ by ui layout](/content/@uilayout.contact/components/feature-bento/index.html)
• bento grid 01 \ by Awanish Verma](/content/@avanishverma4/components/bento-grid-01/index.html)
• Download 01 \ by Ali Imam](/content/@designali-in/components/download-01/index.html)
• Feature Grid \ by LaviKatiyar](/content/@lavikatiyar/components/feature-grid/index.html)
• Featured Section Stats \ by Ruixen](/content/@ruixen.ui/components/featured-section-stats/index.html)
• features \ by Sehajeet Singh Bindra](/content/@sehajbindra/components/features/index.html)
• Feature Sections \ by prebuiltui](/content/@prebuiltui/components/feature-sections/card-component-features-section/index.html)
• Feature Modern \ by brijr](/content/@brijr/components/feature-modern/feature-two/index.html)
• Features \ by Méschac Irung](/content/@meschacirung/components/features/features-ai-chat/index.html)
• Content Block \ by Méschac Irung](/content/@meschacirung/components/content-block/index.html)
• Features 3 \ by Méschac Irung](/content/@meschacirung/components/features-3/index.html)
• Feature Section \ by Ravi Katiyar](/content/@ravikatiyar162/components/feature-section-1/index.html)
• Scroll Reveal Content A \ by abui](/content/@abui/components/scroll-reveal-content-a/index.html)
• Feature Section \ by Ravi Katiyar](/content/@ravikatiyar162/components/feature-section/index.html)
• Featured Image Section \ by Ruixen](/content/@ruixen.ui/components/ruixen-featured-image-section/index.html)
• Stats Section with Text \ by Tommy Jepsen](/content/@tommyjepsen/components/stats-section-with-text/index.html)
• Feature Card \ by LaviKatiyar](/content/@lavikatiyar/components/feature-card/index.html)
• Feature 2 \ by Shadcnblocks.com Austin](/content/@shadcnblockscom/components/feature-2/index.html)
• Feature 1 \ by Shadcnblocks.com Austin](/content/@shadcnblockscom/components/feature-1/index.html)
• Scroll Reveal \ by Cnippet](/content/@cnippet.dev/components/scroll-reveal/feature-section/index.html)
• FeaturesDetail \ by Ruixen](/content/@ruixen.ui/components/features-detail/index.html)
• Feature 01 \ by Ali Imam](/content/@designali-in/components/feature-01/index.html)
• Section With Mockup \ by Erik](/content/@aghasisahakyan1/components/section-with-mockup/index.html)
• Feature Carousel \ by 0xUrvish](/content/@0xUrvish/components/feature-carousel/index.html)
• Feature Shader Cards \ by Jessi](/content/@moazamtrade/components/feature-shader-cards/index.html)
• Scroll Card \ by ui layout](/content/@uilayout.contact/components/scroll-card/index.html)
• Feature 73 \ by Shadcnblocks.com Austin](/content/@shadcnblockscom/components/feature-73/index.html)
• Service Card \ by LaviKatiyar](/content/@lavikatiyar/components/service-card/index.html)
• About \ by prebuiltui](/content/@prebuiltui/components/about/about-section-grid/index.html)
• Bento Monochrome \ by 21st Indexer](/content/@larsen66/components/bento-monochrome/index.html)
• Feature Sections \ by prebuiltui](/content/@prebuiltui/components/feature-sections/special-features-section/index.html)
• Feature Modern \ by brijr](/content/@brijr/components/feature-modern/feature-five/index.html)
• Features \ by Méschac Irung](/content/@meschacirung/components/features/index.html)
• Integrations Component \ by Méschac Irung](/content/@meschacirung/components/integrations-component/index.html)
• Features 11 \ by Méschac Irung](/content/@meschacirung/components/features-11/index.html)
• Call to Action \ by prebuiltui](/content/@prebuiltui/components/call-to-action-1/contact-us-section/index.html)
• Cards Grid \ by Kavi Katiyar](/content/@kavikatiyar/components/cards-grid/index.html)
• Card \ by LaviKatiyar](/content/@lavikatiyar/components/card-11/index.html)
• Animated Feature Card \ by Ravi Katiyar](/content/@ravikatiyar162/components/animated-feature-card/index.html)
• Feature Carousel \ by cult/ui](/content/@cult-ui/components/feature-carousel/index.html)
• How It Works \ by Ravi Katiyar](/content/@ravikatiyar162/components/how-it-works/index.html)
• Services \ by Ravi Katiyar](/content/@ravikatiyar162/components/services/index.html)
• About \ by prebuiltui](/content/@prebuiltui/components/about/index.html)
• Scroll Reveal \ by Cnippet](/content/@cnippet.dev/components/scroll-reveal/index.html)
• Scroll 01 \ by felipemenezes098](/content/@felipemenezes098/components/scroll-01/index.html)
• Spotlight Card \ by Preet Suthar](/content/@preetsuthar17/components/spotlight-card/index.html)
• Bento Grid \ by Manu Arora](/content/@manuarora700/components/bento-grid/index.html)
• Interactive Scrolling Story Component \ by Le Thanh](/content/@minhxthanh/components/interactive-scrolling-story-component/index.html)
• Us vs Them Comparison \ by 7ovr](/content/@7ovr/components/comparison-2/index.html)
• Single Pricing Card \ by Bankk roll](/content/@bankkroll/components/single-pricing-card/single-pricing-card/index.html)
• Feature Velocity \ by ui layout](/content/@uilayout.contact/components/feature-velocity/index.html)
• Feature Comparison Table \ by 7ovr](/content/@7ovr/components/comparison-3/index.html)
• Animated Feature Carousel \ by Le Thanh](/content/@minhxthanh/components/animated-feature-carousel/index.html)
• Feature Block Animated Card \ by Manu Arora](/content/@manuarora700/components/feature-block-animated-card/index.html)
• Feature Sections \ by prebuiltui](/content/@prebuiltui/components/feature-sections/features-section-with-company-workflow/index.html)
• Feature Modern \ by brijr](/content/@brijr/components/feature-modern/feature-seven/index.html)
• Features \ by Méschac Irung](/content/@meschacirung/components/features/features-marketing/index.html)
• Content Block \ by Méschac Irung](/content/@meschacirung/components/content-block/content-info-blocks/index.html)
• Features 5 \ by Méschac Irung](/content/@meschacirung/components/features-5/index.html)
• About \ by prebuiltui](/content/@prebuiltui/components/about/about-us-section-with-gradient-bg/index.html)
• Animated Card Diagram \ by badtz](/content/@badtzx0/components/animated-card-diagram/index.html)
• RuixenCard-01 \ by Ruixen](/content/@ruixen.ui/components/ruixen-card-01/index.html)
• Highlight Card \ by Berat Berkay Gökdemir](/content/@beratberkayg/components/highlight-card/index.html)
• Feature Section \ by Ruixen](/content/@ruixen.ui/components/feature-section/index.html)
• Gallery Hover Carousel \ by Ruixen](/content/@ruixen.ui/components/gallery-hover-carousel/index.html)
• App Download Section \ by Ravi Katiyar](/content/@ravikatiyar162/components/app-download-section/index.html)
• Sticky Scroll Reveal \ by Manu Arora](/content/@manuarora700/components/sticky-scroll-reveal/index.html)
• Animated Card \ by Erik](/content/@aghasisahakyan1/components/animated-card/index.html)
• Pricing Cards \ by Kokonut Baffier](/content/@kokonutd/components/pricing-cards/index.html)
• Bento Grid \ by LaviKatiyar](/content/@lavikatiyar/components/bento-grid/index.html)
• How We Do It - Process Overview \ by Ravi Katiyar](/content/@ravikatiyar162/components/how-we-do-it-process-overview/index.html)
• Magnified Bento \ by 0xUrvish](/content/@0xUrvish/components/magnified-bento/index.html)
• Feature Card \ by Berat Berkay Gökdemir](/content/@beratberkayg/components/feature-card/index.html)
• Standard Card \ by Ranjan Sharma](/content/@ranjansharma.ind/components/standard-card/index.html)
• Bento Monochrome 1 \ by 21st Indexer](/content/@larsen66/components/bento-monochrome-1/index.html)
• Features \ by Cnippet](/content/@cnippet.dev/components/vercep-feature-1/index.html)
• Feature with Image Comparison \ by Tommy Jepsen](/content/@tommyjepsen/components/feature-with-image-comparison/index.html)
• Bento Grid \ by Ali Imam](/content/@designali-in/components/bento-grid/index.html)
• Feature Sections \ by prebuiltui](/content/@prebuiltui/components/feature-sections/features-section-with-team/index.html)
• Feature Modern \ by brijr](/content/@brijr/components/feature-modern/feature-eight/index.html)
• Features \ by Méschac Irung](/content/@meschacirung/components/features/features-with-toggle/index.html)
• Content Block \ by Méschac Irung](/content/@meschacirung/components/content-block/content-block/index.html)
• Content Default \ by Méschac Irung](/content/@meschacirung/components/content-default/content-one/index.html)
• About \ by prebuiltui](/content/@prebuiltui/components/about/about-section-with-image/index.html)
• Testimonial Card \ by Ravi Katiyar](/content/@ravikatiyar162/components/testimonial-card-1/index.html)
• Bento Features \ by 21st Indexer](/content/@larsen66/components/bento-features/index.html)
• Bioluminescent Grid \ by Dhileep Kumar GM](/content/@dhileepkumargm/components/bioluminescent-grid/index.html)
• hero-section \ by ui layout](/content/@uilayout.contact/components/hero-section/index.html)
• Feature Hero \ by ui layout](/content/@uilayout.contact/components/feature-hero/index.html)
• Bento Product Features \ by Kavi Katiyar](/content/@kavikatiyar/components/bento-product-features/index.html)
• Subscription Screen \ by Ravi Katiyar](/content/@ravikatiyar162/components/subscription-screen/index.html)
• Hero \ by Ravi Katiyar](/content/@ravikatiyar162/components/hero-5/index.html)
• About Page \ by Ruixen](/content/@ruixen.ui/components/about-page/index.html)
• Category List \ by Vaibhav Kumar Singh](/content/@vaib215/components/category-list/index.html)
• Card with Ellipsis Pattern \ by Indie UI](/content/@Ali-Hussein-dev/components/card-with-ellipsis-pattern/index.html)
• Bot Detection \ by Aman Shakya](/content/@amanshakya1808/components/bot-detection/index.html)
• Hero Section \ by Dhileep Kumar GM](/content/@dhileepkumargm/components/hero-section/index.html)
• Myna Hero \ by Bankk roll](/content/@bankkroll/components/myna-hero/index.html)
• Modal Card \ by Berat Berkay Gökdemir](/content/@beratberkayg/components/modal-card/index.html)
• Feature Section with Bento Grid \ by Manu Arora](/content/@manuarora700/components/feature-section-with-bento-grid/index.html)
• UltraQualityShowcaseGrid \ by Dhileep Kumar GM](/content/@dhileepkumargm/components/ultra-quality-showcase-grid/index.html)
• Multi-Platform Download Grid \ by ShadcnSpace](/content/@shadcnspace/components/download-01/index.html)
• Feature Sections \ by prebuiltui](/content/@prebuiltui/components/feature-sections/features-section-with-credit-card-showcase/index.html)
• Feature Modern \ by brijr](/content/@brijr/components/feature-modern/feature-four/index.html)
• Features \ by Méschac Irung](/content/@meschacirung/components/features/features-with-section/index.html)
• Features 9 \ by Méschac Irung](/content/@meschacirung/components/features-9/index.html)
• Content Default \ by Méschac Irung](/content/@meschacirung/components/content-default/index.html)
• Integration Showcase \ by Ravi Katiyar](/content/@ravikatiyar162/components/integration-showcase/index.html)
• Feature Card \ by Ravi Katiyar](/content/@ravikatiyar162/components/feature-card/index.html)
• Download Options Section \ by Ravi Katiyar](/content/@ravikatiyar162/components/download-options-section/index.html)
• Scroll Reveal \ by Cnippet](/content/@cnippet.dev/components/scroll-reveal-2/index.html)
• Special Card \ by reuno-ui](/content/@reuno-ui/components/special-card/index.html)
• StackFlow Integrator \ by Sam siavoshian](/content/@samsiavoshian2009/components/stack-flow-integrator/index.html)
• Hero 45 \ by Shadcnblocks.com Austin](/content/@shadcnblockscom/components/shadcnblocks-com-hero45/index.html)
• Product Feature Card \ by Kavi Katiyar](/content/@kavikatiyar/components/product-feature-card/index.html)
• Cybernetic Bento Grid \ by Dhileep Kumar GM](/content/@dhileepkumargm/components/cybernetic-bento-grid/index.html)
• settings \ by LN](/content/@ln-dev7/components/settings/index.html)
• Feature Highlight Pro Card \ by Ruixen](/content/@ruixen.ui/components/feature-highlight-pro-card/index.html)
• Layer Parallax Hero \ by Erik Erik](/content/@erikvalencia1/components/layer-parallax-hero/index.html)
• Feature Accordion Section \ by Ruixen](/content/@ruixen.ui/components/feature-accordion-section/index.html)
• How It Works Steps \ by 7ovr](/content/@7ovr/components/how-it-works-1/index.html)
• Feature Sections \ by prebuiltui](/content/@prebuiltui/components/feature-sections/features-section-with-trusted-companies/index.html)
• Features \ by Méschac Irung](/content/@meschacirung/components/features/features-section-n-page/index.html)
• Features \ by Méschac Irung](/content/@meschacirung/components/features/features-9/index.html)
• Features \ by Méschac Irung](/content/@meschacirung/components/features/features-with-info/index.html)
• Content Default \ by Méschac Irung](/content/@meschacirung/components/content-default/content-five/index.html)
• Content Block \ by Méschac Irung](/content/@meschacirung/components/content-block/content-page/index.html)
• Content Default \ by Méschac Irung](/content/@meschacirung/components/content-default/content-seven/index.html)
• Feature Spotlight \ by Ravi Katiyar](/content/@ravikatiyar162/components/feature-spotlight/index.html)
• Feature Highlight Card \ by Ravi Katiyar](/content/@ravikatiyar162/components/feature-highlight-card/index.html)
• Bento Grid \ by Ravi Katiyar](/content/@ravikatiyar162/components/bento-grid/index.html)

About features components

This collection holds 199 feature components for laying out what a product does. You get bento grids, icon-and-text rows, alternating image splits, tabbed showcases, and card layouts that scale from three items to a dozen. Styles run from clean enterprise sections to playful animated blocks. It is the section that sits below the hero and carries the bulk of a page's message, so variety in rhythm and density matters here.

Choose a bento grid when features differ in weight and a uniform card row when they are peers. Each piece is React plus Tailwind CSS, ready for a Next.js page without setup. Grab the TSX from the source view, install through the shadcn CLI with the registry URL, or pull it into your editor via the Magic MCP. Pair it with a matching hero and pricing block for a coherent page.

Frequently asked questions

What is a feature section on a landing page?

When should I use a bento grid for features?

Can I customize the icons and copy?

How do I add one to my project?

Related components

Card1780 Landing Page69 Feature Section161 Feature Card124 Grid620 Bento86