Getting StartedHomeIntroductionInstalling
All Components01Prompt Card02Bounce sidebar03Proximity Sidebar04Scroll Progress05Code Block06OTP Input07Magnetic Dock08Flickering Grid09YouTube Embed10GitHub Calendar11Light Board12Animated Beam13Option Wheel14Motion Tabs15Music Player16Year in Dots17Text Effects18Dynamic Island

Installation

Add components to your project in one command. Source files land in your codebase with no package lock-in.

Step 1: Set up shadcn

Initialize shadcn in your project. Skip this step if shadcn is already configured.

npx shadcn@latest init

Step 2: Add a component

Select a component from the sidebar and run its install command. The CLI copies the source into components/ui/ and installs peer dependencies automatically.

npx shadcn add amitgajare2/ariseui/<slug>

Package managers

The shadcn CLI supports npm, pnpm, yarn, and bun.

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

All components

Every component in the registry. Use the copy button to grab the install command.

Prompt CardA compact card that toggles between a visual preview and the full prompt, with copy actions and palette swatches.
npx shadcn add amitgajare2/ariseui/prompt-card
Bounce sidebarA vertical navigation list with a bouncy, spring-animated active indicator.
npx shadcn add amitgajare2/ariseui/bounce-sidebar
Proximity SidebarAn interactive sidebar with proximity hover effects that appears while scrolling and responds to scroll intensity.
npx shadcn add amitgajare2/ariseui/proximity-sidebar
Scroll ProgressA scroll progress pill that tracks reading position and expands into a squircle menu of sections you can jump to.
npx shadcn add amitgajare2/ariseui/scroll-progress
Code BlockA clean code block that builds its entire theme from a single accent color. Pass code and a hex, it does the rest.
npx shadcn add amitgajare2/ariseui/code-block
OTP InputA one-time-code input whose characters roll into place behind a caret that slides from slot to slot.
npx shadcn add amitgajare2/ariseui/otp-input
Magnetic DockA dock that responds to cursor movement with a magnetic effect.
npx shadcn add amitgajare2/ariseui/magnetic-dock
Flickering GridA grid that flickers with a subtle animation.
npx shadcn add amitgajare2/ariseui/flickering-grid
YouTube EmbedA responsive YouTube embed with autoplay, looping, customizable controls, and an optional masked presentation.
npx shadcn add amitgajare2/ariseui/youtube-embed
GitHub CalendarA fully customizable GitHub-style contributions heatmap for React.
npx shadcn add amitgajare2/ariseui/github-calendar
Light BoardA scrolling dot-matrix LED board with an optional draw/sketch overlay.
npx shadcn add amitgajare2/ariseui/lightboard
Animated BeamAn animated beam of light that travels along a path between two elements.
npx shadcn add amitgajare2/ariseui/animated-beam
Option WheelA circular selection wheel with smooth physics-based scrolling, blur effects, and optional sound feedback.
npx shadcn add amitgajare2/ariseui/option-wheel
Motion TabsA tabbed story card with staged headings and animated navigation states.
npx shadcn add amitgajare2/ariseui/motion-tabs
Music PlayerA tactile audio player with waveform seeking and playlist controls.
npx shadcn add amitgajare2/ariseui/music-player
Year in DotsA year progress card that maps every day to an animated dot.
npx shadcn add amitgajare2/ariseui/year-in-dots
Text EffectsInteractive text animations driven by cursor proximity: particle scatter and variable-font pressure.
npx shadcn add amitgajare2/ariseui/text-effects
Dynamic IslandA floating search and category filter bar that expands into selectable chips.
npx shadcn add amitgajare2/ariseui/dynamic-island