# Makerkit 2.13.0: Components Showcase & Data Tables

> Next.js 15.5 upgrade, Component Showcase, enhanced Table component directly from Supamode to the SaaS Kit

*Published: 2025-08-21*
*Canonical: https://makerkit.dev/blog/changelog/makerkit-2.13.0-update*

---

We're excited to announce [MakerKit](https://makerkit.dev/ai-saas-starter) 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.

{% img src="/images/posts/component-showcase-data-table.webp" alt="Makerkit 2.13.0 Components Showcase" width="1000" height="1000" /%}

### 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.

{% img src="/images/posts/component-showcase-empty-state.webp" alt="Makerkit 2.13.0 Components Showcase Empty State" width="1000" height="1000" /%}

## ⚡ 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.

```bash
git pull upstream main
```

### Update your dependencies

Update your dependencies to the latest version.

```bash
pnpm i
```

### Explore the Components Showcase

```bash
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!