smoothui-cli
Advanced tools
CLI to install SmoothUI components - beautifully designed React components with smooth animations
SmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, and Motion. This project aims to provide developers with a set of reusable UI components that enhance user experience through delightful animations and modern design patterns.
Get started with SmoothUI in just a few steps:
components.json:{
"registries": {
"@smoothui": "https://smoothui.dev/r/{name}.json"
}
}
npx shadcn@latest add @smoothui/siri-orb
import { SiriOrb } from "@/components/smoothui/ui/SiriOrb";
export default function App() {
return <SiriOrb size="200px" />;
}
SmoothUI is fully compatible with the new shadcn CLI v3 namespace system. This is the easiest way to install and manage SmoothUI components.
Add the SmoothUI registry to your components.json file:
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/app/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui"
},
"registries": {
"@smoothui": "https://smoothui.dev/r/{name}.json"
}
}
Install components using the namespace:
# 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
Import and use the installed components:
import { RichPopover } from "@/components/smoothui/ui/RichPopover";
import { SiriOrb } from "@/components/smoothui/ui/SiriOrb";
export default function App() {
return (
<div>
<SiriOrb size="200px" />
<RichPopover />
</div>
);
}
# View all available components
npx shadcn@latest search @smoothui
# View component details before installation
npx shadcn@latest view @smoothui/siri-orb
# Install components
npx shadcn@latest add @smoothui/component-name
If you prefer to install components manually, you can copy the component files directly:
pnpm add motion tailwindcss lucide-react clsx tailwind-merge
Copy component files from the components directory
Set up utilities:
# Create lib/utils/cn.ts
mkdir -p lib/utils
// lib/utils/cn.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
import { SiriOrb } from "@/components/smoothui/ui/SiriOrb";
export default function App() {
return (
<div className="flex min-h-screen items-center justify-center">
<SiriOrb
size="200px"
colors={{
bg: "oklch(95% 0.02 264.695)",
c1: "oklch(75% 0.15 350)",
c2: "oklch(80% 0.12 200)",
c3: "oklch(78% 0.14 280)",
}}
animationDuration={20}
/>
</div>
);
}
import { RichPopover } from "@/components/smoothui/ui/RichPopover";
import { ScrollableCardStack } from "@/components/smoothui/ui/ScrollableCardStack";
export default function Dashboard() {
const cards = [
{
id: "1",
name: "John Doe",
handle: "@johndoe",
avatar: "/avatars/john.jpg",
video: "/videos/john.mp4",
href: "https://twitter.com/johndoe",
},
// ... more cards
];
return (
<div className="space-y-8">
<RichPopover />
<ScrollableCardStack items={cards} />
</div>
);
}
SmoothUI includes a wide variety of components:
SmoothUI is fully compatible with the shadcn MCP server, enabling AI assistants to discover and install components automatically.
With MCP support, AI assistants like Claude, Cursor, and GitHub Copilot can:
components.json:{
"registries": {
"@smoothui": "https://smoothui.dev/r/{name}.json"
}
}
npx shadcn@latest mcp init --client claude
# or for Cursor: npx shadcn@latest mcp init --client cursor
# or for VS Code: npx shadcn@latest mcp init --client vscode
Learn more about MCP support →
SmoothUI uses a custom registry system compatible with shadcn CLI v3. Each component includes:
cn are automatically bundledWhen you install a component, you get:
components/smoothui/ui/
├── ComponentName.tsx # Main component file
lib/utils/
└── cn.ts # Utility functions (if needed)
Error: You are not authorized to access the item
Solution: This usually happens with Vercel preview deployments. Use the production URL:
{
"registries": {
"@smoothui": "https://smoothui.dev/r/{name}.json"
}
}
Error: The item at https://smoothui.dev/r/registry.json was not found
Solution: The search command might not work as expected. Install components directly:
npx shadcn@latest add @smoothui/siri-orb
Error: Cannot find module '@/lib/utils/cn'
Solution: Make sure your tsconfig.json includes the path alias:
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
}
}
Error: Cannot find module 'clsx'
Solution: Install missing dependencies:
pnpm add clsx tailwind-merge motion
We welcome contributions! Please see our Contributing Guide for details.
git clone https://github.com/educlopez/smoothui.git
cd smoothui
pnpm install
pnpm dev
pnpm run build:registry
This project is licensed under the MIT License - see the LICENSE file for details.
FAQs
CLI to install SmoothUI components - beautifully designed React components with smooth animations
The npm package smoothui-cli receives a total of 77 weekly downloads. As such, smoothui-cli popularity was classified as not popular.
We found that smoothui-cli demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Research
/Security News
Ten malicious OpenAPI React Query Codegen versions were published to npm in the Mini Shai-Hulud attack, all with valid provenance.
Security News
Socket joins more than 100 technology, cybersecurity, and financial organizations calling for a global surge in cyber defense.
Product
Enterprise security teams can now detect malware, credential theft, suspicious network activity, and risky updates across Microsoft Edge extensions.