### Component File Structure Example Source: https://github.com/educlopez/smoothui/blob/main/README.md Illustrates the typical file structure after installing a SmoothUI component, showing the component file and utility functions. ```text components/smoothui/ui/ ├── ComponentName.tsx # Main component file lib/utils/ └── cn.ts # Utility functions (if needed) ``` -------------------------------- ### Vite Integration Guide Source: https://github.com/educlopez/smoothui/blob/main/sdd/library-site-improvements/tasks.md Details the setup process for Smooth UI within a Vite-powered project. Covers project creation, Tailwind CSS, Motion, path aliases, and CLI installations. ```mdx ```mdx --- # Vite Integration This guide covers integrating Smooth UI into your Vite-based application. ## Installation Follow these steps to set up Smooth UI in your Vite project. ### 1. Project Setup ```bash npm create vite@latest my-smooth-vite-app --template react-ts cd my-smooth-vite-app npm install ``` ### 2. Tailwind CSS Configuration Install Tailwind CSS and configure it for Vite. ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` Update `tailwind.config.ts`: ```typescript // tailwind.config.ts /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: { // ... your theme extensions }, }, plugins: [], } ``` ### 3. Motion Setup Install and configure Framer Motion. ```bash npm install framer-motion ``` ### 4. Path Aliases Configure path aliases in `vite.config.ts` and `tsconfig.json`. ```typescript // vite.config.ts import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import path from 'path' export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, './src'), }, }, }) ``` ```json // tsconfig.json { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, "moduleResolution": "ESNext", "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "noUnusedLocals": false, "noUnusedParameters": false, "baseUrl": ".", "paths": { "@/*": ["./src/*"] } }, "include": ["src"], "references": [{"path": "./tsconfig.app.json"}] } ``` ### 5. Smooth UI CLI and Shadcn UI Install Install Smooth UI and shadcn/ui CLI tools. ```bash npx smooth-ui@latest init npx --yes shadcn-ui@latest init --force ``` ## Troubleshooting Accordion for common issues like hydration, FOUC, etc. --- ``` ``` -------------------------------- ### Create Example File Source: https://github.com/educlopez/smoothui/blob/main/CLAUDE.md Example of creating an example file for a component. Use the "use client" directive if the component is interactive. ```tsx // Must be a default export named [ComponentName]Demo // Show different variations/use cases // Use "use client" directive if interactive export default function ComponentNameDemo() { // ... component usage examples return
Example Content
; } ``` -------------------------------- ### Documentation Frontmatter Example Source: https://github.com/educlopez/smoothui/blob/main/CLAUDE.md Example of frontmatter for a component's documentation file. Include essential metadata like title, description, icon, dependencies, and installer information. ```mdx --- title: "Component Name" description: "A brief description of the component." icon: "IconName" dependencies: ["dependency1", "dependency2"] installer: "npx shadcn@latest add @smoothui/component-name" --- ``` -------------------------------- ### Start Development Server Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/getting-started.mdx Run this command to start the development server and view your changes. ```bash pnpm dev ``` ```bash npm run dev ``` ```bash yarn dev ``` ```bash bun dev ``` -------------------------------- ### Install Motion (Bun) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/vite.mdx Install Motion, the animation library powering SmoothUI, using Bun. ```bash bun add motion ``` -------------------------------- ### Interactive Component Installation with SmoothUI CLI Source: https://github.com/educlopez/smoothui/blob/main/README.md Launch the interactive mode of the SmoothUI CLI to browse and select components. This mode provides a guided experience for installation. ```bash npx smoothui-cli add ``` -------------------------------- ### Install Motion (Yarn) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/vite.mdx Install Motion, the animation library powering SmoothUI, using Yarn. ```bash yarn add motion ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/remix.mdx After creating the project, navigate into the directory and install all required dependencies using your preferred package manager. ```bash cd my-smoothui-app && pnpm install ``` ```bash cd my-smoothui-app && npm install ``` ```bash cd my-smoothui-app && yarn install ``` ```bash cd my-smoothui-app && bun install ``` -------------------------------- ### Install Dependencies (Bun) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/vite.mdx Install project dependencies using Bun. ```bash cd my-smoothui-app && bun install ``` -------------------------------- ### Install Core Dependencies for Manual Installation Source: https://github.com/educlopez/smoothui/blob/main/README.md Install necessary dependencies like motion, tailwindcss, and utility libraries when installing components manually. ```bash pnpm add motion tailwindcss lucide-react clsx tailwind-merge ``` -------------------------------- ### Next.js Integration Guide Source: https://github.com/educlopez/smoothui/blob/main/sdd/library-site-improvements/tasks.md Covers installation in a Next.js app, Tailwind CSS configuration, and motion setup. Includes notes on App Router vs. Pages Router and Server Component boundaries. ```mdx ```mdx --- # Next.js Integration This guide covers integrating Smooth UI into your Next.js application. ## Installation Follow these steps to set up Smooth UI in your Next.js project. ### 1. Project Setup ```bash npx create-next-app@latest my-smooth-app --typescript --eslint --app --src-dir --tailwind --import-alias "@/*" cd my-smooth-app ``` ### 2. Tailwind CSS Configuration Ensure your `tailwind.config.ts` is set up correctly. ```typescript // tailwind.config.ts import type { Config } from 'tailwindcss' const config: Config = { content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { extend: { // ... your theme extensions }, }, plugins: [], } export default config ``` ### 3. Motion Setup Install and configure Framer Motion. ```bash npm install framer-motion ``` ### 4. Shadcn UI Initialization Initialize shadcn/ui for component management. ```bash npx --yes shadcn-ui@latest init --force ``` ## App Router vs. Pages Router Understand the differences and how they affect Smooth UI components. | Feature | App Router | Pages Router | |------------------|---------------------------------------------|---------------------------------------------| | **Rendering** | Server Components (default), Client Components | Client-side rendering (default) | | **Data Fetching**| Server-side, Client-side | Client-side (e.g., SWR, React Query) | | **Layouts** | Nested Layouts | `_app.js`, `_document.js` | | **Server Actions**| Built-in | Not directly supported | ### Server Component Boundaries Use `"use client";` directive to mark client components. ```jsx // app/page.tsx (Server Component) export default function HomePage() { return (

Welcome

); } // components/ClientCounter.tsx (Client Component) 'use client'; import { useState } from 'react'; export default function ClientCounter() { const [count, setCount] = useState(0); return ; } ``` ## Troubleshooting Common issues and solutions. ### Hydration Errors Ensure server-rendered HTML matches client-rendered output. Use `suppressHydrationWarning` sparingly. ### Turbopack Check for compatibility issues with Turbopack if using it for development. ### Bundle Size Optimize imports and consider dynamic imports for large components. --- ``` ``` -------------------------------- ### Start Development Servers Source: https://github.com/educlopez/smoothui/blob/main/CLAUDE.md Run this command to start all development servers simultaneously using Turbo. Alternatively, navigate to a specific app directory (e.g., apps/docs) and run 'pnpm dev' to start its server individually. ```bash # Start all dev servers (uses Turbo) pnpm dev # Start docs site only cd apps/docs && pnpm dev ``` -------------------------------- ### Install Motion (PNPM) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/vite.mdx Install Motion, the animation library powering SmoothUI, using PNPM. ```bash pnpm add motion ``` -------------------------------- ### Remix Integration Guide Source: https://github.com/educlopez/smoothui/blob/main/sdd/library-site-improvements/tasks.md Provides guidance on integrating Smooth UI with Remix, including setup for Tailwind CSS, Motion, SSR considerations, and client-only patterns. ```mdx ```mdx --- # Remix Integration This guide covers integrating Smooth UI into your Remix application. ## Setup ### 1. Project Creation ```bash npx create-remix@latest my-smooth-remix-app cd my-smooth-remix-app npm install ``` ### 2. Tailwind CSS Install and configure Tailwind CSS. ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` Update `tailwind.config.ts`: ```typescript // tailwind.config.ts /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./app/**\/*.{ts,tsx,jsx,js}"], theme: { extend: { // ... your theme extensions }, }, plugins: [], } ``` ### 3. Motion Setup Install Framer Motion. ```bash npm install framer-motion ``` ### 4. Path Aliases Configure path aliases using `vite-tsconfig-paths`. ```bash npm install -D vite-tsconfig-paths @vitejs/plugin-react ``` Update `vite.config.ts`: ```typescript // vite.config.ts import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import tsconfigPaths from 'vite-tsconfig-paths' export default defineConfig({ plugins: [react(), tsconfigPaths()], // ... other Vite configurations }) ``` Update `tsconfig.json` (if needed, Remix often handles this): ```json // tsconfig.json { "compilerOptions": { // ... other options "paths": { "@/*": ["./app/*"] } } } ``` ## Server-Side Rendering (SSR) Considerations | Aspect | Description | |---------------|-----------------------------------------------------------------------------| | **Hydration** | Ensure client-side JavaScript correctly hydrates server-rendered HTML. | | **`useLayoutEffect`** | Avoid `useLayoutEffect` in SSR contexts; prefer `useEffect`. | | **FOUC** | Flash of Unstyled Content can occur; manage CSS loading carefully. | ### ClientOnly Pattern Use this pattern for components that must run exclusively on the client. ```jsx // app/components/ClientOnly.tsx import { useEffect, useState } from 'react'; interface ClientOnlyProps { children: React.ReactNode; } export default function ClientOnly({ children }: ClientOnlyProps) { const [hasMounted, setHasMounted] = useState(false); useEffect(() => { setHasMounted(true); }, []); if (!hasMounted) { return null; } return <>{children}; } // Usage in a route: // import ClientOnly from '~/components/ClientOnly'; // ``` ## Troubleshooting Accordion for common issues. --- ``` ``` -------------------------------- ### Install shadcn/ui and SmoothUI Components Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/blog/tailwind-css-components-react.mdx Demonstrates installing a standard shadcn/ui component and a SmoothUI component within the same project. Both libraries can be managed using the shadcn-cli. ```bash # shadcn component npx shadcn@latest add button # SmoothUI component npx shadcn@latest add "https://smoothui.dev/r/animated-tabs.json" ``` -------------------------------- ### Suggest Components API Response Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/api.mdx Example response for the suggest components API, providing a list of relevant components or blocks with their details, relevance scores, and installation information. ```json { "need": "animated tab navigation", "suggestions": [ { "type": "component", "name": "animated-tabs", "displayName": "AnimatedTabs", "description": "Tab navigation with smooth spring-based transitions.", "category": "navigation", "relevanceScore": 21, "installCommand": "npx shadcn@latest add @smoothui/animated-tabs", "docUrl": "https://smoothui.dev/docs/components/animated-tabs", "registryUrl": "https://smoothui.dev/r/animated-tabs.json" } ], "total": 1 } ``` -------------------------------- ### Install Dependencies (Yarn) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/vite.mdx Install project dependencies using Yarn. ```bash cd my-smoothui-app && yarn install ``` -------------------------------- ### Install clsx and tailwind-merge Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/utilities.mdx Install the necessary packages for the cn() utility. This is a prerequisite for creating the utility function. ```bash pnpm add clsx tailwind-merge ``` -------------------------------- ### Install Dependencies (NPM) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/vite.mdx Install project dependencies using NPM. ```bash cd my-smoothui-app && npm install ``` -------------------------------- ### Data Flow Diagram Source: https://github.com/educlopez/smoothui/blob/main/sdd/library-site-improvements/design.md Illustrates the process from user installation to file writing, highlighting the role of the registry and CLI. ```text User installs component via CLI or shadcn add | v Registry route (apps/docs/app/r/[component]/route.ts) | v getPackage() reads component dir, detects deps | v Returns RegistryItem JSON with files + deps | v shadcn CLI writes files to user's project ``` -------------------------------- ### Install Multiple Components with shadcn CLI Source: https://github.com/educlopez/smoothui/blob/main/README.md Use the shadcn CLI to install multiple components from the @smoothui namespace simultaneously. ```bash npx shadcn@latest add @smoothui/rich-popover @smoothui/animated-input ``` -------------------------------- ### Install Dependencies (PNPM) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/vite.mdx Install project dependencies using PNPM. ```bash cd my-smoothui-app && pnpm install ``` -------------------------------- ### Start Development Server Source: https://github.com/educlopez/smoothui/blob/main/CONTRIBUTING.md Start the development server using pnpm to run Turborepo and all workspace dev servers. Access the docs site at http://localhost:3000. ```bash pnpm dev ``` -------------------------------- ### Create TanStack Start Project Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/tanstack-start.mdx Use these commands to create a new TanStack Start project. Choose your preferred package manager. ```bash pnpm create @tanstack/start@latest my-smoothui-app ``` ```bash npx @tanstack/create-start@latest my-smoothui-app ``` ```bash yarn create @tanstack/start my-smoothui-app ``` ```bash bunx @tanstack/create-start@latest my-smoothui-app ``` -------------------------------- ### Install SmoothUI Component using CLI Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/migration-from-shadcn.mdx Use the SmoothUI CLI to add a component. This command installs the component to `components/smoothui/ui/`. ```bash pnpm dlx smoothui-cli@latest add animated-tabs ``` ```bash npx smoothui-cli@latest add animated-tabs ``` ```bash yarn dlx smoothui-cli@latest add animated-tabs ``` ```bash bunx smoothui-cli@latest add animated-tabs ``` -------------------------------- ### Install Dependencies with pnpm Source: https://github.com/educlopez/smoothui/blob/main/CLAUDE.md Use this command to install all project dependencies. It's the first step before running any development or build commands. ```bash pnpm install ``` -------------------------------- ### Component Demo Example Source: https://github.com/educlopez/smoothui/blob/main/CONTRIBUTING.md Creates a demo example for the new component, which must have a default export named `[ComponentName]Demo`. ```tsx "use client"; import MyComponent from "@/packages/smoothui/components/my-component"; const MyComponentDemo = () => { return ; }; export default MyComponentDemo; ``` -------------------------------- ### Install Animated Component Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/animated-components.mdx Use the shadcn CLI to install any animated component from the SmoothUI library into your project. ```bash npx shadcn@latest add @smoothui/expandable-cards ``` -------------------------------- ### Install Tailwind CSS and Vite Plugin (Bun) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/vite.mdx Install Tailwind CSS and its Vite plugin using Bun. ```bash bun add tailwindcss @tailwindcss/vite ``` -------------------------------- ### Install Smooth Button with shadcn CLI Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/getting-started.mdx Install the Smooth Button component by adding it to the shadcn registry. ```bash pnpm dlx shadcn@latest add @smoothui/smooth-button ``` ```bash npx shadcn@latest add @smoothui/smooth-button ``` ```bash yarn dlx shadcn@latest add @smoothui/smooth-button ``` ```bash bunx shadcn@latest add @smoothui/smooth-button ``` -------------------------------- ### Install Single Component (shadcn CLI) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/installation.mdx Install SmoothUI components using the shadcn CLI with the `@smoothui` namespace. No additional configuration is needed as SmoothUI is an official registry. ```bash pnpm dlx shadcn@latest add @smoothui/siri-orb ``` ```bash npx shadcn@latest add @smoothui/siri-orb ``` ```bash yarn dlx shadcn@latest add @smoothui/siri-orb ``` ```bash bunx shadcn@latest add @smoothui/siri-orb ``` -------------------------------- ### Run Development Server Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/README.md Commands to start the development server for the Next.js application using npm, pnpm, or yarn. ```bash npm run dev # or pnpm dev # or yarn dev ``` -------------------------------- ### Install Smooth Button with SmoothUI CLI Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/getting-started.mdx Install the Smooth Button component using the SmoothUI CLI. This is the recommended method. ```bash pnpm dlx smoothui-cli@latest add smooth-button ``` ```bash npx smoothui-cli@latest add smooth-button ``` ```bash yarn dlx smoothui-cli@latest add smooth-button ``` ```bash bunx smoothui-cli@latest add smooth-button ``` -------------------------------- ### Install SmoothUI Component (Bun) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/vite.mdx Use the SmoothUI CLI with Bun to add the 'siri-orb' component. ```bash bunx smoothui-cli@latest add siri-orb ``` -------------------------------- ### Install SmoothUI Component with shadcn CLI Source: https://github.com/educlopez/smoothui/blob/main/README.npm.md An alternative method to install SmoothUI components using the shadcn CLI with the @smoothui registry. ```bash npx shadcn@latest add @smoothui/siri-orb ``` -------------------------------- ### Install Motion (Framer Motion) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/nextjs.mdx Installs Motion, the animation library powering SmoothUI components. This is a required dependency for using animations. ```bash pnpm add motion ``` ```bash npm install motion ``` ```bash yarn add motion ``` ```bash bun add motion ``` -------------------------------- ### Install SmoothUI Component (NPM) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/vite.mdx Use the SmoothUI CLI with NPM to add the 'siri-orb' component. ```bash npx smoothui-cli@latest add siri-orb ``` -------------------------------- ### Install SmoothUI Component using CLI Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/astro.mdx Use the SmoothUI CLI to add components like 'siri-orb' to your project. ```bash pnpm dlx smoothui-cli@latest add siri-orb ``` -------------------------------- ### Install SmoothUI Component Source: https://github.com/educlopez/smoothui/blob/main/README.npm.md Use this command to install a specific SmoothUI component. It automatically detects package managers and component paths. ```bash npx smoothui-cli add siri-orb ``` -------------------------------- ### Export Component Example Source: https://github.com/educlopez/smoothui/blob/main/CLAUDE.md Example of how to export a component from the components index file. Ensure the default export matches the component name for consistency. ```ts export { default as ComponentName } from "./component-name"; ``` -------------------------------- ### Install SmoothUI Component (Yarn) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/vite.mdx Use the SmoothUI CLI with Yarn to add the 'siri-orb' component. ```bash yarn dlx smoothui-cli@latest add siri-orb ``` -------------------------------- ### Install Missing Dependencies Source: https://github.com/educlopez/smoothui/blob/main/README.md Add any missing dependencies required by the components to your project. ```bash pnpm add clsx tailwind-merge motion ``` -------------------------------- ### Install SmoothUI Components via CLI Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/nextjs.mdx Installs SmoothUI components using either the SmoothUI CLI or the shadcn CLI. SmoothUI is an official shadcn registry, simplifying integration. ```bash pnpm dlx smoothui-cli@latest add siri-orb ``` ```bash npx smoothui-cli@latest add siri-orb ``` ```bash yarn dlx smoothui-cli@latest add siri-orb ``` ```bash bunx smoothui-cli@latest add siri-orb ``` ```bash pnpm dlx shadcn@latest add @smoothui/siri-orb ``` ```bash npx shadcn@latest add @smoothui/siri-orb ``` ```bash yarn dlx shadcn@latest add @smoothui/siri-orb ``` ```bash bunx shadcn@latest add @smoothui/siri-orb ``` -------------------------------- ### Using SmoothUI Components in a TanStack Start Route Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/tanstack-start.mdx Example of importing and using SmoothUI components (`SiriOrb`, `MagneticButton`) within a TanStack Start route component. Ensure path aliases are correctly configured. ```tsx import { createFileRoute } from "@tanstack/react-router"; import { SiriOrb } from "@/components/smoothui/ui/SiriOrb"; import { MagneticButton } from "@/components/smoothui/ui/MagneticButton"; export const Route = createFileRoute("/")({ component: Home, }); function Home() { return (

SmoothUI + TanStack Start

Get Started
); } ``` -------------------------------- ### List Blocks API Response Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/api.mdx Example response for the list blocks API, detailing block metadata such as name, description, tags, and installation commands. ```json { "data": [ { "name": "hero-section", "displayName": "HeroSection", "description": "Animated hero section with gradient text and CTA buttons.", "blockType": "hero", "components": ["animated-gradient-text", "magnetic-button"], "category": "layout", "tags": ["hero", "landing-page"], "complexity": "moderate", "animationType": "spring", "installCommand": "npx shadcn@latest add @smoothui/hero-section" } ], "total": 5, "page": 1, "pageSize": 50, "totalPages": 1 } ``` -------------------------------- ### List Available Components (SmoothUI CLI) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/installation.mdx Use the SmoothUI CLI to list all available components. This command helps you discover which components can be installed. ```bash pnpm dlx smoothui-cli@latest list ``` ```bash npx smoothui-cli@latest list ``` ```bash yarn dlx smoothui-cli@latest list ``` ```bash bunx smoothui-cli@latest list ``` -------------------------------- ### Clone Repository and Navigate Source: https://github.com/educlopez/smoothui/blob/main/CONTRIBUTING.md Clone the SmoothUI repository and navigate into the project directory. ```bash git clone https://github.com//smoothui.git cd smoothui ``` -------------------------------- ### Use Installed SmoothUI Components Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/installation.mdx Import and utilize SmoothUI components within your React application after installation. Ensure the import path correctly points to the installed components. ```tsx import { SiriOrb } from "@/components/smoothui/ui/SiriOrb" import { RichPopover } from "@/components/smoothui/ui/RichPopover" export default function App() { return (
) } ``` -------------------------------- ### Initialize shadcn/ui Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/getting-started.mdx Initialize shadcn/ui in your project using your preferred package manager. This sets up the necessary configuration files. ```bash pnpm dlx shadcn@latest init ``` ```bash npx shadcn@latest init ``` ```bash yarn dlx shadcn@latest init ``` ```bash bunx shadcn@latest init ``` -------------------------------- ### SmoothUI CLI Options Source: https://github.com/educlopez/smoothui/blob/main/README.npm.md Customize component installation using options like --path to specify a custom directory or --force to overwrite existing files. ```bash # Custom install path npx smoothui-cli add siri-orb --path src/components/ui # Force overwrite existing files npx smoothui-cli add siri-orb --force ``` -------------------------------- ### Add shadcn/ui Components using Registry Source: https://github.com/educlopez/smoothui/blob/main/CONTRIBUTING.md Install shadcn/ui components by referencing the SmoothUI registry URL with the `shadcn-ui add` command. ```bash npx shadcn@latest add https://smoothui.dev/r/{name}.json ``` -------------------------------- ### Install Tailwind CSS and Vite Plugin (Yarn) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/vite.mdx Install Tailwind CSS and its Vite plugin using Yarn. ```bash yarn add tailwindcss @tailwindcss/vite ``` -------------------------------- ### Install Tailwind CSS and Vite Plugin (NPM) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/vite.mdx Install Tailwind CSS and its Vite plugin using NPM. ```bash npm install tailwindcss @tailwindcss/vite ``` -------------------------------- ### Install Multiple Components (shadcn CLI) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/installation.mdx Add multiple SmoothUI components at once using the shadcn CLI. This streamlines the process of integrating several UI elements. ```bash pnpm dlx shadcn@latest add @smoothui/rich-popover @smoothui/animated-input ``` ```bash npx shadcn@latest add @smoothui/rich-popover @smoothui/animated-input ``` ```bash yarn dlx shadcn@latest add @smoothui/rich-popover @smoothui/animated-input ``` ```bash bunx shadcn@latest add @smoothui/rich-popover @smoothui/animated-input ``` -------------------------------- ### Install Tailwind CSS and Vite Plugin (PNPM) Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/vite.mdx Install Tailwind CSS and its Vite plugin using PNPM. ```bash pnpm add tailwindcss @tailwindcss/vite ``` -------------------------------- ### Install useIsMobile Hook Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/hooks.mdx Install the `use-mobile` hook using npm or yarn, or copy the hook directly into your project. ```bash npx shadcn@latest add @smoothui/use-mobile ``` -------------------------------- ### Build Registry Source: https://github.com/educlopez/smoothui/blob/main/README.md Build the registry for the project. ```bash pnpm run build:registry ``` -------------------------------- ### Install Motion Package Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/blog/framer-motion-tutorial.mdx Install the Motion package using npm. This is the first step to using Motion in your React project. ```bash npm install motion ``` -------------------------------- ### Get Block Details Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/docs/guides/api.mdx Returns full metadata for a single block. Add `?include=source` to get the raw source code. ```APIDOC ## GET /api/v1/blocks/{blockName} ### Description Returns full metadata for a single block. Add `?include=source` for raw source code. ### Method GET ### Endpoint /api/v1/blocks/{blockName} ### Parameters #### Path Parameters - **blockName** (string) - Required - The name of the block to retrieve #### Query Parameters - **include** (string) - Optional - Include additional data, e.g., `source` ### Request Example ```bash curl "https://smoothui.dev/api/v1/blocks/hero-section?include=source" ``` ### Response #### Success Response (200) Returns the full metadata for the specified block. The structure will be similar to the response in 'List Blocks', potentially including a `source` field if requested. #### Error Response - **404** - Resource not found if the block name does not exist. ``` -------------------------------- ### List Available SmoothUI Components Source: https://github.com/educlopez/smoothui/blob/main/README.npm.md View all available SmoothUI components. Use the --json flag for machine-readable output. ```bash # Show all available components npx smoothui-cli list # JSON output npx smoothui-cli list --json ``` -------------------------------- ### Diagnose Ultracite Setup Source: https://github.com/educlopez/smoothui/blob/main/AGENTS.md Use this command to diagnose and troubleshoot your Ultracite setup. It helps identify and resolve configuration problems. ```bash pnpm dlx ultracite doctor ``` -------------------------------- ### List Available Components with SmoothUI CLI Source: https://github.com/educlopez/smoothui/blob/main/README.md View all available components in the SmoothUI library using the CLI. This command helps in discovering components before installation. ```bash npx smoothui-cli list ``` -------------------------------- ### Install SmoothUI Component with shadcn-cli Source: https://github.com/educlopez/smoothui/blob/main/apps/docs/content/blog/tailwind-css-components-react.mdx Use the shadcn-cli to add specific components from SmoothUI to your project. This command installs the 'magnetic-button' component. ```bash npx shadcn@latest add "https://smoothui.dev/r/magnetic-button.json" ```