Installation
Learn how to install SmoothUI components using the SmoothUI CLI, shadcn CLI, or manual installation methods.
Last updated: March 7, 2026
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.
Add Components
pnpm dlx smoothui-cli@latest add siri-orbAdd Multiple Components
pnpm dlx smoothui-cli@latest add siri-orb rich-popover animated-inputInteractive Mode
pnpm dlx smoothui-cli@latest addList Available Components
pnpm dlx smoothui-cli@latest listInteractive 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, so you can install components directly without any configuration. Just use the @smoothui namespace.
No Configuration Required
Since SmoothUI is an official registry, you don't need to add anything to your components.json file. Just install components directly!
Install Components
Install SmoothUI components using the shadcn CLI with the @smoothui namespace:
pnpm dlx shadcn@latest add @smoothui/siri-orbInstall Multiple Components
pnpm dlx shadcn@latest add @smoothui/rich-popover @smoothui/animated-inputUse 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>
)
}Introduction
SmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, Motion, and GSAP.
SmoothUI vs shadcn/ui
Looking for a shadcn/ui alternative with animations? SmoothUI adds smooth Motion and GSAP animations to the shadcn ecosystem. Compare features and see why developers choose SmoothUI for animated React components.