Build interfaces with texture
Sora UI is a collection of beautiful, highly-interactive, and custom animated components for React — built with Tailwind CSS, Framer Motion, and Three.js. Copy them in, own them forever.
Copy, don't install
No npm package, no version lock-in. The source lands directly in your project and belongs to you.
100% yours to restyle
Tweak colors, rewrite animations, change the logic. Every line is editable Tailwind + React.
Genuinely interactive
Skeuomorphic players, voice visualizers, and 3D scenes — built with Framer Motion and Three.js.
Dark-mode native
Designed against a Linear-inspired dark aesthetic first, with clean light-mode support.
How it works
Sora UI is a copy-paste component collection — not a dependency. That means total design ownership, with nothing hidden inside a black-box package.
- 01
Pick a component
Browse the collection and open the one you need.
- 02
Copy the source
Grab the code, or run the CLI to drop it in automatically.
- 03
Make it yours
Restyle, extend, and ship it as part of your own codebase.
One-time setup
Components share a small cn() helper for merging Tailwind classes. Add it once at lib/utils.ts:
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Browse the collection
7 components and counting — each with a live preview, source, and props reference.
Skeuomorphic Music Player
A skeuomorphic CD player featuring an animated rotating vinyl/CD, custom audio seeking, animated sound waves, and a morphing fullscreen track-transition animation.
Dark Pill Music Player
A premium pill-shaped music player featuring vertical scroll-snapping track selection, scroll-snapping volume, and a rolling album disc.
Bar Visualizer
A real-time audio frequency visualizer with state-based animations for voice agents and audio interfaces.
Date Selector
A premium interactive date selector card featuring a sliding pointer, weekday headings, and height-expanding day capsules.
Dust Particle Sphere 3D
A neomorphic glassmorphic display card rendering an interactive, voice-reactive Three.js 3D scattered point cloud sphere.
Transcript Viewer
A component for displaying an audio transcript with word-by-word highlighting synced to audio playback.
Case Study Carousel
A 3D stacked case study carousel featuring interactive depth cards, squircle graphics, impact metrics, and glowing pill pagination.
Ready to dive in?
Start with the skeuomorphic music player — our flagship component.