Animated shadcn Components for Next.js

Arise UI is a shadcn/ui component registry for React and Next.js that adds animated navigation, form, content, and visual effects as editable Tailwind CSS and TypeScript files.

The current registry provides 12 UI components, from scroll-aware sidebars and OTP input to a themed code block, GitHub contribution heatmap, dot-matrix light board, and animated beam.

Official Website

Browse All Components

Features

Installs component source into components/ui/ through the shadcn CLI.
Uses Motion for spring and physics-based animation.
Respects prefers-reduced-motion across components.
Offers controlled and uncontrolled APIs where the component design calls for it.
Styled entirely with Tailwind CSS, with no runtime CSS-in-JS.
Exports TypeScript prop types alongside each component.
Installs through npm, pnpm, yarn, or bun via the shadcn CLI.

Available Components

Category	Component	Declared Packages
Navigation	Bounce Sidebar	`motion`
Overlay	Family Drawer	`motion`, `vaul`
Navigation	Proximity Sidebar	`motion`
Reading UI	Scroll Progress	`motion`
Developer UI	Code Block	`motion`, `prism-react-renderer`, `lucide-react`
Form Input	OTP Input	`motion`
Navigation	Magnetic Dock	`motion`
Background	Flickering Grid	`motion`
Media	YouTube Embed	None
Data Display	GitHub Calendar	None
Creative UI	Light Board	None
Diagram	Animated Beam	`framer-motion`

How To Use It

Initialize shadcn/ui

Run the initializer once when the project does not already have components.json.

npx shadcn@latest init

Install a Component

Choose a registry slug and run the matching command.

npx shadcn add amitgajare2/ariseui/scroll-progress

The same registry path works with pnpm, Yarn, and Bun.

pnpm dlx shadcn add amitgajare2/ariseui/scroll-progress
yarn dlx shadcn add amitgajare2/ariseui/scroll-progress
bunx --bun shadcn add amitgajare2/ariseui/scroll-progress

Basic Usage

The installed Scroll Progress file already declares "use client". A Next.js App Router page can pass a serializable section list from a Server Component. Every item in sections needs an id that matches an element on the page.

import ScrollProgress from "@/components/ui/scroll-progress"
const sections = [
  { id: "overview", label: "Overview" },
  { id: "installation", label: "Installation" },
  { id: "customization", label: "Customization" },
]
export default function ComponentGuidePage() {
  return (
    <>
      <ScrollProgress sections={sections} />
      <main className="mx-auto max-w-3xl space-y-20 px-6 py-24">
        <section id="overview" className="scroll-mt-24">
          <h1 className="text-4xl font-semibold">Component Guide</h1>
          <p className="mt-4 text-muted-foreground">
            Review the component behavior and project requirements.
          </p>
        </section>
        <section id="installation" className="scroll-mt-24">
          <h2 className="text-2xl font-semibold">Installation</h2>
          <p className="mt-4 text-muted-foreground">
            Add the registry item and its declared dependencies.
          </p>
        </section>
        <section id="customization" className="scroll-mt-24">
          <h2 className="text-2xl font-semibold">Customization</h2>
          <p className="mt-4 text-muted-foreground">
            Edit the local TSX file and Tailwind CSS classes.
          </p>
        </section>
      </main>
    </>
  )
}