A

Ash

Full-stack developer and the maker behind ShadcnDeck. Writes practical guides on React, Next.js, Tailwind, and shadcn/ui, the things he wishes existed when he started.

@AshvinUI @ashvinui

Posts by Ash21

shadcn charts: 11 creative variants with live preview built on Recharts

shadcn Charts: 11 Creative Variants with Live Code 2026

shadcn charts are built on Recharts and themed with your design tokens. Get 11 variants with live previews and full code: animated area, KPI cards, donut, and more.

Updated Jul 11, 2026

shadcn checkbox component: 12 variants with live preview and base UI support

shadcn Checkbox: 12 Variants with Live Preview + Base UI 2026

The shadcn checkbox is an accessible Radix and Base UI primitive. Get 12 variants with live previews and full code: animated, card, avatar, and more.

Updated Jul 8, 2026

Radix vs Base UI comparison cover image showing API design, component count, and bundle size differences

Radix vs Base UI: which headless React library should you use in 2026?

Radix vs Base UI compared — API design, bundle size, accessibility, and why shadcn/ui now defaults to Base UI. Code examples included.

Updated Jul 5, 2026

shadcn scroll-fade utility guide cover image

What is the shadcn scroll-fade utility and how do you use it?

Learn how to use the shadcn scroll-fade utility to add scroll-aware edge fades to any container. Full class reference, examples, and tips.

Updated Jun 28, 2026

shadcn Card Component: Examples, Variants & Code (2026)

shadcn Card Component: Examples, Variants & Code (2026)

Complete guide to the shadcn/ui Card component with production-ready code examples: default, image, form, pricing, and animated hover cards — all built with Next.js, TypeScript, and Tailwind CSS.

Updated Jun 27, 2026

15 shadcn Button Examples: Variants, Animations & Base UI Patterns

15 shadcn Button Examples: Variants, Animations & Base UI Patterns

15 real-world shadcn button examples for Next.js 15 — every variant, animated pattern, Base UI snippet, and common mistake. Copy the code and ship faster.

Updated Jun 27, 2026

shadcn/ui Tooltip component guide cover image showing animated tooltip examples on a Next.js dashboard

10 shadcn Tooltip Component Guide: Examples, Variants & Code

Complete guide to the shadcn/ui Tooltip component with 10 working code examples: positioning, keyboard shortcuts, disabled buttons, delay, rich content, avatars, form validation, custom styling, and controlled mode.

Updated Jun 27, 2026

shadcn/ui vs Material UI comparison cover image with the shadcn/ui and Material UI logos side by side

shadcn/ui vs Material UI: which should you use in 2026?

shadcn/ui gives you code ownership and zero runtime. MUI gives you 90+ components and a powerful DataGrid. Here is how to choose.

Updated Jun 27, 2026

How to Build a Landing Page with Next.js and shadcn/ui

How to Build a Landing Page with Next.js and shadcn/ui

Step-by-step guide to building a landing page with Next.js App Router and shadcn/ui — navbar, hero, features grid, testimonials, and CTA. Includes full code for each section and theming tips.

Updated May 29, 2026

16 Best shadcn/ui Projects and Examples to Learn From (2026)

16 Best shadcn/ui Projects and Examples to Learn From (2026)

Real shadcn/ui projects worth studying in 2026 — production open source apps, SaaS starters, block libraries, and dashboards. Verified, current, and re-checked for May 2026.

Updated Jun 2, 2026

12 Best shadcn Avatar Component Libraries (2026)

A practical guide to the best shadcn avatar components — from the official library to animated stacks, Vue ports, and Figma kits. Updated for 2026.

Updated Jun 27, 2026

Mantine vs shadcn/ui: A Developer's Honest Comparison (2026)

Mantine vs shadcn/ui: A Developer's Honest Comparison (2026)

A practical breakdown of Mantine vs shadcn/ui for React developers — covering setup, performance, hooks, AI tooling, and which one actually ships faster.

Updated Jun 27, 2026

17 Best React UI Libraries in 2026 (Ranked by Use Case)

17 Best React UI Libraries in 2026 (Ranked by Use Case)

A practical breakdown of the 17 best React UI libraries in 2026 — from full design systems like MUI and Ant Design to headless primitives and Tailwind-first options like shadcn/ui.

Updated Jun 27, 2026

The Rise of shadcn/ui: How a Side Project Became the Default React UI Stack (2026)

The Rise of shadcn/ui: How a Side Project Became the Default React UI Stack (2026)

shadcn/ui went from a side project to 115,000+ GitHub stars in under three years. Here's why developers chose it, how the ecosystem grew, and where it's heading in 2026.

Updated Jun 27, 2026

15 Free Shadcn UI Landing Page Templates [2026]

15 Free Shadcn UI Landing Page Templates [2026]

Discover the 15 best free shadcn UI landing page templates for 2026 — open-source SaaS, marketing, and portfolio starters built with Next.js, Tailwind CSS, and shadcn/ui. Includes live demos, honest trade-offs, and customization tips.

Updated Jun 27, 2026

shadcn tabs component — 12 patterns for React and Next.js with code examples

shadcn Tabs Component: 12 Patterns for React & Next.js

The shadcn tabs component installs in one CLI command. Browse 12 production-ready patterns for React and Next.js, from vertical tabs to loading states.

Updated Jun 27, 2026

shadcn/ui Select Component: 12 Patterns with Code Examples

shadcn/ui Select Component: 12 Patterns with Code Examples

The shadcn select component installs in one CLI command and builds on Radix UI for full keyboard access. Browse 12 patterns: grouped, icon, async, controlled, and form-integrated selects, with code.

Updated Jun 27, 2026

Shadcn Resizable Sidebar Examples - 11+ Variants & Demos

Shadcn Resizable Sidebar Examples - 11+ Variants & Demos

Build flexible resizable sidebars with 11 production-ready patterns: collapsible panels, persistent width, hover handles, dashboard layouts, IDE interfaces, and email clients.

Updated Mar 8, 2026

Shadcn Chat UI Examples - 10+ Variants & Demos

Shadcn Chat UI Examples - 10+ Variants & Demos

Build chat interfaces with shadcn/ui using 10+ production-ready patterns: message bubbles, typing indicators, timestamps, file attachments, group chats, and read receipts.

Updated Jun 27, 2026

Shadcn Avatar Examples - 11+ Variants & Demos

Explore practical shadcn avatar examples with real UI variants, code snippets, and demos to handle user identity, fallbacks, and layouts in shadcn/ui projects.

Updated Jun 27, 2026

shadcn/ui Accordion Component: 12 Patterns with Code Examples

shadcn/ui Accordion Component: 12 Patterns with Code Examples

The shadcn accordion component installs in one CLI command and builds on Radix UI for full keyboard access. Browse 12 patterns: animated, nested, controlled, icon, and FAQ accordions — with code.

Updated Jun 27, 2026