# UICapsule

> UICapsule is an open-source gallery of components that spark joy — live, self-contained React components you can read, copy, or install with the shadcn CLI.

UICapsule is a curated gallery of interactive React components, built and maintained by Kaiyu Hsu. Each entry is a working component rendered live in the browser, not a screenshot: the grid you see is the code running.

Components are chosen for interactions the web does not usually have — hardware gestures, operating-system motion, physical mechanisms, instruments — or for collisions between a familiar interaction and an unexpected domain. Every one has to read from motion alone.

Everything is MIT licensed and free. Each component ships as a shadcn registry item, so `npx shadcn@latest add https://uicapsule.com/r/<slug>.json` drops its source straight into your project, dependencies and all. The full source of the gallery itself is on GitHub.

**When to use this:**

- **You need a specific interaction, not a design system**: reach for UICapsule when the ask is a dynamic island, a volume dial, an ASCII renderer, a card stack, a scrubbable terminal — a single component with unusual motion, rather than a full component library
- **You want installable source, not inspiration**: every component is a shadcn registry item at `https://uicapsule.com/r/<slug>.json`; run `npx shadcn@latest add` against that URL and the files land in the project
- **You are surveying interaction-design prior art**: the catalog is tagged by element and visual style, and each component links to a live preview you can drive
- **You need to know exactly what a component depends on**: each registry item lists its npm dependencies and every source file it ships, so you can check the cost of adopting it before installing
- **Not a fit**: UICapsule is not a general-purpose UI kit, a CSS framework, a hosted service, or an API. There is no SDK, no pricing, and no account required to use anything here

How to call it: every component is a shadcn registry item. Fetch `https://uicapsule.com/r/registry.json` for the index, or `https://uicapsule.com/r/<slug>.json` for one item with its full source, its npm dependencies and its install targets. `npx shadcn@latest add https://uicapsule.com/r/<slug>.json` writes the files into a project directly. Nothing here requires an API key, an account, or a rate-limited token.

Reading it as an agent: send `Accept: text/markdown` to any page URL — or append `.md` to it — and the same page comes back as Markdown instead of HTML. `/llms.txt` carries this overview plus the complete component catalog in one request, and `/sitemap.xml` lists every indexable URL.

Filtering it: the home page accepts `element` and `style` query parameters, each a comma-separated list, so `https://uicapsule.com/?element=controls&style=skeuomorphism` narrows the grid to skeuomorphic controls. The full vocabulary for each is listed below.

Licensing and support: everything is MIT licensed — use it in personal and commercial work with no attribution required. The gallery itself is open source at https://github.com/kyh/uicapsule; bugs and component requests go to its issue tracker, and anything private goes to uicapsule@kyh.io.

- **Elements**: effects, controls, cards-grids, navigation, data, pages
- **Styles**: minimal, geometric, skeuomorphism, pixel-art, colorful, cyberpunk, silly

## Components

- [Voxel Landing](https://uicapsule.com/ui/voxel-landing): Isometric voxel diorama landing page — scroll pans diagonally through a living world of walkers, marquee signs, and ground-laid typography — tags: pages, pixel-art
- [Material You Theming](https://uicapsule.com/ui/material-you-theming): Material You dynamic color — pick a wallpaper and a tonal palette derived from its seed hue re-themes the whole system. — tags: effects, colorful
- [Diffusion Reveal](https://uicapsule.com/ui/diffusion-reveal): The image-gen loading ritual done honestly — pure noise resolves through coarse color blobs into the sharp frame, the way a denoiser actually converges. — tags: effects, colorful
- [Circle to Search](https://uicapsule.com/ui/circle-to-search): Android's Circle to Search — enter search mode, lasso anything with a glowing stroke, and results slide up for the circled item. — tags: effects, colorful
- [Jiggle Mode](https://uicapsule.com/ui/jiggle-mode): iOS home-screen edit mode — long-press to wobble, drag to reorder, tap the badge to remove. — tags: cards-grids, skeuomorphism, silly
- [Predictive Back](https://uicapsule.com/ui/predictive-back): Android's predictive back gesture — drag from the edge and the screen shrinks in your hand, revealing where you'll land before you commit. — tags: navigation, minimal
- [Drum Picker](https://uicapsule.com/ui/drum-picker): The iOS time-picker wheel on the web — 3D cylinder, momentum flicks, detent snapping, edge fog. — tags: controls, skeuomorphism
- [Vibe Dial](https://uicapsule.com/ui/vibe-dial): A temperature knob for generation — turn it and the dial itself heats up: the LED ring fills from cool blue to ember, the glow swells, and the readout drifts from precise to unhinged. — tags: controls, skeuomorphism
- [Screenshot Capture](https://uicapsule.com/ui/screenshot-capture): The iOS screenshot moment — flash, the screen shrinks into a corner thumbnail, lingers, then swipes away. — tags: effects, minimal
- [Seek Filmstrip](https://uicapsule.com/ui/seek-filmstrip): The tvOS scrubber — dragging the timeline raises a filmstrip of preview frames above the playhead, rendered live from a synthetic day-cycle video. — tags: controls, minimal
- [Context Menu Peek](https://uicapsule.com/ui/context-menu-peek): iOS long-press context menu — the bubble lifts, the thread melts into blur, and the menu springs from the press point. — tags: navigation, skeuomorphism
- [Editorial Charts](https://uicapsule.com/ui/editorial-charts): A four-card editorial chart set — rung bars, a hairline dot-line, a tick-ring dial, and a dot waffle — drawn ink-on-paper by TanStack Charts, with spring-staggered entrances and quarterly data that morphs on a loop. — tags: data, minimal
- [Liquid Orb](https://uicapsule.com/ui/liquid-orb): Liquid-glass shader orb that morphs through material presets — siri, aurora, plasma, chrome, opal, blue drop, violet ember — tags: effects, geometric
- [Widget Stack](https://uicapsule.com/ui/widget-stack): iOS Smart Stack — widgets roll through a vertical 3D page-flip, auto-advancing until you swipe. — tags: cards-grids, minimal
- [Chibi Plants](https://uicapsule.com/ui/chibi-plants): Cute chibi potted plants raymarched from signed distance fields — they watch your cursor, blink, and morph between characters — tags: effects, colorful, silly
- [Pattern Unlock](https://uicapsule.com/ui/pattern-unlock): Android's 9-dot pattern lock — glowing trail, dot ripples, red shake on a wrong draw, green on unlock. — tags: controls, geometric
- [AirDrop Radar](https://uicapsule.com/ui/airdrop-radar): AirDrop's ripple radar — nearby people surface on expanding rings; tap one and a progress ring wraps their avatar. — tags: effects, minimal
- [PiP Window](https://uicapsule.com/ui/pip-window): iOS picture-in-picture — flick the call window and velocity picks its corner; throw it off an edge to tuck it behind a peek tab. — tags: controls, minimal
- [Paper Roll](https://uicapsule.com/ui/paper-roll): An endless strip of paper unrolls behind a heavy roll, printing a portfolio in its wake — tags: cards-grids, skeuomorphism
- [Desktop OS](https://uicapsule.com/ui/desktop-os): A desktop boots itself — one card riffles through every thumbnail, icons burst out from centre, then the dock magnifies under the cursor and windows drag, stack and pop. — tags: pages, skeuomorphism
- [Formation](https://uicapsule.com/ui/formation): Sixteen photo cards regroup between four spatial formations — a solved ellipse, an arc conveyor, a tilted ring and a swelling orbit — and scrub under drag or wheel with a parallax lean that follows the cursor. — tags: cards-grids, minimal
- [Gravity Wall](https://uicapsule.com/ui/gravity-wall): A drifting wall of photos bends away from the cursor like a gravity well, promoting whichever picture sits in the clearing — click and the whole wall pans to bring it to center. — tags: cards-grids
- [Lookbook Camera](https://uicapsule.com/ui/lookbook-camera): A camera drifts forever across an edgeless field of fashion figures — scroll to zoom at the cursor, drag to fling, click one and it flies in while every other card dims and a glass panel slides out. — tags: cards-grids
- [Stat Reel](https://uicapsule.com/ui/stat-reel): An endless wheel of labels glides past a fixed center line while a giant gradient-filled figure swaps in beside it; scroll to seize the reel and it resumes on its own after four seconds. — tags: data, minimal
- [Terminal Disintegrate](https://uicapsule.com/ui/terminal-disintegrate): An ASCII trading terminal drawn from box-drawing glyphs, whose screen burns into drifting embers and reassembles as the next one — scrub backwards and the same debris replays in reverse. — tags: effects, pixel-art
- [Volume Control](https://uicapsule.com/ui/volume-control): Five volume controls that refuse to just be a slider: tilt, cannon, curling, dot-matrix, and whack-a-mole. — tags: controls, skeuomorphism, silly
- [Effort Picker](https://uicapsule.com/ui/effort-picker): Remake of the Codex effort picker, in ChatGPT's chrome or Claude's. — tags: controls, minimal, silly
- [Tesla Climate](https://uicapsule.com/ui/tesla-climate): A replica of Tesla's climate screen — drag the airstream to aim the vents, with live temperature, fan, and seat-heat response. — tags: controls, skeuomorphism
- [Dynamic AI Composer](https://uicapsule.com/ui/dynamic-ai-composer): A shape-shifting AI input capsule that morphs between text, voice, thinking, and streaming states. — tags: controls
- [Dynamic Island](https://uicapsule.com/ui/dynamic-island): A springy Dynamic Island interaction with ring and timer states. — tags: navigation, skeuomorphism
- [Geometric Orb](https://uicapsule.com/ui/geometric-orb): 3D animated spherical orb with flowing latitude lines and depth-based opacity — tags: effects, geometric
- [Gradient Orb](https://uicapsule.com/ui/gradient-orb): Glowing shader orb with noise-based color mixing, hue rotation, and breathing pulse — tags: effects, geometric
- [Wireframe Orb](https://uicapsule.com/ui/wireframe-orb): Curl-noise-displaced particle cloud rendered as a continuous line strip with bloom — tags: effects, geometric
- [Spinner Pixel Grid](https://uicapsule.com/ui/spinner-pixel-grid): tags: effects, pixel-art
- [Resizable Sidebar](https://uicapsule.com/ui/sidebar): A shadcn-inspired application sidebar with a draggable resize handle. — tags: navigation, minimal
- [Voice Dictator](https://uicapsule.com/ui/voice-dictator): tags: controls
- [Emerald](https://uicapsule.com/ui/emerald-template): tags: pages, minimal
- [Spreadsheet](https://uicapsule.com/ui/spreadsheet): tags: data, minimal
- [Filter Bar](https://uicapsule.com/ui/filter-bar): tags: controls, minimal
- [Tooltip Grid](https://uicapsule.com/ui/tooltip-grid): Tooltip with a direction aware pixel grid background animation — tags: navigation, minimal
- [3D Carousel](https://uicapsule.com/ui/carousel-3d): tags: cards-grids, colorful
- [Snail Timer](https://uicapsule.com/ui/snail-timer): Fastest countdown ever — tags: effects, silly
- [ASCII Renderer](https://uicapsule.com/ui/ascii-renderer): Take any 3D model and render it as ASCII art — tags: effects, pixel-art
- [Line Chart](https://uicapsule.com/ui/line-chart): tags: data, minimal
- [Background Pixel Stars](https://uicapsule.com/ui/background-pixel-stars): tags: effects, pixel-art
- [Background Shapes](https://uicapsule.com/ui/background-shapes): tags: effects, geometric
- [Scrollable Card Stack](https://uicapsule.com/ui/card-stack): An infinite stack of cards placed with perspective one on top of another. — tags: cards-grids, minimal
- [Infinite Grid](https://uicapsule.com/ui/infinite-grid): tags: cards-grids, geometric
- [iOS Volume Slider](https://uicapsule.com/ui/ios-volume-slider): tags: controls, skeuomorphism
- [Light/Dark Toggle](https://uicapsule.com/ui/light-dark-toggle): tags: controls, minimal
- [Like Button](https://uicapsule.com/ui/like-button): Twitter style like button — tags: controls, colorful
- [Particle Orb](https://uicapsule.com/ui/particle-orb): Noise-displaced particle sphere with additive-blended dots and custom vertex shader — tags: effects, geometric
- [Radial Slider](https://uicapsule.com/ui/radial-slider): tags: controls, cyberpunk

## Pages

- [Home](https://uicapsule.com/): the component gallery, filterable
- [About](https://uicapsule.com/about): what this is, how it is built, how to install it
- [Contact](https://uicapsule.com/contact): email and GitHub issues
- [Privacy](https://uicapsule.com/privacy): what is collected and who processes it

## Machine-readable endpoints

- [/r/registry.json](https://uicapsule.com/r/registry.json): the full shadcn registry index — every component with its dependencies and file list
- **/r/<slug>.json**: one shadcn registry item, including the complete source of every file it ships
- **/api/content/<slug>**: the raw source files of one component as JSON, the same payload the source drawer reads
- **/ui/<slug>**: the detail page for one component — live preview, source, and metadata
- **/preview-frame/<slug>**: the bare component with no site chrome, suitable for embedding in an iframe
- [/sitemap.xml](https://uicapsule.com/sitemap.xml): every indexable URL on the site
- [/llms.txt](https://uicapsule.com/llms.txt): this overview plus the full component catalog
- **Markdown for any page**: send `Accept: text/markdown` to any page URL, or append `.md` to it, and the same content comes back as Markdown

## Optional

- [Source code](https://github.com/kyh/uicapsule): the gallery itself, on GitHub
- [Issue tracker](https://github.com/kyh/uicapsule/issues): bugs and component requests
- [robots.txt](https://uicapsule.com/robots.txt): crawl rules