# Sora UI
> Copy-paste animated React components built with Motion, Tailwind CSS & GSAP. Free, shadcn/ui-compatible — install any primitive via the CLI in seconds.

## Documentation
- [Accessibility](https://ui.soralabs.io.vn/docs/accessibility): How is accessibility with Sora UI?
- [Sora CLI](https://ui.soralabs.io.vn/docs/cli): Full command reference for the sora-cli tool — add, list, diff, and doctor.
- [Community](https://ui.soralabs.io.vn/docs/community): Report bugs, join discussions on GitHub, and follow product news on the Sora UI blog.
- [Introduction](https://ui.soralabs.io.vn/docs): What Sora UI is, how the copy-paste component model works, and why it's built for React + Motion + Tailwind CSS.
- [Installation](https://ui.soralabs.io.vn/docs/installation): Install Sora UI in a Next.js or Vite project using the shadcn CLI — dependencies, Tailwind config, and folder structure in 3 steps.
- [License](https://ui.soralabs.io.vn/docs/license): Terms of use and license for Sora UI components.
- [MCP](https://ui.soralabs.io.vn/docs/mcp): Connect the Sora UI docs MCP server to Cursor and other AI clients.
- [Other Animated Component Libraries (shadcn-Style Alternatives)](https://ui.soralabs.io.vn/docs/other-animated-distributions): A comparison of open-source, copy-paste animated component libraries for React and Vue — Magic UI, Aceternity UI, React Bits, Inspira UI, and more — for teams evaluating alternatives to Sora UI.
- [Troubleshooting](https://ui.soralabs.io.vn/docs/troubleshooting): How to troubleshoot common issues with Sora UI.
- [Animating Icons](https://ui.soralabs.io.vn/docs/icons/animating-icons): A bonus authoring skill for icons that do something — outside the Sora UI icon catalog.
- [Get Started](https://ui.soralabs.io.vn/docs/icons/get-started): Get started with Sora UI Icons.
- [Icons](https://ui.soralabs.io.vn/docs/icons): Lucide Icons animated with Motion.
- [Accordion](https://ui.soralabs.io.vn/docs/primitives/accordion): An animated FAQ accordion with expandable panels, powered by Motion. A React component for shadcn/ui.
- [Border Trail](https://ui.soralabs.io.vn/docs/primitives/border-trail): Animated border spotlight that travels around a rounded container edge, powered by Motion. A React component.
- [Bottom Sheet](https://ui.soralabs.io.vn/docs/primitives/bottom-sheet): A draggable, snap-point bottom sheet built on Radix Dialog for accessibility, with Motion driving the drag gesture and glide. React component.
- [Cursor Bubble](https://ui.soralabs.io.vn/docs/primitives/cursor-bubble): A floating label that follows the cursor and elastic-pops into view over interactive targets, powered by GSAP. React.
- [Custom Cursor](https://ui.soralabs.io.vn/docs/primitives/custom-cursor): A smooth custom cursor that morphs when hovering interactive targets, powered by Motion. React component.
- [Dia Text Reveal](https://ui.soralabs.io.vn/docs/primitives/dia-text-reveal): A gradient sweep that reveals text with a chromatic wash, powered by Motion. A React component.
- [Dock Nav](https://ui.soralabs.io.vn/docs/primitives/dock-nav): An Apple-style dock navigation bar with Motion-powered expanding icons and tooltips on hover. A React component.
- [Draw Underline Link](https://ui.soralabs.io.vn/docs/primitives/draw-underline-link): A link with a hand-drawn SVG underline that animates on hover, powered by Motion. A React component.
- [Expandable Tabs](https://ui.soralabs.io.vn/docs/primitives/expandable-tabs): A pill-shaped tab bar that expands into a floating panel, with Motion driving the shell, label, and content transitions. React component.
- [Fog Text Reveal](https://ui.soralabs.io.vn/docs/primitives/fog-text-reveal): Inline text that materializes through a soft, turbulent WebGL fog mask, then clears and cycles through an array of messages. A React component.
- [Hero Carousel](https://ui.soralabs.io.vn/docs/primitives/hero-carousel): Crossfading hero image slideshow with a progress pill, play/pause, and prev/next controls. A React + Motion component.
- [Highlight](https://ui.soralabs.io.vn/docs/primitives/highlight): A shared Motion-powered highlight that slides between items on hover, or fades per-item on click. React component.
- [Primitives](https://ui.soralabs.io.vn/docs/primitives): 30+ animated, unstyled building blocks for React — text effects, buttons, interactions, and more. Built with Tailwind CSS and Motion.
- [Inline Testimonials](https://ui.soralabs.io.vn/docs/primitives/inline-testimonials): A flowing quote stream where each avatar reveals its author on hover, with Motion fading and blurring the rest. React component.
- [Logo Carousel Swapper](https://ui.soralabs.io.vn/docs/primitives/logo-carousel-swapper): Staggered logo columns that swap with fade, vertical shift, and motion blur. A React component.
- [Magnetic Cards](https://ui.soralabs.io.vn/docs/primitives/magnetic-cards): A fanned stack of cards that fling away from the cursor on release, with GSAP InertiaPlugin easing each one back to rest. React component.
- [Number Flow](https://ui.soralabs.io.vn/docs/primitives/number-flow): An animated, digit-by-digit number counter with a smooth rolling odometer effect, powered by Motion. React component.
- [Particle Hover Button](https://ui.soralabs.io.vn/docs/primitives/particle-hover-button): A wrapper that emits glowing, pooled particles from the cursor while hovering any button or link. React component.
- [Pixel Background](https://ui.soralabs.io.vn/docs/primitives/pixel-background): A canvas-based pixel grid that animates in on hover, with configurable reveal patterns. React component.
- [Pixel Image Loader](https://ui.soralabs.io.vn/docs/primitives/pixel-image-loader): A canvas-based image that resolves from a blocky, pixelated placeholder up to full sharpness as it loads. React component.
- [Pixelated Image Reveal](https://ui.soralabs.io.vn/docs/primitives/pixelated-image-reveal): An image card that reveals a second image through a randomized pixel grid on hover, powered by Motion. React component.
- [Progressive Blur](https://ui.soralabs.io.vn/docs/primitives/progressive-blur): A stacked-layer blur that ramps smoothly from sharp to fully blurred toward an edge, for fading content under a fixed header or above a scroll boundary. React.
- [Rolling Text](https://ui.soralabs.io.vn/docs/primitives/rolling-text): Per-character slot-machine reveal that rolls each letter into place once it scrolls into view, powered by Motion. React.
- [Skeleton](https://ui.soralabs.io.vn/docs/primitives/skeleton): A loading placeholder with shimmer or fade variants, plus a transition that crossfades into real content once loading finishes. React component.
- [Sliding Chip Button](https://ui.soralabs.io.vn/docs/primitives/sliding-chip-button): A chip-style call-to-action link with a Motion-powered sliding label and rotating icon chips on hover. React.
- [Slot](https://ui.soralabs.io.vn/docs/primitives/slot): A slot component that merges motion props into any child element, turning it into a Motion component. A primitive from Animate UI.
- [Stagger Button](https://ui.soralabs.io.vn/docs/primitives/stagger-button): A shadcn button that staggers per character or slides the whole label on hover. A React component.
- [Text Cursor Loop](https://ui.soralabs.io.vn/docs/primitives/text-cursor-loop): Cycles through a list of words with a per-character collapse/reveal transition and a trailing cursor glyph that wipes across the text between words. React.
- [Text Effect](https://ui.soralabs.io.vn/docs/primitives/text-effect): Preset-driven staggered text reveals with blur, fade, slide, and scale animations, powered by Motion. React component.
- [Text Loop](https://ui.soralabs.io.vn/docs/primitives/text-loop): Cycles through a list of items with an enter/exit animation, powered by Motion. A React component.
- [Text Morph](https://ui.soralabs.io.vn/docs/primitives/text-morph): Per-character layout morphing for labels, counters, and live text swaps, powered by Motion. React component.
- [Text Reveal (Block)](https://ui.soralabs.io.vn/docs/primitives/text-reveal-block): Line-by-line text reveal with a colored block wipe, powered by GSAP SplitText. A React component.
- [Text Reveal (Mask)](https://ui.soralabs.io.vn/docs/primitives/text-reveal-mask): A scroll-triggered masked slide-up text reveal animation, powered by Motion. A React component.
- [Text Roll](https://ui.soralabs.io.vn/docs/primitives/text-roll): A per-character vertical text roll animation for label swaps and micro-interactions, powered by Motion. React.
- [Text Scramble](https://ui.soralabs.io.vn/docs/primitives/text-scramble): A text scramble reveal animation that decodes characters on mount or when re-triggered, powered by Motion. React.
- [Text Underline](https://ui.soralabs.io.vn/docs/primitives/text-underline): A CSS-only link underline that slides through on hover. A React component.
- [Tilt Card](https://ui.soralabs.io.vn/docs/primitives/tilt-card): 3D tilt card that rotates toward the cursor on spring physics, with an optional glare reflection. React component.
- [Typer](https://ui.soralabs.io.vn/docs/primitives/typer): A character-by-character reveal where each glyph ripples through randomized pill, accent, and outline states before settling into plain text. A React component.
- [Video Player](https://ui.soralabs.io.vn/docs/primitives/video-player): Dependency-free modal video player with a chaptered timeline, hover-scrub preview, speed menu, picture-in-picture, and fullscreen. React component.

## Components
- [Cursor Trail Reveal](https://ui.soralabs.io.vn/components/cursor-trail-reveal): Desktop cursor trail with CSS clip-path reveals as the pointer moves — no Motion or GSAP.
- [Infinite Scrolling Images](https://ui.soralabs.io.vn/components/infinite-scrolling-images): Infinite stacked image cards that advance with wheel, touch, and keyboard controls.
- [Scroll Chapters](https://ui.soralabs.io.vn/components/scroll-chapters): A draggable, chaptered progress-bar nav — two-way cursor/scroll sync, ghost-cursor hover preview, snap-to-step seeking, and a per-chapter panel that can opt in or out of showing.
- [Scroll Gallery](https://ui.soralabs.io.vn/components/scroll-gallery): Full-viewport sticky scroll slider with GSAP-driven strip-mask transitions and animated title swaps.
- [Sticky Scroll Cards](https://ui.soralabs.io.vn/components/sticky-scroll-cards): Scroll-pinned hero where a front card flips to reveal a stack of back cards, dismissed one at a time as you keep scrolling.
- [Text Reveal Box](https://ui.soralabs.io.vn/components/text-reveal-box): Scroll-pinned word-by-word text reveal with a highlight flash, powered by GSAP ScrollTrigger.

## Registry
- [registry.json](https://ui.soralabs.io.vn/r/registry.json): shadcn-compatible registry manifest

## LLM exports
- [llms-full.txt](https://ui.soralabs.io.vn/llms-full.txt): full docs + components for AI
- Append `.mdx` to any docs or component URL for markdown (e.g. `https://ui.soralabs.io.vn/docs/primitives/draw-underline-link.mdx`)