---
name: "@uicapsule"
slug: "uicapsule"
description: "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."
category: "Personal/portfolio registry"
tags: ["3d", "aesthetic", "ai", "audio", "backgrounds", "blocks", "buttons", "cards", "charts", "dashboard", "forms", "loaders", "maps", "marketing", "media", "mobile", "navigation", "overlays", "retro", "tables"]
framework: "react"
license: "MIT"
author: "kyh"
website: "https://uicapsule.com"
github: "https://github.com/kyh/uicapsule"
registry: "https://uicapsule.com/r/registry.json"
pro: false
pro_url: null
github_stars: 19
component_count: 36
generated_at: "2026-07-28T08:00:50.948Z"
---

# @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.

## Links

- Website: https://uicapsule.com
- GitHub: https://github.com/kyh/uicapsule
- Registry JSON: https://uicapsule.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/uicapsule
- This file: https://sh4dcn.vercel.app/md/uicapsule.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://uicapsule.com/r/registry.json
pnpm dlx shadcn@latest add https://uicapsule.com/r/registry.json
bunx shadcn@latest add https://uicapsule.com/r/registry.json
# clone the source repo
git clone https://github.com/kyh/uicapsule.git
# fetch the raw registry index
curl -s https://uicapsule.com/r/registry.json
```

## Components (36)

| name | type | description | install |
| --- | --- | --- | --- |
| ascii-renderer | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/ascii-renderer.json` |
| background-pixel-stars | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/background-pixel-stars.json` |
| background-shapes | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/background-shapes.json` |
| card-stack | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/card-stack.json` |
| carousel-3d | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/carousel-3d.json` |
| desktop-os | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/desktop-os.json` |
| dynamic-ai-composer | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/dynamic-ai-composer.json` |
| dynamic-island | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/dynamic-island.json` |
| effort-picker | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/effort-picker.json` |
| emerald-template | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/emerald-template.json` |
| expanding-header-menu | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/expanding-header-menu.json` |
| feed | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/feed.json` |
| filter-bar | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/filter-bar.json` |
| formation | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/formation.json` |
| geometric-orb | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/geometric-orb.json` |
| gradient-orb | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/gradient-orb.json` |
| gravity-wall | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/gravity-wall.json` |
| infinite-grid | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/infinite-grid.json` |
| ios-volume-slider | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/ios-volume-slider.json` |
| light-dark-toggle | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/light-dark-toggle.json` |
| like-button | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/like-button.json` |
| lookbook-camera | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/lookbook-camera.json` |
| paper-roll | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/paper-roll.json` |
| particle-orb | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/particle-orb.json` |
| radial-slider | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/radial-slider.json` |
| sidebar | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/sidebar.json` |
| snail-timer | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/snail-timer.json` |
| spinner-pixel-grid | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/spinner-pixel-grid.json` |
| spreadsheet | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/spreadsheet.json` |
| stat-reel | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/stat-reel.json` |
| terminal-disintegrate | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/terminal-disintegrate.json` |
| tesla-climate | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/tesla-climate.json` |
| tooltip-grid | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/tooltip-grid.json` |
| voice-dictator | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/voice-dictator.json` |
| volume-control | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/volume-control.json` |
| wireframe-orb | registry:block | — | `npx shadcn@latest add https://uicapsule.com/r/wireframe-orb.json` |

## For AI agents

```text
You are adding components from @uicapsule to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/uicapsule.md) for the component list.
2. Fetch the machine-readable index: https://uicapsule.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: uicapsule).
```