#shadcn

Agents change the math on big bang migrations

Các kiến trúc sư phần mềm luôn phải nghĩ đến tương lai: làm sao để nâng cấp code hiện tại mà không ảnh hưởng tốc độ phát triển, doanh nghiệp hay gây ra sự cố đột ngột.

Lập trình viên nên đọc bài này để hiểu cách tích hợp các hệ thống AI/agent vào dự án hiện tại không chỉ là công cụ tự động hóa mà còn là cách mới để tối ưu hóa quy trình phát triển, giảm thiểu rủi ro và mở rộng khả năng thích ứng trong tương lai mà không cần thay đổi cơ bản hệ thống hiện có.

How to Build an Open Source SaaS Landing Page Template with shadcn/ui

Hầu hết các landing page SaaS đều có các phần cốt lõi giống nhau như hero, social proof, features, pricing, FAQ và footer. Thay vì xây dựng lại từ đầu cho mỗi dự án, nhà phát triển có thể sử dụng template sẵn có với shadcn/ui để tiết kiệm thời gian.

Lập trình viên nên đọc bài này để tiết kiệm thời gian và công sức tái tạo lại mẫu trang landing page SaaS phổ biến từ đầu, thay vào đó học cách xây dựng một template mở nguồn với UI/UX được thiết kế sẵn bằng shadcn/ui, giúp tối ưu hóa quá trình phát triển và tái sử dụng cho nhiều dự án tương tự.

A Guide to Modern React Form Architecture: TanStack Form + Zod + Shadcn

Building production-grade forms in React can be a painful experience. It's one of the parts of front-end engineering that most developers are uncomfortable with. Usually, you'll start with a simple co

Gsxui – Shadcn-style components for Go

Gsxui cung cấp các component UI theo phong cách shadcn dành cho framework Go (gsx), hỗ trợ render phía server, styling bằng Tailwind CSS và có thể cài đặt dễ dàng qua CLI. Người dùng có thể sao chép-dán code, sở hữu hoàn toàn và tận dụng kiểm tra kiểu dữ liệu.

Nếu bạn đang phát triển ứng dụng Go với giao diện người dùng cần nhanh chóng triển khai và bảo trì, gsxui sẽ giúp bạn tiết kiệm thời gian và công sức với các thành phần UI kiểu copy-paste, hỗ trợ kiểm tra kiểu dáng và server-rendered, đồng thời tích hợp Tailwind CSS để tạo UI đẹp mà không cần viết nhiều mã CSS thủ công.

One way ticket to TypeScript hell... and back

Cuộc tranh cãi dai dẳng giữa Angular và các framework khác, hiện tượng "slopsquatting" trong lập trình, cùng công cụ mới shadcn giúp đánh giá mức độ "sắc bén" trong code TypeScript.

Lập trình viên cần đọc bài này để tránh rơi vào rắc rối về TypeScript khi gặp các vấn đề phát sinh từ sự tương tác phức tạp giữa các thư viện JavaScript và TypeScript, như slopsquatting, và hiểu cách ứng dụng công cụ mới từ shadcn để tối ưu hóa chất lượng mã mà không phải bị rơi vào các cuộc chiến Angular cũ.

Issue #484: The absolute state of 'state management' — React Status

React Status Issue #484: The absolute state of 'state management'

Issue #483: Pete Hunt is back to lead Next.js — React Status

Pete Hunt trở lại dẫn dắt dự án Next.js sau thời gian vắng bóng.

Lập trình viên cần theo dõi để hiểu cách phát triển Next.js được định hướng bởi một trong những nhà thiết kế gốc của React, giúp cập nhật công nghệ mới và tối ưu hóa hiệu suất cho ứng dụng web hiện đại.

brainless

Claude Code, Codex, and Grok interfaces as shadcn components.

Symfony UX 3.3.0 released (Symfony Blog)

Bản phát hành Symfony UX 3.3.0 bổ sung hỗ trợ Symfony Reprise vào StimulusBundle, giới thiệu hai component mới từ Shadcn là Sonner và Combobox, cùng cải tiến trình cài đặt Toolkit thân thiện hơn.

Lập trình viên phát triển ứng dụng web cần tham khảo để tìm hiểu cách tích hợp Symfony Reprise vào StimulusBundle, giúp cải thiện hiệu suất giao diện và quản lý trạng thái ứng dụng một cách hiệu quả hơn.

How to Use Shadcn Select Components in React & Next.js Projects

Hướng dẫn tích hợp Shadcn Select vào dự án React/Next.js qua CLI hoặc cài đặt thủ công, kèm theo 3 ví dụ thực tế: select cơ bản, timezone cuộn nhóm, và multi-select đầy đủ tính năng (tìm kiếm async, điều hướng bàn phím, tạo option, nhóm, trạng thái tải) với code TypeScript đầy đủ.

Lập trình viên Next.js cần đọc bài này để nhanh chóng tích hợp và tối ưu hóa các thành phần Select từ shadcn/ui vào dự án, tiết kiệm thời gian phát triển với các tính năng như tìm kiếm async, nhóm dữ liệu và điều khiển keyboard—phù hợp với nhu cầu hiện đại của ứng dụng web.

How to Build a Shadcn Sheet Component in React: Cart and Filter Panel Examples

A hands-on guide to building two production-ready slide-in Sheet components using shadcn/ui and Base UI primitives via the Shadcn Space registry. Covers a Shopping Cart Sheet with quantity controls, item removal, and live subtotal, plus a Filter Panel Sheet with multi-select checkboxes, a price range slider, and star ratings. Key patterns explained include deriving computed values (totals, active filter counts) from state rather than tracking them separately, the fixed-header/scrollable-middle/fixed-footer layout using flex and overflow-y-auto, the Base UI render prop pattern instead of asChild, and UX decisions like keeping the panel open on Clear All but closing it on Apply Filters.

Issue #482: A look into ChatGPT's React stack — React Status

React Status issue #482 is a curated newsletter covering the React ecosystem, including a look at ChatGPT's React stack, updates around Base UI and shadcn, React.dev docs contributions, and various tools and libraries from the OpenJS Foundation, Cloudflare, VoidZero, and others.

This Week In React #289: Base UI, shadcn, Vinext, Next.js WS, ChatGPT, Takumi, Shaders, Unlayer Elements

Weekly roundup covering React and React Native ecosystem news. Key highlights: Base UI becomes the default headless library in shadcn, replacing Radix; Vinext 1.0 Beta brings Next.js on Vite from Cloudflare; React Native 0.87 RC removes many deprecated APIs in a major cleanup; React Navigation 8 progress report introduces Suspense-enabled navigation and data loaders. TypeScript 7.0 officially launches with up to 16x faster type-checking via a Go port. ES2026 is officially approved by Ecma International, and HTTP gains a new QUERY method as an IETF Proposed Standard. Numerous library releases across both ecosystems are also covered.

How to Build Production-Ready Card Components with shadcn/ui

A step-by-step guide to building four production-ready card components using shadcn/ui and Shadcn Space: a Preview Card with group hover image effects, an Analytics Card with typed TypeScript props and conditional badge colors, a Statistics Card with a responsive four-column grid, and an Ecommerce Product Variant Card with wishlist toggle, size selector, and CSS ripple animation. Each card is installed via a single CLI command and covers practical Tailwind patterns including named group hover scopes, the cn() utility, CSS logical properties, and hydration warning suppression in Next.js.

How to Build an Animated Badge Component with shadcn/ui

A step-by-step guide to building an animated badge component using shadcn/ui, Tailwind CSS, and Framer Motion (motion/react). Covers installing a pre-built badge from the Shadcn Space registry via CLI, then walks through wrapping the Badge component with motion.create(), adding layered radial-gradient glow effects, animating a check icon with easeOutBack spring physics, and staggering individual letter animations using Variants and custom index values. Includes a customization example showing how to create a blue 'Verified' variant by swapping colors and icons.