Skip to content

Installation

Add SureUI to a shadcn/ui project with the shadcn CLI.

SureUI installs into a shadcn/ui project on Base UI, the shadcn default. Projects on Radix aren't supported: the components use Base UI's render prop. If your project doesn't use shadcn yet, run:

npx shadcn@latest init

@sureui is in the shadcn registry index, so the CLI finds it without any setup. Each item includes the confirmation core, so install only the ones you use:

npx shadcn@latest add @sureui/confirm-button

Each component page lists its own command, and blocks install the same way.

SureUI has an agent skill for Claude Code, Cursor, Codex and other agents that read skills. Add it with the skills CLI:

tsx
npx skills add aidankmcalister/sureui

The skill reads your project with shadcn info, picks a control by how hard the action is to take back, and installs it with the shadcn CLI. Ask it to review your code and it lists destructive actions that run on one click. Its rules are in skills/sureui, and llms.txt lists every page.

Every SureUI component takes functions like onConfirm, so in the Next.js App Router, render it from a file that starts with "use client". A Server Component can't pass functions to it, the same as with onClick on a Button. The examples on these pages already start with "use client".

undoToast shows a shadcn toast, so it needs the Toaster in your root layout. Nothing else needs setup.

tsx
import { Toaster } from "@/components/ui/sonner"export default function RootLayout({ children }) {  return (    <html lang="en">      <body>        {children}        <Toaster />      </body>    </html>  )}