Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Error blocks

Pro

Missing Dependency Error Block for Ark UI

A full-screen page for a missing package: the error line in a copy strip, four install tabs with real Copy buttons, the package card and three steps for after installing.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Name the package and hand over the command, with this missing dependency error for React with Ark UI. It's a whole screen with the page's rails and one band across it. The headline, one sentence and the Shine Button Open the docs come first, the only colored control. Under them the line the build printed sits in a strip with a heavy edge and a Copy Button. In an inset frame, four Tabs for npm, yarn, pnpm and bun each hold the install command in a themed numbered window whose Copy button really copies it. Two cells on a shared hairline hold the package card, with its name, version and one line, and the three steps to take after installing. The band's rules and the frame come from Guides, and the entrance is CSS only. For a UI library, a CLI or any docs site that tells people to install something.

FAQ

What is real here, and what stays local?

The Copy buttons are real: each writes its text to the clipboard and the status line says what was copied. Nothing is installed or built. The package is made up for the demo and says so on its card, so swap the name, version and commands in PACKAGE, VERSION and MANAGERS for yours.

Is the package name safe to run?

No, and that is why it is marked as an example: a name that does not exist on a registry can be registered by anyone, so never paste a command from a demo into a real project. When you use the block, point it at a package you publish.

Does the page remember which tool I picked?

Only while it is open: the chosen tab is state in the page, and the status line says which command is showing. The tabs are a real tab list, so the arrow keys move between them, and each command window has its own tab stop and name.

Are the commands correct for each tool?

They are the usual forms: install for npm, add for yarn, pnpm and bun. If your package needs a flag or a peer dependency, add it to the command string; the window, the Copy button and the status all read the same string.

Does it work in a right-to-left page?

Commands and the error line stay left to right inside their windows and strips. The headline, the sentences and the steps follow the page direction, with each sentence isolated so a package name or a period does not jump.

What changes on a phone?

The headline and the button come first, then the error strip and the install tabs, then the package card and the steps stacked. The tabs and command windows scroll sideways inside themselves if a command is long; the page never does.

All 100 error blocks