Sora UI

Installation

Install Sora UI in a Next.js or Vite project using the shadcn CLI — dependencies, Tailwind config, and folder structure in 3 steps.

Note: We use installation process as shadcn/ui.

Initialize shadcn/ui

Run the init command to create a new project with shadcn/ui or setup an existing one. This sets up Tailwind, CSS variables, and the @/ import alias that every Sora UI component (and both install methods below) depends on — it's required either way.

Add components

Two ways to pull components in from here — pick whichever fits your workflow.

sora-cli — skips registering the @soralabs scope, defaults straight to the Sora UI registry:

Or browse components interactively: npx @soralabsoss/sora-cli@latest add

Or, using the shadcn CLI directly — register the @soralabs scope once (Sora UI is listed in the official shadcn registry index):

Then install primitives with the @soralabs scope. Browse the catalog in Primitives or list every item:

npx shadcn@latest list @soralabs

Only if the shadcn CLI errors — for example unknown registry, cannot resolve @soralabs, or fetch timeout — add the scope manually to components.json:

{
  "registries": {
    "@soralabs": "https://ui.soralabs.io.vn/r/{name}.json"
  }
}

Import Components

Import the component to your project.

import { TextEffect } from '@/components/sora-ui/texts/text-effect';

export default function Home() {
  return (
    <TextEffect scrollTrigger preset="fade-in-blur">
      Hello World
    </TextEffect>
  );
}

Project structure

After shadcn init, registering @soralabs, and adding a primitive, your app typically looks like this. Highlighted files are created or updated by the CLI.

page.tsx
text-effect.tsx
utils.ts
components.json

Built by Axyl. A motion-first component registry for React.

Last updated: 7/26/2026