Learn how to install SmoothUI components using the SmoothUI CLI, shadcn CLI, or manual installation methods.

Framework Integration Guides

SmoothUI works with any React-compatible framework. Check out the dedicated setup guides:

Vite + React — The simplest setup for client-side React apps
Astro — Islands architecture with selective hydration
Remix — Full-stack SSR with React Router v7
TanStack Start — Type-safe full-stack with streaming SSR

Installation (SmoothUI CLI)

The SmoothUI CLI provides an interactive way to browse and install components with automatic dependency resolution.

Base UI by default

Owned SmoothUI primitives (button, dialog, checkbox, …) ship on Base UI by default (/r/{name}.json and base-* styles). Radix projects set a non-base-* style and point at https://smoothui.dev/r/{style}/{name}.json. See Primitives.

Add Components

pnpm dlx smoothui-cli@latest add siri-orb

Add Multiple Components

pnpm dlx smoothui-cli@latest add siri-orb rich-popover float-input

Interactive Mode

pnpm dlx smoothui-cli@latest add

List Available Components

pnpm dlx smoothui-cli@latest list

Interactive Mode

Run the add command without arguments to launch an interactive picker. Search and browse components by category, then select multiple components to install at once.

Installation (shadcn Registry)

SmoothUI is an official shadcn registry. Use the @smoothui namespace. Owned primitives ship on Base UI by default; Radix projects should use the style-aware registry URL.

{
  "style": "base-nova",
  "registries": {
    "@smoothui": "https://smoothui.dev/r/{style}/{name}.json"
  }
}

Base by default

Plain @smoothui/... installs get the Base twin. Set a non-base-* style plus the style-aware URL above for Radix — see Primitives.

Install Components

Install SmoothUI components using the shadcn CLI with the @smoothui namespace:

pnpm dlx shadcn@latest add @smoothui/siri-orb

Install Multiple Components

pnpm dlx shadcn@latest add @smoothui/rich-popover @smoothui/float-input

Use Components

Import and use the installed components in your React application:

import { SiriOrb } from "@/components/smoothui/ui/SiriOrb"
import { RichPopover } from "@/components/smoothui/ui/RichPopover"

export default function App() {
  return (
    <div>
      <SiriOrb size="200px" />
      <RichPopover />
    </div>
  )
}

Installation

On this page