UICapsule — A curated collection of components that spark joy
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 use it
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.
Machine-readable endpoints
- /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 — every indexable URL on the site
- /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
Browse by element
Browse by style
All 53 components
- 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 — 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 — 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 — 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 — iOS home-screen edit mode — long-press to wobble, drag to reorder, tap the badge to remove. Tags: cards-grids, skeuomorphism, silly.
- 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 — The iOS time-picker wheel on the web — 3D cylinder, momentum flicks, detent snapping, edge fog. Tags: controls, skeuomorphism.
- 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 — The iOS screenshot moment — flash, the screen shrinks into a corner thumbnail, lingers, then swipes away. Tags: effects, minimal.
- 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 — 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 — 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 — Liquid-glass shader orb that morphs through material presets — siri, aurora, plasma, chrome, opal, blue drop, violet ember Tags: effects, geometric.
- Widget Stack — iOS Smart Stack — widgets roll through a vertical 3D page-flip, auto-advancing until you swipe. Tags: cards-grids, minimal.
- 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 — Android's 9-dot pattern lock — glowing trail, dot ripples, red shake on a wrong draw, green on unlock. Tags: controls, geometric.
- 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 — 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 — An endless strip of paper unrolls behind a heavy roll, printing a portfolio in its wake Tags: cards-grids, skeuomorphism.
- 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 — 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 — 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 — 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 — 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 — 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 — 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 — Remake of the Codex effort picker, in ChatGPT's chrome or Claude's. Tags: controls, minimal, silly.
- 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 — A shape-shifting AI input capsule that morphs between text, voice, thinking, and streaming states. Tags: controls.
- Dynamic Island — A springy Dynamic Island interaction with ring and timer states. Tags: navigation, skeuomorphism.
- Geometric Orb — 3D animated spherical orb with flowing latitude lines and depth-based opacity Tags: effects, geometric.
- Gradient Orb — Glowing shader orb with noise-based color mixing, hue rotation, and breathing pulse Tags: effects, geometric.
- Wireframe Orb — Curl-noise-displaced particle cloud rendered as a continuous line strip with bloom Tags: effects, geometric.
- Spinner Pixel Grid Tags: effects, pixel-art.
- Resizable Sidebar — A shadcn-inspired application sidebar with a draggable resize handle. Tags: navigation, minimal.
- Voice Dictator Tags: controls.
- Emerald Tags: pages, minimal.
- Spreadsheet Tags: data, minimal.
- Filter Bar Tags: controls, minimal.
- Tooltip Grid — Tooltip with a direction aware pixel grid background animation Tags: navigation, minimal.
- 3D Carousel Tags: cards-grids, colorful.
- Snail Timer — Fastest countdown ever Tags: effects, silly.
- ASCII Renderer — Take any 3D model and render it as ASCII art Tags: effects, pixel-art.
- Line Chart Tags: data, minimal.
- Background Pixel Stars Tags: effects, pixel-art.
- Background Shapes Tags: effects, geometric.
- Scrollable Card Stack — An infinite stack of cards placed with perspective one on top of another. Tags: cards-grids, minimal.
- Infinite Grid Tags: cards-grids, geometric.
- iOS Volume Slider Tags: controls, skeuomorphism.
- Light/Dark Toggle Tags: controls, minimal.
- Like Button — Twitter style like button Tags: controls, colorful.
- Particle Orb — Noise-displaced particle sphere with additive-blended dots and custom vertex shader Tags: effects, geometric.
- Radial Slider Tags: controls, cyberpunk.
More about UICapsule
- About — what this is and how to install a component
- Contact — email and GitHub issues
- Privacy — what is collected and who processes it