skills.rest
Impertio-Studio
Impertio-StudioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

shadcn-syntax-button

Guide shadcn ui Button implementation with variant, size, and asChild composition.

Updated May 19, 2026
Search Tags:#debugging#shadcn ui#rsc#asChild#radix slot#buttonVariants#tailwind v4 ring
One-click install
npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-syntax-button
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-syntax-button
Source: https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package/tree/main/skills/source/shadcn-syntax/shadcn-syntax-button
Command: npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-syntax-button

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents common, high-friction mistakes when adding or debugging the shadcn ui Button—especially around variants, sizes, asChild behavior, icon-only buttons, and Tailwind v3 vs v4 focus-ring differences.

Core Features & Use Cases

  • Variant- and size-correct Button usage: choose the right variant (default/destructive/outline/secondary/ghost/link) and size (default/xs/sm/lg/icon/icon-xs/icon-sm/icon-lg) based on intent, not vibes.
  • asChild Slot pattern mastery: correctly wrap Next.js Link, react-router Link, or ref-forwarding custom components using Slot.Root with exactly one child element.
  • Icon, loading, and accessibility recipes: build icon-only buttons with aria-label, create loading/spinner buttons that rely on disabled styling, and keep RSC boundaries safe (no unnecessary "use client").
  • Debugging guardrails for unstyled/crashing Buttons: diagnose issues like multiple children inside asChild, non-ref-forwarding children, incorrect icon sizing, className being mishandled, or focus-ring mismatches.

Quick Start

Generate a corrected shadcn ui Button implementation for a Next.js Link navigation using asChild, selecting the appropriate variant/size, ensuring ref compatibility, and matching the correct Tailwind v3 or v4 focus-ring behavior.

Frequently Asked Questions about shadcn-syntax-button

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does my shadcn ui Button render unstyled or crash when using asChild with Next.js Link?▼

Your shadcn ui Button likely crashes because the asChild Slot pattern requires exactly one child element and a ref-forwarding component. Pass a single Next.js Link directly inside Button and ensure it forwards refs to prevent rendering failures.

How do I fix shadcn ui Button focus ring styling differences in Tailwind v4?▼

To fix shadcn ui Button focus ring styling in Tailwind v4, apply the correct focus-ring rules specific to v4. Tailwind v4 changes focus ring utilities, so verifying your buttonVariants matches the v4 ring syntax resolves visual mismatches.

Do I need to add a "use client" directive to my shadcn ui Button for it to work in RSC?▼

No, you do not add a "use client" directive to the shadcn ui Button itself to preserve RSC safety. Keep the Button server-compatible and only add the directive to interactive client components if strictly necessary for event handling.

How do I properly type variants and sizes when debugging a shadcn ui Button?▼

When debugging a shadcn ui Button, properly type variants and sizes using VariantProps<typeof buttonVariants>. This ensures you select the correct variant and size based on intent, preventing className merging issues via cn or twMerge.

What is the correct way to build an accessible icon-only shadcn ui Button?▼

The correct way to build an accessible icon-only shadcn ui Button is to use the appropriate icon size variant, such as size="icon", and include an aria-label. This guarantees the button is accessible while maintaining proper visual sizing.

Can I use shadcn ui Button asChild pattern to wrap custom components that don't forward refs?▼

No, you cannot use the shadcn ui Button asChild pattern to wrap custom components that don't forward refs. The Radix Slot Root invariant requires the child element to accept and forward refs, otherwise the composition will fail.

Related Skills

Explore More Software Engineering Skills→
mbepsmbeps

migrating-radix-to-base-ui

Migrate Shadcn UI components from Radix UI to Base UI and Tailwind CSS v4.

Community
Advanced
Impertio-StudioImpertio-Studio

shadcn-agents-cva-validator

Validate shadcn cva components with a seven-check audit.

Official
Advanced
zaid-khan-codezaid-khan-code
3

shadcn-code-review

Review shadcn/ui React components for CVA, composition, and accessibility issues.

Community
Intermediate
anderskevanderskev
75

shadcn-code-review

Review shadcn/ui React components for CVA patterns, asChild composition, accessibility states, and data-slot usage.

Community
Intermediate