Sora UI — 9 React Components, Preview & Copy | 21st

Sora UI

by soralabs

11components48.3Kviews178bookmarks

Installs all 62 components. Without our CLI, run instead.

Auto-indexed

Base Dropdown Menu

Cursor Bubble

Typer

Scroll Gallery

Dual Wipe Reveal

Number Flow

Base Alert Dialog

Text Scramble

Custom Cursor

That's all 11 components

About Sora UI

Sora UI publishes a shadcn registry at ui.soralabs.io.vn, with 62 components installable through the shadcn CLI.

Components: 62
GitHub stars: 13
Last commit: Sep 28, 2026
Repository: SoraLabsOSS/ui

Also in the Sora UI registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

arrow-roll-button
utils
base-accordion
utils4 examples
Base Button
base-button
An interactive button component built on Base UI with Motion hover/tap scaling and shadcn/ui variants.
@base-ui/react, motion, class-variance-authority1 file6 examples
Base Checkbox
base-checkbox
An accessible, stylable checkbox built on Base UI with a Motion-friendly animated indicator.
@base-ui/react, motion1 file4 examples
base-context-menu
utils3 examples
Base Dialog
base-dialog
An accessible modal dialog built on Base UI with smooth Motion spring entrance and exit animations.
@base-ui/react, motion, lucide-react1 file3 examples
base-input
utils
base-switch
utils3 examples
base-tooltip
utils1 example
Cursor Trail Reveal
cursor-trail-reveal
Desktop cursor trail that reveals staggered image strips with clip-path wipes as the pointer moves.
class-variance-authority1 file1 example
Docs ↗
Draw Underline Link
draw-underline-link
A link with a hand-drawn SVG underline that animates on hover, powered by Motion.
motion, class-variance-authority1 file
Docs ↗
Expandable Tabs
expandable-tabs
A pill-shaped tab bar that expands into a floating panel, with Motion driving the shell, label, and content transitions.
motion, lucide-react, react-use-measure1 file1 example
Fog Text Reveal
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 messages.
motion1 file1 example
Hero Carousel
hero-carousel
Crossfading hero image slideshow with a progress pill, play/pause, and prev/next controls.
utils1 file1 example
Highlight
A Motion-powered highlight effect that allows you to highlight elements on hover, click or with a controlled value.
motion1 file2 examples
Arrow Right
icons-arrow-right
Animated right arrow that nudges forward and redraws its stroke on hover using a pure CSS stroke-dash animation.
utils1 file
Bell
icons-bell
Notification bell that rattles from its hanger on trigger — a decaying rotation pivot, powered by the AnimateIcon engine.
motion1 file
Chevrons
icons-chevrons
Animated double up-chevron that cross-fades between the two carets on hover, powered by the AnimateIcon engine.
motion1 file
icons-copy
Infinite Scrolling Images
infinite-scrolling-images
An infinite card stack that advances with wheel, touch, or keyboard input using spring-based Motion transitions.
motion1 file1 example
Inline Testimonials
inline-testimonials
A flowing quote stream where each avatar reveals its author on hover, with Motion fading and blurring the rest.
motion1 file1 example
Logo Carousel Swapper
logo-carousel-swapper
Staggered logo column swapper with fade, vertical shift, and motion blur powered by Motion.
motion, class-variance-authority1 file1 example
Magnetic Cards
magnetic-cards
A fanned stack of cards that fling away from the cursor on release, with GSAP InertiaPlugin easing each one back to rest.
gsap, @gsap/react1 file1 example
Particle Hover Button
particle-hover-button
A wrapper that emits glowing, pooled particles from the cursor while hovering any button or link.
motion1 file1 example
Pixel Image Loader
pixel-image-loader
A canvas-based image that resolves from a blocky, pixelated placeholder up to full sharpness as it loads.
1 file
Progressive Blur
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.
utils1 file1 example
radix-accordion
utils
radix-alert-dialog
utils
Radix Button
radix-button
An interactive button component built on Radix UI Slot with Motion hover/tap scaling and shadcn/ui variants.
radix-ui, motion, class-variance-authority1 file6 examples
Radix Checkbox
radix-checkbox
An accessible, stylable checkbox built on Radix UI with a Motion-friendly animated indicator.
radix-ui, motion1 file4 examples
radix-context-menu
utils
Radix Dialog
radix-dialog
An accessible modal dialog built on Radix UI with smooth Motion spring entrance and exit animations.
radix-ui, motion, lucide-react1 file3 examples
radix-dropdown-menu
utils
radix-input
utils
radix-switch
utils
radix-tooltip
utils
Rolling Text
rolling-text
Per-character slot-machine reveal that rolls each letter into place once it scrolls into view, powered by Motion.
motion1 file
Scroll Chapters
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.
gsap, @gsap/react1 file1 example
Skeleton Shimmer
skeleton-shimmer
Skeleton loading placeholders with a shimmer effect that transitions to revealed content via a CSS view-transition wipe animation. Skeletons are sized using placeholder data to reduce layout shifts.
motion1 file2 examples
Sliding Chip Button
sliding-chip-button
A chip-style call-to-action link with a Motion-powered sliding label and rotating icon chips on hover.
motion, class-variance-authority1 file
Stagger Button
stagger-button
A button that staggers per character or slides the whole label on hover, with a scaling background layer.
class-variance-authority1 file
Sticky Scroll Cards
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.
gsap, @gsap/react1 file1 example
Text Cursor Loop
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.
motion1 file1 example
Text Effect
text-effect
Preset-driven staggered text reveals with blur, fade, slide, and scale animations, powered by Motion.
motion1 file1 example
Text Loop
text-loop
Cycles through a list of items with an enter/exit animation, powered by Motion.
motion1 file1 example
Text Morph
text-morph
Per-character layout morphing for labels, counters, and live text swaps, powered by Motion.
motion1 file2 examples
Text Reveal Box
text-reveal-box
Scroll-pinned word-by-word text reveal with a highlight flash, powered by GSAP ScrollTrigger.
gsap, @gsap/react1 file1 example
Tilt Card
tilt-card
3D tilt card that rotates toward the cursor on spring physics, with an optional glare reflection.
motion1 file2 examples
tilt-slide-transition
1 example
Video Player
video-player
Dependency-free custom video player: modal overlay, chaptered timeline, hover-scrub preview, speed menu, picture-in-picture, fullscreen, keyboard shortcuts, and focus trapping.
motion1 file1 example

From the Sora UI readme

Sora UI

The AI-ready animated component registry & motion system for React & Next.js.

Supported by

Sora UI is supported by the open-source ecosystem. Special thanks to:

Architecture

Sora UI
├── Motion       (Animation building blocks: unstyled motion & effects at /motion)
├── Icons        (Animated Lucide icons at /icons)
├── Catalog      (Ready-to-use animated showcases & full layout pages at /catalog)
└── UI           (Base UI + Radix UI foundation infused with Sora Motion & Tailwind CSS at /ui)

Highlights

Understood by Humans & AI: UI components whose behavior, constraints, composition, and metadata are understandable by both humans and AI. Powered by an official Model Context Protocol (MCP) server (apps/xmcp) publishing structured intent, accessibility constraints, motion semantics, and composition rules.
Motion First: Production-ready micro-interactions and animations built on Motion with first-class prefers-reduced-motion accessibility support.
Modern Foundation: Built on React 19, Tailwind CSS v4, Base UI, and Radix UI. Zero-overhead styling with full class override support via cn(...).
High-Performance Monorepo: Powered by Bun 1.3, Turborepo, and Biome/Ultracite for lightning-fast builds, linting, and component scaffolding.

Documentation

Explore the interactive component catalog, animated showcases, and documentation at ui.soralabs.studio.

Local development

bun install
bun run dev:www    # docs site only → http://localhost:3000
# or
bun dev            # run all apps (Next.js docs + xmcp)

No .env file is required to browse docs, blog, or the catalog locally. Copy [apps/www/.env.example](./apps/www/.env.example) only when you need optional features:

Feature	Variables
Sign-in & Bookmarks	`NEXT_PUBLIC_ENABLE_AUTH="true"`, `DATABASE_URL`, `BETTER_AUTH_SECRET`, OAuth keys
Redis rate limits / cache	`UPSTASH_REDIS_REST_URL`, `UPSTASH_REDIS_REST_TOKEN`
Better Auth Sentinel	`BETTER_AUTH_API_KEY`, `NEXT_PUBLIC_BETTER_AUTH_IDENTIFY_URL`
Ask AI (AI Search)	`AI_SEARCH_CHAT_URL` (Cloudflare AI Search chat endpoint; required for Ask AI, no public fallback)
Sentry	`NEXT_PUBLIC_SENTRY_DSN`

Production deployments for documentation require zero environment variables (set NEXT_PUBLIC_ENABLE_AUTH="true", BETTER_AUTH_SECRET, DATABASE_URL, or AI_SEARCH_CHAT_URL only when enabling auth or Ask AI).

MCP Server

Sora UI includes an official Model Context Protocol (MCP) server built with xmcp under [apps/xmcp](./apps/xmcp). It enables AI assistants (Cursor, Claude Desktop, Claude Code, etc.) to search documentation, browse sections, and install components:

The UI registry also publishes agent-native metadata for active Base UI and Radix UI components: intent, accessibility constraints, motion behavior, and composition rules. MCP exposes this context through component information and provides composition validation; it is a foundation for agent-assisted UI construction, not yet an end-to-end planner or code generator.

# Run MCP server in development mode
cd apps/xmcp && bun run dev

# Build HTTP and STDIO bundles
cd apps/xmcp && bun run build

See the MCP Documentation or [apps/xmcp/README.md](./apps/xmcp/README.md) for full configuration details.

Contributing

Visit our contributing guide to learn how to contribute.

Scaffold a component: bun run create (interactive wizard)
Adding a documented component: see apps/www/registry/README.md
Component health verification: bun run doctor
Contributor CLI reference: see packages/www-cli/README.md

Code of Conduct

This project follows a Code of Conduct to help create a welcoming community. Please read CODE_OF_CONDUCT.md before contributing.

Credits & Attribution

Sora UI is a fork of Animate UI by Skyleen (@imskyleen). The architecture, registry system, component APIs, and motion primitives have been substantially redesigned. Some internal patterns and abstractions remain influenced by the original codebase.

Historical upstream material is attributed and licensed according to its original terms. See LICENSE.md for the full legal text.

License

Licensed under the MIT license.

Read the rest on GitHub →

What Sora UI builds on

The packages and primitives its components pull in, counted across the registry.

utils50lib-scroll-trigger-utils5

Hooks and utilities

accordion
skeleton
hooks-use-auto-height
hooks-use-controlled-state
hooks-use-prefers-reduced-motion

What Sora UI shipped recently

Every appearance and removal our crawl has seen in the registry index.

base-inputaddedSep 21, 2026
arrow-roll-buttonaddedSep 20, 2026
border-trailremovedSep 19, 2026
base-switchaddedSep 17, 2026
custom-cursorremovedSep 14, 2026
base-tooltipaddedSep 13, 2026
base-dropdown-menuaddedSep 7, 2026
base-alert-dialogaddedSep 3, 2026
bottom-sheetremovedSep 3, 2026
demo-alert-dialogaddedSep 3, 2026
base-context-menuaddedAug 30, 2026

Registries like Sora UI

Magic UI

by Dillion Verma

components

coss

by coss

components

Motion Primitives

by Julien Thibeaut

components

cult ui

by cult/ui

components

Browse every shadcn registry we track →

Sora UI contents

Base Dropdown Menu

Base Dropdown Menu

Cursor Bubble

Typer

Scroll Gallery

Dual Wipe Reveal

Number Flow

Base Alert Dialog

Base Alert Dialog

Text Scramble

Custom Cursor

About Sora UI

Also in the Sora UI registry

arrow-roll-button

base-accordion

Base Button

Base Checkbox

base-context-menu

Base Dialog

base-input

base-switch

base-tooltip

Cursor Trail Reveal

Draw Underline Link

Expandable Tabs

Fog Text Reveal

Hero Carousel

Highlight

Arrow Right

Bell

Chevrons

icons-copy

Infinite Scrolling Images

Inline Testimonials

Logo Carousel Swapper

Magnetic Cards

Particle Hover Button

Pixel Image Loader

Progressive Blur

radix-accordion

radix-alert-dialog

Radix Button

Radix Checkbox

radix-context-menu

Radix Dialog

radix-dropdown-menu

radix-input

radix-switch

radix-tooltip

Rolling Text

Scroll Chapters

Skeleton Shimmer

Sliding Chip Button

Stagger Button

Sticky Scroll Cards

Text Cursor Loop

Text Effect

Text Loop

Text Morph

Text Reveal Box

Tilt Card

tilt-slide-transition

Video Player

From the Sora UI readme

Sora UI

Supported by

Architecture

Highlights

Documentation

Local development

MCP Server

Contributing

Code of Conduct

Credits & Attribution

License

What Sora UI builds on

Hooks and utilities

What Sora UI shipped recently

Registries like Sora UI