With React 19, the React team has streamlined how refs are handled in components, marking a significant shift in API design. The `forwardRef` utility is now deprecated, allowing developers to pass `ref` directly as a standard prop. This change simplifies component architecture and aligns with React's ongoing efforts to reduce boilerplate. Let’s explore what this means for your codebase and how to adapt.

![](https://cdn-images-1.medium.com/max/1600/0*VZoLSllKsYTucRBG)

*Photo by Lautaro Andreani on Unsplash*

### What Was forwardRef?

Before React 19, functional components couldn’t inherently receive `ref` props because React reserved them for class components and DOM elements. To work around this, `forwardRef` explicitly forwarded refs to child components or DOM nodes.

### Example: Pre-React 19 Usage

```
import React, { forwardRef } from 'react';const MyButton = forwardRef((props, ref) => (  <button ref={ref} {...props}>    {props.children}  </button>));// Usageconst App = () => {  const buttonRef = React.useRef();  return <MyButton ref={buttonRef}>Click Me</MyButton>;};
```

While functional, this pattern introduced boilerplate and complexity, especially for newcomers.

### What’s New in React 19?

React 19 eliminates the need for `forwardRef` by allowing `ref` to be passed directly as a prop to functional components, just like any other prop.

### Example: React 19 Simplified Syntax

```
const MyButton = ({ ref, ...props }) => {  return (    <button ref={ref} {...props}>      {props.children}    </button>  );};// Usageconst App = () => {  const buttonRef = React.useRef();  return <MyButton ref={buttonRef}>Click Me</MyButton>;};
```

No wrapper required — cleaner and more intuitive!

### Why This Change Matters

1. **Simplified API**
   No more mental overhead of `forwardRef`—refs behave like regular props.
2. **Reduced Boilerplate**
   Remove unnecessary function wrappers for cleaner code.
3. **Consistent Patterns**
   Aligns ref handling across functional components, class components, and DOM elements.

### Migrating from `forwardRef` to React 19

### Step 1: Remove `forwardRef` Wrapper

**Before (React 18):**

```
const MyComponent = forwardRef((props, ref) => (  <div ref={ref}>{props.children}</div>));
```

**After (React 19)**

```
const MyComponent = ({ ref, ...props }) => {  return <div ref={ref}>{props.children}</div>;};
```

### Step 2: Update TypeScript Definitions (If Applicable)

For TypeScript users, update component props to include `ref`:

```
type MyComponentProps = {  ref?: React.Ref<HTMLDivElement>;  children: React.ReactNode;};const MyComponent = ({ ref, ...props }: MyComponentProps) => (  <div ref={ref}>{props.children}</div>)
```

### Key Considerations

1. **Backward Compatibility**
   Existing `forwardRef` code will still work, but migrate gradually for future-proofing.
2. **Third-Party Libraries**
   Many libraries may still use `forwardRef`. Check for updates or compatibility layers.
3. **Edge Cases**

**Class Components**: Ref behavior remains unchanged (refs point to component instances).**DOM Elements**: Continue using `ref` directly on JSX elements.

### The Future of `forwardRef`

While `forwardRef` is deprecated, it will remain functional in React 19 for backward compatibility. Future React versions will phase it out entirely. The React team plans codemods to automate migration for large codebases.

### Conclusion

React 19’s `ref` prop simplification is a win for developer experience, reducing boilerplate and unifying patterns. By adopting this change early, you’ll ensure smoother upgrades and cleaner code. Start refactoring your components today!

**Pro Tip**: Use React’s official codemod tools (when available) to automate migration at scale.

🚀 **Embrace the simplicity and happy coding!**
*Clap if this helped you unlock React 19’s potential!*

### Additional Resources

* [React 19 Upgrade Guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide)
* [React RFC: Ref Cleanup Functions](https://github.com/reactjs/rfcs/pull/220)
* [TypeScript + React Cheatsheet](https://react-typescript-cheatsheet.netlify.app/)

### Thank you for being a part of the community

*Before you go:***️️**

* Follow us: [**X**](https://x.com/inPlainEngHQ) | [**LinkedIn**](https://www.linkedin.com/company/inplainenglish/) | [**YouTube**](https://www.youtube.com/@InPlainEnglish) | [**Newsletter**](https://newsletter.plainenglish.io/) | [**Podcast**](https://open.spotify.com/show/7qxylRWKhvZwMz2WuEoua0) | [**Twitch**](https://twitch.tv/inplainenglish)
* [**Start your own free AI-powered blog on Differ**](https://differ.blog/) 🚀
* [**Join our content creators community on Discord**](https://discord.gg/in-plain-english-709094664682340443) 🧑🏻‍💻
* For more content, visit [**plainenglish.io**](https://plainenglish.io/) + [**stackademic.com**](https://stackademic.com/)

<p>With React 19, the React team has streamlined how refs are handled in components, marking a significant shift in API design. The <code>forwardRef</code> utility is now deprecated, allowing developers to pass <code>ref</code> directly as a standard prop. This change simplifies component architecture and aligns with React's ongoing efforts to reduce boilerplate. Let’s explore what this means for your codebase and how to adapt.</p>
<p><img src="https://cdn-images-1.medium.com/max/1600/0*VZoLSllKsYTucRBG" alt=""></p>
<p><em>Photo by Lautaro Andreani on Unsplash</em></p>
<h3 id="what-was-forwardref">What Was forwardRef?</h3>
<p>Before React 19, functional components couldn’t inherently receive <code>ref</code> props because React reserved them for class components and DOM elements. To work around this, <code>forwardRef</code> explicitly forwarded refs to child components or DOM nodes.</p>
<h3 id="example-pre-react-19usage">Example: Pre-React 19 Usage</h3>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">import React, { forwardRef } from 'react';const MyButton = forwardRef((props, ref) => (  &#x3C;button ref={ref} {...props}>    {props.children}  &#x3C;/button>));// Usageconst App = () => {  const buttonRef = React.useRef();  return &#x3C;MyButton ref={buttonRef}>Click Me&#x3C;/MyButton>;};
</span></code></pre>
<p>While functional, this pattern introduced boilerplate and complexity, especially for newcomers.</p>
<h3 id="whats-new-in-react19">What’s New in React 19?</h3>
<p>React 19 eliminates the need for <code>forwardRef</code> by allowing <code>ref</code> to be passed directly as a prop to functional components, just like any other prop.</p>
<h3 id="example-react-19-simplified-syntax">Example: React 19 Simplified Syntax</h3>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">const MyButton = ({ ref, ...props }) => {  return (    &#x3C;button ref={ref} {...props}>      {props.children}    &#x3C;/button>  );};// Usageconst App = () => {  const buttonRef = React.useRef();  return &#x3C;MyButton ref={buttonRef}>Click Me&#x3C;/MyButton>;};
</span></code></pre>
<p>No wrapper required — cleaner and more intuitive!</p>
<h3 id="why-this-changematters">Why This Change Matters</h3>
<ol>
<li><strong>Simplified API</strong>
No more mental overhead of <code>forwardRef</code>—refs behave like regular props.</li>
<li><strong>Reduced Boilerplate</strong>
Remove unnecessary function wrappers for cleaner code.</li>
<li><strong>Consistent Patterns</strong>
Aligns ref handling across functional components, class components, and DOM elements.</li>
</ol>
<h3 id="migrating-from-forwardref-to-react19">Migrating from <code>forwardRef</code> to React 19</h3>
<h3 id="step-1-remove-forwardref-wrapper">Step 1: Remove <code>forwardRef</code> Wrapper</h3>
<p><strong>Before (React 18):</strong></p>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">const MyComponent = forwardRef((props, ref) => (  &#x3C;div ref={ref}>{props.children}&#x3C;/div>));
</span></code></pre>
<p><strong>After (React 19)</strong></p>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">const MyComponent = ({ ref, ...props }) => {  return &#x3C;div ref={ref}>{props.children}&#x3C;/div>;};
</span></code></pre>
<h3 id="step-2-update-typescript-definitions-if-applicable">Step 2: Update TypeScript Definitions (If Applicable)</h3>
<p>For TypeScript users, update component props to include <code>ref</code>:</p>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">type MyComponentProps = {  ref?: React.Ref&#x3C;HTMLDivElement>;  children: React.ReactNode;};const MyComponent = ({ ref, ...props }: MyComponentProps) => (  &#x3C;div ref={ref}>{props.children}&#x3C;/div>)
</span></code></pre>
<h3 id="key-considerations">Key Considerations</h3>
<ol>
<li><strong>Backward Compatibility</strong>
Existing <code>forwardRef</code> code will still work, but migrate gradually for future-proofing.</li>
<li><strong>Third-Party Libraries</strong>
Many libraries may still use <code>forwardRef</code>. Check for updates or compatibility layers.</li>
<li><strong>Edge Cases</strong></li>
</ol>
<p><strong>Class Components</strong>: Ref behavior remains unchanged (refs point to component instances).<strong>DOM Elements</strong>: Continue using <code>ref</code> directly on JSX elements.</p>
<h3 id="the-future-of-forwardref">The Future of <code>forwardRef</code></h3>
<p>While <code>forwardRef</code> is deprecated, it will remain functional in React 19 for backward compatibility. Future React versions will phase it out entirely. The React team plans codemods to automate migration for large codebases.</p>
<h3 id="conclusion">Conclusion</h3>
<p>React 19’s <code>ref</code> prop simplification is a win for developer experience, reducing boilerplate and unifying patterns. By adopting this change early, you’ll ensure smoother upgrades and cleaner code. Start refactoring your components today!</p>
<p><strong>Pro Tip</strong>: Use React’s official codemod tools (when available) to automate migration at scale.</p>
<p>🚀 <strong>Embrace the simplicity and happy coding!</strong>
<em>Clap if this helped you unlock React 19’s potential!</em></p>
<h3 id="additional-resources">Additional Resources</h3>
<ul>
<li><a href="https://react.dev/blog/2024/04/25/react-19-upgrade-guide">React 19 Upgrade Guide</a></li>
<li><a href="https://github.com/reactjs/rfcs/pull/220">React RFC: Ref Cleanup Functions</a></li>
<li><a href="https://react-typescript-cheatsheet.netlify.app/">TypeScript + React Cheatsheet</a></li>
</ul>
<h3 id="thank-you-for-being-a-part-of-the-community">Thank you for being a part of the community</h3>
<p>*Before you go:*<strong>️️</strong></p>
<ul>
<li>Follow us: <a href="https://x.com/inPlainEngHQ"><strong>X</strong></a> | <a href="https://www.linkedin.com/company/inplainenglish/"><strong>LinkedIn</strong></a> | <a href="https://www.youtube.com/@InPlainEnglish"><strong>YouTube</strong></a> | <a href="https://newsletter.plainenglish.io/"><strong>Newsletter</strong></a> | <a href="https://open.spotify.com/show/7qxylRWKhvZwMz2WuEoua0"><strong>Podcast</strong></a> | <a href="https://twitch.tv/inplainenglish"><strong>Twitch</strong></a></li>
<li><a href="https://differ.blog/"><strong>Start your own free AI-powered blog on Differ</strong></a> 🚀</li>
<li><a href="https://discord.gg/in-plain-english-709094664682340443"><strong>Join our content creators community on Discord</strong></a> 🧑🏻‍💻</li>
<li>For more content, visit <a href="https://plainenglish.io/"><strong>plainenglish.io</strong></a> + <a href="https://stackademic.com/"><strong>stackademic.com</strong></a></li>
</ul>

React 19 Deprecates forwardRef: A Guide to Passing ref as a Standard Prop

![](https://cdn-images-1.medium.com/max/1600/1*6mq6FiDfXgNEh8eKD9e1hA.png)

Today’s most popular UI libraries aren’t just collections of pre-styled components — they’re sophisticated toolkits that provide the building blocks for creating unique, accessible, and maintainable design systems. Whether you’re building a startup’s MVP, a complex enterprise application, or anything in between, choosing the right UI library can significantly impact your development velocity and product quality.

In this guide, we’ll explore 10(+ bonus) outstanding UI libraries that have emerged as leaders in this new paradigm. We’ll look beyond just star counts and download numbers to examine what makes each library unique, their architectural approaches, and most importantly, what kind of projects they’re best suited for.

### 1. shadcn/ui

![](https://cdn-images-1.medium.com/max/1600/1*80rW2NRXjacg5h-KKzXSRA.png)

**Key Features:**

* Not a traditional component library but a CLI that adds components to your project
* Built on Radix UI primitives
* Highly customizable with Tailwind CSS
* Copy-paste ready components
* MIT License

[Website](https://ui.shadcn.com)

### 2. Radix UI

![](https://cdn-images-1.medium.com/max/1600/1*0lDDyv2tgAii2tIe66G8mw.png)

**Key Features:**

* Headless UI components
* Unstyled, accessible primitives
* Complete keyboard navigation
* Focus management
* MIT License

[Website](https://www.radix-ui.com)

### 3. Headless UI

![](https://cdn-images-1.medium.com/max/1600/1*2G11POd49pcNt8eJS-j60Q.png)

**Key Features:**

* Created by Tailwind CSS team
* Framework agnostic
* Fully accessible components
* Zero styling by default
* MIT License

[Website](https://headlessui.dev)

### 4. daisyUI

![](https://cdn-images-1.medium.com/max/1600/1*RsD8iz1EWA4QBCdsxHa9aA.png)

**Key Features:**

* Tailwind CSS component library
* 40+ prebuilt components
* Theme generator
* Lightweight
* MIT License

[Website](https://daisyui.com)

### 5. Ariakit

![](https://cdn-images-1.medium.com/max/1600/1*K_yud3pVoun5Hkmq81PPVg.jpeg)

**Key Features:**

* Advanced accessibility features
* Low-level building blocks
* Framework agnostic
* Extensive documentation
* MIT License

[Website](https://ariakit.org)

### 6. React Aria

![](https://cdn-images-1.medium.com/max/1600/1*40YsHCGAbmNcBIPkWzjtZg.png)

**Key Features:**

* Adobe’s collection of React Hooks
* Cross-browser consistency
* Mobile support
* International date/number formatting
* Apache License

[Website](https://react-spectrum.adobe.com/react-aria)

### 7. Mantine

![](https://cdn-images-1.medium.com/max/1600/1*L5q1mvs3baO0WOTMbfwZTw.png)

**Key Features:**

* 100+ customizable components
* Hooks library
* Dark theme support
* TypeScript based
* MIT License

[Website](https://mantine.dev)

### 8. Chakra UI

![](https://cdn-images-1.medium.com/max/1600/1*mdew2wLh3R0aAfcrNIuhNQ.jpeg)

**Key Features:**

* Modular and accessible components
* Style props
* Color mode support
* Theming system
* MIT License

[Website](https://chakra-ui.com)

### 9. HeroUI (previously NextUI)

![](https://cdn-images-1.medium.com/max/1600/1*vGR3vvbUGCkje8ZZMnmvYQ.png)

**Key Features:**

* Modern design
* Built on Tailwind CSS
* Dark mode
* Fully accessible
* MIT License

[Website](https://heroui.org/)

### 10. Tremor

![](https://cdn-images-1.medium.com/max/1600/1*CmDPxxAlhSQtcAjp_nB1qw.png)

**Key Features:**

* Dashboard-focused components
* Built-in charts and graphs
* Tailwind CSS integration
* Data visualization tools
* MIT License

[Website](https://www.tremor.so)

### **Bonus:**

### **11. Untitled UI React**

![](https://cdn-images-1.medium.com/max/1600/1*2c82fup1VkYRaihsF7Rvsw.jpeg)

The newest React library on this list, [Untitled UI React](https://www.untitledui.com/react) is the world’s largest collection of open-source React components built with Tailwind CSS v4.1, TypeScript, and React Aria.

It’s consistent, beautifully designed, and includes everything you need to design and develop modern, beautiful, responsive interfaces and websites in one neatly organized package. This library is ideal for teams already using Tailwind CSS who want production-ready, modern, accessible React components out of the box that don’t rely on external dependencies.

Key features:

* **Massive, production-ready library:** Hundreds of accessible, responsive components and page examples, professionally designed and built for modern performance.
* **Styled with Tailwind CSS:** Copy production-ready components built with the latest Tailwind CSS v4.1 utility classes and performance.
* **Accessibility at the core:** Built on React Aria with WAI-ARIA accessibility standards and best practices. React Aria is actively maintained by Adobe, so you won’t get left high and dry.
* **Custom CLI tool:** Add components or scaffold new projects effortlessly with a single command using our custom CLI tool.
* **Starter kits and integrations:** Launch faster with pre-configured starter kits for [Bolt.new](http://bolt.new/), [Next.js](https://Next.js), and more, designed for real-world apps, not demos.
* **Seamless dark mode support:** Components come with native dark mode support out-of-the-box, so there’s no need for separate styles.
* **No third-party maintainers:** You own the code, so you can build and extend without relying on third-party maintainers and packages.

Untitled UI React is based on [Untitled UI Figma](https://www.untitledui.com/figma), the world’s largest and most popular Figma UI kit, so the components look great and design and code stay in sync with lifetime updates. You can use my Affiliate Link to support me: [here](https://www.untitledui.com?aff=6Nz7pN)

### Usage and Popularity

While exact current usage statistics aren’t available, here are some indicators of popularity based on historical data:

* GitHub stars and npm downloads suggest shadcn/ui, Chakra UI, and Headless UI have been among the most widely adopted
* Corporate backing (like Adobe’s React Aria and Vercel’s adoption of shadcn/ui) has influenced adoption rates
* Community engagement metrics show strong developer interest in composable libraries that offer full control over styling

### Choosing the Right Library

Consider these factors when selecting a UI library:

1. **Bundle Size**: If you’re building a performance-critical application, consider libraries like Headless UI or Radix UI that let you import only what you need.
2. **Styling Approach**: Libraries like shadcn/ui and daisyUI are ideal if you’re already using Tailwind CSS, while Chakra UI and Mantine offer their own styling solutions.
3. **Use Case**: For dashboards, Tremor might be your best bet. For maximum accessibility, consider React Aria or Ariakit.
4. **Learning Curve**: Some libraries like shadcn/ui require more setup but offer more flexibility, while others like NextUI provide more out-of-the-box functionality.

### Conclusion

The trend toward composable, utility-first UI libraries continues to grow. While shadcn/ui has popularized the concept of copy-paste components, each library in this list offers unique advantages for different use cases. The best choice depends on your specific needs, team expertise, and project requirements.

### A message from our Founder

**Hey,** [**Sunil**](https://linkedin.com/in/sunilsandhu) **here.** I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? **We don’t receive any funding, we do this to support the community. ❤️**

If you want to show some love, please take a moment to **follow me on** [**LinkedIn**](https://linkedin.com/in/sunilsandhu)**,** [**TikTok**](https://tiktok.com/@messyfounder), [**Instagram**](https://instagram.com/sunilsandhu). You can also subscribe to our [**weekly newsletter**](https://newsletter.plainenglish.io/).

<p><img src="https://cdn-images-1.medium.com/max/1600/1*6mq6FiDfXgNEh8eKD9e1hA.png" alt=""></p>
<p>Today’s most popular UI libraries aren’t just collections of pre-styled components — they’re sophisticated toolkits that provide the building blocks for creating unique, accessible, and maintainable design systems. Whether you’re building a startup’s MVP, a complex enterprise application, or anything in between, choosing the right UI library can significantly impact your development velocity and product quality.</p>
<p>In this guide, we’ll explore 10(+ bonus) outstanding UI libraries that have emerged as leaders in this new paradigm. We’ll look beyond just star counts and download numbers to examine what makes each library unique, their architectural approaches, and most importantly, what kind of projects they’re best suited for.</p>
<h3 id="1-shadcnui">1. shadcn/ui</h3>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*80rW2NRXjacg5h-KKzXSRA.png" alt=""></p>
<p><strong>Key Features:</strong></p>
<ul>
<li>Not a traditional component library but a CLI that adds components to your project</li>
<li>Built on Radix UI primitives</li>
<li>Highly customizable with Tailwind CSS</li>
<li>Copy-paste ready components</li>
<li>MIT License</li>
</ul>
<p><a href="https://ui.shadcn.com">Website</a></p>
<h3 id="2-radixui">2. Radix UI</h3>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*0lDDyv2tgAii2tIe66G8mw.png" alt=""></p>
<p><strong>Key Features:</strong></p>
<ul>
<li>Headless UI components</li>
<li>Unstyled, accessible primitives</li>
<li>Complete keyboard navigation</li>
<li>Focus management</li>
<li>MIT License</li>
</ul>
<p><a href="https://www.radix-ui.com">Website</a></p>
<h3 id="3-headlessui">3. Headless UI</h3>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*2G11POd49pcNt8eJS-j60Q.png" alt=""></p>
<p><strong>Key Features:</strong></p>
<ul>
<li>Created by Tailwind CSS team</li>
<li>Framework agnostic</li>
<li>Fully accessible components</li>
<li>Zero styling by default</li>
<li>MIT License</li>
</ul>
<p><a href="https://headlessui.dev">Website</a></p>
<h3 id="4-daisyui">4. daisyUI</h3>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*RsD8iz1EWA4QBCdsxHa9aA.png" alt=""></p>
<p><strong>Key Features:</strong></p>
<ul>
<li>Tailwind CSS component library</li>
<li>40+ prebuilt components</li>
<li>Theme generator</li>
<li>Lightweight</li>
<li>MIT License</li>
</ul>
<p><a href="https://daisyui.com">Website</a></p>
<h3 id="5-ariakit">5. Ariakit</h3>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*K_yud3pVoun5Hkmq81PPVg.jpeg" alt=""></p>
<p><strong>Key Features:</strong></p>
<ul>
<li>Advanced accessibility features</li>
<li>Low-level building blocks</li>
<li>Framework agnostic</li>
<li>Extensive documentation</li>
<li>MIT License</li>
</ul>
<p><a href="https://ariakit.org">Website</a></p>
<h3 id="6-reactaria">6. React Aria</h3>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*40YsHCGAbmNcBIPkWzjtZg.png" alt=""></p>
<p><strong>Key Features:</strong></p>
<ul>
<li>Adobe’s collection of React Hooks</li>
<li>Cross-browser consistency</li>
<li>Mobile support</li>
<li>International date/number formatting</li>
<li>Apache License</li>
</ul>
<p><a href="https://react-spectrum.adobe.com/react-aria">Website</a></p>
<h3 id="7-mantine">7. Mantine</h3>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*L5q1mvs3baO0WOTMbfwZTw.png" alt=""></p>
<p><strong>Key Features:</strong></p>
<ul>
<li>100+ customizable components</li>
<li>Hooks library</li>
<li>Dark theme support</li>
<li>TypeScript based</li>
<li>MIT License</li>
</ul>
<p><a href="https://mantine.dev">Website</a></p>
<h3 id="8-chakraui">8. Chakra UI</h3>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*mdew2wLh3R0aAfcrNIuhNQ.jpeg" alt=""></p>
<p><strong>Key Features:</strong></p>
<ul>
<li>Modular and accessible components</li>
<li>Style props</li>
<li>Color mode support</li>
<li>Theming system</li>
<li>MIT License</li>
</ul>
<p><a href="https://chakra-ui.com">Website</a></p>
<h3 id="9-heroui-previously-nextui">9. HeroUI (previously NextUI)</h3>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*vGR3vvbUGCkje8ZZMnmvYQ.png" alt=""></p>
<p><strong>Key Features:</strong></p>
<ul>
<li>Modern design</li>
<li>Built on Tailwind CSS</li>
<li>Dark mode</li>
<li>Fully accessible</li>
<li>MIT License</li>
</ul>
<p><a href="https://heroui.org/">Website</a></p>
<h3 id="10-tremor">10. Tremor</h3>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*CmDPxxAlhSQtcAjp_nB1qw.png" alt=""></p>
<p><strong>Key Features:</strong></p>
<ul>
<li>Dashboard-focused components</li>
<li>Built-in charts and graphs</li>
<li>Tailwind CSS integration</li>
<li>Data visualization tools</li>
<li>MIT License</li>
</ul>
<p><a href="https://www.tremor.so">Website</a></p>
<h3 id="bonus"><strong>Bonus:</strong></h3>
<h3 id="11-untitled-uireact"><strong>11. Untitled UI React</strong></h3>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*2c82fup1VkYRaihsF7Rvsw.jpeg" alt=""></p>
<p>The newest React library on this list, <a href="https://www.untitledui.com/react">Untitled UI React</a> is the world’s largest collection of open-source React components built with Tailwind CSS v4.1, TypeScript, and React Aria.</p>
<p>It’s consistent, beautifully designed, and includes everything you need to design and develop modern, beautiful, responsive interfaces and websites in one neatly organized package. This library is ideal for teams already using Tailwind CSS who want production-ready, modern, accessible React components out of the box that don’t rely on external dependencies.</p>
<p>Key features:</p>
<ul>
<li><strong>Massive, production-ready library:</strong> Hundreds of accessible, responsive components and page examples, professionally designed and built for modern performance.</li>
<li><strong>Styled with Tailwind CSS:</strong> Copy production-ready components built with the latest Tailwind CSS v4.1 utility classes and performance.</li>
<li><strong>Accessibility at the core:</strong> Built on React Aria with WAI-ARIA accessibility standards and best practices. React Aria is actively maintained by Adobe, so you won’t get left high and dry.</li>
<li><strong>Custom CLI tool:</strong> Add components or scaffold new projects effortlessly with a single command using our custom CLI tool.</li>
<li><strong>Starter kits and integrations:</strong> Launch faster with pre-configured starter kits for <a href="http://bolt.new/">Bolt.new</a>, <a href="https://Next.js">Next.js</a>, and more, designed for real-world apps, not demos.</li>
<li><strong>Seamless dark mode support:</strong> Components come with native dark mode support out-of-the-box, so there’s no need for separate styles.</li>
<li><strong>No third-party maintainers:</strong> You own the code, so you can build and extend without relying on third-party maintainers and packages.</li>
</ul>
<p>Untitled UI React is based on <a href="https://www.untitledui.com/figma">Untitled UI Figma</a>, the world’s largest and most popular Figma UI kit, so the components look great and design and code stay in sync with lifetime updates. You can use my Affiliate Link to support me: <a href="https://www.untitledui.com?aff=6Nz7pN">here</a></p>
<h3 id="usage-and-popularity">Usage and Popularity</h3>
<p>While exact current usage statistics aren’t available, here are some indicators of popularity based on historical data:</p>
<ul>
<li>GitHub stars and npm downloads suggest shadcn/ui, Chakra UI, and Headless UI have been among the most widely adopted</li>
<li>Corporate backing (like Adobe’s React Aria and Vercel’s adoption of shadcn/ui) has influenced adoption rates</li>
<li>Community engagement metrics show strong developer interest in composable libraries that offer full control over styling</li>
</ul>
<h3 id="choosing-the-rightlibrary">Choosing the Right Library</h3>
<p>Consider these factors when selecting a UI library:</p>
<ol>
<li><strong>Bundle Size</strong>: If you’re building a performance-critical application, consider libraries like Headless UI or Radix UI that let you import only what you need.</li>
<li><strong>Styling Approach</strong>: Libraries like shadcn/ui and daisyUI are ideal if you’re already using Tailwind CSS, while Chakra UI and Mantine offer their own styling solutions.</li>
<li><strong>Use Case</strong>: For dashboards, Tremor might be your best bet. For maximum accessibility, consider React Aria or Ariakit.</li>
<li><strong>Learning Curve</strong>: Some libraries like shadcn/ui require more setup but offer more flexibility, while others like NextUI provide more out-of-the-box functionality.</li>
</ol>
<h3 id="conclusion">Conclusion</h3>
<p>The trend toward composable, utility-first UI libraries continues to grow. While shadcn/ui has popularized the concept of copy-paste components, each library in this list offers unique advantages for different use cases. The best choice depends on your specific needs, team expertise, and project requirements.</p>
<h3 id="a-message-from-ourfounder">A message from our Founder</h3>
<p><strong>Hey,</strong> <a href="https://linkedin.com/in/sunilsandhu"><strong>Sunil</strong></a> <strong>here.</strong> I wanted to take a moment to thank you for reading until the end and for being a part of this community.</p>
<p>Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? <strong>We don’t receive any funding, we do this to support the community. ❤️</strong></p>
<p>If you want to show some love, please take a moment to <strong>follow me on</strong> <a href="https://linkedin.com/in/sunilsandhu"><strong>LinkedIn</strong></a><strong>,</strong> <a href="https://tiktok.com/@messyfounder"><strong>TikTok</strong></a>, <a href="https://instagram.com/sunilsandhu"><strong>Instagram</strong></a>. You can also subscribe to our <a href="https://newsletter.plainenglish.io/"><strong>weekly newsletter</strong></a>.</p>

Top 10 Modern UI Component Libraries for React: A 2025 Guide

![](https://cdn-images-1.medium.com/max/1600/1*bMAR0uQcui183sMnnyFATw.png)

This past week I had to figure out how to stop a user before leaving a specific page for broadcasting a concert and, if they choose to close the tab or navigate to a different page, hit an API endpoint that ends the concert.

This was a difficult problem because there are multiple ways a user can leave a single page of a website and they aren’t related. Closing a tab, going to a different URL, or even refreshing the page are different from clicking the *HOME* or *PROFILE* buttons.

Furthermore, I wasn’t able to find any way to customize these alerts or hide the default browser messages and create my own. Ultimately, I found that, in React at least, trying to intercept a user before they leave a page is a frustrating undertaking. Proceed with caution.

When I took the ticket to work on this problem, my first thought was to place any logic I needed for this task in the return value of a `useEffect` callback function like this:

```
useEffect(() => {  return () => {    // hit endpoint to end show  }}, [])
```

The empty array means this returned function will only run when the component unmounts. But, I need to give the user the option to stay on the page. There’s no way to cancel an unmount that I know of. After some digging, I found React Router’s `Prompt` component.

> *💡* Speed up your blog creation with [***DifferAI***](https://differ.blog/differ-ai).

> Available for ***free******* exclusively on the ***free and open blogging platform,*** [***Differ***](https://differ.blog/)***.***

[**Introducing DifferAI**
*DifferAI is your writing co-pilot - seamlessly integrated within Differ's text editor. Powered by a Large Language…*&#x64;iffer.blog](https://differ.blog/differ-ai "https://differ.blog/differ-ai")

### Prompt component

The `Prompt` component is a nice component available in the React Router API. All you have to do is tell the `Prompt` component `when` to *prompt* or alert the user and what message to display in the alert. Then, just place the `Prompt` at the top of your component;

```
const Component = () => (  <Container>    <Prompt      when={isPrompt()}      message={() => 'Are you sure you want to leave this page?'}    />    <h1>This is a component.</h1>  </Container>)
```

Then, I placed the logic to end the concert in the cleanup function in my `useEffect` callback like I discussed before:

```
useEffect(() => {  return () => handleEndConcert()}, [])
```

```
const handleEndConcert = async () => {  await fetcher({    url: endConcert(concert.id),    method: 'PUT'  })}
```

Unfortunately, there’s no way to customize the `Prompt` beyond the message content or to hide the alert box and make your own. The most popular solution to this problem I found is to add a click listener to any links/buttons that route to different pages that triggers the custom alert box.

I chose not to do this at this time because that sounds like a lot of work and it still doesn’t cover all of the ways in which a user can leave a page. To intercept a user before they close a tab or go to a different website, I would have to use an entirely different API.

### beforeunload and unload events

To detect if a user is closing the tab or navigating to a different website, you have to use some good ol’ vanilla JavaScript. To warn users before closing the tab/window, refreshing the page, or entering a different URL, add an event listener to the `window` that listens for `beforeunload`:

```
useEffect(() => {  window.addEventListener('beforeunload', alertUser)  return () => {    window.removeEventListener('beforeunload', alertUser)  }}, [])
```

```
const alertUser = e => {  e.preventDefault()  e.returnValue = ''}
```

In the callback function, `alertUser`, I’m preventing the default behavior, which in this case would be closing the tab or one of the other ways to leave the page. I’m not sure why setting the `returnValue` to an empty string is necessary, but it didn’t work before I added that.

This stops the user before closing the tab and displays the default *If you leave this page, changes may not be saved* message (or something like that) that you’ve probably seen on other websites.

I’ve now warned the user before leaving the page. To run some logic after they choose to leave the page, I need to add another event listener to the `window`, this time for the `unload` event:

```
useEffect(() => {  window.addEventListener('beforeunload', alertUser)  window.addEventListener('unload', handleEndConcert)  return () => {    window.removeEventListener('beforeunload', alertUser)    window.removeEventListener('unload', handleEndConcert)  }}, [])
```

```
const handleEndConcert = async () => {  await fetcher({    url: endConcert(concert.id),    method: 'PUT'  })}
```

If the page does unload, the `handleEndConcert` function runs.

Including everything together, the very basic `Component` would look something like this:

```
const Component = () => {  useEffect(() => {    window.addEventListener('beforeunload', alertUser)    window.addEventListener('unload', handleEndConcert)    return () => {      window.removeEventListener('beforeunload', alertUser)      window.removeEventListener('unload', handleEndConcert)      handleEndConcert()    }  }, [])
```

```
  const alertUser = e => {    e.preventDefault()    e.returnValue = ''  }
```

```
  const handleEndConcert = async () => {    await fetcher({      url: endConcert(concert.id),      method: 'PUT'    })  }
```

```
  return (    <Container>      <Prompt        when={isPrompt()}        message={() => 'Are you sure you want to leave this page?'}      />    </Container>  )}
```

### A message from our Founder

**Hey,** [**Sunil**](https://linkedin.com/in/sunilsandhu) **here.** I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? **We don’t receive any funding, we do this to support the community. ❤️**

If you want to show some love, please take a moment to **follow me on** [**LinkedIn**](https://linkedin.com/in/sunilsandhu)**,** [**TikTok**](https://tiktok.com/@messyfounder), [**Instagram**](https://instagram.com/sunilsandhu). You can also subscribe to our [**weekly newsletter**](https://newsletter.plainenglish.io/).

And before you go, don’t forget to **clap** and **follow** the writer️!

<p><img src="https://cdn-images-1.medium.com/max/1600/1*bMAR0uQcui183sMnnyFATw.png" alt=""></p>
<p>This past week I had to figure out how to stop a user before leaving a specific page for broadcasting a concert and, if they choose to close the tab or navigate to a different page, hit an API endpoint that ends the concert.</p>
<p>This was a difficult problem because there are multiple ways a user can leave a single page of a website and they aren’t related. Closing a tab, going to a different URL, or even refreshing the page are different from clicking the <em>HOME</em> or <em>PROFILE</em> buttons.</p>
<p>Furthermore, I wasn’t able to find any way to customize these alerts or hide the default browser messages and create my own. Ultimately, I found that, in React at least, trying to intercept a user before they leave a page is a frustrating undertaking. Proceed with caution.</p>
<p>When I took the ticket to work on this problem, my first thought was to place any logic I needed for this task in the return value of a <code>useEffect</code> callback function like this:</p>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">useEffect(() => {  return () => {    // hit endpoint to end show  }}, [])
</span></code></pre>
<p>The empty array means this returned function will only run when the component unmounts. But, I need to give the user the option to stay on the page. There’s no way to cancel an unmount that I know of. After some digging, I found React Router’s <code>Prompt</code> component.</p>
<blockquote>
<p><em>💡</em> Speed up your blog creation with <a href="https://differ.blog/differ-ai"><em><strong>DifferAI</strong></em></a>.</p>
</blockquote>
<blockquote>
<p>Available for <em><strong>free</strong></em>**** exclusively on the <em><strong>free and open blogging platform,</strong></em> <a href="https://differ.blog/"><em><strong>Differ</strong></em></a><em><strong>.</strong></em></p>
</blockquote>
<p><a href="https://differ.blog/differ-ai" title="https://differ.blog/differ-ai"><strong>Introducing DifferAI</strong>
<em>DifferAI is your writing co-pilot - seamlessly integrated within Differ's text editor. Powered by a Large Language…</em>differ.blog</a></p>
<h3 id="prompt-component">Prompt component</h3>
<p>The <code>Prompt</code> component is a nice component available in the React Router API. All you have to do is tell the <code>Prompt</code> component <code>when</code> to <em>prompt</em> or alert the user and what message to display in the alert. Then, just place the <code>Prompt</code> at the top of your component;</p>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">const Component = () => (  &#x3C;Container>    &#x3C;Prompt      when={isPrompt()}      message={() => 'Are you sure you want to leave this page?'}    />    &#x3C;h1>This is a component.&#x3C;/h1>  &#x3C;/Container>)
</span></code></pre>
<p>Then, I placed the logic to end the concert in the cleanup function in my <code>useEffect</code> callback like I discussed before:</p>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">useEffect(() => {  return () => handleEndConcert()}, [])
</span></code></pre>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">const handleEndConcert = async () => {  await fetcher({    url: endConcert(concert.id),    method: 'PUT'  })}
</span></code></pre>
<p>Unfortunately, there’s no way to customize the <code>Prompt</code> beyond the message content or to hide the alert box and make your own. The most popular solution to this problem I found is to add a click listener to any links/buttons that route to different pages that triggers the custom alert box.</p>
<p>I chose not to do this at this time because that sounds like a lot of work and it still doesn’t cover all of the ways in which a user can leave a page. To intercept a user before they close a tab or go to a different website, I would have to use an entirely different API.</p>
<h3 id="beforeunload-and-unloadevents">beforeunload and unload events</h3>
<p>To detect if a user is closing the tab or navigating to a different website, you have to use some good ol’ vanilla JavaScript. To warn users before closing the tab/window, refreshing the page, or entering a different URL, add an event listener to the <code>window</code> that listens for <code>beforeunload</code>:</p>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">useEffect(() => {  window.addEventListener('beforeunload', alertUser)  return () => {    window.removeEventListener('beforeunload', alertUser)  }}, [])
</span></code></pre>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">const alertUser = e => {  e.preventDefault()  e.returnValue = ''}
</span></code></pre>
<p>In the callback function, <code>alertUser</code>, I’m preventing the default behavior, which in this case would be closing the tab or one of the other ways to leave the page. I’m not sure why setting the <code>returnValue</code> to an empty string is necessary, but it didn’t work before I added that.</p>
<p>This stops the user before closing the tab and displays the default <em>If you leave this page, changes may not be saved</em> message (or something like that) that you’ve probably seen on other websites.</p>
<p>I’ve now warned the user before leaving the page. To run some logic after they choose to leave the page, I need to add another event listener to the <code>window</code>, this time for the <code>unload</code> event:</p>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">useEffect(() => {  window.addEventListener('beforeunload', alertUser)  window.addEventListener('unload', handleEndConcert)  return () => {    window.removeEventListener('beforeunload', alertUser)    window.removeEventListener('unload', handleEndConcert)  }}, [])
</span></code></pre>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">const handleEndConcert = async () => {  await fetcher({    url: endConcert(concert.id),    method: 'PUT'  })}
</span></code></pre>
<p>If the page does unload, the <code>handleEndConcert</code> function runs.</p>
<p>Including everything together, the very basic <code>Component</code> would look something like this:</p>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">const Component = () => {  useEffect(() => {    window.addEventListener('beforeunload', alertUser)    window.addEventListener('unload', handleEndConcert)    return () => {      window.removeEventListener('beforeunload', alertUser)      window.removeEventListener('unload', handleEndConcert)      handleEndConcert()    }  }, [])
</span></code></pre>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">  const alertUser = e => {    e.preventDefault()    e.returnValue = ''  }
</span></code></pre>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">  const handleEndConcert = async () => {    await fetcher({      url: endConcert(concert.id),      method: 'PUT'    })  }
</span></code></pre>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">  return (    &#x3C;Container>      &#x3C;Prompt        when={isPrompt()}        message={() => 'Are you sure you want to leave this page?'}      />    &#x3C;/Container>  )}
</span></code></pre>
<h3 id="a-message-from-ourfounder">A message from our Founder</h3>
<p><strong>Hey,</strong> <a href="https://linkedin.com/in/sunilsandhu"><strong>Sunil</strong></a> <strong>here.</strong> I wanted to take a moment to thank you for reading until the end and for being a part of this community.</p>
<p>Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? <strong>We don’t receive any funding, we do this to support the community. ❤️</strong></p>
<p>If you want to show some love, please take a moment to <strong>follow me on</strong> <a href="https://linkedin.com/in/sunilsandhu"><strong>LinkedIn</strong></a><strong>,</strong> <a href="https://tiktok.com/@messyfounder"><strong>TikTok</strong></a>, <a href="https://instagram.com/sunilsandhu"><strong>Instagram</strong></a>. You can also subscribe to our <a href="https://newsletter.plainenglish.io/"><strong>weekly newsletter</strong></a>.</p>
<p>And before you go, don’t forget to <strong>clap</strong> and <strong>follow</strong> the writer️!</p>

How To Alert A User Before Leaving A Page In React

Swiper still rules the feature list, but its core + styles weigh in around 80 KB min (≈ 25 KB gzip). If you’d rather spend those bytes on i18n, analytics or CSS vars, try one of these leaner carousels — all MIT‑licensed except where noted, all boasting 1 k+ GitHub stars.

![](https://cdn-images-1.medium.com/max/1600/1*lSigVpBAar1bc-aDMEzryg.png)

One’s bloated. One’s built to move.

![](https://cdn-images-1.medium.com/max/1600/1*1XqNliGKAdxHcormAj3Low.png)

\* Size excludes the optional Slick theme CSS.
† Flickity is free for OSS, but requires a commercial license for paid projects.

### 1. Keen Slider — pixel‑perfect “app” swipes

* **DX**: Replace `<SwiperSlide>` with a plain `<div>` and import the `useKeenSlider` hook. That’s it.

Quick start

```
import { useKeenSlider } from "keen-slider/react";export default function Gallery() {  const [sliderRef] = useKeenSlider(    { loop: true, mode: "free-snap", slideChanged: s => console.log(s.details()) }  );  return (    <div ref={sliderRef} className="keen-slider h-64">      {[1,2,3,4].map(n => (        <div key={n} className="keen-slider__slide flex items-center justify-center text-4xl">          {n}        </div>      ))}    </div>  );}
```

Extra patterns you’ll love

![](https://cdn-images-1.medium.com/max/1600/1*jHXnBqvycGpRVHajrISV3g.png)

Table with patterns

* **Fun fact**: Originally crafted for industrial touch‑terminals so grape pickers could browse data in gloves — hence its obsession with gesture accuracy.

### 2. Embla Carousel — build‑it‑your‑way

* **DX**: You get a tiny core; every extra (looping, autoplay, wheel gestures) is an opt‑in plugin.

Minimal React shell

```
import useEmblaCarousel from "embla-carousel-react";import Autoplay from "embla-carousel-autoplay";const options = { align: "start", loop: true };const plugins = [Autoplay({ delay: 3000 })];function Headlines({ articles }) {  const [viewportRef] = useEmblaCarousel(options, plugins);  return (    <section className="overflow-hidden" ref={viewportRef}>      <div className="flex">        {articles.map(a => (          <a key={a.id} className="flex-none w-full md:w-1/2 lg:w-1/3 pr-6" href={a.url}>            <img src={a.img} className="rounded-xl" />            <h3>{a.title}</h3>          </a>        ))}      </div>    </section>  );}
```

**Why pick Embla?**

* **Plugin model** — only pay for what you import: wheel gestures, drag‑free, 3D tilt, autoplay, parallax, etc.
* **Headless** — layout entirely yours (CSS Grid, Tailwind, anything).
* **Docs you can edit** — every code snippet sits in a live CodeSandbox PR.

*Pro tip*: Combine `embla-carousel-solid` or `embla-carousel-svelte` in micro‑frontends — you’ll share physics while mixing frameworks.

### 3. [Glide.js](https://Glide.js) — the happy medium

* **DX**: Few options (`gap`, `peek`, `perView`) deliver 90 % of use‑cases. Works in ES modules, no build step needed.

ESM‑only install

```
npm i @glidejs/glide
```

```
import Glide from "@glidejs/glide";const glide = new Glide(".glide", {  perView: 3,  gap: 24,  peek: { before: 50, after: 50 },  animationDuration: 600,}).mount();
```

Recipes

![](https://cdn-images-1.medium.com/max/1600/1*iIDKEGqir-r5N8B6llfUHg.png)

Scenario examples

**Fun fact**: Glide’s creator open‑sourced it after using the very first version on a Polish newspaper site back in 2013 — it’s been in production ever since.

### 4. React Slick — least friction for newcomers

* **DX**: Just `<Slider settings={…}>`; no custom CSS required. Huge snippet library on CodeSandbox.

Classic example with custom arrows

```
import Slider from "react-slick";import "slick-carousel/slick/slick.css";const NextArrow = props => <button {...props} className="right-2">›</button>;const PrevArrow = props => <button {...props} className="left-2">‹</button>;export default function LogoStrip({ logos }) {  const settings = {    arrows: true,    slidesToShow: 5,    infinite: true,    nextArrow: <NextArrow />,    prevArrow: <PrevArrow />,    responsive: [      { breakpoint: 1024, settings: { slidesToShow: 3 } },      { breakpoint: 640, settings: { slidesToShow: 2, arrows: false } },    ],  };  return <Slider {...settings}>{logos.map(l => <img key={l} src={l} />)}</Slider>;}
```

**When Slick shines**

* **Training junior devs** — API mirrors jQuery Slick docs from 2015, tons of snippets.
* **SSR &** [**Next.js**](https://Next.js) — proven workarounds (`import dynamic`) and examples for hydration issues.
* **Legacy hand‑off** — jQuery/Slick and React Slick share the same option names, easing rewrites page‑by‑page.

**Fun fact**: Under the hood it’s a React port of the jQuery “Slick” slider, so blog posts from 2015 still help.

### 5. Flickity — delightfully “springy”

* **DX**: Vanilla JS + a thin `react-flickity-component` wrapper. Known for polished “rubber‑band” drag inertia.

React wrapper

```
import Flickity from "react-flickity-component";import "flickity/css/flickity.css";const flickityOptions = {  cellAlign: "left",  contain: true,  wrapAround: true,  groupCells: 2,  pageDots: false,};export function Portfolio({ shots }) {  return (    <Flickity options={flickityOptions} className="overflow-visible">      {shots.map(s => (        <figure key={s.id} className="mr-4 w-80">          <img src={s.img} className="rounded-2xl" />          <figcaption className="mt-2">{s.caption}</figcaption>        </figure>      ))}    </Flickity>  );}
```

**Why users stay**

* **Rubber‑band feel** — subtle “spring” easing distinguishes it from any CSS‑only slider.
* **GroupCells** — grid‑like carousels for product cards with two lines of config.
* **Masonry compatibility** — share the optional `masonry` add‑on for Pinterest‑style layouts.

*Heads‑up*: Commercial license is $99 one‑off — still cheaper than shipping Mb‑heavy bundles every month.

* **Fun fact**: Its author added the elastic effect after a late‑night pinball session; users kept it as a signature.

### Choosing quickly

* **Need 1‑hour migration from Swiper?** Keen Slider.
* **Want granular control & plugins?** Embla.
* **Prefer long‑term stability?** [Glide.js](https://Glide.js).
* **Teaching juniors / doing SSR?** React Slick.
* **Obsessed with tactile feel?** Flickity.

Any of these will shave \~40‑50 KB off a Swiper‑based bundle without costing users a single gesture.

### Thank you for being a part of the community

*Before you go:***️️**

* Follow us: [**X**](https://x.com/inPlainEngHQ) | [**LinkedIn**](https://www.linkedin.com/company/inplainenglish/) | [**YouTube**](https://www.youtube.com/@InPlainEnglish) | [**Newsletter**](https://newsletter.plainenglish.io/) | [**Podcast**](https://open.spotify.com/show/7qxylRWKhvZwMz2WuEoua0) | [**Differ**](https://differ.blog/inplainenglish) | [**Twitch**](https://twitch.tv/inplainenglish)
* [**Check out CoFeed, the smart way to stay up-to-date with the latest in tech**](https://cofeed.app/) **🧪**
* [**Start your own free AI-powered blog on Differ**](https://differ.blog/) 🚀
* [**Join our content creators community on Discord**](https://discord.gg/in-plain-english-709094664682340443) 🧑🏻‍💻
* For more content, visit [**plainenglish.io**](https://plainenglish.io/) + [**stackademic.com**](https://stackademic.com/)

<p>Swiper still rules the feature list, but its core + styles weigh in around 80 KB min (≈ 25 KB gzip). If you’d rather spend those bytes on i18n, analytics or CSS vars, try one of these leaner carousels — all MIT‑licensed except where noted, all boasting 1 k+ GitHub stars.</p>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*lSigVpBAar1bc-aDMEzryg.png" alt=""></p>
<p>One’s bloated. One’s built to move.</p>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*1XqNliGKAdxHcormAj3Low.png" alt=""></p>
<p>* Size excludes the optional Slick theme CSS.
† Flickity is free for OSS, but requires a commercial license for paid projects.</p>
<h3 id="1-keen-sliderpixelperfect-appswipes">1. Keen Slider — pixel‑perfect “app” swipes</h3>
<ul>
<li><strong>DX</strong>: Replace <code>&#x3C;SwiperSlide></code> with a plain <code>&#x3C;div></code> and import the <code>useKeenSlider</code> hook. That’s it.</li>
</ul>
<p>Quick start</p>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">import { useKeenSlider } from "keen-slider/react";export default function Gallery() {  const [sliderRef] = useKeenSlider(    { loop: true, mode: "free-snap", slideChanged: s => console.log(s.details()) }  );  return (    &#x3C;div ref={sliderRef} className="keen-slider h-64">      {[1,2,3,4].map(n => (        &#x3C;div key={n} className="keen-slider__slide flex items-center justify-center text-4xl">          {n}        &#x3C;/div>      ))}    &#x3C;/div>  );}
</span></code></pre>
<p>Extra patterns you’ll love</p>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*jHXnBqvycGpRVHajrISV3g.png" alt=""></p>
<p>Table with patterns</p>
<ul>
<li><strong>Fun fact</strong>: Originally crafted for industrial touch‑terminals so grape pickers could browse data in gloves — hence its obsession with gesture accuracy.</li>
</ul>
<h3 id="2-embla-carouselbuildityourway">2. Embla Carousel — build‑it‑your‑way</h3>
<ul>
<li><strong>DX</strong>: You get a tiny core; every extra (looping, autoplay, wheel gestures) is an opt‑in plugin.</li>
</ul>
<p>Minimal React shell</p>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">import useEmblaCarousel from "embla-carousel-react";import Autoplay from "embla-carousel-autoplay";const options = { align: "start", loop: true };const plugins = [Autoplay({ delay: 3000 })];function Headlines({ articles }) {  const [viewportRef] = useEmblaCarousel(options, plugins);  return (    &#x3C;section className="overflow-hidden" ref={viewportRef}>      &#x3C;div className="flex">        {articles.map(a => (          &#x3C;a key={a.id} className="flex-none w-full md:w-1/2 lg:w-1/3 pr-6" href={a.url}>            &#x3C;img src={a.img} className="rounded-xl" />            &#x3C;h3>{a.title}&#x3C;/h3>          &#x3C;/a>        ))}      &#x3C;/div>    &#x3C;/section>  );}
</span></code></pre>
<p><strong>Why pick Embla?</strong></p>
<ul>
<li><strong>Plugin model</strong> — only pay for what you import: wheel gestures, drag‑free, 3D tilt, autoplay, parallax, etc.</li>
<li><strong>Headless</strong> — layout entirely yours (CSS Grid, Tailwind, anything).</li>
<li><strong>Docs you can edit</strong> — every code snippet sits in a live CodeSandbox PR.</li>
</ul>
<p><em>Pro tip</em>: Combine <code>embla-carousel-solid</code> or <code>embla-carousel-svelte</code> in micro‑frontends — you’ll share physics while mixing frameworks.</p>
<h3 id="3-glidejsthe-happymedium">3. <a href="https://Glide.js">Glide.js</a> — the happy medium</h3>
<ul>
<li><strong>DX</strong>: Few options (<code>gap</code>, <code>peek</code>, <code>perView</code>) deliver 90 % of use‑cases. Works in ES modules, no build step needed.</li>
</ul>
<p>ESM‑only install</p>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">npm i @glidejs/glide
</span></code></pre>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">import Glide from "@glidejs/glide";const glide = new Glide(".glide", {  perView: 3,  gap: 24,  peek: { before: 50, after: 50 },  animationDuration: 600,}).mount();
</span></code></pre>
<p>Recipes</p>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*iIDKEGqir-r5N8B6llfUHg.png" alt=""></p>
<p>Scenario examples</p>
<p><strong>Fun fact</strong>: Glide’s creator open‑sourced it after using the very first version on a Polish newspaper site back in 2013 — it’s been in production ever since.</p>
<h3 id="4-react-slickleast-friction-for-newcomers">4. React Slick — least friction for newcomers</h3>
<ul>
<li><strong>DX</strong>: Just <code>&#x3C;Slider settings={…}></code>; no custom CSS required. Huge snippet library on CodeSandbox.</li>
</ul>
<p>Classic example with custom arrows</p>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">import Slider from "react-slick";import "slick-carousel/slick/slick.css";const NextArrow = props => &#x3C;button {...props} className="right-2">›&#x3C;/button>;const PrevArrow = props => &#x3C;button {...props} className="left-2">‹&#x3C;/button>;export default function LogoStrip({ logos }) {  const settings = {    arrows: true,    slidesToShow: 5,    infinite: true,    nextArrow: &#x3C;NextArrow />,    prevArrow: &#x3C;PrevArrow />,    responsive: [      { breakpoint: 1024, settings: { slidesToShow: 3 } },      { breakpoint: 640, settings: { slidesToShow: 2, arrows: false } },    ],  };  return &#x3C;Slider {...settings}>{logos.map(l => &#x3C;img key={l} src={l} />)}&#x3C;/Slider>;}
</span></code></pre>
<p><strong>When Slick shines</strong></p>
<ul>
<li><strong>Training junior devs</strong> — API mirrors jQuery Slick docs from 2015, tons of snippets.</li>
<li><strong>SSR &#x26;</strong> <a href="https://Next.js"><strong>Next.js</strong></a> — proven workarounds (<code>import dynamic</code>) and examples for hydration issues.</li>
<li><strong>Legacy hand‑off</strong> — jQuery/Slick and React Slick share the same option names, easing rewrites page‑by‑page.</li>
</ul>
<p><strong>Fun fact</strong>: Under the hood it’s a React port of the jQuery “Slick” slider, so blog posts from 2015 still help.</p>
<h3 id="5-flickitydelightfully-springy">5. Flickity — delightfully “springy”</h3>
<ul>
<li><strong>DX</strong>: Vanilla JS + a thin <code>react-flickity-component</code> wrapper. Known for polished “rubber‑band” drag inertia.</li>
</ul>
<p>React wrapper</p>
<pre><code class="code-highlight"><span class="code-line line-number" line="1">import Flickity from "react-flickity-component";import "flickity/css/flickity.css";const flickityOptions = {  cellAlign: "left",  contain: true,  wrapAround: true,  groupCells: 2,  pageDots: false,};export function Portfolio({ shots }) {  return (    &#x3C;Flickity options={flickityOptions} className="overflow-visible">      {shots.map(s => (        &#x3C;figure key={s.id} className="mr-4 w-80">          &#x3C;img src={s.img} className="rounded-2xl" />          &#x3C;figcaption className="mt-2">{s.caption}&#x3C;/figcaption>        &#x3C;/figure>      ))}    &#x3C;/Flickity>  );}
</span></code></pre>
<p><strong>Why users stay</strong></p>
<ul>
<li><strong>Rubber‑band feel</strong> — subtle “spring” easing distinguishes it from any CSS‑only slider.</li>
<li><strong>GroupCells</strong> — grid‑like carousels for product cards with two lines of config.</li>
<li><strong>Masonry compatibility</strong> — share the optional <code>masonry</code> add‑on for Pinterest‑style layouts.</li>
</ul>
<p><em>Heads‑up</em>: Commercial license is $99 one‑off — still cheaper than shipping Mb‑heavy bundles every month.</p>
<ul>
<li><strong>Fun fact</strong>: Its author added the elastic effect after a late‑night pinball session; users kept it as a signature.</li>
</ul>
<h3 id="choosing-quickly">Choosing quickly</h3>
<ul>
<li><strong>Need 1‑hour migration from Swiper?</strong> Keen Slider.</li>
<li><strong>Want granular control &#x26; plugins?</strong> Embla.</li>
<li><strong>Prefer long‑term stability?</strong> <a href="https://Glide.js">Glide.js</a>.</li>
<li><strong>Teaching juniors / doing SSR?</strong> React Slick.</li>
<li><strong>Obsessed with tactile feel?</strong> Flickity.</li>
</ul>
<p>Any of these will shave ~40‑50 KB off a Swiper‑based bundle without costing users a single gesture.</p>
<h3 id="thank-you-for-being-a-part-of-the-community">Thank you for being a part of the community</h3>
<p>*Before you go:*<strong>️️</strong></p>
<ul>
<li>Follow us: <a href="https://x.com/inPlainEngHQ"><strong>X</strong></a> | <a href="https://www.linkedin.com/company/inplainenglish/"><strong>LinkedIn</strong></a> | <a href="https://www.youtube.com/@InPlainEnglish"><strong>YouTube</strong></a> | <a href="https://newsletter.plainenglish.io/"><strong>Newsletter</strong></a> | <a href="https://open.spotify.com/show/7qxylRWKhvZwMz2WuEoua0"><strong>Podcast</strong></a> | <a href="https://differ.blog/inplainenglish"><strong>Differ</strong></a> | <a href="https://twitch.tv/inplainenglish"><strong>Twitch</strong></a></li>
<li><a href="https://cofeed.app/"><strong>Check out CoFeed, the smart way to stay up-to-date with the latest in tech</strong></a> <strong>🧪</strong></li>
<li><a href="https://differ.blog/"><strong>Start your own free AI-powered blog on Differ</strong></a> 🚀</li>
<li><a href="https://discord.gg/in-plain-english-709094664682340443"><strong>Join our content creators community on Discord</strong></a> 🧑🏻‍💻</li>
<li>For more content, visit <a href="https://plainenglish.io/"><strong>plainenglish.io</strong></a> + <a href="https://stackademic.com/"><strong>stackademic.com</strong></a></li>
</ul>

Top 5 Lightweight Swiper Alternatives Every React Dev Should Know in 2025

Stop Shipping 80 KB for a Slider

Learn How to Protect Sensitive Information in PDFs with React and Apryse's WebViewer SDK

How to Redact Sensitive Data in PDFs Using React

Discover the secrets to boosting your React application's performance through lazy loading and code-splitting. This comprehensive guide provides practical insights and best practices for implementing these critical optimization techniques, ensuring your web projects are as efficient and responsive as possible. Dive into the world of modern web development and learn how to make your React apps faster, more scalable, and user-friendly.

Enhancing Your React App Performance with Lazy Loading and Code-Splitting

Maximize Speed and Efficiency in Your React Projects

I think it’s also important to try out different libraries and not just stick to one.

Why I Chose Mantine as My Component Library

In this guide, we'll show how to embed a form builder with React using the Joyfill React forms SDK, and offer a world-class form solution in minutes.

Embed form builder with React

A guide on how to embed a form builder with React using the Joyfill React forms SDK, and offer a world-class form solution in minutes.

Dive into the latest React 19 update, featuring the React Compiler, Actions, and more. Learn how these new features will streamline your development process and enhance the React experience.

React 19 Update: What's New and How It Will Impact Your Development

 A comprehensive overview of the latest features and improvements in React 19, including the React Compiler, Actions, and more.

Major React 19 Update: React Compiler and All You Need to Know

Explore what these React hooks are, their functions, differences, and dive into specific use cases with easy-to-understand examples.

Main Menu

Follow Us

React