sh4dcnv2 · atlas
← libraries

@joyco

JOYCO Hub is the internal public registry of the JOYCO studio, hosting three content categories: 24 Components, 15 Toolbox items, and 13 Logs. Notable components include MobileMenu, ScrollArea with gradient overlays, a Chat UI, HLSVideoPlayer, Marquee, Scramble Button, Magnetic, Typewriter, Spritesheet Sequencer, Image Sequence, Infinite List, and Mention. Canvas utilities cover 2D and R3F/Three.js 3D. Built with React and Tailwind; some pieces use framer-motion/motion. Free and open source. Use for: adding studio-grade, interaction-heavy primitives (media playback, canvas, scroll effects) to a shadcn/ui project without reaching for a full component library.

48 components react shadcn-cli

Install this registry

shadcn (npm) npx shadcn@latest add https://registry.joyco.studio/r/registry.json
pnpm pnpm dlx shadcn@latest add https://registry.joyco.studio/r/registry.json
bun bunx shadcn@latest add https://registry.joyco.studio/r/registry.json
fetch registry curl -s https://registry.joyco.studio/r/registry.json

Components

48 total
Infinite List component

A bias-based infinite scroll wrapper and hook.

npx shadcn@latest add https://registry.joyco.studio/r/infinite-list.json
Marquee component

The all in one marquee component with smooth Web Animations API.

npx shadcn@latest add https://registry.joyco.studio/r/marquee.json
File Button component

A button that opens a file input when clicked.

npx shadcn@latest add https://registry.joyco.studio/r/file-button.json
File Dropzone component

A drag-and-drop file upload component with image preview, validation, and error handling.

npx shadcn@latest add https://registry.joyco.studio/r/file-dropzone.json
Mobile Menu component

A full-screen overlay mobile menu.

npx shadcn@latest add https://registry.joyco.studio/r/mobile-menu.json
Scroll Area component

A scrollable area component with customizable top and bottom shadows that appear when content overflows.

npx shadcn@latest add https://registry.joyco.studio/r/scroll-area.json
Chat component

A composable chat component

npx shadcn@latest add https://registry.joyco.studio/r/chat.json
HLS Video Player component

A headless HLS video player with native HLS detection and error handling.

npx shadcn@latest add https://registry.joyco.studio/r/hls-video-player.json
Action Hint component

A particle emitter for showing ephemeral action feedback hints that fade out.

npx shadcn@latest add https://registry.joyco.studio/r/action-hint.json
Image Sequence component

A canvas-based image sequence player with binary progressive loading for smooth playback.

npx shadcn@latest add https://registry.joyco.studio/r/image-sequence.json
Typewriter component

A lightweight typewriter text component that cycles through phrases with minimal JavaScript.

npx shadcn@latest add https://registry.joyco.studio/r/typewriter.json
Spritesheet Sequencer component

A WAAPI-powered spritesheet animator for squared grid-based spritesheets with stepped frame animation.

npx shadcn@latest add https://registry.joyco.studio/r/spritesheet-sequencer.json
Magnetic component

A cursor-attraction wrapper that makes inner content subtly follow the mouse position.

npx shadcn@latest add https://registry.joyco.studio/r/magnetic.json
Scramble component

A GSAP registered effect that decodes text with staggered character-by-character reveal animation.

npx shadcn@latest add https://registry.joyco.studio/r/scramble.json
Scramble Button component

A button that scrambles its text on hover using the scramble GSAP effect.

npx shadcn@latest add https://registry.joyco.studio/r/scramble-button.json
Brick Breaker component

A fully-featured brick breaker game with multiple levels, brick types, and proper collision physics.

npx shadcn@latest add https://registry.joyco.studio/r/brick-breaker.json
Snake Game component

A minimal, themeable snake game component with highscore persistence.

npx shadcn@latest add https://registry.joyco.studio/r/snake-game.json
Space Invaders component

A vertical-scrolling shoot-'em-up with enemy waves, a scaling boss (REBEL CRUSHER), pause, and highscore persistence.

npx shadcn@latest add https://registry.joyco.studio/r/space-invaders.json
Typed Emitter lib

A thin typed wrapper around tiny-emitter that lets subclasses pin an event-map type for fully typed on/emit.

npx shadcn@latest add https://registry.joyco.studio/r/typed-emitter.json
Canvas 2D component

A DPR-aware 2D canvas component and hook that handles sizing, pixel ratio, and context setup automatically.

npx shadcn@latest add https://registry.joyco.studio/r/canvas-2d.json
r3f Canvas component

An enhanced R3F Canvas with built-in debug helpers — orbit/fly controls (mutually exclusive), grid, camera monitor, and performance stats — all toggled via a s…

npx shadcn@latest add https://registry.joyco.studio/r/debug-canvas.json
Debug Hooks component

A tweakpane-powered debug panel with URL-persisted state, draggable UI, and reactive hooks for binding component values.

npx shadcn@latest add https://registry.joyco.studio/r/debug.json
Avatar ui

An image element with a fallback for representing the user.

npx shadcn@latest add https://registry.joyco.studio/r/avatar.json
Badge ui

Displays a badge or a component that looks like a badge.

npx shadcn@latest add https://registry.joyco.studio/r/badge.json
Button ui

Displays a button or a component that looks like a button.

npx shadcn@latest add https://registry.joyco.studio/r/button.json
Button Group ui

Groups multiple buttons or inputs into a single visual unit.

npx shadcn@latest add https://registry.joyco.studio/r/button-group.json
Card ui

Displays a card with header, content, and footer.

npx shadcn@latest add https://registry.joyco.studio/r/card.json
Chart ui

Composable charting components built on top of Recharts.

npx shadcn@latest add https://registry.joyco.studio/r/chart.json
Collapsible ui

An interactive component which expands/collapses a panel.

npx shadcn@latest add https://registry.joyco.studio/r/collapsible.json
Dropdown Menu ui

Displays a menu to the user triggered by a button.

npx shadcn@latest add https://registry.joyco.studio/r/dropdown-menu.json
Input ui

Displays a form input field.

npx shadcn@latest add https://registry.joyco.studio/r/input.json
Input Group ui

Composable input group with addons, buttons, and textarea support.

npx shadcn@latest add https://registry.joyco.studio/r/input-group.json
Kbd ui

Displays a keyboard key or shortcut.

npx shadcn@latest add https://registry.joyco.studio/r/kbd.json
Media Player ui

A composable media player with controls, settings, captions, and PiP support.

npx shadcn@latest add https://registry.joyco.studio/r/media-player.json
Mention ui

An autocomplete mention input component.

npx shadcn@latest add https://registry.joyco.studio/r/mention.json
Popover ui

Displays rich content in a portal triggered by a button.

npx shadcn@latest add https://registry.joyco.studio/r/popover.json
Select ui

Displays a list of options for the user to pick from.

npx shadcn@latest add https://registry.joyco.studio/r/select.json
Separator ui

Visually or semantically separates content.

npx shadcn@latest add https://registry.joyco.studio/r/separator.json
Slider ui

An input where the user selects a value from within a given range.

npx shadcn@latest add https://registry.joyco.studio/r/slider.json
Switch ui

A control that allows the user to toggle between checked and unchecked.

npx shadcn@latest add https://registry.joyco.studio/r/switch.json
Tabs ui

A set of layered sections of content displayed one at a time.

npx shadcn@latest add https://registry.joyco.studio/r/tabs.json
Textarea ui

Displays a form textarea field.

npx shadcn@latest add https://registry.joyco.studio/r/textarea.json
Tooltip ui

A popup that displays information related to an element on hover.

npx shadcn@latest add https://registry.joyco.studio/r/tooltip.json
Cluster ui

A flex container with the design system gap and an optional filler for space distribution.

npx shadcn@latest add https://registry.joyco.studio/r/cluster.json
JOYCO Theme theme

JOYCO brand theme with light and dark mode color tokens.

npx shadcn@latest add https://registry.joyco.studio/r/joyco-theme.json
JOYCO Fonts lib

JOYCO brand font configuration with Public Sans and Roboto Mono.

npx shadcn@latest add https://registry.joyco.studio/r/joyco-fonts.json
Utils lib

The cn class-merge helper used by every JOYCO UI component.

npx shadcn@latest add https://registry.joyco.studio/r/utils.json
JOYCO UI style

The full JOYCO UI kit — all components and brand theming.

npx shadcn@latest add https://registry.joyco.studio/r/ui.json