Makerkit 2.13.0: Components Showcase, Next.js 15.5 & Advanced Data Tables

We're excited to announce MakerKit 2.13.0, packed with powerful new features that enhance both developer experience and application functionality.

This release focuses on improving component development workflows, upgrading to the latest Next.js capabilities, and bringing advanced table functionality from Supamode directly into the core SaaS kit.

🎨 New Components Showcase in Dev Tools

The standout feature of this release is our brand-new Components Showcase built right into the Dev Tool (@apps/dev-tool/app/components/). This interactive playground gives you a comprehensive view of all UI components in the MakerKit ecosystem.

What's Included

• 35+ Interactive Component Stories - From basic inputs and buttons to complex data tables and charts
• Live Code Examples - See props, usage patterns, and variations in real-time
• Categorized Organization - Components organized by function: Forms, Feedback, Layout, Data, Navigation, and more
• Dynamic Documentation - Each component includes description, status, source file location, and available props
• Responsive Design - Test components across different screen sizes and themes

Key Categories & Components

Forms & Input Controls

• Input, Select, Switch, Checkbox, Radio Group
• Calendar, OTP Input, File Uploader
• Form validation with React Hook Form integration

Data Display & Visualization

• Enhanced Data Tables with sorting, filtering, and pagination
• Charts built on Recharts
• Progress indicators and loading states

Feedback & Interaction

• Alerts, Dialogs, Tooltips
• Toast notifications with Sonner
• Loading overlays and skeleton states

Navigation & Layout

• Breadcrumbs, Tabs, Navigation menus
• Cards, Badges, and layout containers

This showcase serves as both documentation and testing ground, making it easier to explore components, understand their capabilities, and integrate them into your applications.

⚡ Next.js 15.5 Upgrade

We've upgraded to Next.js 15.5, bringing significant performance improvements and new capabilities to your SaaS applications.

Key Next.js 15.5 Improvements

Turbopack Builds (Beta)

• Production builds now support Turbopack for faster build times
• Demonstrated performance improvements across different project sizes
• Battle-tested on major Vercel products serving over 1.2 billion requests

Node.js Middleware (Stable)

• Full Node.js runtime support in middleware
• Access to complete Node.js APIs and npm packages
• Enables more complex authentication and routing logic

Enhanced TypeScript Support

• Typed routes with compile-time type safety
• Automatic route export validation
• New route props helpers with global type generation

Future-Proofing

• Preparation for Next.js 16 with deprecation notices
• Migration guidance for upcoming changes
• Continued compatibility with existing MakerKit patterns

📊 Advanced Data Tables from Supamode

One of the most requested features has been the advanced table functionality from Supamode. We're excited to bring these powerful table features directly into the core MakerKit SaaS kit.

New Table Features

Column Management

• Column Pinning - Pin important columns to left or right sides
• Column Visibility - Show/hide columns dynamically with user preferences
• Resizable Columns - Users can adjust column widths to their needs

Enhanced User Experience

• Sticky Headers & Footers - Keep navigation visible during scrolling
• Advanced Row Selection - Multi-select with keyboard shortcuts
• Enhanced Filtering - Per-column filtering with various input types
• Sorting & Pagination - Built-in sorting with server-side pagination support

Developer Experience

• Type-Safe Columns - Full TypeScript support with proper column definitions
• Flexible Rendering - Custom cell renderers and row components
• State Management - Comprehensive hooks for managing table state
• Performance Optimized - Built on TanStack Table for excellent performance

🚀 Getting Started

To upgrade to MakerKit 2.13.0:

Pull the latest changes

First, pull the latest changes from the upstream repository and fix any conflicts.

git pull upstream main

Update your dependencies

Update your dependencies to the latest version.

pnpm i

Explore the Components Showcase

pnpm --filter dev-tool dev

Then visit http://localhost:3010/components

Try the Enhanced Data Tables

Import from @kit/ui/enhanced-data-table and explore the new features.

Leverage Next.js 15.5

Your existing code continues to work, but you can now take advantage of Turbopack builds and enhanced TypeScript support

🔄 Migration Notes

This release is backward compatible, but we recommend:

• Testing your applications with the new Next.js 15.5 features
• Exploring the Components Showcase to understand all available UI components
• Gradually migrating from basic data tables to enhanced tables where advanced features would benefit your users

What's Next

This release represents a significant step forward in developer experience and application capabilities. The Components Showcase makes it easier than ever to build consistent, beautiful interfaces, while the enhanced data tables provide enterprise-grade functionality out of the box.

Stay tuned for more exciting features in upcoming releases, and as always, we'd love to hear your feedback and see what you build with these new capabilities!