A New Update to Shadcn UI

#shadcn #webdev #frontend #react

Hey Guys, welcome back to my another blog. In this blog we'll talk about the latest changes in my favourite UI library i.e Shadcn UI.

So without wasting any time lets get started!

Just a couple of days ago, Shadcn UI released a major update that includes five new components. Let's dive in and explore what they have to offer! 🚀

Carousel Component

First up is the Carousel component. Let me tell you, the API for these components are literally breeze to work with!

With just two simple steps, you can add a previous and next button to your carousel and define the content.

For example, let's say we want to create a carousel with five empty slides. We can easily achieve this by mapping over an array and inserting the page number for each slide.

Voila! You now have a beautiful carousel. Carousels are incredibly useful and popular, especially for freelance work and e-commerce projects.

Shadcn UI's Carousel component will save you a ton of time, and it even provides smooth dragging and momentum for a seamless user experience.

Drawer Component

Next on the list is the Drawer component. The Drawer component is primarily designed for mobile devices, and it looks absolutely stunning.

You can create a basic implementation by defining a trigger (e.g., a button) and the content that should appear inside the drawer.

The header section allows you to include a title and description, and you can place any React component or content you like within the drawer.

What's more, closing the drawer is a breeze. You can use the included footer button, or simply swipe it down with touch gestures. The momentum-based behavior gives it a native feel on mobile devices.

It's worth noting that the Drawer component works great on desktop too, but it really shines on mobile. It's sleek, and intuitive. Just check out the default content in the documentation, it looks amazing! 😍

Resizable Component

Third on the lineup is the Resizable component. Although it's built for React applications, regardless of whether your project is in React or not, this component is incredibly useful.

Resizable panels within a grid layout can be easily achieved using the main component's direction prop. You can choose between horizontal or vertical resizing in a fully type-safe manner.

Additionally, you can have individual resizable panels and control the placement of handles using the resizable handle component. It's slick, efficient, and eliminates the need for janky custom implementations.

Pagination and Toast Notification Components

Now, let's talk about the remaining two components: Pagination and Toast Notification. Although not as groundbreaking as the previous ones, they are still notable additions to the library. The Pagination component provides a neat way to handle pagination, and the Toast Notification component has been a popular separate component for quite some time.

Shadcn UI now includes both of them, which brings more convenience and allows for a unified styling experience.

Unified Styling Experience

One of the most significant values of this Shadcn UI update is the unified styling. Previously, each component had its own styling and required some extra effort to make them visually consistent with the rest of your UI library.

However, with the latest update, Shadcn UI introduces a distinct and clean default style that unifies all five components. Now, when you initialize your project or manually install these components, they will seamlessly blend with each other and look amazing out of the box! No more hassle of tweaking and matching styles—it's all taken care of for you by our fav shadcn library.

That's It!

I hope you're as excited about these five new Shadcn UI components as I am! They truly enhance your React projects and streamline your development process.

Thats it for today. Till then!

Happy Coding!