Choose and use a block

Try the preview

A block page answers three questions before you install anything:

• Does it fit?Try the preview at desktop, tablet, and mobile widths. Check light and dark themes when both are available.
• What must my app supply?Read the implementation guide for data, actions, states, accessibility, packages, and compatibility.
• How do I install it?Copy the shadcn command or install URL, or open the action for your coding agent.

Read the implementation guide

Every installable block has a guide below its preview. It shows the main file, supporting files, packages, data, actions, UI states, responsive behavior, and accessibility checks for that block.

• The access label says Free or is included in your current plan.
• The block supports your React, Tailwind, and framework versions.
• You know which demo data and actions must be replaced.
• Your current work is committed before any existing file is replaced.

For a first install, use --dry-run to list the planned files. If shadcn reports a conflict, stop and inspect it rather than accepting every overwrite.

Install safely

Commit your current work, then preview the file plan before accepting changes.

1. 1
   Preview the plan

   Add --dry-run to the block command to see which files and packages it needs.

2. 2
   Check existing files

   If a target already exists, add --diff and review it before accepting an overwrite.

3. 3
   Install

   Run the exact command from the block page with the package manager used by your app.

Finish the screen

Replace the examples before you judge the final layout. Real names, long labels, permission differences, failed requests, and empty results expose problems that placeholder content does not.

• Connect each visible action to your application.
• Implement every state listed on the block page.
• Check mobile, tablet, desktop, light mode, and dark mode.
• Run keyboard and screen-reader checks with realistic content.