Dev Design Library

Sora UI components

Sora UI - Motion-first React primitives for shadcn/ui. Open-source registry — copy-paste components built with Motion, Tailwind, and GSAP.

Components
66
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT + Commons Clause (partes)
GitHub stars
12
Source
https://github.com/SoraLabsOSS/ui
Website
https://ui.soralabs.studio

All Sora UI components

  • Accordion: An animated FAQ accordion with expandable panels, powered by Motion.
  • Base Accordion: An animated accordion component built on Base UI with spring physics, height collapse mask gradient, blur transitions, and gliding…
  • Base Alert Dialog: An accessible alert dialog built on Base UI with smooth Motion 3D perspective entrance and exit animations, customizable sizes, and media…
  • Base Button: An interactive button component built on Base UI with Motion hover/tap scaling and shadcn/ui variants.
  • Base Checkbox: An accessible, stylable checkbox built on Base UI with a Motion-friendly animated indicator.
  • Base Context Menu: An accessible context menu built on Base UI with smooth Motion spring scale and submenu slide animations.
  • Base Dialog: An accessible modal dialog built on Base UI with smooth Motion spring entrance and exit animations.
  • Base Dropdown Menu: An accessible dropdown menu built on Base UI with smooth Motion spring scale and submenu slide animations.
  • Input: A shadcn/ui-compatible input with a smooth Motion-powered caret.
  • Base Switch: An accessible, highly customizable switch built on Base UI with Motion spring layout physics.
  • Base Tooltip: An accessible tooltip built on Base UI with spring-based keyframe scale and translation animations powered by Motion.
  • Cursor Bubble: A floating label that follows the cursor and elastic-pops into view over interactive targets, powered by GSAP.
  • Cursor Trail Reveal: Desktop cursor trail that reveals staggered image strips with clip-path wipes as the pointer moves.
  • Dia Text Reveal: A gradient sweep that reveals text with a chromatic wash, powered by Motion.
  • Draw Underline Link: A link with a hand-drawn SVG underline that animates on hover, powered by Motion.
  • Dual Wipe Reveal: Dual-layer block wipe reveal that sweeps away curtain blocks to unveil text, powered by Motion.
  • Expandable Tabs: A pill-shaped tab bar that expands into a floating panel, with Motion driving the shell, label, and content transitions.
  • Fog Text Reveal: Inline text that materializes through a soft, turbulent WebGL fog mask, inherits font and color from CSS, and cycles through an array of…
  • Hero Carousel: Crossfading hero image slideshow with a progress pill, play/pause, and prev/next controls.
  • Highlight: A Motion-powered highlight effect that allows you to highlight elements on hover, click or with a controlled value.
  • Hover Link: Five CSS-only link hover presets — three underline wipes and two block highlights — with an optional sliding arrow.
  • Arrow Right: Animated right arrow that nudges forward and redraws its stroke on hover using a pure CSS stroke-dash animation.
  • Bell: Notification bell that rattles from its hanger on trigger — a decaying rotation pivot.
  • Chevrons: Animated double up-chevron that cross-fades between the two carets on trigger.
  • Copy: Animated copy icon that smoothly transitions into a checkmark on trigger with a scale and blur pop effect.
  • Menu: Animated hamburger menu icon that smoothly morphs into a close (X) icon.
  • Volume: Animated volume icon that morphs smoothly between sound waves and a mute slash with speaker shake effect.
  • Infinite Scrolling Images: An infinite card stack that advances with wheel, touch, or keyboard input using spring-based Motion transitions.
  • Inline Testimonials: A flowing quote stream where each avatar reveals its author on hover, with Motion fading and blurring the rest.
  • Logo Carousel Swapper: Staggered logo column swapper with fade, vertical shift, and motion blur powered by Motion.
  • Magnetic Cards: A fanned stack of cards that fling away from the cursor on release, with GSAP InertiaPlugin easing each one back to rest.
  • Number Flow: An animated, digit-by-digit number counter with a smooth rolling odometer effect, powered by Motion.
  • Particle Hover Button: A wrapper that emits glowing, pooled particles from the cursor while hovering any button or link.
  • Pixel Image Loader: A canvas-based image that resolves from a blocky, pixelated placeholder up to full sharpness as it loads.
  • 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…
  • Radix Accordion: An animated accordion component built on Radix UI with spring physics, height collapse mask gradient, blur transitions, and gliding…
  • Radix Alert Dialog: An accessible alert dialog built on Radix UI with smooth Motion 3D perspective entrance and exit animations, customizable sizes, and media…
  • Radix Button: An interactive button component built on Radix UI Slot with Motion hover/tap scaling and shadcn/ui variants.
  • Radix Checkbox: An accessible, stylable checkbox built on Radix UI with a Motion-friendly animated indicator.
  • Radix Context Menu: An accessible context menu built on Radix UI with smooth Motion spring scale and submenu slide animations.
  • Radix Dialog: An accessible modal dialog built on Radix UI with smooth Motion spring entrance and exit animations.
  • Radix Dropdown Menu: An accessible dropdown menu built on Radix UI with smooth Motion spring scale and submenu slide animations.
  • Radix Input: A shadcn/ui-compatible native input with a smooth Motion-powered caret.
  • Radix Switch: An accessible, highly customizable switch built on Radix UI with Motion spring layout physics.
  • Radix Tooltip: An accessible tooltip built on Radix UI with spring-based keyframe scale and translation animations powered by Motion.
  • Rolling Text: Per-character slot-machine reveal that rolls each letter into place once it scrolls into view, powered by Motion.
  • 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…
  • Scroll Gallery: A full-viewport sticky scroll slider with strip-mask image transitions and animated title swaps, driven by GSAP ScrollTrigger.
  • Skeleton: A loading placeholder with shimmer or fade variants, plus a transition that crossfades into real content once loading finishes.
  • Skeleton Shimmer: Skeleton loading placeholders with a shimmer effect that transitions to revealed content via a CSS view-transition wipe animation…
  • Sliding Chip Button: A chip-style call-to-action link with a Motion-powered sliding label and rotating icon chips on hover.
  • Stagger Button: A button that staggers per character or slides the whole label on hover, with a scaling background layer.
  • 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 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…
  • Text Effect: Preset-driven staggered text reveals with blur, fade, slide, and scale animations, powered by Motion.
  • Text Loop: Cycles through a list of items with an enter/exit animation, powered by Motion.
  • Text Morph: Per-character and place-value text morphing for labels, counters, and live text swaps, powered by Web Animations API.
  • Text Reveal (Block): Line-by-line text reveal with a colored block wipe, powered by GSAP SplitText.
  • Text Reveal Box: Scroll-pinned word-by-word text reveal with a highlight flash, powered by GSAP ScrollTrigger.
  • Text Reveal (Mask): A scroll-triggered masked slide-up text reveal animation, powered by Motion.
  • Text Roll: A per-character vertical text roll animation for label swaps and micro-interactions, powered by Motion.
  • Text Scramble: A text scramble reveal animation that decodes characters on mount or when re-triggered, powered by Motion.
  • Tilt Card: 3D tilt card that rotates toward the cursor on spring physics, with an optional glare reflection.
  • Tilt Slide Transition: Multi-page editorial portfolio transition with tilted scaling exit and diagonal clip-path entrance, powered by View Transition API, GSAP…
  • Typer: A character-by-character reveal where each glyph ripples through randomized pill, accent, and outline states before settling into plain…
  • Video Player: Dependency-free custom video player: modal overlay, chaptered timeline, hover-scrub preview, speed menu, picture-in-picture, fullscreen…

Browse by category