# SmoothUI > A collection of beautifully designed React components with smooth animations built with React, Tailwind CSS, and Motion. - Docs: https://smoothui.dev/docs - GitHub: https://github.com/educlopez/smoothui - Full docs for LLMs: https://smoothui.dev/llms-full.txt - Component JSON: https://smoothui.dev/llms-components.json ## Components (72) - agent-avatar: Canvas-based generative pixel avatar for AI agents, unique per seed. [ai] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/agent-avatar.json - ai-branch: An interactive AI branch component for displaying conversation flows. [ai] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/ai-branch.json - ai-input: A AiInput component for SmoothUI. [ai] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/ai-input.json - animated-avatar-group: Stack of overlapping avatars with smooth expand/collapse animation [data-display] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/animated-avatar-group.json - animated-file-upload: Animated drag-and-drop file upload component [basic-ui] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/animated-file-upload.json - animated-input: A AnimatedInput component for SmoothUI. [basic-ui] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/animated-input.json - animated-o-t-p-input: A AnimatedOTPInput component for SmoothUI. [basic-ui] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/animated-o-t-p-input.json - animated-progress-bar: A AnimatedProgressBar component for SmoothUI. [basic-ui] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/animated-progress-bar.json - animated-stepper: Animated stepper/wizard component with step transitions [basic-ui] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/animated-stepper.json - animated-tabs: Animated tabs component with sliding indicator [basic-ui] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/animated-tabs.json - animated-tags: A AnimatedTags component for SmoothUI. [basic-ui] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/animated-tags.json - animated-toggle: Animated toggle switch with morph and icon variants [basic-ui] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/animated-toggle.json - animated-tooltip: Spring-animated tooltip with multiple placement options [basic-ui] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/animated-tooltip.json - app-download-stack: A AppDownloadStack component for SmoothUI. [other] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/app-download-stack.json - apple-invites: A AppleInvites component for SmoothUI. [other] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/apple-invites.json - basic-accordion: A BasicAccordion component for SmoothUI. [basic-ui] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/basic-accordion.json - basic-dropdown: A BasicDropdown component for SmoothUI. [basic-ui] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/basic-dropdown.json - basic-modal: A BasicModal component for SmoothUI. [basic-ui] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/basic-modal.json - basic-toast: A BasicToast component for SmoothUI. [feedback] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/basic-toast.json - book: A 3D CSS book component with perspective transforms and hover animation [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/book.json - breadcrumb: Animated breadcrumb navigation with stagger-in animation [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/breadcrumb.json - button-copy: A ButtonCopy component for SmoothUI. [button] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/button-copy.json - checkbox: An animated Checkbox component for SmoothUI with checkmark and indeterminate state animations. [basic-ui] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/checkbox.json - clip-corners-button: A ClipCornersButton component for SmoothUI. [button] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/clip-corners-button.json - combobox: An animated Combobox component for SmoothUI with text filtering, async search, and keyboard navigation. [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/combobox.json - context-menu: An animated Context Menu component for SmoothUI with spring animations, nested submenus, and keyboard navigation. [basic-ui] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/context-menu.json - contribution-graph: A ContributionGraph component for SmoothUI. [data-display] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/contribution-graph.json - cursor-follow: A CursorFollow component for SmoothUI. [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/cursor-follow.json - dialog: Animated Dialog and AlertDialog components for SmoothUI. [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/dialog.json - dot-morph-button: A DotMorphButton component for SmoothUI. [button] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/dot-morph-button.json - drawer: An animated Drawer component for SmoothUI that slides from any side. [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/drawer.json - dropdown-menu: An animated Dropdown Menu component for SmoothUI with spring animations, nested submenus, and keyboard navigation. [basic-ui] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/dropdown-menu.json - dynamic-island: A DynamicIsland component for SmoothUI. [other] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/dynamic-island.json - expandable-cards: A ExpandableCards component for SmoothUI. [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/expandable-cards.json - exposure-slider: iOS-style exposure slider with draggable ticker and progress ring [other] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/exposure-slider.json - figma-comment: A FigmaComment component for SmoothUI. [other] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/figma-comment.json - form: A lightweight, composable Form component with animated error messages and full accessibility support. [basic-ui] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/form.json - github-stars-animation: A GitHubStarsAnimation component for SmoothUI. [data-display] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/github-stars-animation.json - glow-hover-card: A GlowHoverCards component for SmoothUI. [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/glow-hover-card.json - gooey-popover: A GooeyPopover component for SmoothUI. [other] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/gooey-popover.json - grid-loader: 3x3 grid-based loading animation with preset patterns [feedback] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/grid-loader.json - image-metadata-preview: A ImageMetadataPreview component for SmoothUI. [data-display] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/image-metadata-preview.json - infinite-slider: A InfiniteSlider component for SmoothUI. [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/infinite-slider.json - interactive-image-selector: A InteractiveImageSelector component for SmoothUI. [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/interactive-image-selector.json - job-listing-component: A JobListingComponent component for SmoothUI. [layout] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/job-listing-component.json - magnetic-button: Button that subtly follows the cursor with magnetic effect [button] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/magnetic-button.json - notification-badge: Animated notification badge with count and status variants [basic-ui] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/notification-badge.json - number-flow: A NumberFlow component for SmoothUI. [data-display] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/number-flow.json - pagination: Animated pagination with spring-based active page indicator [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/pagination.json - phototab: A Phototab component for SmoothUI. [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/phototab.json - power-off-slide: A PowerOffSlide component for SmoothUI. [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/power-off-slide.json - price-flow: A PriceFlow component for SmoothUI. [data-display] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/price-flow.json - product-card: Animated product card component for ecommerce [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/product-card.json - radio-group: An animated Radio Group component for SmoothUI with selection indicator spring animation. [basic-ui] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/radio-group.json - reveal-text: A RevealText component for SmoothUI. [text] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/reveal-text.json - reviews-carousel: A ReviewsCarousel component for SmoothUI. [data-display] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/reviews-carousel.json - rich-popover: A RichPopover component for SmoothUI. [basic-ui] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/rich-popover.json - scramble-hover: A ScrambleHover component for SmoothUI. [text] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/scramble-hover.json - scroll-reveal-paragraph: A ScrollRevealParagraph component for SmoothUI. [text] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/scroll-reveal-paragraph.json - scrollable-card-stack: A ScrollableCardStack component for SmoothUI. [layout] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/scrollable-card-stack.json - scrubber: Design-tool style scrubber slider with animated thumb and built-in label [basic-ui] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/scrubber.json - searchable-dropdown: A SearchableDropdown component for SmoothUI. [basic-ui] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/searchable-dropdown.json - select: An animated Select dropdown component for SmoothUI wrapping Radix Select with smooth animations. [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/select.json - siri-orb: A beautiful animated orb component inspired by Siri's visual design. [ai] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/siri-orb.json - skeleton-loader: Animated skeleton loading placeholders [basic-ui] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/skeleton-loader.json - smooth-button: A polished button component with gradient variants and press animation [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/smooth-button.json - social-selector: A SocialSelector component for SmoothUI. [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/social-selector.json - switchboard-card: A SwitchboardCard component with light grid illustration for SmoothUI. [other] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/switchboard-card.json - tweet-card: A beautiful tweet card component for displaying Twitter/X posts. [data-display] (moderate) — install: npx shadcn@latest add https://smoothui.dev/r/tweet-card.json - typewriter-text: A TypewriterText component for SmoothUI. [text] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/typewriter-text.json - user-account-avatar: A UserAccountAvatar component for SmoothUI. [other] (complex) — install: npx shadcn@latest add https://smoothui.dev/r/user-account-avatar.json - wave-text: A WaveText component for SmoothUI. [text] (simple) — install: npx shadcn@latest add https://smoothui.dev/r/wave-text.json ## Blocks (0)