Shadcn Components Animated with Motion (and More!)

Elliot Sutton — Mon, 31 Mar 2025 10:33:56 +0000

Are you looking to supercharge your Shadcn components with fluid, modern animations?

Animate UI is an open-source distribution that animates Shadcn/ui with Motion—while retaining all the power and accessibility of Radix primitives.

Shadcn Animated Components

Animate UI elevates your Shadcn components by bringing smooth transitions and engaging micro-interactions to every element. Whether you’re working with an Accordion, Checkbox, or Dialog, each component feels more intuitive and responsive. The collection is constantly growing, and all components can be copied, customized, and dropped straight into your project.

Beyond Shadcn

In addition to Radix-based primitives, Animate UI offers a variety of other animated elements like text effects, background transitions, and more. These additions help you maintain a cohesive design language across your entire interface, creating a polished, on-trend experience for users.

A Distribution, Not a Library

Animate UI follows the Shadcn CLI approach, meaning you copy source files directly into your codebase rather than installing a package. This gives you full ownership—no hidden overrides or rigid constraints. It also integrates smoothly with other component distributions like Shadcn, Magic UI, and more, enhancing rather than replacing your existing setup.

Get Started

Ready to see your UI come alive?

Visit animate-ui.com to explore the available components and discover how Animate UI can transform your React projects. Whether you love Shadcn or simply want top-notch animations, Animate UI offers a flexible, easy-to-adapt solution that makes every interaction stand out!

🚀 A Better Way to Manage Middlewares in Next.js

Elliot Sutton — Tue, 18 Feb 2025 20:46:13 +0000

📌 Why Rethink Middleware Management?

Next.js provides a simple and efficient middleware system, but it comes with a major limitation: there is only one middleware.ts file for the entire application.

⚠️ Limitations of Next.js Middleware

❌ A single global middleware → Impossible to have multiple independent middlewares.
❌ Growing complexity → All logic must be merged into a single file.
❌ Difficulties integrating some libraries → Hard to use multiple external middlewares without manual merging.

This is where Next MW comes in.

👉 Next MW is a lightweight and flexible library that allows you to compose multiple middlewares and execute them independently and sequentially, while maintaining full compatibility with Next.js.

Instead of struggling with a bloated middleware.ts file, you can define your middlewares separately and combine them cleanly.

✅ Next MW: Modular and Flexible Middleware Management

With Next MW, you can:

✅ Define multiple independent middlewares, each with its own configuration.
✅ Execute them sequentially, without hacks or workarounds.
✅ Maintain full compatibility with Next.js and its matchers.

🚀 Quick Installation

Install Next MW with your preferred package manager:

npm install next-mw
# or
yarn add next-mw
# or
pnpm add next-mw

🔔 Note: Requires Next.js >=13.1.0.

🛠️ Example Use Case

This example illustrates how Next MW allows you to organize multiple middlewares cleanly in a Next.js project by combining NextAuth v5 and next-intl.

📁 File Organization

Instead of keeping everything in middleware.ts, you can structure your files like this:

📂 middlewares
 ├── auth.ts         (NextAuth v5 middleware)
 ├── next-intl.ts    (next-intl middleware)
📄 middleware.ts

Then, in middleware.ts, simply compose them:

// middleware.ts
import { middlewares } from 'next-mw';

import * as nextIntl from './middlewares/next-intl';
import * as authMiddleware from './middlewares/auth';

export const middleware = middlewares(nextIntl, authMiddleware);

🏗️ Illustrative Middlewares

Here are two commonly used middlewares in a Next.js project, which Next MW allows you to neatly combine.

🔑 NextAuth v5 Middleware

// middlewares/auth.ts
import authConfig from '../auth.config';
import NextAuth from 'next-auth';

export const { auth: middleware } = NextAuth(authConfig);

🌍 next-intl Middleware

// middlewares/next-intl.ts
import createMiddleware from 'next-intl/middleware';
import { routing } from '../i18n/routing';

export const middleware = createMiddleware(routing);

export const config = {
  matcher: ['/', '/(fr|en)/:path*'],
};

🎯 Why Use Next MW?

✅ Full modularity → Each middleware remains independent.
✅ Sequential execution → Maintains a controlled execution order.
✅ Fully compatible with Next.js → Uses the native system.
✅ Easy integration → No hacks or complex setups required.
✅ Works with both App and Pages directories → Universal compatibility.

With Next MW, middleware management becomes cleaner, more flexible, and easier to maintain.

📌 Useful Links

📦 NPM Package
🖥️ GitHub Repository
🌍 Documentation & Website

Try Next MW today and simplify your Next.js middleware management! 🚀

🗨️ Your Feedback Matters!

Do you use multiple middlewares in your Next.js project? Would Next MW help you? Share your experience in the comments! 💬

DEV Community: Elliot Sutton