{ "$schema": "https://smoothui.dev/schemas/llms-components.json", "baseUrl": "https://smoothui.dev", "blocks": [ { "animationType": "spring", "blockType": "other", "category": "layout", "complexity": "simple", "components": [], "dependencies": [ "motion" ], "description": "Centered CTA block with radial glow background", "displayName": "Cta1", "docUrl": "https://smoothui.dev/docs/blocks/cta", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/cta-1.json", "name": "cta-1", "registryUrl": "https://smoothui.dev/r/cta-1.json", "tags": [ "cta", "call-to-action", "centered", "marketing", "animated" ], "useCases": [ "Centered call-to-action section", "Marketing page CTA with gradient background", "Landing page conversion section" ] }, { "animationType": "spring", "blockType": "other", "category": "layout", "complexity": "simple", "components": [], "dependencies": [ "@smoothui/data", "motion" ], "description": "Split layout CTA block with text and illustration", "displayName": "Cta2", "docUrl": "https://smoothui.dev/docs/blocks/cta", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/cta-2.json", "name": "cta-2", "registryUrl": "https://smoothui.dev/r/cta-2.json", "tags": [ "cta", "call-to-action", "split", "marketing", "animated" ], "useCases": [ "Split CTA with image and text", "Two-column call-to-action section", "Product showcase with CTA" ] }, { "animationType": "spring", "blockType": "other", "category": "layout", "complexity": "simple", "components": [], "dependencies": [ "motion" ], "description": "Compact banner CTA block", "displayName": "Cta3", "docUrl": "https://smoothui.dev/docs/blocks/cta", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/cta-3.json", "name": "cta-3", "registryUrl": "https://smoothui.dev/r/cta-3.json", "tags": [ "cta", "call-to-action", "banner", "compact", "animated" ], "useCases": [ "Compact inline CTA banner", "Newsletter signup prompt", "Quick action section between content" ] }, { "animationType": "spring", "blockType": "other", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "lucide-react", "motion" ], "description": "FAQ grid block with categorized tabs and icons", "displayName": "Faq1", "docUrl": "https://smoothui.dev/docs/blocks/faqs", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/faq-1.json", "name": "faq-1", "registryUrl": "https://smoothui.dev/r/faq-1.json", "tags": [ "faq", "grid", "tabs", "categories", "icons", "animated" ], "useCases": [ "FAQ section with categorized tab navigation", "Knowledge base grid with icon categories", "Support page FAQ with animated filtering" ] }, { "animationType": "spring", "blockType": "other", "category": "layout", "complexity": "simple", "components": [], "dependencies": [ "motion" ], "description": "FAQ accordion block with expandable questions", "displayName": "Faq2", "docUrl": "https://smoothui.dev/docs/blocks/faqs", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/faq-2.json", "name": "faq-2", "registryUrl": "https://smoothui.dev/r/faq-2.json", "tags": [ "faq", "accordion", "collapsible", "expandable", "animated" ], "useCases": [ "Classic FAQ accordion with expandable answers", "Simple Q&A section for product pages", "Support page with collapsible question items" ] }, { "animationType": "spring", "blockType": "other", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "lucide-react", "motion" ], "description": "Searchable FAQ section with filter animations", "displayName": "Faq3", "docUrl": "https://smoothui.dev/docs/blocks/faqs", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/faq-3.json", "name": "faq-3", "registryUrl": "https://smoothui.dev/r/faq-3.json", "tags": [ "faq", "search", "filter", "animated" ], "useCases": [ "Searchable FAQ section with filter animations", "Help center with instant search filtering", "Documentation FAQ with real-time search" ] }, { "animationType": "spring", "blockType": "other", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "lucide-react", "motion" ], "description": "Categorized FAQ section with tab navigation", "displayName": "Faq4", "docUrl": "https://smoothui.dev/docs/blocks/faqs", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/faq-4.json", "name": "faq-4", "registryUrl": "https://smoothui.dev/r/faq-4.json", "tags": [ "faq", "tabs", "categories", "navigation", "animated" ], "useCases": [ "FAQ section with tab-based category navigation", "Multi-category help center layout", "Organized FAQ with tabbed topic groups" ] }, { "animationType": "spring", "blockType": "other", "category": "layout", "complexity": "simple", "components": [], "dependencies": [ "motion" ], "description": "Feature grid block with animated cards", "displayName": "Features1", "docUrl": "https://smoothui.dev/docs/blocks/features", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/features-1.json", "name": "features-1", "registryUrl": "https://smoothui.dev/r/features-1.json", "tags": [ "features", "grid", "cards", "marketing", "animated" ], "useCases": [ "Feature showcase grid section", "Product benefits with icons", "Service listing with hover effects" ] }, { "animationType": "spring", "blockType": "other", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "motion" ], "description": "Bento grid features block with asymmetric layout", "displayName": "Features2", "docUrl": "https://smoothui.dev/docs/blocks/features", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/features-2.json", "name": "features-2", "registryUrl": "https://smoothui.dev/r/features-2.json", "tags": [ "features", "bento", "grid", "asymmetric", "animated" ], "useCases": [ "Bento-style feature showcase", "Product capabilities overview", "Modern asymmetric features section" ] }, { "animationType": "spring", "blockType": "other", "category": "layout", "complexity": "simple", "components": [], "dependencies": [ "@smoothui/data", "motion" ], "description": "Alternating features block with side-by-side layout", "displayName": "Features3", "docUrl": "https://smoothui.dev/docs/blocks/features", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/features-3.json", "name": "features-3", "registryUrl": "https://smoothui.dev/r/features-3.json", "tags": [ "features", "alternating", "zigzag", "marketing", "animated" ], "useCases": [ "Alternating feature rows with images", "Product walkthrough sections", "Detailed feature explanations" ] }, { "animationType": "spring", "blockType": "footer", "category": "layout", "complexity": "simple", "components": [], "dependencies": [ "motion" ], "description": "Simple footer block with links and social icons", "displayName": "Footer1", "docUrl": "https://smoothui.dev/docs/blocks/footer", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/footer-1.json", "name": "footer-1", "registryUrl": "https://smoothui.dev/r/footer-1.json", "tags": [ "footer", "links", "social", "simple", "animated" ], "useCases": [ "Simple footer with navigation links and social icons", "Basic site footer for landing pages", "Minimal footer with animated link groups" ] }, { "animationType": "spring", "blockType": "footer", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "motion" ], "description": "Complex footer block with newsletter and extended links", "displayName": "Footer2", "docUrl": "https://smoothui.dev/docs/blocks/footer", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/footer-2.json", "name": "footer-2", "registryUrl": "https://smoothui.dev/r/footer-2.json", "tags": [ "footer", "newsletter", "links", "complex", "animated" ], "useCases": [ "Complex footer with newsletter subscription form", "Extended footer with multiple link columns", "SaaS footer with newsletter and navigation" ] }, { "animationType": "spring", "blockType": "footer", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "lucide-react", "motion" ], "description": "Mega footer with newsletter and social links", "displayName": "Footer3", "docUrl": "https://smoothui.dev/docs/blocks/footer", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/footer-3.json", "name": "footer-3", "registryUrl": "https://smoothui.dev/r/footer-3.json", "tags": [ "footer", "mega", "newsletter", "social", "animated" ], "useCases": [ "Mega footer with newsletter, social links, and navigation", "Full-featured footer for large marketing sites", "Footer with multiple sections and social media integration" ] }, { "animationType": "spring", "blockType": "footer", "category": "layout", "complexity": "simple", "components": [], "dependencies": [ "lucide-react", "motion" ], "description": "Minimal single-row footer", "displayName": "Footer4", "docUrl": "https://smoothui.dev/docs/blocks/footer", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/footer-4.json", "name": "footer-4", "registryUrl": "https://smoothui.dev/r/footer-4.json", "tags": [ "footer", "minimal", "single-row", "compact", "animated" ], "useCases": [ "Minimal single-row footer for simple sites", "Compact footer with copyright and essential links", "Clean footer for documentation or blog sites" ] }, { "animationType": "tween", "blockType": "header", "category": "layout", "complexity": "complex", "components": [], "dependencies": [ "lucide-react", "motion" ], "description": "Modern header block with navigation and mobile menu", "displayName": "Header1", "docUrl": "https://smoothui.dev/docs/blocks/hero", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/header-1.json", "name": "header-1", "registryUrl": "https://smoothui.dev/r/header-1.json", "tags": [ "header", "hero", "navigation", "grid", "interactive", "animated" ], "useCases": [ "Interactive 3D grid hero header for landing pages", "Animated hero section with color grid effect", "SaaS landing page header with CTA" ] }, { "animationType": "spring", "blockType": "header", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "lucide-react", "motion" ], "description": "Premium header block with gradient logo and smooth animations", "displayName": "Header2", "docUrl": "https://smoothui.dev/docs/blocks/hero", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/header-2.json", "name": "header-2", "registryUrl": "https://smoothui.dev/r/header-2.json", "tags": [ "header", "hero", "navigation", "gradient", "premium", "animated" ], "useCases": [ "Premium hero header with gradient logo", "Product landing page header with smooth entrance animations", "Marketing page hero with animated text and CTAs" ] }, { "animationType": "spring", "blockType": "header", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "lucide-react", "motion" ], "description": "Premium header block with gradient logo and smooth animations", "displayName": "Header3", "docUrl": "https://smoothui.dev/docs/blocks/hero", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/header-3.json", "name": "header-3", "registryUrl": "https://smoothui.dev/r/header-3.json", "tags": [ "header", "hero", "navigation", "gradient", "animated" ], "useCases": [ "Hero header variant with gradient logo and animations", "Alternative premium landing page header", "Content-focused hero section with animated entrance" ] }, { "animationType": "tween", "blockType": "header", "category": "layout", "complexity": "complex", "components": [], "dependencies": [ "lucide-react", "motion" ], "description": "Interactive 3D grid hero header inspired by rauno.me 2024", "displayName": "Header4", "docUrl": "https://smoothui.dev/docs/blocks/hero", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/header-4.json", "name": "header-4", "registryUrl": "https://smoothui.dev/r/header-4.json", "tags": [ "header", "hero", "3d", "grid", "interactive", "animated" ], "useCases": [ "Interactive 3D grid hero inspired by rauno.me", "Creative portfolio hero section with grid animation", "Developer portfolio header with interactive elements" ] }, { "animationType": "spring", "blockType": "header", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "motion" ], "description": "Spotlight hero block with dark theme and gradient text", "displayName": "Header5", "docUrl": "https://smoothui.dev/docs/blocks/hero", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/header-5.json", "name": "header-5", "registryUrl": "https://smoothui.dev/r/header-5.json", "tags": [ "hero", "header", "spotlight", "dark", "gradient", "animated" ], "useCases": [ "Dark-themed landing page hero", "Product launch page with spotlight effect", "SaaS homepage with dramatic entrance" ] }, { "animationType": "spring", "blockType": "header", "category": "layout", "complexity": "simple", "components": [], "dependencies": [ "motion" ], "description": "Minimal hero block with clean typography", "displayName": "Header6", "docUrl": "https://smoothui.dev/docs/blocks/hero", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/header-6.json", "name": "header-6", "registryUrl": "https://smoothui.dev/r/header-6.json", "tags": [ "hero", "header", "minimal", "clean", "typography", "animated" ], "useCases": [ "Minimalist landing page hero", "Blog or portfolio homepage", "Clean product page header" ] }, { "animationType": "none", "blockType": "other", "category": "layout", "complexity": "simple", "components": [], "dependencies": [], "description": "Simple logo cloud block with grid layout", "displayName": "LogoCloud1", "docUrl": "https://smoothui.dev/docs/blocks/logo-clouds", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/logo-cloud-1.json", "name": "logo-cloud-1", "registryUrl": "https://smoothui.dev/r/logo-cloud-1.json", "tags": [ "logo", "cloud", "grid", "partners", "clients", "trust" ], "useCases": [ "Simple logo grid for partner or client logos", "Trust section with company logos", "Static logo cloud for social proof" ] }, { "animationType": "tween", "blockType": "other", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "motion" ], "description": "Animated logo cloud block with infinite scroll", "displayName": "LogoCloud2", "docUrl": "https://smoothui.dev/docs/blocks/logo-clouds", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/logo-cloud-2.json", "name": "logo-cloud-2", "registryUrl": "https://smoothui.dev/r/logo-cloud-2.json", "tags": [ "logo", "cloud", "infinite-scroll", "marquee", "animated" ], "useCases": [ "Animated logo cloud with infinite scroll marquee", "Partner logos with continuous scroll animation", "Trust section with moving logo carousel" ] }, { "animationType": "tween", "blockType": "other", "category": "layout", "complexity": "simple", "components": [], "dependencies": [], "description": "Infinite scrolling logo marquee", "displayName": "LogoCloud3", "docUrl": "https://smoothui.dev/docs/blocks/logo-clouds", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/logo-cloud-3.json", "name": "logo-cloud-3", "registryUrl": "https://smoothui.dev/r/logo-cloud-3.json", "tags": [ "logo", "cloud", "marquee", "infinite-scroll", "css" ], "useCases": [ "CSS-only infinite scrolling logo marquee", "Lightweight logo carousel without JS", "Performance-optimized logo cloud section" ] }, { "animationType": "spring", "blockType": "other", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "motion" ], "description": "Interactive logo grid with hover effects", "displayName": "LogoCloud4", "docUrl": "https://smoothui.dev/docs/blocks/logo-clouds", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/logo-cloud-4.json", "name": "logo-cloud-4", "registryUrl": "https://smoothui.dev/r/logo-cloud-4.json", "tags": [ "logo", "cloud", "grid", "hover", "interactive", "animated" ], "useCases": [ "Interactive logo grid with hover effects", "Partner logos with animated hover states", "Logo showcase with motion feedback on interaction" ] }, { "animationType": "spring", "blockType": "pricing", "category": "layout", "complexity": "simple", "components": [], "dependencies": [ "motion" ], "description": "Simple pricing block with single plan", "displayName": "Pricing1", "docUrl": "https://smoothui.dev/docs/blocks/pricing", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/pricing-1.json", "name": "pricing-1", "registryUrl": "https://smoothui.dev/r/pricing-1.json", "tags": [ "pricing", "plan", "single", "cta", "animated" ], "useCases": [ "Simple single-plan pricing card", "SaaS pricing section with feature list", "Minimalist pricing display with CTA" ] }, { "animationType": "spring", "blockType": "pricing", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "motion" ], "description": "Modern pricing block with three tiers", "displayName": "Pricing2", "docUrl": "https://smoothui.dev/docs/blocks/pricing", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/pricing-2.json", "name": "pricing-2", "registryUrl": "https://smoothui.dev/r/pricing-2.json", "tags": [ "pricing", "plans", "tiers", "comparison", "animated" ], "useCases": [ "Three-tier pricing comparison section", "SaaS pricing page with plan comparison", "Product pricing table with feature highlights" ] }, { "animationType": "spring", "blockType": "pricing", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "motion" ], "description": "Creative pricing block with two plans", "displayName": "Pricing3", "docUrl": "https://smoothui.dev/docs/blocks/pricing", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/pricing-3.json", "name": "pricing-3", "registryUrl": "https://smoothui.dev/r/pricing-3.json", "tags": [ "pricing", "plans", "creative", "two-plans", "animated" ], "useCases": [ "Creative two-plan pricing layout", "Side-by-side pricing comparison with animated entrance", "Product pricing with highlighted recommended plan" ] }, { "animationType": "spring", "blockType": "other", "category": "layout", "complexity": "simple", "components": [], "dependencies": [ "motion" ], "description": "Grid stats section block with hover effects", "displayName": "Stats1", "docUrl": "https://smoothui.dev/docs/blocks/stats", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/stats-1.json", "name": "stats-1", "registryUrl": "https://smoothui.dev/r/stats-1.json", "tags": [ "stats", "metrics", "grid", "numbers", "hover", "animated" ], "useCases": [ "Stats grid section with hover effects", "Key metrics display for landing pages", "Company statistics showcase with animations" ] }, { "animationType": "spring", "blockType": "other", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "lucide-react", "motion" ], "description": "Cards stats section block with icons and trends", "displayName": "Stats2", "docUrl": "https://smoothui.dev/docs/blocks/stats", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/stats-2.json", "name": "stats-2", "registryUrl": "https://smoothui.dev/r/stats-2.json", "tags": [ "stats", "metrics", "cards", "icons", "trends", "animated" ], "useCases": [ "Stats cards with icons and trend indicators", "Dashboard-style metrics section", "KPI display cards with animated entrance" ] }, { "animationType": "spring", "blockType": "other", "category": "layout", "complexity": "simple", "components": [], "dependencies": [ "@smoothui/data", "motion" ], "description": "Grid team section block with hover effects", "displayName": "Team1", "docUrl": "https://smoothui.dev/docs/blocks/team-sections", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/team-1.json", "name": "team-1", "registryUrl": "https://smoothui.dev/r/team-1.json", "tags": [ "team", "grid", "members", "about", "hover", "animated" ], "useCases": [ "Team member grid with hover effects", "About page team section", "Staff directory with animated card interactions" ] }, { "animationType": "spring", "blockType": "other", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "@smoothui/data", "motion" ], "description": "Carousel team section block with auto-play", "displayName": "Team2", "docUrl": "https://smoothui.dev/docs/blocks/team-sections", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/team-2.json", "name": "team-2", "registryUrl": "https://smoothui.dev/r/team-2.json", "tags": [ "team", "carousel", "auto-play", "members", "animated" ], "useCases": [ "Team member carousel with auto-play rotation", "Scrolling team showcase for about pages", "Auto-rotating staff display with smooth transitions" ] }, { "animationType": "spring", "blockType": "testimonials", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "@smoothui/data", "motion" ], "description": "Simple testimonials block with auto-rotating cards", "displayName": "Testimonials1", "docUrl": "https://smoothui.dev/docs/blocks/testimonial", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/testimonials-1.json", "name": "testimonials-1", "registryUrl": "https://smoothui.dev/r/testimonials-1.json", "tags": [ "testimonials", "cards", "auto-rotate", "reviews", "animated" ], "useCases": [ "Auto-rotating testimonial cards section", "Customer review carousel for landing pages", "Social proof section with animated card transitions" ] }, { "animationType": "spring", "blockType": "testimonials", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "@smoothui/data", "lucide-react", "motion" ], "description": "Grid testimonials block with navigation arrows", "displayName": "Testimonials2", "docUrl": "https://smoothui.dev/docs/blocks/testimonial", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/testimonials-2.json", "name": "testimonials-2", "registryUrl": "https://smoothui.dev/r/testimonials-2.json", "tags": [ "testimonials", "grid", "navigation", "arrows", "animated" ], "useCases": [ "Grid testimonials with navigation arrows", "Customer reviews grid with paginated navigation", "Testimonial section with manual browse controls" ] }, { "animationType": "spring", "blockType": "testimonials", "category": "layout", "complexity": "moderate", "components": [], "dependencies": [ "@smoothui/data", "lucide-react", "motion" ], "description": "Star testimonials block with grid layout", "displayName": "Testimonials3", "docUrl": "https://smoothui.dev/docs/blocks/testimonial", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/testimonials-3.json", "name": "testimonials-3", "registryUrl": "https://smoothui.dev/r/testimonials-3.json", "tags": [ "testimonials", "stars", "grid", "rating", "animated" ], "useCases": [ "Star-rated testimonial grid layout", "Review section with star ratings display", "Customer feedback grid with rating visualization" ] } ], "components": [ { "animationType": "tween", "category": "ai", "complexity": "moderate", "compositionHints": [ "Pair with ai-prompt-input for a complete AI chat interface", "Use alongside ai-branch for conversation displays" ], "dependencies": [], "description": "Canvas-based generative pixel avatar for AI agents, unique per seed.", "displayName": "AgentAvatar", "docUrl": "https://smoothui.dev/docs/components/agent-avatar", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/agent-avatar.json", "name": "agent-avatar", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/agent-avatar.json", "tags": [ "avatar", "generative", "canvas", "pixel-art", "ai-agent", "deterministic", "animated" ], "useCases": [ "Display unique avatars for AI agents or chatbots", "Generate deterministic user avatars from seed strings", "Visual identity for automated systems" ] }, { "animationType": "spring", "category": "ai", "complexity": "moderate", "compositionHints": [ "The decision is visibly irreversible in one spring — that is the point", "Pass onDecide to receive the chosen option id", "Keep option labels short; they become the resolved state" ], "dependencies": [ "lucide-react", "motion" ], "description": "Human-in-the-loop approval card where the chosen option expands to fill the card while the alternatives collapse away.", "displayName": "AiApproval", "docUrl": "https://smoothui.dev/docs/components/ai-approval", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ai-approval.json", "name": "ai-approval", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/ai-approval.json", "tags": [ "ai", "approval", "human-in-the-loop", "confirm", "agent", "decision" ], "useCases": [ "Question an agent asks before acting", "Destructive action that needs a human yes", "Branch choice mid-workflow" ] }, { "animationType": "spring", "category": "ai", "complexity": "moderate", "compositionHints": [ "Panes travel along one axis, so the swap has a direction and a memory", "The indicator is a shared layout element, not two styled tabs", "Give the frame a title so the artifact is nameable in conversation" ], "dependencies": [ "lucide-react", "motion" ], "description": "Generated-artifact frame whose preview and code panes swap along a shared axis rather than cross-fading.", "displayName": "AiArtifact", "docUrl": "https://smoothui.dev/docs/components/ai-artifact", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ai-artifact.json", "name": "ai-artifact", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/ai-artifact.json", "tags": [ "ai", "artifact", "tabs", "preview", "code", "canvas" ], "useCases": [ "Generated component with preview and source", "Chart or document produced mid-conversation", "Any output that has both a rendered and a raw form" ] }, { "animationType": "spring", "category": "ai", "complexity": "complex", "compositionHints": [ "Combine with ai-prompt-input for a full chat experience", "Use agent-avatar for AI message avatars" ], "dependencies": [ "lucide-react", "motion" ], "description": "An interactive AI branch component for displaying conversation flows.", "displayName": "AiBranch", "docUrl": "https://smoothui.dev/docs/components/ai-branch", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ai-branch.json", "name": "ai-branch", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/ai-branch.json", "tags": [ "ai", "chat", "branching", "conversation", "message", "navigation", "animated" ], "useCases": [ "Navigate between AI conversation branches", "Show alternative AI responses in chat interfaces", "Build multi-turn conversation UIs with edit/regenerate support" ] }, { "animationType": "spring", "category": "ai", "complexity": "moderate", "compositionHints": [ "The card grows from the pill, so the pointer never loses the thread", "Opens on hover and on focus, and closes on Escape", "ai-response ships a minimal pill; use this one when you want previews" ], "dependencies": [ "lucide-react", "motion" ], "description": "Inline citation pill that opens an origin-aware source card, anchored to the pill it came from.", "displayName": "AiCitation", "docUrl": "https://smoothui.dev/docs/components/ai-citation", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ai-citation.json", "name": "ai-citation", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/ai-citation.json", "tags": [ "ai", "citation", "popover", "hover-card", "sources", "inline" ], "useCases": [ "Inline reference inside generated prose", "Footnote-style source preview", "Any inline marker that needs a peek at its target" ] }, { "animationType": "spring", "category": "ai", "complexity": "moderate", "compositionHints": [ "Crossing the threshold changes hue, not size — growth would imply progress", "Figures are tabular so the number never jitters as it counts", "Pass a breakdown to explain what is filling the window" ], "dependencies": [ "lucide-react", "motion" ], "description": "Context window meter whose ring fills and shifts hue at the warning threshold, never changing size.", "displayName": "AiContextMeter", "docUrl": "https://smoothui.dev/docs/components/ai-context-meter", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ai-context-meter.json", "name": "ai-context-meter", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/ai-context-meter.json", "tags": [ "ai", "context", "tokens", "meter", "usage", "ring" ], "useCases": [ "Context window usage next to a composer", "Token budget indicator in a settings row", "Any quota that has a soft warning band" ] }, { "animationType": "spring", "category": "ai", "complexity": "moderate", "compositionHints": [ "Pass contentKey so it knows when content grew", "Scrolling up during a stream is respected — it stops following", "Give it a bounded height; it manages its own overflow" ], "dependencies": [ "lucide-react", "motion" ], "description": "Thread scroll container that follows the bottom only while the reader is already there, offering a jump-to-latest pill when it stops.", "displayName": "AiConversation", "docUrl": "https://smoothui.dev/docs/components/ai-conversation", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ai-conversation.json", "name": "ai-conversation", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/ai-conversation.json", "tags": [ "ai", "chat", "scroll", "conversation", "stick-to-bottom", "thread" ], "useCases": [ "Scroll container for a chat thread", "Streaming transcript that must not fight the reader", "Agent log that grows while being read" ] }, { "animationType": "spring", "category": "ai", "complexity": "moderate", "compositionHints": [ "Accepting flashes the block once, then settles — no confetti", "Rejecting collapses the lines to zero height so the space is reclaimed", "Line numbers are optional; omit them for data rather than code" ], "dependencies": [ "lucide-react", "motion" ], "description": "Proposed code or data edit where added lines wipe in from the left and rejected lines collapse to nothing.", "displayName": "AiDiff", "docUrl": "https://smoothui.dev/docs/components/ai-diff", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ai-diff.json", "name": "ai-diff", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/ai-diff.json", "tags": [ "ai", "diff", "code", "review", "accept", "reject" ], "useCases": [ "AI-proposed edit awaiting review", "Tool call that rewrites a file", "Any before/after the user must accept or reject" ] }, { "animationType": "tween", "category": "ai", "complexity": "simple", "compositionHints": [ "All variants share one cycle, so mixing them stays in sync", "Never fakes determinate progress for an unknown wait", "Use showElapsed for waits that can run past a couple of seconds" ], "dependencies": [ "motion" ], "description": "Family of AI waiting indicators — dots, sweep bar and pixel grid — sharing one cycle length, with an optional elapsed counter.", "displayName": "AiLoader", "docUrl": "https://smoothui.dev/docs/components/ai-loader", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ai-loader.json", "name": "ai-loader", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/ai-loader.json", "tags": [ "ai", "loader", "spinner", "thinking", "progress", "chat" ], "useCases": [ "Waiting indicator while a model is working", "Inline indicator inside a message list", "Long-running agent step with an elapsed counter" ] }, { "animationType": "spring", "category": "ai", "complexity": "moderate", "compositionHints": [ "Actions reveal on hover and focus-within, so keyboard users reach them", "Pass copyText to enable the clipboard action", "Drop an orb into avatar to tie the message to the assistant presence" ], "dependencies": [ "lucide-react", "motion" ], "description": "Chat message bubble whose action row slides out of the bubble's own edge, revealed on hover and on focus.", "displayName": "AiMessage", "docUrl": "https://smoothui.dev/docs/components/ai-message", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ai-message.json", "name": "ai-message", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/ai-message.json", "tags": [ "ai", "chat", "message", "bubble", "actions", "copy" ], "useCases": [ "User and assistant turns in a chat thread", "Message with copy, retry and feedback actions", "Thread rows that need an avatar or orb slot" ] }, { "animationType": "spring", "category": "ai", "complexity": "complex", "compositionHints": [ "Expression carries the state — do not add a badge on top of it", "Turn gaze off inside dense UI where many instances would be noise", "Pass amplitude so the body breathes with the voice while listening" ], "dependencies": [ "motion" ], "description": "Cartoon character orb whose expression carries the AI state — cursor-following gaze, natural blinks, thinking saccades, happy arcs and spiral eyes.", "displayName": "AiOrbFace", "docUrl": "https://smoothui.dev/docs/components/ai-orb-face", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ai-orb-face.json", "name": "ai-orb-face", "registryDependencies": [ "ai-core" ], "registryUrl": "https://smoothui.dev/r/ai-orb-face.json", "tags": [ "orb", "ai", "character", "mascot", "eyes", "svg", "playful" ], "useCases": [ "Assistant mascot that reacts as the user works", "Onboarding companion with readable moods", "Playful alternative to a spinner or status badge" ] }, { "animationType": "spring", "category": "ai", "complexity": "complex", "compositionHints": [ "Pass state=\"streaming\" to turn submit into stop", "Render model pickers and mode toggles as children — they land in the toolbar", "Pair with ai-orb-aura for an ambient presence indicator" ], "dependencies": [ "lucide-react", "motion" ], "description": "AI prompt composer with autogrowing textarea, attachment chips and a send-to-stop path morph.", "displayName": "AiPromptInput", "docUrl": "https://smoothui.dev/docs/components/ai-prompt-input", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ai-prompt-input.json", "name": "ai-prompt-input", "registryDependencies": [ "ai-core" ], "registryUrl": "https://smoothui.dev/r/ai-prompt-input.json", "tags": [ "ai", "chat", "input", "textarea", "composer", "prompt", "form" ], "useCases": [ "Chat composer for an assistant or agent", "Prompt box with attachments and a model picker slot", "Stop control while a response is streaming" ] }, { "animationType": "spring", "category": "ai", "complexity": "moderate", "compositionHints": [ "Pass isStreaming so the shimmer means work, not decoration", "Leave collapseWhenDone on unless the trace is the main content", "A manual open or close stops the component deciding for the user" ], "dependencies": [ "lucide-react", "motion" ], "description": "Collapsible AI reasoning trace that shimmers only while the model works, reports how long it took and gets out of the way.", "displayName": "AiReasoning", "docUrl": "https://smoothui.dev/docs/components/ai-reasoning", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ai-reasoning.json", "name": "ai-reasoning", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/ai-reasoning.json", "tags": [ "ai", "reasoning", "thinking", "collapsible", "chat", "trace" ], "useCases": [ "Chain-of-thought trace above an answer", "Agent step log that should not dominate the layout", "Any disclosure that becomes clutter once resolved" ] }, { "animationType": "tween", "category": "ai", "complexity": "moderate", "compositionHints": [ "Pass the growing text on every render — only new words animate", "Mark citations inline as [1], [2] and pass a matching citations array", "Set isStreaming to show the caret, clear it when the stream ends" ], "dependencies": [ "motion" ], "description": "Streaming assistant text where words animate in as they arrive, with a caret that rides the last glyph and inline citation pills.", "displayName": "AiResponse", "docUrl": "https://smoothui.dev/docs/components/ai-response", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ai-response.json", "name": "ai-response", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/ai-response.json", "tags": [ "ai", "streaming", "text", "citations", "chat", "response" ], "useCases": [ "Streaming answer in a chat thread", "Answer with inline source citations", "Any token-by-token text that should not read as a typewriter" ] }, { "animationType": "spring", "category": "ai", "complexity": "moderate", "compositionHints": [ "The favicon morphs into its row via a shared layout id — do not re-key it", "Collapsed by default; provenance should be available, not loud", "Pair with ai-citation for inline references to the same sources" ], "dependencies": [ "lucide-react", "motion" ], "description": "Favicon stack that fans out on hover and expands into a source list, with each favicon morphing into its row.", "displayName": "AiSources", "docUrl": "https://smoothui.dev/docs/components/ai-sources", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ai-sources.json", "name": "ai-sources", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/ai-sources.json", "tags": [ "ai", "sources", "citations", "rag", "favicons", "list" ], "useCases": [ "Sources behind a generated answer", "Retrieved chunks in a RAG interface", "Compact provenance row under a message" ] }, { "animationType": "spring", "category": "ai", "complexity": "simple", "compositionHints": [ "Centre-out stagger says the options are equal weight, not ranked", "Pair with ai-prompt-input so a chip fills the composer", "Chips reflow with a layout animation when the set changes" ], "dependencies": [ "lucide-react", "motion" ], "description": "Prompt suggestion chips that radiate in from the centre of the row rather than sweeping left to right.", "displayName": "AiSuggestions", "docUrl": "https://smoothui.dev/docs/components/ai-suggestions", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ai-suggestions.json", "name": "ai-suggestions", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/ai-suggestions.json", "tags": [ "ai", "chat", "suggestions", "chips", "prompt", "empty-state" ], "useCases": [ "Empty state of a chat with starter prompts", "Follow-up questions after an answer", "Quick actions offered mid-conversation" ] }, { "animationType": "spring", "category": "ai", "complexity": "complex", "compositionHints": [ "Only the running step animates; completed steps settle and go quiet", "Nest children one level for sub-steps", "Counts come from the data, so the header never disagrees with the rows" ], "dependencies": [ "lucide-react", "motion" ], "description": "Live agent plan with nested steps, a drawn checkmark on completion and a travelling underline on whatever is running.", "displayName": "AiTaskList", "docUrl": "https://smoothui.dev/docs/components/ai-task-list", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ai-task-list.json", "name": "ai-task-list", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/ai-task-list.json", "tags": [ "ai", "tasks", "plan", "agent", "checklist", "progress" ], "useCases": [ "Live agent plan with nested steps", "Multi-step tool run with per-step status", "To-do list an agent ticks off as it works" ] }, { "animationType": "spring", "category": "ai", "complexity": "moderate", "compositionHints": [ "The badge never unmounts, so the eye tracks one object through the lifecycle", "Omit args and result to render a plain non-expandable status row", "Stack several inside a conversation for an agent trace" ], "dependencies": [ "lucide-react", "motion" ], "description": "Collapsible tool invocation whose status badge is one ring that evolves — breathing, spinning, then drawing a check or a cross.", "displayName": "AiToolCall", "docUrl": "https://smoothui.dev/docs/components/ai-tool-call", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ai-tool-call.json", "name": "ai-tool-call", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/ai-tool-call.json", "tags": [ "ai", "tool", "function-call", "agent", "status", "collapsible" ], "useCases": [ "Tool or function call inside an agent transcript", "MCP tool invocation with arguments and result", "Compact status row for a background step" ] }, { "animationType": "spring", "category": "data-display", "complexity": "moderate", "compositionHints": [ "Use with animated-tooltip to show user names on hover" ], "dependencies": [ "motion" ], "description": "Stack of overlapping avatars with smooth expand/collapse animation", "displayName": "AnimatedAvatarGroup", "docUrl": "https://smoothui.dev/docs/components/animated-avatar-group", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/animated-avatar-group.json", "name": "animated-avatar-group", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/animated-avatar-group.json", "tags": [ "avatar", "group", "stack", "overlap", "hover", "expand", "animated" ], "useCases": [ "Show team members or contributors as overlapping avatars", "Display active users in a collaborative workspace", "Compact user list that expands on hover" ] }, { "animationType": "spring", "category": "basic-ui", "complexity": "moderate", "compositionHints": [ "Use inside forms with animated-input", "Combine with animated-progress-bar for upload progress" ], "dependencies": [ "motion" ], "description": "Animated drag-and-drop file upload component", "displayName": "AnimatedFileUpload", "docUrl": "https://smoothui.dev/docs/components/animated-file-upload", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/animated-file-upload.json", "name": "animated-file-upload", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/animated-file-upload.json", "tags": [ "upload", "file", "drag-drop", "input", "animated" ], "useCases": [ "File upload with drag-and-drop support", "Image upload area with preview", "Document upload in forms" ] }, { "animationType": "tween", "category": "basic-ui", "complexity": "simple", "compositionHints": [ "Combine with basic-toast for form validation feedback", "Use in forms alongside animated-toggle and basic-dropdown" ], "dependencies": [ "motion" ], "description": "A AnimatedInput component for SmoothUI.", "displayName": "AnimatedInput", "docUrl": "https://smoothui.dev/docs/components/animated-input", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/animated-input.json", "name": "animated-input", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/animated-input.json", "tags": [ "input", "form", "floating-label", "material-design", "animated" ], "useCases": [ "Form input with floating label animation", "Material Design style text field", "Accessible input with animated placeholder transition" ] }, { "animationType": "spring", "category": "data-display", "complexity": "moderate", "compositionHints": [ "Use with animated-avatar-group inside each list item", "Pair with pinned-list when some entries need to stay on top" ], "dependencies": [ "motion" ], "description": "A list that animates additions, removals and reordering, with an optional auto-feed mode.", "displayName": "AnimatedList", "docUrl": "https://smoothui.dev/docs/components/animated-list", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/animated-list.json", "name": "animated-list", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/animated-list.json", "tags": [ "list", "feed", "notifications", "reorder", "layout", "animated" ], "useCases": [ "Live notification feed that reveals items one at a time", "Activity log with additions, removals and reordering", "Leaderboard-style list where older entries recede visually" ] }, { "animationType": "spring", "category": "basic-ui", "complexity": "moderate", "compositionHints": [ "Use in forms alongside animated-input and animated-toggle", "Pair with scrubber when a slider-style alternative is also needed" ], "dependencies": [ "motion", "lucide-react" ], "description": "A numeric field with rolling digits, keyboard stepping and horizontal scrub-to-change.", "displayName": "AnimatedNumberInput", "docUrl": "https://smoothui.dev/docs/components/animated-number-input", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/animated-number-input.json", "name": "animated-number-input", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/animated-number-input.json", "tags": [ "input", "number", "stepper", "scrub", "form", "spinbutton", "animated" ], "useCases": [ "Quantity field with scrub-to-change and keyboard stepping", "Numeric settings input with rolling digit feedback", "Currency or unit field with prefix/suffix and precision control" ] }, { "animationType": "tween", "category": "basic-ui", "complexity": "moderate", "compositionHints": [ "Combine with basic-modal for verification dialogs", "Use basic-toast to show verification success/error" ], "dependencies": [ "motion", "lucide-react", "input-otp" ], "description": "A AnimatedOTPInput component for SmoothUI.", "displayName": "AnimatedOTPInput", "docUrl": "https://smoothui.dev/docs/components/animated-o-t-p-input", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/animated-o-t-p-input.json", "name": "animated-o-t-p-input", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/animated-o-t-p-input.json", "tags": [ "otp", "input", "verification", "code", "pin", "form", "animated" ], "useCases": [ "One-time password input for two-factor authentication", "Verification code entry with animated digit slots", "PIN code input with staggered entrance animations" ] }, { "animationType": "spring", "category": "basic-ui", "complexity": "simple", "compositionHints": [ "Pair with skeleton-loader for loading states", "Use with number-flow to show animated percentage text" ], "dependencies": [ "motion" ], "description": "A AnimatedProgressBar component for SmoothUI.", "displayName": "AnimatedProgressBar", "docUrl": "https://smoothui.dev/docs/components/animated-progress-bar", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/animated-progress-bar.json", "name": "animated-progress-bar", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/animated-progress-bar.json", "tags": [ "progress", "bar", "loading", "percentage", "spring", "animated" ], "useCases": [ "Show file upload or task completion progress", "Animated skill level or stat bar", "Visual progress indicator for multi-step flows" ] }, { "animationType": "spring", "category": "basic-ui", "complexity": "moderate", "compositionHints": [ "Use with animated-input for multi-step forms", "Combine with animated-progress-bar for additional progress display" ], "dependencies": [ "motion" ], "description": "Animated stepper/wizard component with step transitions", "displayName": "AnimatedStepper", "docUrl": "https://smoothui.dev/docs/components/animated-stepper", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/animated-stepper.json", "name": "animated-stepper", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/animated-stepper.json", "tags": [ "stepper", "wizard", "steps", "progress", "animated" ], "useCases": [ "Multi-step form wizard with animated transitions", "Onboarding flow with progress indicator", "Checkout process with step navigation" ] }, { "animationType": "spring", "category": "basic-ui", "complexity": "moderate", "compositionHints": [ "Combine with animated-tooltip for rich tab headers", "Use with expandable-cards for tabbed content panels" ], "dependencies": [ "motion" ], "description": "Animated tabs component with sliding indicator", "displayName": "AnimatedTabs", "docUrl": "https://smoothui.dev/docs/components/animated-tabs", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/animated-tabs.json", "name": "animated-tabs", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/animated-tabs.json", "tags": [ "tabs", "navigation", "indicator", "underline", "pill", "segment", "animated" ], "useCases": [ "Tab navigation with smooth sliding indicator", "Section switcher with animated underline, pill, or segment styles", "Content organization with animated tab transitions" ] }, { "animationType": "spring", "category": "basic-ui", "complexity": "simple", "compositionHints": [ "Use with searchable-dropdown for tag suggestions", "Pair with animated-input for tag creation" ], "dependencies": [ "motion", "lucide-react" ], "description": "A AnimatedTags component for SmoothUI.", "displayName": "AnimatedTags", "docUrl": "https://smoothui.dev/docs/components/animated-tags", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/animated-tags.json", "name": "animated-tags", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/animated-tags.json", "tags": [ "tags", "chips", "filter", "selection", "animated", "add-remove" ], "useCases": [ "Tag selection with add/remove animations", "Animated filter chips for content categorization", "Interactive tag picker for forms and filters" ] }, { "animationType": "spring", "category": "basic-ui", "complexity": "simple", "compositionHints": [ "Use in settings panels alongside animated-input", "Pair with basic-toast for toggle confirmation feedback" ], "dependencies": [ "motion" ], "description": "Animated toggle switch with morph and icon variants", "displayName": "AnimatedToggle", "docUrl": "https://smoothui.dev/docs/components/animated-toggle", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/animated-toggle.json", "name": "animated-toggle", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/animated-toggle.json", "tags": [ "toggle", "switch", "checkbox", "morph", "icon", "animated" ], "useCases": [ "Settings toggle with smooth morph animation", "Theme switcher with icon variant", "Feature flag toggle with accessible keyboard support" ] }, { "animationType": "spring", "category": "basic-ui", "complexity": "simple", "compositionHints": [ "Add to animated-avatar-group for user name hints", "Enhance button-copy and magnetic-button with action tooltips" ], "dependencies": [ "motion" ], "description": "Spring-animated tooltip with multiple placement options", "displayName": "AnimatedTooltip", "docUrl": "https://smoothui.dev/docs/components/animated-tooltip", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/animated-tooltip.json", "name": "animated-tooltip", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/animated-tooltip.json", "tags": [ "tooltip", "popover", "hint", "placement", "spring", "animated" ], "useCases": [ "Show contextual help text on hover", "Icon button label tooltip with spring animation", "Multi-placement tooltip for UI element descriptions" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "Persistent WebGL shader transition wrapper that swaps content behind a cinematic aperture bloom.", "displayName": "ApertureBlurTransition", "docUrl": "https://smoothui.dev/docs/components/aperture-blur-transition", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/aperture-blur-transition.json", "name": "aperture-blur-transition", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/aperture-blur-transition.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "complex", "compositionHints": [ "Use animated-progress-bar for download progress visualization" ], "dependencies": [ "motion", "lucide-react" ], "description": "A AppDownloadStack component for SmoothUI.", "displayName": "AppDownloadStack", "docUrl": "https://smoothui.dev/docs/components/app-download-stack", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/app-download-stack.json", "name": "app-download-stack", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/app-download-stack.json", "tags": [ "download", "stack", "cards", "app-store", "selection", "animated" ], "useCases": [ "App download selection with stacked card animation", "Batch app installer with animated progress", "Multi-select download manager with expand/collapse" ] }, { "animationType": "spring", "category": "other", "complexity": "complex", "compositionHints": [ "Use animated-avatar-group for attendee lists on invite cards" ], "dependencies": [ "@smoothui/data", "motion", "lucide-react", "popmotion" ], "description": "A AppleInvites component for SmoothUI.", "displayName": "AppleInvites", "docUrl": "https://smoothui.dev/docs/components/apple-invites", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/apple-invites.json", "name": "apple-invites", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/apple-invites.json", "tags": [ "carousel", "cards", "invites", "apple", "3d", "perspective", "animated" ], "useCases": [ "Event invitation cards with 3D carousel", "Apple-style invite card stack with swipe gestures", "Showcase cards with perspective transforms and crown badges" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "An ArcadePixel component for SmoothUI.", "displayName": "ArcadePixel", "docUrl": "https://smoothui.dev/docs/components/arcade-pixel", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/arcade-pixel.json", "name": "arcade-pixel", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/arcade-pixel.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "An AsciiRender component for SmoothUI.", "displayName": "AsciiRender", "docUrl": "https://smoothui.dev/docs/components/ascii-render", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ascii-render.json", "name": "ascii-render", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/ascii-render.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "An AuroraCurtain background component for SmoothUI.", "displayName": "AuroraCurtain", "docUrl": "https://smoothui.dev/docs/components/aurora-curtain", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/aurora-curtain.json", "name": "aurora-curtain", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/aurora-curtain.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "lucide-react", "motion" ], "description": "A presentation-only sign-in / sign-up form that reveals fields progressively and stays fully accessible.", "displayName": "AuthForm", "docUrl": "https://smoothui.dev/docs/components/auth-form", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/auth-form.json", "name": "auth-form", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/auth-form.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "basic-ui", "complexity": "simple", "compositionHints": [ "Use in FAQ blocks alongside reveal-text for section headings" ], "dependencies": [ "motion", "lucide-react" ], "description": "A BasicAccordion component for SmoothUI.", "displayName": "BasicAccordion", "docUrl": "https://smoothui.dev/docs/components/basic-accordion", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/basic-accordion.json", "name": "basic-accordion", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/basic-accordion.json", "tags": [ "accordion", "collapsible", "faq", "expand", "animated" ], "useCases": [ "FAQ section with expandable answers", "Collapsible content sections for long pages", "Settings panel with grouped collapsible sections" ] }, { "animationType": "spring", "category": "basic-ui", "complexity": "moderate", "compositionHints": [ "Pair with animated-input in forms", "Use basic-toast for selection confirmation" ], "dependencies": [ "motion", "lucide-react" ], "description": "A BasicDropdown component for SmoothUI.", "displayName": "BasicDropdown", "docUrl": "https://smoothui.dev/docs/components/basic-dropdown", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/basic-dropdown.json", "name": "basic-dropdown", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/basic-dropdown.json", "tags": [ "dropdown", "select", "menu", "form", "portal", "animated" ], "useCases": [ "Form select dropdown with smooth open/close animation", "Action menu with icon support", "Accessible dropdown with keyboard navigation and portal rendering" ] }, { "animationType": "spring", "category": "basic-ui", "complexity": "moderate", "compositionHints": [ "Use animated-o-t-p-input inside modals for verification flows", "Pair with basic-toast for post-modal action feedback" ], "dependencies": [ "motion", "lucide-react", "usehooks-ts" ], "description": "A BasicModal component for SmoothUI.", "displayName": "BasicModal", "docUrl": "https://smoothui.dev/docs/components/basic-modal", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/basic-modal.json", "name": "basic-modal", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/basic-modal.json", "tags": [ "modal", "dialog", "overlay", "popup", "portal", "animated" ], "useCases": [ "Confirmation dialog with backdrop animation", "Form modal with multiple size options", "Content overlay with click-outside dismissal" ] }, { "animationType": "spring", "category": "feedback", "complexity": "simple", "compositionHints": [ "Use after basic-modal form submissions", "Pair with button-copy for copy confirmation" ], "dependencies": [ "motion", "lucide-react" ], "description": "A BasicToast component for SmoothUI.", "displayName": "BasicToast", "docUrl": "https://smoothui.dev/docs/components/basic-toast", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/basic-toast.json", "name": "basic-toast", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/basic-toast.json", "tags": [ "toast", "notification", "alert", "snackbar", "feedback", "animated" ], "useCases": [ "Show success/error notifications after form submissions", "Temporary status messages with auto-dismiss", "Multi-type alerts with icons for success, error, warning, info" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A BlurOutUp text animation component for SmoothUI.", "displayName": "BlurOutUp", "docUrl": "https://smoothui.dev/docs/components/blur-out-up", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/blur-out-up.json", "name": "blur-out-up", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/blur-out-up.json", "tags": [], "useCases": [] }, { "animationType": "tween", "category": "other", "complexity": "moderate", "compositionHints": [ "Use reveal-text for animated book titles" ], "dependencies": [ "motion" ], "description": "A 3D CSS book component with perspective transforms and hover animation", "displayName": "Book", "docUrl": "https://smoothui.dev/docs/components/book", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/book.json", "name": "book", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/book.json", "tags": [ "book", "3d", "css", "perspective", "hover", "cover", "decorative" ], "useCases": [ "3D book cover display with hover open animation", "Product showcase for ebooks or documentation", "Decorative book component with stripe and simple variants" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A BorderBeam component for SmoothUI.", "displayName": "BorderBeam", "docUrl": "https://smoothui.dev/docs/components/border-beam", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/border-beam.json", "name": "border-beam", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/border-beam.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A BottomUpLetters text animation component for SmoothUI.", "displayName": "BottomUpLetters", "docUrl": "https://smoothui.dev/docs/components/bottom-up-letters", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/bottom-up-letters.json", "name": "bottom-up-letters", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/bottom-up-letters.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion", "lucide-react" ], "description": "Animated breadcrumb navigation with stagger-in animation", "displayName": "Breadcrumb", "docUrl": "https://smoothui.dev/docs/components/breadcrumb", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/breadcrumb.json", "name": "breadcrumb", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/breadcrumb.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A BreakpointIndicator component for SmoothUI.", "displayName": "BreakpointIndicator", "docUrl": "https://smoothui.dev/docs/components/breakpoint-indicator", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/breakpoint-indicator.json", "name": "breakpoint-indicator", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/breakpoint-indicator.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "button", "complexity": "simple", "compositionHints": [ "Enhance with animated-tooltip to show copy hint", "Use basic-toast for additional copy confirmation" ], "dependencies": [ "motion", "lucide-react" ], "description": "A ButtonCopy component for SmoothUI.", "displayName": "ButtonCopy", "docUrl": "https://smoothui.dev/docs/components/button-copy", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/button-copy.json", "name": "button-copy", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/button-copy.json", "tags": [ "button", "copy", "clipboard", "feedback", "icon-swap", "animated" ], "useCases": [ "Copy to clipboard button with loading/success animation", "Code snippet copy button with icon transition", "Share button with animated state feedback" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A CardSwipeDeck component for SmoothUI.", "displayName": "CardSwipeDeck", "docUrl": "https://smoothui.dev/docs/components/card-swipe-deck", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/card-swipe-deck.json", "name": "card-swipe-deck", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/card-swipe-deck.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "basic-ui", "complexity": "simple", "compositionHints": [ "Use inside form component for validation", "Pair with label element for accessibility" ], "dependencies": [ "motion", "radix-ui" ], "description": "An animated Checkbox component for SmoothUI with checkmark and indeterminate state animations.", "displayName": "Checkbox", "docUrl": "https://smoothui.dev/docs/components/checkbox", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/checkbox.json", "name": "checkbox", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/checkbox.json", "tags": [ "checkbox", "form", "input", "toggle", "animated" ], "useCases": [ "Form checkbox with animated checkmark", "Indeterminate state for partial selections", "Accessible checkbox with keyboard support" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "Persistent WebGL shader transition wrapper that swaps content under a soft chromatic blur wash.", "displayName": "ChromaBlurTransition", "docUrl": "https://smoothui.dev/docs/components/chroma-blur-transition", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/chroma-blur-transition.json", "name": "chroma-blur-transition", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/chroma-blur-transition.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "button", "complexity": "simple", "compositionHints": [ "Use with animated-tooltip for button descriptions" ], "dependencies": [ "motion" ], "description": "A ClipCornersButton component for SmoothUI.", "displayName": "ClipCornersButton", "docUrl": "https://smoothui.dev/docs/components/clip-corners-button", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/clip-corners-button.json", "name": "clip-corners-button", "registryDependencies": [ "smooth-button" ], "registryUrl": "https://smoothui.dev/r/clip-corners-button.json", "tags": [ "button", "clip-path", "corners", "geometric", "hover", "animated" ], "useCases": [ "Stylized CTA button with clipped corner hover effect", "Geometric button for gaming or tech-themed UIs", "Creative hover button with corner triangle animations" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion", "lucide-react" ], "description": "A CodeBlock component for SmoothUI.", "displayName": "CodeBlock", "docUrl": "https://smoothui.dev/docs/components/code-block", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/code-block.json", "name": "code-block", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/code-block.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion", "lucide-react" ], "description": "An animated Combobox component for SmoothUI with text filtering, async search, and keyboard navigation.", "displayName": "Combobox", "docUrl": "https://smoothui.dev/docs/components/combobox", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/combobox.json", "name": "combobox", "registryDependencies": [ "smooth-button" ], "registryUrl": "https://smoothui.dev/r/combobox.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "basic-ui", "complexity": "moderate", "compositionHints": [ "Wrap any element to add right-click menu", "Shares animation pattern with dropdown-menu" ], "dependencies": [ "motion" ], "description": "An animated Context Menu component for SmoothUI with spring animations, nested submenus, and keyboard navigation.", "displayName": "ContextMenu", "docUrl": "https://smoothui.dev/docs/components/context-menu", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/context-menu.json", "name": "context-menu", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/context-menu.json", "tags": [ "context-menu", "menu", "right-click", "submenu", "animated" ], "useCases": [ "Right-click context menus with nested submenus", "File browser context actions", "Canvas or workspace right-click actions" ] }, { "animationType": "spring", "category": "data-display", "complexity": "complex", "compositionHints": [ "Pair with animated-tooltip for cell details", "Use number-flow for animated stat counters alongside" ], "dependencies": [ "motion" ], "description": "A ContributionGraph component for SmoothUI.", "displayName": "ContributionGraph", "docUrl": "https://smoothui.dev/docs/components/contribution-graph", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/contribution-graph.json", "name": "contribution-graph", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/contribution-graph.json", "tags": [ "graph", "heatmap", "calendar", "github", "activity", "data-visualization" ], "useCases": [ "GitHub-style contribution heatmap", "Activity tracking calendar visualization", "Yearly data density chart with tooltip details" ] }, { "animationType": "spring", "category": "basic-ui", "complexity": "complex", "compositionHints": [ "Pair with animated-input for a phone number field with a dial-code prefix", "Use inside form for checkout or account settings flows" ], "dependencies": [ "motion", "lucide-react" ], "description": "A CountryDialog component for SmoothUI.", "displayName": "CountryDialog", "docUrl": "https://smoothui.dev/docs/components/country-dialog", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/country-dialog.json", "name": "country-dialog", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/country-dialog.json", "tags": [ "dialog", "country", "picker", "search", "listbox", "combobox", "virtualized", "animated" ], "useCases": [ "Phone number country/region code picker", "Billing address country selector with search", "Locale or shipping-region picker with recent selections" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A CoverflowCarousel component for SmoothUI.", "displayName": "CoverflowCarousel", "docUrl": "https://smoothui.dev/docs/components/coverflow-carousel", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/coverflow-carousel.json", "name": "coverflow-carousel", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/coverflow-carousel.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [ "Wrap around any content section for interactive cursor effect" ], "dependencies": [ "motion" ], "description": "A CursorFollow component for SmoothUI.", "displayName": "CursorFollow", "docUrl": "https://smoothui.dev/docs/components/cursor-follow", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/cursor-follow.json", "name": "cursor-follow", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/cursor-follow.json", "tags": [ "cursor", "follow", "mouse", "interactive", "bubble", "spring", "animated" ], "useCases": [ "Custom cursor follower with spring physics", "Interactive cursor bubble that shows context text", "Decorative cursor effect for portfolios and creative sites" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A CursorImageTrail component for SmoothUI.", "displayName": "CursorImageTrail", "docUrl": "https://smoothui.dev/docs/components/cursor-image-trail", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/cursor-image-trail.json", "name": "cursor-image-trail", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/cursor-image-trail.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A DepthParallaxWords text animation component for SmoothUI.", "displayName": "DepthParallaxWords", "docUrl": "https://smoothui.dev/docs/components/depth-parallax-words", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/depth-parallax-words.json", "name": "depth-parallax-words", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/depth-parallax-words.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "lucide-react", "motion", "radix-ui" ], "description": "Animated Dialog and AlertDialog components for SmoothUI.", "displayName": "Dialog", "docUrl": "https://smoothui.dev/docs/components/dialog", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/dialog.json", "name": "dialog", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/dialog.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A DitherChart component for SmoothUI.", "displayName": "DitherChart", "docUrl": "https://smoothui.dev/docs/components/dither-chart", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/dither-chart.json", "name": "dither-chart", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/dither-chart.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A DitherImage component for SmoothUI.", "displayName": "DitherImage", "docUrl": "https://smoothui.dev/docs/components/dither-image", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/dither-image.json", "name": "dither-image", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/dither-image.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A Dock component for SmoothUI.", "displayName": "Dock", "docUrl": "https://smoothui.dev/docs/components/dock", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/dock.json", "name": "dock", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/dock.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "button", "complexity": "simple", "compositionHints": [ "Use with animated-tooltip for additional context" ], "dependencies": [ "motion" ], "description": "A DotMorphButton component for SmoothUI.", "displayName": "DotMorphButton", "docUrl": "https://smoothui.dev/docs/components/dot-morph-button", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/dot-morph-button.json", "name": "dot-morph-button", "registryDependencies": [ "smooth-button" ], "registryUrl": "https://smoothui.dev/r/dot-morph-button.json", "tags": [ "button", "dot", "morph", "hover", "animated" ], "useCases": [ "Button with dot-to-arrow morph on hover", "Creative CTA button with shape-shifting indicator", "Hover-aware button with morphing dot animation" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "An animated Drawer component for SmoothUI that slides from any side.", "displayName": "Drawer", "docUrl": "https://smoothui.dev/docs/components/drawer", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/drawer.json", "name": "drawer", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/drawer.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A DrawingCursor component for SmoothUI.", "displayName": "DrawingCursor", "docUrl": "https://smoothui.dev/docs/components/drawing-cursor", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/drawing-cursor.json", "name": "drawing-cursor", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/drawing-cursor.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "basic-ui", "complexity": "moderate", "compositionHints": [ "Use as trigger for toolbar actions", "Pair with smooth-button as trigger" ], "dependencies": [ "motion" ], "description": "An animated Dropdown Menu component for SmoothUI with spring animations, nested submenus, and keyboard navigation.", "displayName": "DropdownMenu", "docUrl": "https://smoothui.dev/docs/components/dropdown-menu", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/dropdown-menu.json", "name": "dropdown-menu", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/dropdown-menu.json", "tags": [ "dropdown", "menu", "navigation", "submenu", "animated" ], "useCases": [ "Action menus with nested submenus", "Navigation dropdown with keyboard support", "Context-aware menu with animated open/close" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A DurationPicker component for SmoothUI.", "displayName": "DurationPicker", "docUrl": "https://smoothui.dev/docs/components/duration-picker", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/duration-picker.json", "name": "duration-picker", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/duration-picker.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "complex", "compositionHints": [ "Use with notification-badge for alert indicators" ], "dependencies": [ "motion", "lucide-react" ], "description": "A DynamicIsland component for SmoothUI.", "displayName": "DynamicIsland", "docUrl": "https://smoothui.dev/docs/components/dynamic-island", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/dynamic-island.json", "name": "dynamic-island", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/dynamic-island.json", "tags": [ "dynamic-island", "apple", "notification", "music", "timer", "morph", "animated" ], "useCases": [ "Apple Dynamic Island-inspired notification area", "Morphing status bar for music player, timer, and calls", "Context-aware notification component with layout animations" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "An EmbossSurface component for SmoothUI.", "displayName": "EmbossSurface", "docUrl": "https://smoothui.dev/docs/components/emboss-surface", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/emboss-surface.json", "name": "emboss-surface", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/emboss-surface.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "feedback", "complexity": "moderate", "compositionHints": [ "Pair with ai-message or a comment list item", "Feed reacted/count from server state and update it inside onReact" ], "dependencies": [ "motion", "lucide-react" ], "description": "A reaction bar with particle bursts, a rolling odometer count, and a hover/focus emoji picker.", "displayName": "EmojiReaction", "docUrl": "https://smoothui.dev/docs/components/emoji-reaction", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/emoji-reaction.json", "name": "emoji-reaction", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/emoji-reaction.json", "tags": [ "reaction", "emoji", "picker", "popover", "gesture", "interactive", "animated" ], "useCases": [ "Reaction bar under a chat message, post, or comment", "Like/love/celebrate toggle group with a rolling count", "Emoji picker popover for adding ad-hoc reactions" ] }, { "animationType": "tween", "category": "layout", "complexity": "moderate", "compositionHints": [ "Combine with animated-tabs for categorized card grids", "Use animated-avatar-group for card author displays" ], "dependencies": [ "motion", "lucide-react" ], "description": "A ExpandableCards component for SmoothUI.", "displayName": "ExpandableCards", "docUrl": "https://smoothui.dev/docs/components/expandable-cards", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/expandable-cards.json", "name": "expandable-cards", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/expandable-cards.json", "tags": [ "cards", "expandable", "modal", "gallery", "layout-animation", "animated" ], "useCases": [ "Card grid that expands to full detail view", "Image gallery with animated card expansion", "Content cards with smooth shared layout transitions" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "An ExpandableNavbar component for SmoothUI.", "displayName": "ExpandableNavbar", "docUrl": "https://smoothui.dev/docs/components/expandable-navbar", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/expandable-navbar.json", "name": "expandable-navbar", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/expandable-navbar.json", "tags": [], "useCases": [] }, { "animationType": "gesture", "category": "other", "complexity": "complex", "compositionHints": [ "Pair with scrubber for different slider styles" ], "dependencies": [ "motion" ], "description": "iOS-style exposure slider with draggable ticker and progress ring", "displayName": "ExposureSlider", "docUrl": "https://smoothui.dev/docs/components/exposure-slider", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/exposure-slider.json", "name": "exposure-slider", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/exposure-slider.json", "tags": [ "slider", "exposure", "ios", "ticker", "progress-ring", "gesture", "drag" ], "useCases": [ "iOS-style exposure/brightness slider with ticker marks", "Precise value control with drag gesture and progress ring", "Camera-style parameter adjustment slider" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A FadeThrough text animation component for SmoothUI.", "displayName": "FadeThrough", "docUrl": "https://smoothui.dev/docs/components/fade-through", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/fade-through.json", "name": "fade-through", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/fade-through.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "lucide-react", "motion" ], "description": "A keyboard-driven search field that shows each result's favicon, with a combobox listbox and highlighted matches.", "displayName": "FaviconSearch", "docUrl": "https://smoothui.dev/docs/components/favicon-search", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/favicon-search.json", "name": "favicon-search", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/favicon-search.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "complex", "compositionHints": [ "Use animated-avatar-group for comment thread participants" ], "dependencies": [ "motion" ], "description": "A FigmaComment component for SmoothUI.", "displayName": "FigmaComment", "docUrl": "https://smoothui.dev/docs/components/figma-comment", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/figma-comment.json", "name": "figma-comment", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/figma-comment.json", "tags": [ "comment", "figma", "avatar", "popover", "morph", "collaborative", "animated" ], "useCases": [ "Figma-style expandable comment bubble with avatar", "Collaborative annotation comment component", "Morphing comment indicator that expands to show content" ] }, { "animationType": "spring", "category": "navigation", "complexity": "complex", "compositionHints": [ "Pair with a resizable sidebar panel", "Combine with code-block to preview the selected file" ], "dependencies": [ "motion", "lucide-react" ], "description": "A FileTree component for SmoothUI.", "displayName": "FileTree", "docUrl": "https://smoothui.dev/docs/components/file-tree", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/file-tree.json", "name": "file-tree", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/file-tree.json", "tags": [ "tree", "file-tree", "explorer", "navigation", "keyboard", "accordion", "animated" ], "useCases": [ "Code editor style file explorer", "Nested category or folder navigation", "Document management sidebar" ] }, { "animationType": "spring", "category": "navigation", "complexity": "moderate", "compositionHints": [ "Pass a scrollable container ref via containerRef when the navbar lives inside a scrollable panel", "Pass lucide-react icons as the icon field of each item" ], "dependencies": [ "motion" ], "description": "A FloatingNavbar component for SmoothUI.", "displayName": "FloatingNavbar", "docUrl": "https://smoothui.dev/docs/components/floating-navbar", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/floating-navbar.json", "name": "floating-navbar", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/floating-navbar.json", "tags": [ "navbar", "navigation", "scroll", "pill", "sticky", "blur", "spring", "animated" ], "useCases": [ "Marketing site navbar that hides on scroll down and reveals on scroll up", "Pill-style floating navigation with an active-item indicator", "Compact navbar that shrinks after scrolling past the hero" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A FocusBlurResolve text animation component for SmoothUI.", "displayName": "FocusBlurResolve", "docUrl": "https://smoothui.dev/docs/components/focus-blur-resolve", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/focus-blur-resolve.json", "name": "focus-blur-resolve", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/focus-blur-resolve.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "layout", "complexity": "moderate", "compositionHints": [ "Use with small preview cards as folder items", "Pair with tooltips on individual cards for extra context" ], "dependencies": [ "motion" ], "description": "A FolderReveal component for SmoothUI.", "displayName": "FolderReveal", "docUrl": "https://smoothui.dev/docs/components/folder-reveal", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/folder-reveal.json", "name": "folder-reveal", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/folder-reveal.json", "tags": [ "folder", "reveal", "fan", "stack", "hover", "click", "animated" ], "useCases": [ "Reveal a set of files or cards from an animated folder", "Playful navigation entry point that fans out shortcuts", "Dashboard widget that discloses grouped content on demand" ] }, { "animationType": "spring", "category": "basic-ui", "complexity": "moderate", "compositionHints": [ "Wrap Checkbox, RadioGroup, Select, and native inputs", "Pass errors from react-hook-form or custom validation", "Use FormField > FormLabel + FormControl + FormMessage pattern" ], "dependencies": [ "lucide-react", "motion" ], "description": "A lightweight, composable Form component with animated error messages and full accessibility support.", "displayName": "Form", "docUrl": "https://smoothui.dev/docs/components/form", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/form.json", "name": "form", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/form.json", "tags": [ "form", "validation", "error", "input", "accessible", "animated" ], "useCases": [ "Contact forms with validation", "Settings forms with field-level errors", "Signup forms with accessible error messages" ] }, { "animationType": "spring", "category": "data-display", "complexity": "moderate", "compositionHints": [ "Use with animated-avatar-group for stargazer display", "Pair with number-flow for animated counter" ], "dependencies": [ "motion", "lucide-react" ], "description": "A GitHubStarsAnimation component for SmoothUI.", "displayName": "GithubStarsAnimation", "docUrl": "https://smoothui.dev/docs/components/github-stars-animation", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/github-stars-animation.json", "name": "github-stars-animation", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/github-stars-animation.json", "tags": [ "github", "stars", "counter", "social-proof", "api", "animated" ], "useCases": [ "Display GitHub repository star count with animated counter", "Social proof widget with stargazer avatars", "Repository statistics badge with live API data" ] }, { "animationType": "tween", "category": "layout", "complexity": "moderate", "compositionHints": [ "Place over an image or colorful background to show off the refraction", "Combine with glow-hover-card for a layered hover effect" ], "dependencies": [ "motion" ], "description": "A GlassCard component for SmoothUI.", "displayName": "GlassCard", "docUrl": "https://smoothui.dev/docs/components/glass-card", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/glass-card.json", "name": "glass-card", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/glass-card.json", "tags": [ "glass", "glassmorphism", "blur", "specular", "refraction", "card", "interactive" ], "useCases": [ "Liquid-glass surface over a hero image or gradient background", "Frosted panel for pricing, stats or feature cards", "Overlay UI that needs to stay legible over any background" ] }, { "animationType": "tween", "category": "layout", "complexity": "moderate", "compositionHints": [ "Wrap any content cards for the glow effect", "Use with animated-tabs for categorized card sections" ], "dependencies": [ "motion" ], "description": "A GlowHoverCards component for SmoothUI.", "displayName": "GlowHoverCard", "docUrl": "https://smoothui.dev/docs/components/glow-hover-card", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/glow-hover-card.json", "name": "glow-hover-card", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/glow-hover-card.json", "tags": [ "card", "glow", "hover", "gradient", "mask", "interactive", "animated" ], "useCases": [ "Card grid with cursor-tracking glow border effect", "Feature showcase cards with dynamic hover glow", "Interactive card group with shared glow mask" ] }, { "animationType": "none", "category": "other", "complexity": "simple", "compositionHints": [ "Wrap any children that should visually merge together", "Use useGooeyFilterId to apply the same filter to elements you render yourself" ], "dependencies": [], "description": "A GooeyFilter component for SmoothUI.", "displayName": "GooeyFilter", "docUrl": "https://smoothui.dev/docs/components/gooey-filter", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/gooey-filter.json", "name": "gooey-filter", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/gooey-filter.json", "tags": [ "gooey", "svg-filter", "blob", "merge", "utility", "wrapper" ], "useCases": [ "Merge overlapping shapes into a single liquid blob", "Wrap a group of dots or badges so they gooey-merge on overlap", "Reusable SVG goo filter for any custom blob/liquid effect" ] }, { "animationType": "tween", "category": "other", "complexity": "complex", "compositionHints": [ "Use as an alternative to animated-tooltip for creative UIs" ], "dependencies": [ "gsap" ], "description": "A GooeyPopover component for SmoothUI.", "displayName": "GooeyPopover", "docUrl": "https://smoothui.dev/docs/components/gooey-popover", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/gooey-popover.json", "name": "gooey-popover", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/gooey-popover.json", "tags": [ "popover", "gooey", "svg-filter", "gsap", "morph", "blob", "animated" ], "useCases": [ "Organic gooey blob popover with SVG filter effect", "Creative popover with liquid morph animation", "Unique menu or content reveal with gooey physics" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A GravityLetters component for SmoothUI.", "displayName": "GravityLetters", "docUrl": "https://smoothui.dev/docs/components/gravity-letters", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/gravity-letters.json", "name": "gravity-letters", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/gravity-letters.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A GravityStars particle background component for SmoothUI.", "displayName": "GravityStars", "docUrl": "https://smoothui.dev/docs/components/gravity-stars", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/gravity-stars.json", "name": "gravity-stars", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/gravity-stars.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "feedback", "complexity": "simple", "compositionHints": [ "Use alongside skeleton-loader for different loading states", "Pair with animated-progress-bar for determinate loading" ], "dependencies": [ "motion" ], "description": "3x3 grid-based loading animation with preset patterns", "displayName": "GridLoader", "docUrl": "https://smoothui.dev/docs/components/grid-loader", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/grid-loader.json", "name": "grid-loader", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/grid-loader.json", "tags": [ "loader", "grid", "loading", "spinner", "pattern", "animated" ], "useCases": [ "3x3 grid loading animation with customizable patterns", "Creative loading indicator with preset shape sequences", "Decorative loader with configurable cell patterns" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A HolographicFoil component for SmoothUI.", "displayName": "HolographicFoil", "docUrl": "https://smoothui.dev/docs/components/holographic-foil", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/holographic-foil.json", "name": "holographic-foil", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/holographic-foil.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "data-display", "complexity": "moderate", "compositionHints": [ "Feed image items with title/description for the gallery", "Use vertical orientation for sidebar-style panel pickers" ], "dependencies": [ "motion" ], "description": "A HoverExpand component for SmoothUI.", "displayName": "HoverExpand", "docUrl": "https://smoothui.dev/docs/components/hover-expand", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/hover-expand.json", "name": "hover-expand", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/hover-expand.json", "tags": [ "gallery", "accordion", "hover", "expand", "flex", "image", "animated" ], "useCases": [ "Accordion-style image gallery that expands on hover or focus", "Category picker with expanding preview panels", "Portfolio showcase with keyboard-navigable panels" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion", "lucide-react" ], "description": "A HoverImageList component for SmoothUI.", "displayName": "HoverImageList", "docUrl": "https://smoothui.dev/docs/components/hover-image-list", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/hover-image-list.json", "name": "hover-image-list", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/hover-image-list.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "ai", "complexity": "complex", "compositionHints": [ "Leave status undefined to let the panel run its own state machine around onGenerate", "Drive progress from 0 to 1 while the batch renders — every tile derives its own staggered resolve from it", "Set images as soon as generation starts, not at the end, so tiles fill progressively", "Pass a tiny preview (16-48px) per image for the blocky first pass", "Set typing to replay a prompt into the field with a caret", "Pass onCancel to turn the composer's send control into a stop button while a batch renders" ], "dependencies": [ "lucide-react", "motion" ], "description": "A text-to-image generation console — prompt and settings up top, a full-width 2x2 batch resolving from low-res mosaic to sharp below.", "displayName": "ImageGenerationPanel", "docUrl": "https://smoothui.dev/docs/components/image-generation-panel", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/image-generation-panel.json", "name": "image-generation-panel", "registryDependencies": [ "ai-core", "ai-loader", "ai-prompt-input" ], "registryUrl": "https://smoothui.dev/r/image-generation-panel.json", "tags": [ "ai", "image", "generation", "prompt", "grid", "progressive", "reveal", "mosaic" ], "useCases": [ "Text-to-image generation panel for an AI product", "Prompt composer with style presets and a result grid", "Any surface that queues work and reveals tiles as they complete" ] }, { "animationType": "spring", "category": "data-display", "complexity": "moderate", "compositionHints": [ "Use inside basic-modal for full image preview dialogs" ], "dependencies": [ "motion", "lucide-react", "react-use-measure" ], "description": "A ImageMetadataPreview component for SmoothUI.", "displayName": "ImageMetadataPreview", "docUrl": "https://smoothui.dev/docs/components/image-metadata-preview", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/image-metadata-preview.json", "name": "image-metadata-preview", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/image-metadata-preview.json", "tags": [ "image", "metadata", "preview", "expandable", "file-info", "animated" ], "useCases": [ "Image preview card with expandable metadata panel", "File information display with share and close actions", "Media asset preview with creation date and source info" ] }, { "animationType": "tween", "category": "other", "complexity": "moderate", "compositionHints": [ "Ideal for logo-cloud blocks", "Use with reviews-carousel for testimonial sections" ], "dependencies": [ "motion", "react-use-measure" ], "description": "A InfiniteSlider component for SmoothUI.", "displayName": "InfiniteSlider", "docUrl": "https://smoothui.dev/docs/components/infinite-slider", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/infinite-slider.json", "name": "infinite-slider", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/infinite-slider.json", "tags": [ "slider", "infinite", "marquee", "carousel", "auto-scroll", "animated" ], "useCases": [ "Infinite scrolling logo marquee or content slider", "Auto-scrolling testimonial or partner logo carousel", "Continuous content slider with hover speed control" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion", "lucide-react" ], "description": "Testimonial quotes woven into a paragraph that expand inline on hover or focus.", "displayName": "InlineTestimonials", "docUrl": "https://smoothui.dev/docs/components/inline-testimonials", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/inline-testimonials.json", "name": "inline-testimonials", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/inline-testimonials.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [ "Combine with basic-modal for image detail views" ], "dependencies": [ "motion", "lucide-react" ], "description": "A InteractiveImageSelector component for SmoothUI.", "displayName": "InteractiveImageSelector", "docUrl": "https://smoothui.dev/docs/components/interactive-image-selector", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/interactive-image-selector.json", "name": "interactive-image-selector", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/interactive-image-selector.json", "tags": [ "image", "selector", "gallery", "selection", "gesture", "animated" ], "useCases": [ "Image gallery with animated selection and deselection", "Multi-image picker with gesture-driven animations", "Photo selection interface with share and delete actions" ] }, { "animationType": "spring", "category": "layout", "complexity": "moderate", "compositionHints": [ "Use with searchable-dropdown for job filtering", "Pair with animated-tags for skill tag display" ], "dependencies": [ "motion", "usehooks-ts" ], "description": "A JobListingComponent component for SmoothUI.", "displayName": "JobListingComponent", "docUrl": "https://smoothui.dev/docs/components/job-listing-component", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/job-listing-component.json", "name": "job-listing-component", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/job-listing-component.json", "tags": [ "job", "listing", "card", "expandable", "careers", "animated" ], "useCases": [ "Job listing cards with expandable details", "Careers page component with company logos", "Animated job board with salary and location info" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A KineticCenterBuild text animation component for SmoothUI.", "displayName": "KineticCenterBuild", "docUrl": "https://smoothui.dev/docs/components/kinetic-center-build", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/kinetic-center-build.json", "name": "kinetic-center-build", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/kinetic-center-build.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "text", "complexity": "complex", "compositionHints": [ "Must sit inside a scrollable container; pass its ref via `container`", "Use a variable font for `weightRange` to have a visible effect" ], "dependencies": [ "motion" ], "description": "A KineticTypeScroll text animation component for SmoothUI.", "displayName": "KineticTypeScroll", "docUrl": "https://smoothui.dev/docs/components/kinetic-type-scroll", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/kinetic-type-scroll.json", "name": "kinetic-type-scroll", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/kinetic-type-scroll.json", "tags": [ "text", "kinetic", "scroll", "editorial", "variable-font", "animated" ], "useCases": [ "Editorial scroll-driven phrases that scale and breathe per word", "Section headers in long-form scrolling stories", "Variable-font showcases tying weight to scroll position" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A LineByLineSlide text animation component for SmoothUI.", "displayName": "LineByLineSlide", "docUrl": "https://smoothui.dev/docs/components/line-by-line-slide", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/line-by-line-slide.json", "name": "line-by-line-slide", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/line-by-line-slide.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A LiquidMetal component for SmoothUI.", "displayName": "LiquidMetal", "docUrl": "https://smoothui.dev/docs/components/liquid-metal", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/liquid-metal.json", "name": "liquid-metal", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/liquid-metal.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A MacTerminal component for SmoothUI.", "displayName": "MacTerminal", "docUrl": "https://smoothui.dev/docs/components/mac-terminal", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/mac-terminal.json", "name": "mac-terminal", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/mac-terminal.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "button", "complexity": "moderate", "compositionHints": [ "Enhance with animated-tooltip for hover descriptions", "Use as primary CTA in hero sections" ], "dependencies": [ "@radix-ui/react-slot", "class-variance-authority", "motion" ], "description": "Button that subtly follows the cursor with magnetic effect", "displayName": "MagneticButton", "docUrl": "https://smoothui.dev/docs/components/magnetic-button", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/magnetic-button.json", "name": "magnetic-button", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/magnetic-button.json", "tags": [ "button", "magnetic", "cursor", "hover", "spring", "interactive", "animated" ], "useCases": [ "Button that subtly follows cursor with magnetic attraction", "Interactive CTA with spring-physics hover effect", "Playful button with cursor-aware displacement" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A MagneticField component for SmoothUI.", "displayName": "MagneticField", "docUrl": "https://smoothui.dev/docs/components/magnetic-field", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/magnetic-field.json", "name": "magnetic-field", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/magnetic-field.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A MaskRevealUp text animation component for SmoothUI.", "displayName": "MaskRevealUp", "docUrl": "https://smoothui.dev/docs/components/mask-reveal-up", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/mask-reveal-up.json", "name": "mask-reveal-up", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/mask-reveal-up.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A MicroScaleFade text animation component for SmoothUI.", "displayName": "MicroScaleFade", "docUrl": "https://smoothui.dev/docs/components/micro-scale-fade", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/micro-scale-fade.json", "name": "micro-scale-fade", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/micro-scale-fade.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A MorphIcon component for SmoothUI.", "displayName": "MorphIcon", "docUrl": "https://smoothui.dev/docs/components/morph-icon", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/morph-icon.json", "name": "morph-icon", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/morph-icon.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "class-variance-authority", "motion" ], "description": "Feedback dock that morphs from a compact pill into a panel and back, with a spring layout transition.", "displayName": "MorphSurface", "docUrl": "https://smoothui.dev/docs/components/morph-surface", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/morph-surface.json", "name": "morph-surface", "registryDependencies": [ "smooth-button" ], "registryUrl": "https://smoothui.dev/r/morph-surface.json", "tags": [], "useCases": [] }, { "animationType": "tween", "category": "feedback", "complexity": "moderate", "compositionHints": [ "Drop inside a button to replace the label while a request is pending", "Wrap in a centred flex container for page-level loading states" ], "dependencies": [ "motion" ], "description": "A MotionLoader component for SmoothUI.", "displayName": "MotionLoader", "docUrl": "https://smoothui.dev/docs/components/motion-loader", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/motion-loader.json", "name": "motion-loader", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/motion-loader.json", "tags": [ "loader", "spinner", "loading", "progress", "status", "svg", "animated" ], "useCases": [ "Inline loading indicator for buttons and toolbars", "Full-page or section loading state with a labelled status region", "Skeleton-free async feedback in dashboards and forms" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [ "Pair with a track list built from tweet-card or job-listing-component patterns", "Use scrubber for a full-width alternative seek control" ], "dependencies": [ "motion", "lucide-react" ], "description": "A play/pause control shaped like a spinning record, with a live waveform and seekable progress ring.", "displayName": "MusicToggle", "docUrl": "https://smoothui.dev/docs/components/music-toggle", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/music-toggle.json", "name": "music-toggle", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/music-toggle.json", "tags": [ "audio", "music", "player", "record", "waveform", "progress", "animated" ], "useCases": [ "Mini music player control with spinning cover art", "Podcast or audio-track play/pause toggle with waveform feedback", "Seekable progress indicator styled as a vinyl record" ] }, { "animationType": "spring", "category": "basic-ui", "complexity": "simple", "compositionHints": [ "Overlay on any icon button or avatar component", "Use with dynamic-island for notification system" ], "dependencies": [ "motion" ], "description": "Animated notification badge with count and status variants", "displayName": "NotificationBadge", "docUrl": "https://smoothui.dev/docs/components/notification-badge", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/notification-badge.json", "name": "notification-badge", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/notification-badge.json", "tags": [ "badge", "notification", "count", "status", "dot", "ping", "animated" ], "useCases": [ "Notification count badge with animated entrance", "Online/offline status indicator with pulse", "Unread message counter with ping animation" ] }, { "animationType": "tween", "category": "data-display", "complexity": "moderate", "compositionHints": [ "Pair with animated-progress-bar for visual + numeric progress", "Use in pricing sections with price-flow" ], "dependencies": [ "lucide-react" ], "description": "A NumberFlow component for SmoothUI.", "displayName": "NumberFlow", "docUrl": "https://smoothui.dev/docs/components/number-flow", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/number-flow.json", "name": "number-flow", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/number-flow.json", "tags": [ "number", "counter", "odometer", "digit", "transition", "animated" ], "useCases": [ "Animated number counter with rolling digit transitions", "Price or stat display with smooth increment/decrement", "Odometer-style number animation for dashboards" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "An Orb component for SmoothUI.", "displayName": "Orb", "docUrl": "https://smoothui.dev/docs/components/orb", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/orb.json", "name": "orb", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/orb.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "An OrbitalImageWheel component for SmoothUI.", "displayName": "OrbitalImageWheel", "docUrl": "https://smoothui.dev/docs/components/orbital-image-wheel", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/orbital-image-wheel.json", "name": "orbital-image-wheel", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/orbital-image-wheel.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [], "description": "A soft-min SDF merge transition with two organic expanding shapes.", "displayName": "OrganicMergeTransition", "docUrl": "https://smoothui.dev/docs/components/organic-merge-transition", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/organic-merge-transition.json", "name": "organic-merge-transition", "registryDependencies": [ "sdf-blob-transition" ], "registryUrl": "https://smoothui.dev/r/organic-merge-transition.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A page-preloader curtain that plays once and then uncovers the page.", "displayName": "PagePreloader", "docUrl": "https://smoothui.dev/docs/components/page-preloader", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/page-preloader.json", "name": "page-preloader", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/page-preloader.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion", "lucide-react" ], "description": "Animated pagination with spring-based active page indicator", "displayName": "Pagination", "docUrl": "https://smoothui.dev/docs/components/pagination", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/pagination.json", "name": "pagination", "registryDependencies": [ "smooth-button" ], "registryUrl": "https://smoothui.dev/r/pagination.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "Multi-layer depth parallax for hero sections, with optional pointer-driven parallax.", "displayName": "ParallaxLayers", "docUrl": "https://smoothui.dev/docs/components/parallax-layers", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/parallax-layers.json", "name": "parallax-layers", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/parallax-layers.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A PerCharacterRise text animation component for SmoothUI.", "displayName": "PerCharacterRise", "docUrl": "https://smoothui.dev/docs/components/per-character-rise", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/per-character-rise.json", "name": "per-character-rise", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/per-character-rise.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A PerWordCrossfade text animation component for SmoothUI.", "displayName": "PerWordCrossfade", "docUrl": "https://smoothui.dev/docs/components/per-word-crossfade", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/per-word-crossfade.json", "name": "per-word-crossfade", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/per-word-crossfade.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "text", "complexity": "complex", "compositionHints": [ "Pass `container` when the effect should track a scrollable ancestor rather than the window", "Keep `depth` modest (24-56px) so separated lines stay legible" ], "dependencies": [ "motion" ], "description": "A PerspectiveText3D text animation component for SmoothUI.", "displayName": "PerspectiveText3d", "docUrl": "https://smoothui.dev/docs/components/perspective-text-3d", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/perspective-text-3d.json", "name": "perspective-text-3d", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/perspective-text-3d.json", "tags": [ "text", "3d", "perspective", "depth", "scroll", "pointer", "animated" ], "useCases": [ "Hero headlines with depth-stacked lines that tilt on scroll", "Pointer-reactive 3D word planes for feature sections", "Static tilted title cards for editorial layouts" ] }, { "animationType": "gesture", "category": "data-display", "complexity": "moderate", "compositionHints": [ "Pair with basic-modal for lightbox viewing of the front card", "Drive the order from data and react to onCycle for analytics" ], "dependencies": [ "motion" ], "description": "A PhotoStack component for SmoothUI.", "displayName": "PhotoStack", "docUrl": "https://smoothui.dev/docs/components/photo-stack", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/photo-stack.json", "name": "photo-stack", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/photo-stack.json", "tags": [ "photo", "cards", "stack", "draggable", "gesture", "interactive" ], "useCases": [ "Draggable photo or testimonial deck", "Portfolio image gallery with flick-to-next interaction", "Persona / team showcase you can swipe through" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [ "Use as an alternative to animated-tabs for image-heavy content" ], "dependencies": [ "motion", "@radix-ui/react-tabs" ], "description": "A Phototab component for SmoothUI.", "displayName": "Phototab", "docUrl": "https://smoothui.dev/docs/components/phototab", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/phototab.json", "name": "phototab", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/phototab.json", "tags": [ "tabs", "photo", "image", "gallery", "radix", "animated" ], "useCases": [ "Photo gallery with animated tab navigation", "Image showcase with icon-labeled tabs", "Category-based image viewer with smooth transitions" ] }, { "animationType": "spring", "category": "data-display", "complexity": "moderate", "compositionHints": [ "Use with animated-list for the unpinned section's entrance animation", "Pair with animated-avatar-group inside a custom renderItem" ], "dependencies": [ "motion", "lucide-react" ], "description": "A list where selected items pin to the top and animate out of the flow into a pinned section.", "displayName": "PinnedList", "docUrl": "https://smoothui.dev/docs/components/pinned-list", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/pinned-list.json", "name": "pinned-list", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/pinned-list.json", "tags": [ "list", "pin", "layout", "shared-layout", "keyboard", "animated" ], "useCases": [ "Pin important conversations, files or tasks to the top of a list", "Favorites section that separates from the main list", "Priority inbox where starred items float to a pinned group" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A PixelBrushCanvas component for SmoothUI.", "displayName": "PixelBrushCanvas", "docUrl": "https://smoothui.dev/docs/components/pixel-brush-canvas", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/pixel-brush-canvas.json", "name": "pixel-brush-canvas", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/pixel-brush-canvas.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A PixelFlowField background component for SmoothUI.", "displayName": "PixelFlowField", "docUrl": "https://smoothui.dev/docs/components/pixel-flow-field", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/pixel-flow-field.json", "name": "pixel-flow-field", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/pixel-flow-field.json", "tags": [], "useCases": [] }, { "animationType": "gesture", "category": "other", "complexity": "moderate", "compositionHints": [ "Use for logout or delete confirmations instead of basic-modal" ], "dependencies": [ "motion", "lucide-react" ], "description": "A PowerOffSlide component for SmoothUI.", "displayName": "PowerOffSlide", "docUrl": "https://smoothui.dev/docs/components/power-off-slide", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/power-off-slide.json", "name": "power-off-slide", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/power-off-slide.json", "tags": [ "slide", "power-off", "gesture", "drag", "confirmation", "ios", "animated" ], "useCases": [ "iOS-style slide to power off confirmation", "Destructive action confirmation with drag gesture", "Slide-to-confirm component for critical actions" ] }, { "animationType": "tween", "category": "data-display", "complexity": "moderate", "compositionHints": [ "Use in pricing blocks alongside number-flow", "Pair with animated-toggle for pricing interval switcher" ], "dependencies": [], "description": "A PriceFlow component for SmoothUI.", "displayName": "PriceFlow", "docUrl": "https://smoothui.dev/docs/components/price-flow", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/price-flow.json", "name": "price-flow", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/price-flow.json", "tags": [ "price", "counter", "currency", "digit", "transition", "animated" ], "useCases": [ "Animated price display with rolling digit transitions", "Real-time price ticker with smooth updates", "Currency amount display with increment/decrement animation" ] }, { "animationType": "tween", "category": "feedback", "complexity": "moderate", "compositionHints": [ "Trigger sparingly for meaningful state changes, not every hover or click", "Pair with cards, dashboards, or confirmation screens where the new state appears under the sweep" ], "dependencies": [ "motion" ], "description": "A persistent WebGL prism sweep transition wrapper for route and state changes.", "displayName": "PrismSweepTransition", "docUrl": "https://smoothui.dev/docs/components/prism-sweep-transition", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/prism-sweep-transition.json", "name": "prism-sweep-transition", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/prism-sweep-transition.json", "tags": [ "transition", "page-transition", "route-transition", "prism", "sweep", "gradient", "motion", "state-change" ], "useCases": [ "Celebrate a successful publish or submit flow", "Punctuate major route changes with a shader-inspired liquid sweep", "Wrap demos, previews, or onboarding steps with a premium liquid state transition" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "Animated product card component for ecommerce", "displayName": "ProductCard", "docUrl": "https://smoothui.dev/docs/components/product-card", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/product-card.json", "name": "product-card", "registryDependencies": [ "smooth-button" ], "registryUrl": "https://smoothui.dev/r/product-card.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A ProgressiveBlur component for SmoothUI.", "displayName": "ProgressiveBlur", "docUrl": "https://smoothui.dev/docs/components/progressive-blur", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/progressive-blur.json", "name": "progressive-blur", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/progressive-blur.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [], "description": "A radial SDF circle pattern transition inspired by the Codrops radial circles step.", "displayName": "RadialCirclesTransition", "docUrl": "https://smoothui.dev/docs/components/radial-circles-transition", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/radial-circles-transition.json", "name": "radial-circles-transition", "registryDependencies": [ "sdf-blob-transition" ], "registryUrl": "https://smoothui.dev/r/radial-circles-transition.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "basic-ui", "complexity": "simple", "compositionHints": [ "Use inside form component for validation", "Pair with label elements for accessibility" ], "dependencies": [ "motion", "radix-ui" ], "description": "An animated Radio Group component for SmoothUI with selection indicator spring animation.", "displayName": "RadioGroup", "docUrl": "https://smoothui.dev/docs/components/radio-group", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/radio-group.json", "name": "radio-group", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/radio-group.json", "tags": [ "radio", "form", "input", "selection", "animated" ], "useCases": [ "Form radio group with animated selection indicator", "Single-select option group", "Accessible radio buttons with arrow key navigation" ] }, { "animationType": "spring", "category": "text", "complexity": "moderate", "compositionHints": [ "Use as a standalone headline, sized via className with a font-size utility", "Pair with a plain sr-only-safe surrounding heading for extra emphasis" ], "dependencies": [ "motion" ], "description": "A RansomNote component for SmoothUI.", "displayName": "RansomNote", "docUrl": "https://smoothui.dev/docs/components/ransom-note", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/ransom-note.json", "name": "ransom-note", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/ransom-note.json", "tags": [ "text", "ransom-note", "typography", "playful", "seeded-random", "deterministic", "animated" ], "useCases": [ "Playful heading that looks cut out of magazine letters", "404 or empty state message with a hand-made, ransom-note feel", "Callout or badge text that stands out with mixed fonts and rotations" ] }, { "animationType": "spring", "category": "text", "complexity": "simple", "compositionHints": [ "Combine with wave-text for layered text effects", "Use for hero section headings in header blocks" ], "dependencies": [ "motion" ], "description": "A RevealText component for SmoothUI.", "displayName": "RevealText", "docUrl": "https://smoothui.dev/docs/components/reveal-text", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/reveal-text.json", "name": "reveal-text", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/reveal-text.json", "tags": [ "text", "reveal", "entrance", "direction", "scroll-trigger", "animated" ], "useCases": [ "Text entrance animation with directional reveal", "Hero headline with animated appearance on scroll", "Section title with staggered character reveal" ] }, { "animationType": "spring", "category": "data-display", "complexity": "moderate", "compositionHints": [ "Use with animated-avatar-group for reviewer photos", "Pair with github-stars-animation for social proof sections" ], "dependencies": [ "motion", "lucide-react" ], "description": "A ReviewsCarousel component for SmoothUI.", "displayName": "ReviewsCarousel", "docUrl": "https://smoothui.dev/docs/components/reviews-carousel", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/reviews-carousel.json", "name": "reviews-carousel", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/reviews-carousel.json", "tags": [ "carousel", "reviews", "testimonials", "slider", "cards", "animated" ], "useCases": [ "Review card carousel with stacked card effect", "Testimonial slider with navigation arrows", "Customer feedback display with animated card transitions" ] }, { "animationType": "spring", "category": "basic-ui", "complexity": "moderate", "compositionHints": [ "Use as an enhanced alternative to animated-tooltip", "Pair with magnetic-button for trigger elements" ], "dependencies": [ "motion", "lucide-react", "@radix-ui/react-popover" ], "description": "A RichPopover component for SmoothUI.", "displayName": "RichPopover", "docUrl": "https://smoothui.dev/docs/components/rich-popover", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/rich-popover.json", "name": "rich-popover", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/rich-popover.json", "tags": [ "popover", "tooltip", "rich", "radix", "link-preview", "animated" ], "useCases": [ "Rich content popover with title, description, and action", "Link preview tooltip with metadata display", "Enhanced tooltip with icon, CTA button, and meta info" ] }, { "animationType": "tween", "category": "text", "complexity": "moderate", "compositionHints": [ "Use monospace or tabular-nums fonts for the steadiest column widths", "Pair `trigger=\"manual\"` with a `playing` flag for replay controls" ], "dependencies": [ "motion" ], "description": "A RollingText text animation component for SmoothUI.", "displayName": "RollingText", "docUrl": "https://smoothui.dev/docs/components/rolling-text", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/rolling-text.json", "name": "rolling-text", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/rolling-text.json", "tags": [ "text", "odometer", "split-flap", "roll", "counter", "animated" ], "useCases": [ "Odometer-style counters and stat displays", "Split-flap airport-board style headings", "Playful hover-triggered label reveals" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A ScaleDownFade text animation component for SmoothUI.", "displayName": "ScaleDownFade", "docUrl": "https://smoothui.dev/docs/components/scale-down-fade", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/scale-down-fade.json", "name": "scale-down-fade", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/scale-down-fade.json", "tags": [], "useCases": [] }, { "animationType": "tween", "category": "text", "complexity": "simple", "compositionHints": [ "Use for navigation links alongside magnetic-button", "Pair with reveal-text for combined text effects" ], "dependencies": [], "description": "A ScrambleHover component for SmoothUI.", "displayName": "ScrambleHover", "docUrl": "https://smoothui.dev/docs/components/scramble-hover", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/scramble-hover.json", "name": "scramble-hover", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/scramble-hover.json", "tags": [ "text", "scramble", "hover", "glitch", "effect", "interactive" ], "useCases": [ "Hover text effect with character scramble animation", "Glitch-style text reveal on mouse interaction", "Creative menu link hover effect" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "An image revealed by an animated mask as it scrolls into view, with a counter-parallax on the image.", "displayName": "ScrollImageReveal", "docUrl": "https://smoothui.dev/docs/components/scroll-image-reveal", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/scroll-image-reveal.json", "name": "scroll-image-reveal", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/scroll-image-reveal.json", "tags": [], "useCases": [] }, { "animationType": "scroll", "category": "feedback", "complexity": "moderate", "compositionHints": [ "Point container at the same scrollable box as scroll-image-reveal or svg-draw-on-scroll for a coordinated feel", "Use the number or ring variant inside a sticky sidebar" ], "dependencies": [ "motion" ], "description": "A reading-progress indicator with bar, ring, number and segmented variants.", "displayName": "ScrollProgress", "docUrl": "https://smoothui.dev/docs/components/scroll-progress", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/scroll-progress.json", "name": "scroll-progress", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/scroll-progress.json", "tags": [ "scroll", "progress", "reading", "indicator", "bar", "ring", "animated" ], "useCases": [ "Top-of-article reading progress bar for long-form content", "Ring or number indicator for a documentation sidebar", "Segmented progress for multi-step scrollytelling sections" ] }, { "animationType": "scroll", "category": "text", "complexity": "simple", "compositionHints": [ "Use for about sections and storytelling pages", "Combine with reveal-text for heading + paragraph combos" ], "dependencies": [ "motion" ], "description": "A ScrollRevealParagraph component for SmoothUI.", "displayName": "ScrollRevealParagraph", "docUrl": "https://smoothui.dev/docs/components/scroll-reveal-paragraph", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/scroll-reveal-paragraph.json", "name": "scroll-reveal-paragraph", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/scroll-reveal-paragraph.json", "tags": [ "text", "scroll", "reveal", "paragraph", "word-by-word", "animated" ], "useCases": [ "Paragraph text that reveals word by word on scroll", "Scroll-driven text opacity animation for storytelling", "Reading progress indicator through text highlighting" ] }, { "animationType": "gesture", "category": "layout", "complexity": "complex", "compositionHints": [ "Use with animated-avatar-group for card author sections" ], "dependencies": [ "motion" ], "description": "A ScrollableCardStack component for SmoothUI.", "displayName": "ScrollableCardStack", "docUrl": "https://smoothui.dev/docs/components/scrollable-card-stack", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/scrollable-card-stack.json", "name": "scrollable-card-stack", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/scrollable-card-stack.json", "tags": [ "cards", "stack", "scroll", "perspective", "3d", "gesture", "animated" ], "useCases": [ "3D card stack with scroll-driven transitions", "Social media feed with perspective card stacking", "Content showcase with scroll and hover interactions" ] }, { "animationType": "spring", "category": "basic-ui", "complexity": "moderate", "compositionHints": [ "Pair with exposure-slider for different slider aesthetics", "Use in settings panels with animated-toggle" ], "dependencies": [ "motion" ], "description": "Design-tool style scrubber slider with animated thumb and built-in label", "displayName": "Scrubber", "docUrl": "https://smoothui.dev/docs/components/scrubber", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/scrubber.json", "name": "scrubber", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/scrubber.json", "tags": [ "slider", "scrubber", "range", "input", "drag", "design-tool", "animated" ], "useCases": [ "Design tool-style scrubber slider with animated thumb", "Precise numeric value control with drag interaction", "Parameter adjustment slider with built-in label and ticks" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A persistent WebGL SDF blob transition wrapper for route and state changes.", "displayName": "SdfBlobTransition", "docUrl": "https://smoothui.dev/docs/components/sdf-blob-transition", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/sdf-blob-transition.json", "name": "sdf-blob-transition", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/sdf-blob-transition.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [], "description": "A clean SDF circle reveal based on the first Codrops shader step.", "displayName": "SdfCircleTransition", "docUrl": "https://smoothui.dev/docs/components/sdf-circle-transition", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/sdf-circle-transition.json", "name": "sdf-circle-transition", "registryDependencies": [ "sdf-blob-transition" ], "registryUrl": "https://smoothui.dev/r/sdf-circle-transition.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "basic-ui", "complexity": "moderate", "compositionHints": [ "Use alongside basic-dropdown for non-searchable selects", "Pair with animated-tags for multi-select tagging" ], "dependencies": [ "motion", "lucide-react" ], "description": "A SearchableDropdown component for SmoothUI.", "displayName": "SearchableDropdown", "docUrl": "https://smoothui.dev/docs/components/searchable-dropdown", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/searchable-dropdown.json", "name": "searchable-dropdown", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/searchable-dropdown.json", "tags": [ "dropdown", "search", "select", "filter", "combobox", "portal", "animated" ], "useCases": [ "Searchable select dropdown with filter-as-you-type", "Combobox with animated open/close and item highlights", "Filterable dropdown menu with icon and description support" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "lucide-react", "motion" ], "description": "An animated Select dropdown component for SmoothUI wrapping Radix Select with smooth animations.", "displayName": "Select", "docUrl": "https://smoothui.dev/docs/components/select", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/select.json", "name": "select", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/select.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [], "description": "Demo 3 adaptation: noisy circular reveal with radial interpolation.", "displayName": "ShaderRevealCircleTransition", "docUrl": "https://smoothui.dev/docs/components/shader-reveal-circle-transition", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/shader-reveal-circle-transition.json", "name": "shader-reveal-circle-transition", "registryDependencies": [ "shader-reveal-transition" ], "registryUrl": "https://smoothui.dev/r/shader-reveal-circle-transition.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [], "description": "Demo 5 adaptation: luminance-style vertical displacement translated into a shader overlay.", "displayName": "ShaderRevealLumaTransition", "docUrl": "https://smoothui.dev/docs/components/shader-reveal-luma-transition", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/shader-reveal-luma-transition.json", "name": "shader-reveal-luma-transition", "registryDependencies": [ "shader-reveal-transition" ], "registryUrl": "https://smoothui.dev/r/shader-reveal-luma-transition.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [], "description": "Demo 1 adaptation: 4D-noise threshold transition with an organic shader gate.", "displayName": "ShaderRevealNoiseTransition", "docUrl": "https://smoothui.dev/docs/components/shader-reveal-noise-transition", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/shader-reveal-noise-transition.json", "name": "shader-reveal-noise-transition", "registryDependencies": [ "shader-reveal-transition" ], "registryUrl": "https://smoothui.dev/r/shader-reveal-noise-transition.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [], "description": "Demo 6 adaptation: rotated displacement vectors with a planetary swirl feel.", "displayName": "ShaderRevealPlanetaryTransition", "docUrl": "https://smoothui.dev/docs/components/shader-reveal-planetary-transition", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/shader-reveal-planetary-transition.json", "name": "shader-reveal-planetary-transition", "registryDependencies": [ "shader-reveal-transition" ], "registryUrl": "https://smoothui.dev/r/shader-reveal-planetary-transition.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [], "description": "Demo 8 adaptation: procedural noise push/pull displacement.", "displayName": "ShaderRevealPushTransition", "docUrl": "https://smoothui.dev/docs/components/shader-reveal-push-transition", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/shader-reveal-push-transition.json", "name": "shader-reveal-push-transition", "registryDependencies": [ "shader-reveal-transition" ], "registryUrl": "https://smoothui.dev/r/shader-reveal-push-transition.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [], "description": "Demo 7 adaptation: divided UV stripe displacement with diagonal motion.", "displayName": "ShaderRevealStripesTransition", "docUrl": "https://smoothui.dev/docs/components/shader-reveal-stripes-transition", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/shader-reveal-stripes-transition.json", "name": "shader-reveal-stripes-transition", "registryDependencies": [ "shader-reveal-transition" ], "registryUrl": "https://smoothui.dev/r/shader-reveal-stripes-transition.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A shared WebGL transition engine with eight shader-driven reveal variants.", "displayName": "ShaderRevealTransition", "docUrl": "https://smoothui.dev/docs/components/shader-reveal-transition", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/shader-reveal-transition.json", "name": "shader-reveal-transition", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/shader-reveal-transition.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [], "description": "Demo 4 adaptation: displacement-noise horizontal wipe with a sharp eased edge.", "displayName": "ShaderRevealWipeTransition", "docUrl": "https://smoothui.dev/docs/components/shader-reveal-wipe-transition", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/shader-reveal-wipe-transition.json", "name": "shader-reveal-wipe-transition", "registryDependencies": [ "shader-reveal-transition" ], "registryUrl": "https://smoothui.dev/r/shader-reveal-wipe-transition.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [], "description": "Demo 2 adaptation: vertical-progress zoom mix translated into a UI frame transition.", "displayName": "ShaderRevealZoomTransition", "docUrl": "https://smoothui.dev/docs/components/shader-reveal-zoom-transition", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/shader-reveal-zoom-transition.json", "name": "shader-reveal-zoom-transition", "registryDependencies": [ "shader-reveal-transition" ], "registryUrl": "https://smoothui.dev/r/shader-reveal-zoom-transition.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A SharedAxisX text animation component for SmoothUI.", "displayName": "SharedAxisX", "docUrl": "https://smoothui.dev/docs/components/shared-axis-x", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/shared-axis-x.json", "name": "shared-axis-x", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/shared-axis-x.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A SharedAxisY text animation component for SmoothUI.", "displayName": "SharedAxisY", "docUrl": "https://smoothui.dev/docs/components/shared-axis-y", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/shared-axis-y.json", "name": "shared-axis-y", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/shared-axis-y.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A SharedAxisZ text animation component for SmoothUI.", "displayName": "SharedAxisZ", "docUrl": "https://smoothui.dev/docs/components/shared-axis-z", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/shared-axis-z.json", "name": "shared-axis-z", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/shared-axis-z.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A ShimmerSweep text animation component for SmoothUI.", "displayName": "ShimmerSweep", "docUrl": "https://smoothui.dev/docs/components/shimmer-sweep", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/shimmer-sweep.json", "name": "shimmer-sweep", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/shimmer-sweep.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A ShineText light-sweep text animation component for SmoothUI.", "displayName": "ShineText", "docUrl": "https://smoothui.dev/docs/components/shine-text", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/shine-text.json", "name": "shine-text", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/shine-text.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A ShortSlideDown text animation component for SmoothUI.", "displayName": "ShortSlideDown", "docUrl": "https://smoothui.dev/docs/components/short-slide-down", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/short-slide-down.json", "name": "short-slide-down", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/short-slide-down.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A ShortSlideRight text animation component for SmoothUI.", "displayName": "ShortSlideRight", "docUrl": "https://smoothui.dev/docs/components/short-slide-right", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/short-slide-right.json", "name": "short-slide-right", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/short-slide-right.json", "tags": [], "useCases": [] }, { "animationType": "tween", "category": "ai", "complexity": "moderate", "compositionHints": [ "Drive the state prop from the same AIState as the rest of the screen", "Feed amplitude from useAudioAmplitude for real voice reactivity", "Pair with agent-avatar for AI presence displays" ], "dependencies": [ "motion" ], "description": "A beautiful animated orb component inspired by Siri's visual design.", "displayName": "SiriOrb", "docUrl": "https://smoothui.dev/docs/components/siri-orb", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/siri-orb.json", "name": "siri-orb", "registryDependencies": [ "ai-core" ], "registryUrl": "https://smoothui.dev/r/siri-orb.json", "tags": [ "siri", "orb", "ai", "animated", "glow", "css", "audio", "reactive", "voice" ], "useCases": [ "Animated Siri-inspired orb for AI interfaces", "Visual AI status indicator with pulsing glow", "Decorative animated orb for loading or presence states" ] }, { "animationType": "tween", "category": "basic-ui", "complexity": "simple", "compositionHints": [ "Use with grid-loader for combined loading UX", "Pair with tweet-card for tweet loading skeletons" ], "dependencies": [], "description": "Animated skeleton loading placeholders", "displayName": "SkeletonLoader", "docUrl": "https://smoothui.dev/docs/components/skeleton-loader", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/skeleton-loader.json", "name": "skeleton-loader", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/skeleton-loader.json", "tags": [ "skeleton", "loader", "loading", "placeholder", "shimmer", "animated" ], "useCases": [ "Loading placeholder that matches content dimensions", "Skeleton screen for async data loading states", "Shimmer effect placeholder for cards and text blocks" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "@radix-ui/react-slot", "class-variance-authority", "motion" ], "description": "A polished button component with gradient variants and press animation", "displayName": "SmoothButton", "docUrl": "https://smoothui.dev/docs/components/smooth-button", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/smooth-button.json", "name": "smooth-button", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/smooth-button.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion", "lucide-react" ], "description": "A profile hover card: avatar/handle trigger that expands into a preview with stats, bio and a follow action.", "displayName": "SocialHoverCard", "docUrl": "https://smoothui.dev/docs/components/social-hover-card", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/social-hover-card.json", "name": "social-hover-card", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/social-hover-card.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [ "Use in footer blocks for social media links", "Pair with animated-tooltip for platform name labels" ], "dependencies": [ "motion" ], "description": "A SocialSelector component for SmoothUI.", "displayName": "SocialSelector", "docUrl": "https://smoothui.dev/docs/components/social-selector", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/social-selector.json", "name": "social-selector", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/social-selector.json", "tags": [ "social", "selector", "icons", "share", "hover", "animated" ], "useCases": [ "Social media platform selector with animated icons", "Share menu with platform-specific icon animations", "Social link picker with hover feedback" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A SoftBlurIn text animation component for SmoothUI.", "displayName": "SoftBlurIn", "docUrl": "https://smoothui.dev/docs/components/soft-blur-in", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/soft-blur-in.json", "name": "soft-blur-in", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/soft-blur-in.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "text", "complexity": "simple", "compositionHints": [ "Best for short to medium phrases", "High stagger creates a visible staircase effect" ], "dependencies": [ "motion" ], "description": "A SpringScaleIn text animation component for SmoothUI.", "displayName": "SpringScaleIn", "docUrl": "https://smoothui.dev/docs/components/spring-scale-in", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/spring-scale-in.json", "name": "spring-scale-in", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/spring-scale-in.json", "tags": [ "text", "scale", "spring", "per-word", "entrance", "bounce", "animated" ], "useCases": [ "iOS-style word pop-in", "Playful heading entrance", "Widget or card title reveal" ] }, { "animationType": "none", "category": "other", "complexity": "moderate", "compositionHints": [ "Wrap any element; children fill the squircle like a normal container", "Combine with tilt-card for a squircle-shaped 3D tilt surface" ], "dependencies": [], "description": "A Squircle component for SmoothUI.", "displayName": "Squircle", "docUrl": "https://smoothui.dev/docs/components/squircle", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/squircle.json", "name": "squircle", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/squircle.json", "tags": [ "squircle", "corner-smoothing", "superellipse", "shape", "utility", "wrapper" ], "useCases": [ "Apple-style corner smoothing for app icons and tiles", "Rounded avatar or thumbnail with a softer, smoother corner curve", "Any surface that should read as a squircle instead of a plain rounded rect" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A StaggerFromCenter text animation component for SmoothUI.", "displayName": "StaggerFromCenter", "docUrl": "https://smoothui.dev/docs/components/stagger-from-center", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/stagger-from-center.json", "name": "stagger-from-center", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/stagger-from-center.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A StaggerFromEdges text animation component for SmoothUI.", "displayName": "StaggerFromEdges", "docUrl": "https://smoothui.dev/docs/components/stagger-from-edges", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/stagger-from-edges.json", "name": "stagger-from-edges", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/stagger-from-edges.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "Reveals any children through a custom SVG shape mask that can morph on a loop, on scroll, or on hover.", "displayName": "SvgClipMask", "docUrl": "https://smoothui.dev/docs/components/svg-clip-mask", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/svg-clip-mask.json", "name": "svg-clip-mask", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/svg-clip-mask.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "An SVG path that draws itself as you scroll, optionally with a marker riding the tip.", "displayName": "SvgDrawOnScroll", "docUrl": "https://smoothui.dev/docs/components/svg-draw-on-scroll", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/svg-draw-on-scroll.json", "name": "svg-draw-on-scroll", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/svg-draw-on-scroll.json", "tags": [], "useCases": [] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion", "lucide-react" ], "description": "A SwapPanel component for SmoothUI.", "displayName": "SwapPanel", "docUrl": "https://smoothui.dev/docs/components/swap-panel", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/swap-panel.json", "name": "swap-panel", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/swap-panel.json", "tags": [], "useCases": [] }, { "animationType": "tween", "category": "other", "complexity": "moderate", "compositionHints": [ "Use in feature showcase sections", "Pair with glow-hover-card for a cohesive card group" ], "dependencies": [], "description": "A SwitchboardCard component with light grid illustration for SmoothUI.", "displayName": "SwitchboardCard", "docUrl": "https://smoothui.dev/docs/components/switchboard-card", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/switchboard-card.json", "name": "switchboard-card", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/switchboard-card.json", "tags": [ "card", "switchboard", "lights", "grid", "decorative", "animated" ], "useCases": [ "Decorative card with animated light grid pattern", "Feature card with switchboard-style visual illustration", "Landing page card with dynamic light effects" ] }, { "animationType": "spring", "category": "text", "complexity": "moderate", "compositionHints": [ "Pass a new `text` value to trigger the morph — the component owns no state", "Use `mode=\"words\"` for longer phrases, `mode=\"characters\"` for short labels" ], "dependencies": [ "motion" ], "description": "A TextMorph text animation component for SmoothUI.", "displayName": "TextMorph", "docUrl": "https://smoothui.dev/docs/components/text-morph", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/text-morph.json", "name": "text-morph", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/text-morph.json", "tags": [ "text", "morph", "diff", "layout", "transition", "animated" ], "useCases": [ "Swapping labels, counters or status text without a jarring cut", "Live-updating headlines where only part of the string changes", "Word or character diff transitions between two strings" ] }, { "animationType": "spring", "category": "basic-ui", "complexity": "moderate", "compositionHints": [ "Use in a navbar alongside expandable-navbar or floating-navbar", "Pair with animated-toggle in a settings panel" ], "dependencies": [ "motion", "lucide-react" ], "description": "A light/dark/system theme switch with sun-moon, pill, switch and orb visual treatments.", "displayName": "ThemeToggle", "docUrl": "https://smoothui.dev/docs/components/theme-toggle", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/theme-toggle.json", "name": "theme-toggle", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/theme-toggle.json", "tags": [ "theme", "dark-mode", "toggle", "switch", "radiogroup", "morph", "animated" ], "useCases": [ "Light/dark theme switch for a site header or settings panel", "Three-way light/dark/system theme picker", "Decorative sun-to-moon morph as a standalone dark mode control" ] }, { "animationType": "spring", "category": "layout", "complexity": "moderate", "compositionHints": [ "Wrap any card content; add data-tilt-depth=\"0..1\" to nested elements for parallax", "Combine with squircle for a rounded, tilting surface" ], "dependencies": [ "motion" ], "description": "A TiltCard component for SmoothUI.", "displayName": "TiltCard", "docUrl": "https://smoothui.dev/docs/components/tilt-card", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/tilt-card.json", "name": "tilt-card", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/tilt-card.json", "tags": [ "card", "tilt", "3d", "glare", "parallax", "pointer", "interactive", "animated" ], "useCases": [ "3D pointer-tilt product or feature card with glare", "Portfolio or pricing card with parallax depth on hover", "Interactive showcase tile that reacts to cursor position" ] }, { "animationType": "spring", "category": "layout", "complexity": "complex", "compositionHints": [ "Pass any content as items, e.g. cards, screenshots or panels", "Pair with a toolbar exposing prev/next buttons bound to onIndexChange" ], "dependencies": [ "motion" ], "description": "A TimeMachineStack component for SmoothUI.", "displayName": "TimeMachineStack", "docUrl": "https://smoothui.dev/docs/components/time-machine-stack", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/time-machine-stack.json", "name": "time-machine-stack", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/time-machine-stack.json", "tags": [ "stack", "carousel", "depth", "3d", "navigation", "interactive", "animated" ], "useCases": [ "Browsing a history of versions or snapshots", "macOS Time Machine style backup browser", "Depth-based navigation through a sequence of panels" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "motion" ], "description": "A TopDownLetters text animation component for SmoothUI.", "displayName": "TopDownLetters", "docUrl": "https://smoothui.dev/docs/components/top-down-letters", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/top-down-letters.json", "name": "top-down-letters", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/top-down-letters.json", "tags": [], "useCases": [] }, { "animationType": "none", "category": "data-display", "complexity": "moderate", "compositionHints": [ "Use with infinite-slider for scrolling tweet walls", "Pair with skeleton-loader via TweetSkeleton for loading" ], "dependencies": [ "react-tweet" ], "description": "A beautiful tweet card component for displaying Twitter/X posts.", "displayName": "TweetCard", "docUrl": "https://smoothui.dev/docs/components/tweet-card", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/tweet-card.json", "name": "tweet-card", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/tweet-card.json", "tags": [ "tweet", "twitter", "x", "embed", "social", "card" ], "useCases": [ "Embed Twitter/X posts with styled card component", "Social proof section with real tweet displays", "Testimonial display using actual tweets" ] }, { "animationType": "tween", "category": "text", "complexity": "simple", "compositionHints": [ "Combine with reveal-text for multi-style text sections", "Use in hero sections with magnetic-button CTAs" ], "dependencies": [], "description": "A TypewriterText component for SmoothUI.", "displayName": "TypewriterText", "docUrl": "https://smoothui.dev/docs/components/typewriter-text", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/typewriter-text.json", "name": "typewriter-text", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/typewriter-text.json", "tags": [ "text", "typewriter", "typing", "cursor", "loop", "animated" ], "useCases": [ "Typewriter text effect for hero headlines", "Typing animation for chatbot or terminal-style UIs", "Looping text reveal for taglines or feature highlights" ] }, { "animationType": "spring", "category": "feedback", "complexity": "moderate", "compositionHints": [ "Reveal a card, form, or settings panel as the `children` unlocked on success", "Pair with a modal or drawer that gates access behind the scan state" ], "dependencies": [ "motion" ], "description": "An UnlockFaceId component for SmoothUI.", "displayName": "UnlockFaceId", "docUrl": "https://smoothui.dev/docs/components/unlock-face-id", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/unlock-face-id.json", "name": "unlock-face-id", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/unlock-face-id.json", "tags": [ "face-id", "unlock", "scan", "status", "spring", "svg", "interactive", "animated" ], "useCases": [ "iOS-style scan-to-unlock micro-interaction for gated content", "Onboarding step that simulates biometric confirmation", "Status feedback for a scan/verify action with retry on error" ] }, { "animationType": "spring", "category": "other", "complexity": "complex", "compositionHints": [ "Use with notification-badge for unread indicators", "Pair with animated-avatar-group in team settings" ], "dependencies": [ "motion", "lucide-react", "@radix-ui/react-popover" ], "description": "A UserAccountAvatar component for SmoothUI.", "displayName": "UserAccountAvatar", "docUrl": "https://smoothui.dev/docs/components/user-account-avatar", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/user-account-avatar.json", "name": "user-account-avatar", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/user-account-avatar.json", "tags": [ "avatar", "account", "popover", "profile", "orders", "radix", "animated" ], "useCases": [ "User account avatar with popover profile panel", "Account menu with profile editing and order tracking", "Interactive user avatar with animated tab navigation" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [ "lucide-react", "motion" ], "description": "A Figma-style floating vector toolbar with tool selection, nested flyouts and a contextual properties bar.", "displayName": "VectorEditorToolbar", "docUrl": "https://smoothui.dev/docs/components/vector-editor-toolbar", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/vector-editor-toolbar.json", "name": "vector-editor-toolbar", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/vector-editor-toolbar.json", "tags": [], "useCases": [] }, { "animationType": "tween", "category": "other", "complexity": "moderate", "compositionHints": [ "Give the wrapper a dark, generously padded surface — the bloom deliberately spills far past the video box", "Raise gain above 1 so the glow reads as emitted light rather than a colour wash; raise saturation so it bleeds more colour than the source", "Pass a poster so the pre-sample and CORS-blocked fallbacks still look intentional", "Lower sampleRate, or set glow to false, on long-running background loops" ], "dependencies": [ "motion" ], "description": "A video with a two-pass Ambilight-style glow sampled live from its own frames, with a CORS-safe static fallback.", "displayName": "VideoAmbient", "docUrl": "https://smoothui.dev/docs/components/video-ambient", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/video-ambient.json", "name": "video-ambient", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/video-ambient.json", "tags": [ "video", "ambient", "glow", "ambilight", "bloom", "canvas", "media" ], "useCases": [ "Hero video with a colour-matched ambient bloom behind it", "Product or trailer embed that feels less boxed-in than a plain player", "Background video that should tint the surrounding surface" ] }, { "animationType": "spring", "category": "other", "complexity": "complex", "compositionHints": [ "Provide captions for anything that carries dialogue or narration", "Set showCustomControls to false to fall back to native browser controls", "Pass open / onOpenChange to drive the modal from a parent list" ], "dependencies": [ "lucide-react", "motion" ], "description": "A video thumbnail that morphs into a full accessible player inside a modal, with a custom keyboard-operable control bar.", "displayName": "VideoModal", "docUrl": "https://smoothui.dev/docs/components/video-modal", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/video-modal.json", "name": "video-modal", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/video-modal.json", "tags": [ "video", "modal", "dialog", "player", "media", "accessibility", "layout-animation" ], "useCases": [ "Thumbnail grid that opens a full video player on click", "Product demo or trailer with real controls and captions", "Portfolio or case-study video preview" ] }, { "animationType": "spring", "category": "data-display", "complexity": "complex", "compositionHints": [ "Pass action buttons like \"Add money\" or \"Send\" via the actions prop", "Pair with swap-panel for a combined wallet + swap dashboard section" ], "dependencies": [ "motion", "lucide-react" ], "description": "A WalletCard component for SmoothUI.", "displayName": "WalletCard", "docUrl": "https://smoothui.dev/docs/components/wallet-card", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/wallet-card.json", "name": "wallet-card", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/wallet-card.json", "tags": [ "wallet", "card", "balance", "stack", "avatar", "finance-ui", "animated" ], "useCases": [ "Stacked account cards with a reveal-on-demand balance", "Shared wallet or family account switcher with member avatars", "Presentation-only fintech dashboard hero card" ] }, { "animationType": "spring", "category": "other", "complexity": "moderate", "compositionHints": [], "dependencies": [], "description": "A wavy perimeter circle reveal inspired by the Codrops circle warping step.", "displayName": "WarpedCircleTransition", "docUrl": "https://smoothui.dev/docs/components/warped-circle-transition", "hasReducedMotion": false, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/warped-circle-transition.json", "name": "warped-circle-transition", "registryDependencies": [ "sdf-blob-transition" ], "registryUrl": "https://smoothui.dev/r/warped-circle-transition.json", "tags": [], "useCases": [] }, { "animationType": "tween", "category": "text", "complexity": "simple", "compositionHints": [ "Combine with reveal-text for entrance + continuous effects", "Use for loading state text or brand logos" ], "dependencies": [ "motion" ], "description": "A WaveText component for SmoothUI.", "displayName": "WaveText", "docUrl": "https://smoothui.dev/docs/components/wave-text", "hasReducedMotion": true, "installCommand": "npx shadcn@latest add https://smoothui.dev/r/wave-text.json", "name": "wave-text", "registryDependencies": [], "registryUrl": "https://smoothui.dev/r/wave-text.json", "tags": [ "text", "wave", "animation", "continuous", "bounce", "decorative", "animated" ], "useCases": [ "Continuous wave animation on text characters", "Decorative animated heading for playful UIs", "Attention-grabbing text effect for CTAs or logos" ] } ], "description": "SmoothUI — beautifully animated React components with Tailwind CSS and Motion", "name": "smoothui", "totalBlocks": 34, "totalComponents": 198, "version": "1.0.0" }