@uicapsule

A curated personal collection of interactive React UI experiments and design concepts by Kaiyu Hsu, spanning ~25 components. Includes ASCII Renderer, Particle Orb, Geometric Orb, Gradient Orb, Wireframe Orb, Card Stack, Carousel 3D, Dynamic Island, Expanding Header Menu, Infinite Grid, iOS Volume Slider, Light/Dark Toggle, Like Button, Line Chart, Radial Slider, Sidebar, Snail Timer, Spinner Pixel Grid, Spreadsheet, Tooltip Grid, Voice Dictator, and Emerald Template. Built with React, Next.js, and Tailwind CSS. Organized by Styles, Elements, and Categories. Free and open source. Use for: sourcing unconventional, design-experiment-quality interactive widgets — particularly orb/particle effects, creative nav patterns, and novel input controls — for portfolios or products that want distinctive UI moments.

27 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://uicapsule.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://uicapsule.com/r/registry.json

bun bunx shadcn@latest add https://uicapsule.com/r/registry.json

fetch registry curl -s https://uicapsule.com/r/registry.json

Components

27 total

ascii-renderer block

npx shadcn@latest add https://uicapsule.com/r/ascii-renderer.json

background-pixel-stars block

npx shadcn@latest add https://uicapsule.com/r/background-pixel-stars.json

background-shapes block

npx shadcn@latest add https://uicapsule.com/r/background-shapes.json

card-stack block

npx shadcn@latest add https://uicapsule.com/r/card-stack.json

carousel-3d block

npx shadcn@latest add https://uicapsule.com/r/carousel-3d.json

dynamic-ai-composer block

npx shadcn@latest add https://uicapsule.com/r/dynamic-ai-composer.json

dynamic-island block

npx shadcn@latest add https://uicapsule.com/r/dynamic-island.json

emerald-template block

npx shadcn@latest add https://uicapsule.com/r/emerald-template.json

expanding-header-menu block

npx shadcn@latest add https://uicapsule.com/r/expanding-header-menu.json

feed block

npx shadcn@latest add https://uicapsule.com/r/feed.json

filter-bar block

npx shadcn@latest add https://uicapsule.com/r/filter-bar.json

geometric-orb block

npx shadcn@latest add https://uicapsule.com/r/geometric-orb.json

gradient-orb block

npx shadcn@latest add https://uicapsule.com/r/gradient-orb.json

infinite-grid block

npx shadcn@latest add https://uicapsule.com/r/infinite-grid.json

ios-volume-slider block

npx shadcn@latest add https://uicapsule.com/r/ios-volume-slider.json

light-dark-toggle block

npx shadcn@latest add https://uicapsule.com/r/light-dark-toggle.json

like-button block

npx shadcn@latest add https://uicapsule.com/r/like-button.json

particle-orb block

npx shadcn@latest add https://uicapsule.com/r/particle-orb.json

radial-slider block

npx shadcn@latest add https://uicapsule.com/r/radial-slider.json

sidebar block

npx shadcn@latest add https://uicapsule.com/r/sidebar.json

snail-timer block

npx shadcn@latest add https://uicapsule.com/r/snail-timer.json

spinner-pixel-grid block

npx shadcn@latest add https://uicapsule.com/r/spinner-pixel-grid.json

spreadsheet block

npx shadcn@latest add https://uicapsule.com/r/spreadsheet.json

tesla-climate block

npx shadcn@latest add https://uicapsule.com/r/tesla-climate.json

tooltip-grid block

npx shadcn@latest add https://uicapsule.com/r/tooltip-grid.json

voice-dictator block

npx shadcn@latest add https://uicapsule.com/r/voice-dictator.json

wireframe-orb block

npx shadcn@latest add https://uicapsule.com/r/wireframe-orb.json