SmoothUI Documentation

SmoothUI is a modern React component library designed for creating high-quality, performant, and accessible user interfaces. It leverages Tailwind CSS for styling and integrates Motion and GSAP to provide fluid, high-performance animations out of the box.

Core Characteristics

• shadcn CLI Compatible: Uses the standard shadcn CLI workflow for component installation.
• MCP Support: Compatible with Model Context Protocol (MCP), allowing AI assistants to discover and install components automatically.
• TypeScript First: Provides full type safety across the library.
• Customizable: Components are built with Tailwind CSS, making them easy to theme and modify using standard utility classes.
• Framework Agnostic: Works with any React-based framework, including Next.js, Vite, and Create React App.

SmoothUI provides a collection of animated components designed to extend shadcn/ui projects with motion, gestures, and interactivity. While shadcn/ui focuses on structure and accessibility, SmoothUI fills the gap with spring-based animations, layout transitions, and gesture-driven interactions.

Key Compatibility Features:

• Utility: Uses the same cn() utility from lib/utils.
• Theming: Uses the same CSS variables (e.g., --primary, --background).
• Styling: Uses Tailwind CSS v4 tokens.
• Runtime: Built for React 19.
• Ownership: Components are copied into your local directory for full customization.

The AnimatedFileUpload component provides a complete drag-and-drop experience with the following capabilities:

• Drag-and-drop zone: Supports drag-over transitions and click-to-browse functionality.
• Animated file list: Smooth transitions when adding or removing files.
• Validation: Built-in support for file size validation and MIME type filtering.
• Flexible modes: Supports both single and multiple file uploads.
• Accessibility: Fully accessible via keyboard and ARIA attributes, and respects prefers-reduced-motion settings.

The Accordion is an animated React component designed for collapsible content sections (like FAQs). It supports single or multiple item selection and features smooth expand/collapse transitions.

Dependencies:

• lucide.dev (for icons)
• motion.dev (for animations)

The SmoothUI REST API allows you to programmatically discover, search, and retrieve component metadata and source code. It is designed for both human developers and AI agents.

• Base URL: https://smoothui.dev/api/v1
• Authentication: None required (fully public).
• CORS: Supported (Access-Control-Allow-Origin: *).
• Format: All responses are JSON.
• OpenAPI Spec: Available at https://smoothui.dev/openapi.json for automated client generation.

The SmoothUI Checkbox is an animated component with the following capabilities:

• Spring Animations: Features a spring path drawing animation for the checkmark.
• Indeterminate State: Supports a mixed state using aria-checked="mixed" with an animated dash icon.
• Radix UI Integration: Wraps Radix UI Checkbox for robust form integration.
• Label Support: Works with standard HTML <label> elements via the id prop.
• Disabled State: Supports a disabled state for non-interactive use cases.
• Reduced Motion Support: Respects the prefers-reduced-motion media query; animations are disabled (appearing instantly) when reduced motion is preferred.

The Figma Comment component is an animated comment bubble inspired by Figma's comment system. It features smooth spring animations for expanding and collapsing from a small avatar to a full comment view.

Key Features:

• Smooth spring animations for expand/collapse.
• Click outside to close functionality.
• Customizable width and content.
• Notification indicator support.
• Responsive height measurement.
• Accessibility support including reduced motion.