Changelog

July 2025 - Major Overhaul

We've completely overhauled Badtz UI Pro with some of the biggest changes since launch. This is a massive update that touches every part of the codebase.

Tailwind v4 Migration

We've migrated to Tailwind v4 with full support for the new @theme directive and inline configuration. This unlocks better performance and a more intuitive theming experience.

The new setup is cleaner and more powerful:

Copy@theme inline {
  --color-background: oklch(1 0 0);
  --color-foreground: oklch(0.145 0 0);
  --color-primary: oklch(0.205 0 0);
  --color-primary-foreground: oklch(0.985 0 0);
}

All existing projects will continue to work, but new projects get the full Tailwind v4 experience out of the box.

New Theming Convention

We've introduced a new theming system using CSS variables and semantic color utilities. Say goodbye to hardcoded colors like bg-black and text-white.

Before:

Copy<div className="bg-black text-white border-gray-200" />

After:

Copy<div className="bg-background text-foreground border-border" />

This new convention makes theming effortless. Change your CSS variables once, and every component adapts automatically. The system includes semantic colors for backgrounds, foregrounds, accents, and interactive states.

See the complete theming guide for all available variables and conventions.

Motion Migration

We've migrated from framer-motion to the new Motion library for better performance and smaller bundle sizes.

Before:

Copyimport { motion } from "framer-motion"
 
<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.5 }}
>
  Content
</motion.div>

After:

Copyimport { motion } from "motion/react"
 
<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.5 }}
>
  Content
</motion.div>

All animations are now powered by the new Motion library, resulting in 40% smaller bundle sizes and improved performance across all devices.

Server Components Optimization

We've optimized 90% of our blocks to use React Server Components by default. This means better SEO, faster initial page loads, and improved Core Web Vitals.

Key improvements:

• Faster rendering - Components render on the server
• Better SEO - Search engines can index content immediately
• Reduced JavaScript bundle - Less client-side code to download
• Improved accessibility - Better support for screen readers

Components that need interactivity are clearly marked with "use client" and are optimized for minimal JavaScript footprint.

Complete Visual Redesign

We've completely redesigned the entire site with a focus on clarity and user experience:

• New navigation - Cleaner, more intuitive layout
• Improved block pages - Better organization and preview experience
• Enhanced documentation - Clearer examples and better code formatting
• Mobile-first design - Optimized for all screen sizes
• Better accessibility - ARIA labels, keyboard navigation, and screen reader support

Theme Preview System

We've introduced a Theme Preview System that lets you see how blocks look across different color schemes in real-time.

Copy// Preview any block with different themes
<ThemePreview themes={["neutral", "slate", "stone", "zinc"]}>
  <YourBlock />
</ThemePreview>

This system works with all our semantic color variables, so you can instantly see how your components adapt to different color schemes without changing any code.

Features:

• Real-time preview - See changes instantly
• Multiple themes - Preview 5+ color schemes
• Component isolation - Test individual components
• Export ready - Copy theme configurations directly

Performance Improvements

This update brings significant performance improvements across the board:

• 60% faster build times with Tailwind v4
• 40% smaller JavaScript bundles with Motion migration
• 50% faster page loads with server components
• Improved lighthouse scores across all metrics

Migration Guide

Updating to the new version is straightforward:

Copy- import { motion } from "framer-motion"
+ import { motion } from "motion/react"

Copy- className="bg-white text-black border-gray-200"
+ className="bg-background text-foreground border-border"

Copy@theme inline {
  --color-background: oklch(1 0 0);
  --color-foreground: oklch(0.145 0 0);
  /* ... other variables */
}

What's Next

This foundation unlocks a lot of exciting features we're working on:

• Massive blocks expansion - We're adding dozens of new blocks across all categories
• New template launch - A complete new template is coming in July 2025
• AI-powered theming - Generate color schemes automatically
• Component variants - Multiple visual styles for each component
• Advanced animations - More sophisticated motion patterns
• Better accessibility - Enhanced screen reader support

We're just getting started. More updates coming soon.

This has been our biggest update yet. Every single component has been touched, optimized, and improved. The result is a more performant, accessible, and beautiful component library that's ready for the future.

Thank you to everyone who provided feedback and helped shape this update.