Sora UI
Getting Started

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.

  1. 01

    Pick a component

    Browse the collection and open the one you need.

  2. 02

    Copy the source

    Grab the code, or run the CLI to drop it in automatically.

  3. 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:

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.

Ready to dive in?

Start with the skeuomorphic music player — our flagship component.

Music Player