Get StartedInstallation

Installation

Get started with SmoothUI by installing components using the shadcn CLI or manual installation methods.

Installation (Official 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:

Terminal

# Install a single component
npx shadcn@latest add @smoothui/siri-orb

# Install multiple components
npx shadcn@latest add @smoothui/rich-popover @smoothui/animated-input

# Install components with dependencies
npx shadcn@latest add @smoothui/scrollable-card-stack

Use Components

Import and use the installed components in your React application:

App.tsx

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>
  )
}

Manual Installation

If you prefer to install components manually, you will need to install the following dependencies:

Terminal

npm install motion tailwindcss lucide-react clsx tailwind-merge

Manual Component Installation

After installing the dependencies, you can manually copy component files from the SmoothUI repository:

  1. Visit the component page on the SmoothUI website
  2. Copy the component code from the code block
  3. Create the component file in your project
  4. Import and use the component in your application