Shadcn/UI Just got better!

Shihaab — Mon, 02 Jun 2025 12:27:32 +0000

This Jan we got Tailwind v4 and now shadcn/ui officially supports tailwind v4.

Tailwind CSS v4.0 introduces several significant enhancements aimed at improving performance and developer experience:

High-Performance Engine: Full builds are up to 5x faster, and incremental builds are over 100x faster.
Modern Web Features: Utilizes native cascade layers, registered custom properties and color-mix() for advanced styling capabilities.
Simplified Installation: Requires fewer dependencies and offers zero configuration with a single line of code in your CSS file.
CSS-First Configuration: Customization is now done directly in CSS, moving away from JavaScript configuration files.

Shadcn UI has been updated to fully support Tailwind CSS v4.0, incorporating the following changes:

CLI Support: The CLI can now initialize projects with Tailwind v4.
Updated New York Style: The site now uses the upgraded new-york components.
Component Updates: All components have been updated for compatibility with Tailwind v4 and React 19. ( you won't get the React 19 warning anymore :) )
Theming Enhancements: Full support for the new theme directive, facilitating easier theming and customization.

And if you are not using yet, these are some free tools (not mine 😊) for shadcn that are just too good not to mention :

Shadcn Form - Instant forms with premade components and auto validation.
Tweakcn- Customizable shadcn/ui themes.
Motion Primitives - Animated components that go really well with shadcn/ui.

Hope this helps for your next project with shadcn/ui 😄!

🚀 3 ways to make your product screenshots scroll-stopping 🔥(and get more clicks)

Shihaab — Sat, 24 May 2025 10:23:03 +0000

Hey I'm currently building DropSnap
It's a small tool that helps you create beautiful product screenshots fast!

So, from all the designs I have analyzed here are 3 quick, proven ways to make your screenshots scroll-stopping 👇

✅ 1. ONE FEATURE AT A TIME
Zoom in on the key feature or outcome. Make it easy to see why your product matters at a glance.

✅ 2. MAKE THE BG STAND-OUT
Bright color? Gradient? The background sets the tone — don’t let it be boring white unless that’s intentional.

✅ 3. ONE LINE BUT BOLD

Most people scroll fast. A short headline or label over your screenshot instantly tells them what your product does. Think:
💬 “1-click invoice generator”
💬 “Chat with your docs, instantly”
💬 “Auto-enhanced mockup — no designer needed”

(Pro Tip ✨: GRAB THE PRE-LAUNCH SALE at DropSnap)

DEV Community: Shihaab

Shadcn/UI Just got better!

🚀 3 ways to make your product screenshots scroll-stopping 🔥(and get more clicks)