unles…" }, { "name": "form", "type": "registry:ui", "title": "Form", "description": "react-hook-form bound to Field’s ARIA wiring. label and description are PROPS, not children, because aria-describedby is assembled before children render , a d…" }, { "name": "motion", "type": "registry:ui", "title": "Motion", "description": "Page transitions and capped list staggers on framer-motion, which was already a required peer for VelobitsProvider’s MotionConfig and until now bought nothing …" }, { "name": "pagination", "type": "registry:ui", "title": "Pagination", "description": "Numbers are links, previous/next are buttons: an cannot express \"unavailable\" without ceasing to be focusable. Unavailability is aria-disabled plus a guard…" }, { "name": "segmented-control", "type": "registry:ui", "title": "SegmentedControl", "description": "Radix ToggleGroup with a REAL disabled and a working accessible name , a div root makes an external htmlFor dangle, and pointer-events-none leaves the control …" }, { "name": "status-chip", "type": "registry:ui", "title": "StatusChip", "description": "On/off/partial/pending/archived as one chip. Every status ships a DISTINCT glyph, because colour alone fails 1.4.1 and on-versus-off is the distinction a contr…" }, { "name": "table", "type": "registry:ui", "title": "Table", "description": "Rows are never glass , one backdrop-filter per row repaints its own backdrop region on every scroll. Surface treatment belongs on the container." }, { "name": "tabs", "type": "registry:ui", "title": "Tabs", "description": null } ], "component_count": 48, "components_truncated": false, "component_types": { "registry:style": 1, "registry:theme": 1, "registry:lib": 2, "registry:hook": 3, "registry:ui": 41 }, "logo": "", "preview_image": null, "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [], "featured": false }, { "number": 349, "name": "@vue-bits", "category": "Animated components", "tags": [ "animation", "backgrounds", "cards", "dashboard", "forms", "glassmorphism", "icons", "media", "navigation", "pro-available", "retro" ], "tagline": "An open source collection of high quality, animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces.", "short_description": "", "description": "An open source collection of high quality, animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces.", "framework": "vue", "homepage": "https://vue-bits.dev", "docs": null, "github": null, "components_github": null, "github_default_branch": null, "github_stars": null, "last_commit": null, "archived": false, "license": null, "open_issues": null, "registry_template": "https://vue-bits.dev/r/{name}.json", "registry_index": "https://vue-bits.dev/r/registry.json", "components": [ "AccordionGallery", "AcidSquares", "AnimatedContent", "AnimatedList", "Antigravity", "ASCIIText", "Aurora", "Balatro", "Ballpit", "Beams", "BlobCursor", "BlurText", "BorderGlow", "BounceCards", "BubbleMenu", "CardNav", "CardSwap", "Carousel", "ChromaGrid", "CircularGallery", "CircularText", "ClickSpark", "ColorBends", "Counter", "CountUp", "Crosshair", "CRTWarp", "Cubes", "CursorGrid", "CurvedInput", "CurvedLoop", "DarkVeil", "DecayCard", "DecryptedText", "DepthCarousel", "DepthText", "Dither", "Dock", "DomeGallery", "DotField", "DotGrid", "DriftWall", "EchoText", "ElasticMesh", "ElasticSlider", "ElectricBorder", "EvilEye", "FadeContent", "FallingText", "FaultyTerminal", "Ferrofluid", "FloatingLines", "FlowingMenu", "FlyingPosters", "Folder", "FoldText", "FuzzyText", "Galaxy", "GhostCursor", "GlareHover", "GlassIcons", "GlassSurface", "GlitchText", "GlowCursor", "GooeyNav", "GradientBlinds", "GradientText", "GradientWaves", "GradualBlur", "Grainient", "GridDistortion", "GridMotion", "GridScan", "HalftoneReveal", "Hyperspeed", "ImageTrail", "InfiniteMenu", "Iridescence", "LaserFlow", "LetterGlitch", "Lightfall", "Lightning", "LightPillar", "LightRays", "LightTunnel", "LineSidebar", "LineWaves", "LiquidChrome", "LiquidEther", "LogoLoop", "MagicBento", "MagicRings", "Magnet", "MagnetLines", "MaskedHeading", "Masonry", "MetaBalls", "MetallicPaint", "ModelViewer", "MoltenMetal", "MorphSlider", "Noise", "OptionWheel", "Orb", "OrbitImages", "Particles", "ParticleText", "PillNav", "PixelBlast", "PixelCard", "PixelTrail", "PixelTransition", "Plasma", "PlasmaWave", "Prism", "PrismaticBurst", "ProfileCard", "Radar", "ReflectiveCard", "Ribbons", "RippleDistortion", "RippleGrid", "RotatingText", "ScrambleText", "ScrollExpand", "ScrollFloat", "ScrollReveal", "ScrollStack", "ScrollVelocity", "ShapeBlur", "ShapeGrid", "ShinyText", "Shuffle", "SideRays", "SpecularButton", "SplashCursor", "SplitFlapText", "SplitText", "SpotlightCard", "Stack", "StaggeredMenu", "StarBorder", "Stepper", "StickerPeel", "Strands", "StrokeText", "SwarmCursor", "TargetCursor", "TextCursor", "TextLoop", "TextPressure", "TextType", "TiltedCard", "Topography", "TrueFocus", "VariableProximity", "WarpText", "WebThreads" ], "component_items": [ { "name": "AccordionGallery", "type": "registry:component", "title": "AccordionGallery", "description": "Panels expand on hover or focus, revealing parallax imagery and captions." }, { "name": "AcidSquares", "type": "registry:component", "title": "AcidSquares", "description": "A crystalline corridor of stacked squares receding into depth." }, { "name": "AnimatedContent", "type": "registry:component", "title": "AnimatedContent", "description": "Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options." }, { "name": "AnimatedList", "type": "registry:component", "title": "AnimatedList", "description": "List items enter with staggered motion variants for polished reveals." }, { "name": "Antigravity", "type": "registry:component", "title": "Antigravity", "description": "3D antigravity particle field that repels from the cursor with smooth motion." }, { "name": "ASCIIText", "type": "registry:component", "title": "ASCIIText", "description": "Renders text with an animated ASCII background for a retro feel." }, { "name": "Aurora", "type": "registry:component", "title": "Aurora", "description": "Flowing aurora gradient background." }, { "name": "Balatro", "type": "registry:component", "title": "Balatro", "description": "The balatro shader, fully customizalbe and interactive." }, { "name": "Ballpit", "type": "registry:component", "title": "Ballpit", "description": "Physics ball pit simulation with bouncing colorful spheres." }, { "name": "Beams", "type": "registry:component", "title": "Beams", "description": "Crossing animated ribbons with customizable properties." }, { "name": "BlobCursor", "type": "registry:component", "title": "BlobCursor", "description": "Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing." }, { "name": "BlurText", "type": "registry:component", "title": "BlurText", "description": "Text starts blurred then crisply resolves for a soft-focus reveal effect." }, { "name": "BorderGlow", "type": "registry:component", "title": "BorderGlow", "description": "Glowing mesh-gradient border that follows cursor direction and intensifies near edges." }, { "name": "BounceCards", "type": "registry:component", "title": "BounceCards", "description": "Cards bounce that bounce in on mount." }, { "name": "BubbleMenu", "type": "registry:component", "title": "BubbleMenu", "description": "Floating circular expanding menu with staggered item reveal." }, { "name": "CardNav", "type": "registry:component", "title": "CardNav", "description": "Expandable navigation bar with card panels revealing nested links." }, { "name": "CardSwap", "type": "registry:component", "title": "CardSwap", "description": "Cards animate position swapping with smooth layout transitions." }, { "name": "Carousel", "type": "registry:component", "title": "Carousel", "description": "Responsive carousel with touch gestures, looping and transitions." }, { "name": "ChromaGrid", "type": "registry:component", "title": "ChromaGrid", "description": "A responsive grid of grayscale tiles. Hovering the grid reaveals their colors." }, { "name": "CircularGallery", "type": "registry:component", "title": "CircularGallery", "description": "Circular orbit gallery rotating images." }, { "name": "CircularText", "type": "registry:component", "title": "CircularText", "description": "Layouts characters around a circle with optional rotation animation." }, { "name": "ClickSpark", "type": "registry:component", "title": "ClickSpark", "description": "Creates particle spark bursts at click position." }, { "name": "ColorBends", "type": "registry:component", "title": "ColorBends", "description": "Vibrant color bends with smooth flowing animation." }, { "name": "Counter", "type": "registry:component", "title": "Counter", "description": "Flexible animated counter supporting increments + easing." }, { "name": "CountUp", "type": "registry:component", "title": "CountUp", "description": "Animated number counter supporting formatting and decimals." }, { "name": "Crosshair", "type": "registry:component", "title": "Crosshair", "description": "Custom crosshair cursor with tracking, and link hover effects." }, { "name": "CRTWarp", "type": "registry:component", "title": "CRTWarp", "description": "Full-canvas CRT plasma with curved distortion, scanlines, bloom and pointer interaction." }, { "name": "Cubes", "type": "registry:component", "title": "Cubes", "description": "3D rotating cube cluster. Supports auto-rotation or hover interaction." }, { "name": "CursorGrid", "type": "registry:component", "title": "CursorGrid", "description": "Canvas grid whose cells light up around the cursor with configurable radius, falloff and click pulses." }, { "name": "CurvedInput", "type": "registry:component", "title": "CurvedInput", "description": "Arc-bent input bar with text, caret and submit button all following the curve." }, { "name": "CurvedLoop", "type": "registry:component", "title": "CurvedLoop", "description": "Flowing looping text path along a customizable curve with drag interaction." }, { "name": "DarkVeil", "type": "registry:component", "title": "DarkVeil", "description": "Subtle dark background with a smooth animation and postprocessing." }, { "name": "DecayCard", "type": "registry:component", "title": "DecayCard", "description": "Hover parallax effect that disintegrates the content of a card." }, { "name": "DecryptedText", "type": "registry:component", "title": "DecryptedText", "description": "Hacker-style decryption cycling random glyphs until resolving to real text." }, { "name": "DepthCarousel", "type": "registry:component", "title": "DepthCarousel", "description": "Cards recede into depth on a 3D rail, with drag, keyboard and auto-advance." }, { "name": "DepthText", "type": "registry:component", "title": "DepthText", "description": "Layered extruded type with parallax that shifts against the pointer." }, { "name": "Dither", "type": "registry:component", "title": "Dither", "description": "Retro dithered noise shader background." }, { "name": "Dock", "type": "registry:component", "title": "Dock", "description": "macOS style magnifying dock with proximity scaling of icons." }, { "name": "DomeGallery", "type": "registry:component", "title": "DomeGallery", "description": "Immersive 3D dome gallery projecting images on a hemispheric surface." }, { "name": "DotField", "type": "registry:component", "title": "DotField", "description": "Interactive dot grid with cursor bulge, glow, sparkle, and wave effects." }, { "name": "DotGrid", "type": "registry:component", "title": "DotGrid", "description": "Animated dot grid with cursor interactions." }, { "name": "DriftWall", "type": "registry:component", "title": "DriftWall", "description": "An endless perspective wall of tiles drifting past, lifting on hover." }, { "name": "EchoText", "type": "registry:component", "title": "EchoText", "description": "Ghosted copies trail behind the text and settle into a single word." }, { "name": "ElasticMesh", "type": "registry:component", "title": "ElasticMesh", "description": "Spring-mesh surface that stretches under the pointer and settles back with damped physics." }, { "name": "ElasticSlider", "type": "registry:component", "title": "ElasticSlider", "description": "Slider handle stretches elastically then snaps with spring physics." }, { "name": "ElectricBorder", "type": "registry:component", "title": "ElectricBorder", "description": "Jittery electric energy border with animated arcs, glow and adjustable intensity." }, { "name": "EvilEye", "type": "registry:component", "title": "EvilEye", "description": "Procedural evil eye shader with animated iris, slit pupil, and fiery outer glow." }, { "name": "FadeContent", "type": "registry:component", "title": "FadeContent", "description": "Simple directional fade / slide entrance / exit wrapper with threshold-based activation." }, { "name": "FallingText", "type": "registry:component", "title": "FallingText", "description": "Characters fall with gravity + bounce creating a playful entrance." }, { "name": "FaultyTerminal", "type": "registry:component", "title": "FaultyTerminal", "description": "Terminal CRT scanline squares effect with flicker + noise." }, { "name": "Ferrofluid", "type": "registry:component", "title": "Ferrofluid", "description": "A churning magnetic fluid traced by glowing contour lines, with a cursor magnet." }, { "name": "FloatingLines", "type": "registry:component", "title": "FloatingLines", "description": "3D floating lines that react to cursor movement." }, { "name": "FlowingMenu", "type": "registry:component", "title": "FlowingMenu", "description": "Liquid flowing active indicator glides between menu items." }, { "name": "FlyingPosters", "type": "registry:component", "title": "FlyingPosters", "description": "3D posters rotate on scroll infinitely." }, { "name": "Folder", "type": "registry:component", "title": "Folder", "description": "Interactive folder opens to reveal nested content smooth motion." }, { "name": "FoldText", "type": "registry:component", "title": "FoldText", "description": "Lines unfold into place like creased paper opening flat." }, { "name": "FuzzyText", "type": "registry:component", "title": "FuzzyText", "description": "Vibrating fuzzy text with controllable hover intensity." }, { "name": "Galaxy", "type": "registry:component", "title": "Galaxy", "description": "Parallax realistic starfield with pointer interactions." }, { "name": "GhostCursor", "type": "registry:component", "title": "GhostCursor", "description": "Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect." }, { "name": "GlareHover", "type": "registry:component", "title": "GlareHover", "description": "Adds a realistic moving glare highlight on hover over any element." }, { "name": "GlassIcons", "type": "registry:component", "title": "GlassIcons", "description": "Icon set styled with frosted glass blur." }, { "name": "GlassSurface", "type": "registry:component", "title": "GlassSurface", "description": "Advanced Apple-style glass surface with real-time distortion + lighting." }, { "name": "GlitchText", "type": "registry:component", "title": "GlitchText", "description": "RGB split and distortion glitch effect with jitter effects." }, { "name": "GlowCursor", "type": "registry:component", "title": "GlowCursor", "description": "Shader-powered light trail that smoothly follows the pointer with customizable glow, color, taper and pulse." }, { "name": "GooeyNav", "type": "registry:component", "title": "GooeyNav", "description": "Navigation indicator morphs with gooey blob transitions between items." }, { "name": "GradientBlinds", "type": "registry:component", "title": "GradientBlinds", "description": "Layered gradient blinds with spotlight and noise distortion." }, { "name": "GradientText", "type": "registry:component", "title": "GradientText", "description": "Animated gradient sweep across live text with speed and color control." }, { "name": "GradientWaves", "type": "registry:component", "title": "GradientWaves", "description": "Raymarched sine waves rolling toward a soft, hazy horizon." }, { "name": "GradualBlur", "type": "registry:component", "title": "GradualBlur", "description": "Progressively un-blurs content based on scroll or trigger creating a cinematic reveal." }, { "name": "Grainient", "type": "registry:component", "title": "Grainient", "description": "Grainy gradient swirls with soft wave distortion." }, { "name": "GridDistortion", "type": "registry:component", "title": "GridDistortion", "description": "Warped grid mesh distorts smoothly reacting to cursor." }, { "name": "GridMotion", "type": "registry:component", "title": "GridMotion", "description": "Perspective moving grid lines based on cusror position." }, { "name": "GridScan", "type": "registry:component", "title": "GridScan", "description": "Animated grid room 3D scan effect and cool interactions." }, { "name": "HalftoneReveal", "type": "registry:component", "title": "HalftoneReveal", "description": "Print-style halftone dot matrix that resolves into sharp content around the cursor." }, { "name": "Hyperspeed", "type": "registry:component", "title": "Hyperspeed", "description": "Animated lines continuously moving to simulate hyperspace travel on click hold." }, { "name": "ImageTrail", "type": "registry:component", "title": "ImageTrail", "description": "Cursor-based image trail with several built-in variants." }, { "name": "InfiniteMenu", "type": "registry:component", "title": "InfiniteMenu", "description": "Horizontally looping menu effect that scrolls endlessly with seamless wrap." }, { "name": "Iridescence", "type": "registry:component", "title": "Iridescence", "description": "Slick iridescent shader with shifting waves." }, { "name": "LaserFlow", "type": "registry:component", "title": "LaserFlow", "description": "Dynamic laser light that flows onto a surface, customizable effect." }, { "name": "LetterGlitch", "type": "registry:component", "title": "LetterGlitch", "description": "Matrix style letter animation." }, { "name": "Lightfall", "type": "registry:component", "title": "Lightfall", "description": "Colorful light streaks raining down a glowing tunnel with a cursor light." }, { "name": "Lightning", "type": "registry:component", "title": "Lightning", "description": "Procedural lightning bolts with branching and glow flicker." }, { "name": "LightPillar", "type": "registry:component", "title": "LightPillar", "description": "Vertical pillar of light with glow effects." }, { "name": "LightRays", "type": "registry:component", "title": "LightRays", "description": "Volumetric light rays/beams with customizable direction." }, { "name": "LightTunnel", "type": "registry:component", "title": "LightTunnel", "description": "A radial fibre-optic tunnel with light pulses racing into depth." }, { "name": "LineSidebar", "type": "registry:component", "title": "LineSidebar", "description": "Static list navigation with a cursor-proximity effect that shifts and highlights nearby items." }, { "name": "LineWaves", "type": "registry:component", "title": "LineWaves", "description": "Animated line wave pattern with colorful warped distortion." }, { "name": "LiquidChrome", "type": "registry:component", "title": "LiquidChrome", "description": "Liquid metallic chrome shader with flowing reflective surface." }, { "name": "LiquidEther", "type": "registry:component", "title": "LiquidEther", "description": "Interactive liquid shader with flowing distortion and customizable colors." }, { "name": "LogoLoop", "type": "registry:component", "title": "LogoLoop", "description": "Continuously looping marquee of brand or tech logos with seamless repeat and hover pause." }, { "name": "MagicBento", "type": "registry:component", "title": "MagicBento", "description": "Interactive bento grid tiles expand + animate with various options." }, { "name": "MagicRings", "type": "registry:component", "title": "MagicRings", "description": "Interactive magic rings effect with customizable parameters." }, { "name": "Magnet", "type": "registry:component", "title": "Magnet", "description": "Elements magnetically ease toward the cursor then settle back with spring physics." }, { "name": "MagnetLines", "type": "registry:component", "title": "MagnetLines", "description": "Animated field lines bend toward the cursor." }, { "name": "MaskedHeading", "type": "registry:component", "title": "MaskedHeading", "description": "A large headline with a drifting colour mesh or image showing through the glyphs, revealed word by word." }, { "name": "Masonry", "type": "registry:component", "title": "Masonry", "description": "Responsive masonry layout with animated reflow + gaps optimization." }, { "name": "MetaBalls", "type": "registry:component", "title": "MetaBalls", "description": "Liquid metaball blobs that merge and separate with smooth implicit surface animation." }, { "name": "MetallicPaint", "type": "registry:component", "title": "MetallicPaint", "description": "Liquid metallic paint shader which can be applied to SVG elements." }, { "name": "ModelViewer", "type": "registry:component", "title": "ModelViewer", "description": "Interactive 3D model viewer with orbit zoom, parallax, hover rotation and lighting presets." }, { "name": "MoltenMetal", "type": "registry:component", "title": "MoltenMetal", "description": "Swirling caustic plasma filaments with molten, white-hot cores." }, { "name": "MorphSlider", "type": "registry:component", "title": "MorphSlider", "description": "WebGL slider that melts between images with a displacement transition." }, { "name": "Noise", "type": "registry:component", "title": "Noise", "description": "Animated film grain / noise overlay adding subtle texture and motion." }, { "name": "OptionWheel", "type": "registry:component", "title": "OptionWheel", "description": "Curved option picker that spins via scroll, drag, or arrow keys, fading and tilting items away from the selection." }, { "name": "Orb", "type": "registry:component", "title": "Orb", "description": "Floating energy orb with customizable hover effect." }, { "name": "OrbitImages", "type": "registry:component", "title": "OrbitImages", "description": "SVG Path customizable orbiting images effect" }, { "name": "Particles", "type": "registry:component", "title": "Particles", "description": "Configurable particle system." }, { "name": "ParticleText", "type": "registry:component", "title": "ParticleText", "description": "Text assembles from drifting particles that scatter and reform on demand." }, { "name": "PillNav", "type": "registry:component", "title": "PillNav", "description": "Minimal pill nav with sliding active highlight + smooth easing." }, { "name": "PixelBlast", "type": "registry:component", "title": "PixelBlast", "description": "Exploding pixel particle bursts with optional liquid postprocessing." }, { "name": "PixelCard", "type": "registry:component", "title": "PixelCard", "description": "Card content revealed through pixel expansion transition." }, { "name": "PixelTrail", "type": "registry:component", "title": "PixelTrail", "description": "Pixelated cursor trail emitting fading squares with retro digital feel." }, { "name": "PixelTransition", "type": "registry:component", "title": "PixelTransition", "description": "Pixel dissolve transition for content reveal on hover." }, { "name": "Plasma", "type": "registry:component", "title": "Plasma", "description": "Organic plasma gradients swirl + morph with smooth turbulence." }, { "name": "PlasmaWave", "type": "registry:component", "title": "PlasmaWave", "description": "Raymarched plasma waves with dual-wave interference and OGL." }, { "name": "Prism", "type": "registry:component", "title": "Prism", "description": "Rotating prism with configurable intensity, size, and colors." }, { "name": "PrismaticBurst", "type": "registry:component", "title": "PrismaticBurst", "description": "Burst of light rays with controllable color, distortion, amount." }, { "name": "ProfileCard", "type": "registry:component", "title": "ProfileCard", "description": "Animated profile card glare with 3D hover effect." }, { "name": "Radar", "type": "registry:component", "title": "Radar", "description": "Radar sweep effect with concentric rings, radial spokes, and a rotating beam." }, { "name": "ReflectiveCard", "type": "registry:component", "title": "ReflectiveCard", "description": "Metallic card with live webcam reflection and SVG displacement filter." }, { "name": "Ribbons", "type": "registry:component", "title": "Ribbons", "description": "Flowing responsive ribbons/cursor trail driven by physics and pointer motion." }, { "name": "RippleDistortion", "type": "registry:component", "title": "RippleDistortion", "description": "Pointer-driven water displacement that warps content and leaves a decaying wake." }, { "name": "RippleGrid", "type": "registry:component", "title": "RippleGrid", "description": "A grid that continuously animates with a ripple effect." }, { "name": "RotatingText", "type": "registry:component", "title": "RotatingText", "description": "Cycles through multiple phrases with 3D rotate / flip transitions." }, { "name": "ScrambleText", "type": "registry:component", "title": "ScrambleText", "description": "Detects cursor position and applies a distortion effect to text." }, { "name": "ScrollExpand", "type": "registry:component", "title": "ScrollExpand", "description": "A rounded media frame that grows to full bleed as it scrolls through the viewport." }, { "name": "ScrollFloat", "type": "registry:component", "title": "ScrollFloat", "description": "Text gently floats / parallax shifts on scroll." }, { "name": "ScrollReveal", "type": "registry:component", "title": "ScrollReveal", "description": "Text gently unblurs and reveals on scroll." }, { "name": "ScrollStack", "type": "registry:component", "title": "ScrollStack", "description": "Overlapping card stack reveals on scroll with depth layering." }, { "name": "ScrollVelocity", "type": "registry:component", "title": "ScrollVelocity", "description": "Text marquee animatio - speed and distortion scale with user's scroll velocity." }, { "name": "ShapeBlur", "type": "registry:component", "title": "ShapeBlur", "description": "Morphing blurred geometric shape. The effect occurs on hover." }, { "name": "ShapeGrid", "type": "registry:component", "title": "ShapeGrid", "description": "Animated grid with shape variants (square, hexagon, circle, triangle) + direction customization." }, { "name": "ShinyText", "type": "registry:component", "title": "ShinyText", "description": "Metallic sheen sweeps across text producing a reflective highlight." }, { "name": "Shuffle", "type": "registry:component", "title": "Shuffle", "description": "Animated text reveal where characters shuffle before settling." }, { "name": "SideRays", "type": "registry:component", "title": "SideRays", "description": "Animated light rays emanating from the side with customizable colors and speed." }, { "name": "SpecularButton", "type": "registry:component", "title": "SpecularButton", "description": "Glass button with a shader-driven specular rim light that sweeps around the edge and follows the cursor." }, { "name": "SplashCursor", "type": "registry:component", "title": "SplashCursor", "description": "Liquid splash burst at cursor with curling ripples and waves." }, { "name": "SplitFlapText", "type": "registry:component", "title": "SplitFlapText", "description": "Mechanical split-flap departure board that clacks through to each new phrase." }, { "name": "SplitText", "type": "registry:component", "title": "SplitText", "description": "Splits text into characters / words for staggered entrance animation." }, { "name": "SpotlightCard", "type": "registry:component", "title": "SpotlightCard", "description": "Dynamic spotlight follows cursor casting gradient illumination." }, { "name": "Stack", "type": "registry:component", "title": "Stack", "description": "Layered stack with swipe animations, autoplay and smooth transitions." }, { "name": "StaggeredMenu", "type": "registry:component", "title": "StaggeredMenu", "description": "Menu with staggered item animations and smooth transitions on open/close." }, { "name": "StarBorder", "type": "registry:component", "title": "StarBorder", "description": "Animated star / sparkle border orbiting content with twinkle pulses." }, { "name": "Stepper", "type": "registry:component", "title": "Stepper", "description": "Animated multi-step progress indicator with active state transitions." }, { "name": "StickerPeel", "type": "registry:component", "title": "StickerPeel", "description": "Sticker corner lift + peel interaction using 3D transform and shadow depth." }, { "name": "Strands", "type": "registry:component", "title": "Strands", "description": "Glowing ribbon-like strands that ripple and weave across a transparent canvas." }, { "name": "StrokeText", "type": "registry:component", "title": "StrokeText", "description": "Outlined letterforms draw themselves on, then flood with fill." }, { "name": "SwarmCursor", "type": "registry:component", "title": "SwarmCursor", "description": "Flocking particle swarm that chases the pointer, jostles for space and drifts apart at rest." }, { "name": "TargetCursor", "type": "registry:component", "title": "TargetCursor", "description": "A cursor follow animation with 4 corners that lock onto targets." }, { "name": "TextCursor", "type": "registry:component", "title": "TextCursor", "description": "Make any text element follow your cursor, leaving a trail of copies behind it." }, { "name": "TextLoop", "type": "registry:component", "title": "TextLoop", "description": "A seamless text marquee that flows along curved SVG paths." }, { "name": "TextPressure", "type": "registry:component", "title": "TextPressure", "description": "Characters scale / warp interactively based on pointer pressure zone." }, { "name": "TextType", "type": "registry:component", "title": "TextType", "description": "Typewriter effect with blinking cursor and adjustable typing cadence." }, { "name": "TiltedCard", "type": "registry:component", "title": "TiltedCard", "description": "3D perspective tilt card reacting to pointer." }, { "name": "Topography", "type": "registry:component", "title": "Topography", "description": "A living contour map with glowing, elevation-tinted lines." }, { "name": "TrueFocus", "type": "registry:component", "title": "TrueFocus", "description": "Applies dynamic blur / clarity based over a series of words in order." }, { "name": "VariableProximity", "type": "registry:component", "title": "VariableProximity", "description": "Letter styling changes continuously with pointer distance mapping." }, { "name": "WarpText", "type": "registry:component", "title": "WarpText", "description": "WebGL warp that bends and refracts the text around the pointer." }, { "name": "WebThreads", "type": "registry:component", "title": "WebThreads", "description": "Glowing sine threads woven through a luminous convergence point." } ], "component_count": 158, "components_truncated": false, "component_types": { "registry:component": 158 }, "logo": "", "preview_image": "https://vue-bits.dev/og-pic.png", "pro": { "has_pro": true, "pro_url": null, "pricing_url": "https://vue-bits.dev/pricing" }, "enrichment_errors": [ "docs_unresolved", "github_unresolved" ], "featured": false }, { "number": 350, "name": "@svelte-bits", "category": "Animated components", "tags": [ "animation", "backgrounds", "cards", "glassmorphism", "icons", "media", "navigation", "retro", "text-effects" ], "tagline": "An open source collection of high quality, animated, interactive & fully customizable Svelte components for building stunning, memorable user interfaces.", "short_description": "", "description": "An open source collection of high quality, animated, interactive & fully customizable Svelte components for building stunning, memorable user interfaces.", "framework": "svelte", "homepage": "https://sveltebits.xyz", "docs": null, "github": "https://github.com/DavidHDev/svelte-bits", "components_github": null, "github_default_branch": "main", "github_stars": 219, "last_commit": "2026-05-21T15:43:44Z", "archived": false, "license": null, "open_issues": 1, "registry_template": "https://sveltebits.xyz/r/{name}.json", "registry_index": "https://sveltebits.xyz/r/registry.json", "components": [ "animated-content", "antigravity", "blob-cursor", "click-spark", "crosshair", "cubes", "electric-border", "fade-content", "ghost-cursor", "glare-hover", "gradual-blur", "image-trail", "laser-flow", "logo-loop", "magic-rings", "magnet", "magnet-lines", "meta-balls", "metallic-paint", "noise", "orbit-images", "pixel-trail", "pixel-transition", "ribbons", "shape-blur", "splash-cursor", "star-border", "sticker-peel", "target-cursor", "aurora", "balatro", "ballpit", "beams", "color-bends", "dark-veil", "dither", "dot-field", "dot-grid", "evil-eye", "faulty-terminal", "floating-lines", "galaxy", "gradient-blinds", "grainient", "grid-distortion", "grid-motion", "grid-scan", "hyperspeed", "iridescence", "letter-glitch", "light-pillar", "light-rays", "lightning", "line-waves", "liquid-chrome", "liquid-ether", "orb", "particles", "pixel-blast", "pixel-snow", "plasma", "plasma-wave", "prism", "prismatic-burst", "radar", "ripple-grid", "shape-grid", "silk", "soft-aurora", "threads", "waves", "animated-list", "border-glow", "bounce-cards", "bubble-menu", "card-nav", "card-swap", "carousel", "chroma-grid", "circular-gallery", "counter", "decay-card", "dock", "dome-gallery", "elastic-slider", "flowing-menu", "flying-posters", "folder", "glass-icons", "glass-surface", "gooey-nav", "infinite-menu", "magic-bento", "masonry", "model-viewer", "pill-nav", "pixel-card", "profile-card", "reflective-card", "scroll-stack", "spotlight-card", "stack", "staggered-menu", "stepper", "tilted-card", "ascii-text", "blur-text", "circular-text", "count-up", "curved-loop", "decrypted-text", "falling-text", "fuzzy-text", "glitch-text", "gradient-text", "rotating-text", "scrambled-text", "scroll-float", "scroll-reveal", "scroll-velocity", "shiny-text", "shuffle", "split-text", "text-cursor", "text-pressure", "text-type", "true-focus", "variable-proximity" ], "component_items": [ { "name": "animated-content", "type": "registry:component", "title": "Animated Content", "description": "Scroll-triggered entrance animation with distance, direction, scale and opacity controls. Powered by GSAP + ScrollTrigger." }, { "name": "antigravity", "type": "registry:component", "title": "Antigravity", "description": "Instanced 3D particles that orbit and react to the mouse with wave physics, rendered with three.js." }, { "name": "blob-cursor", "type": "registry:component", "title": "Blob Cursor", "description": "Gooey blob cursor with a trail of lagging blobs, smoothed via GSAP." }, { "name": "click-spark", "type": "registry:component", "title": "Click Spark", "description": "Clickable container that emits radial spark lines on click." }, { "name": "crosshair", "type": "registry:component", "title": "Crosshair", "description": "Animated crosshair lines that follow the cursor with subtle SVG turbulence on hover." }, { "name": "cubes", "type": "registry:component", "title": "Cubes", "description": "3D cube grid that tilts toward the cursor with optional ripple-on-click and idle drift." }, { "name": "electric-border", "type": "registry:component", "title": "Electric Border", "description": "Animated electric arcs around rounded rectangle borders rendered to canvas with noise displacement." }, { "name": "fade-content", "type": "registry:component", "title": "Fade Content", "description": "Scroll-triggered fade-in (with optional blur) entrance using GSAP + ScrollTrigger, with optional auto-disappearance." }, { "name": "ghost-cursor", "type": "registry:component", "title": "Ghost Cursor", "description": "WebGL ghostly cursor trail rendered with three.js + bloom + film grain post-processing." }, { "name": "glare-hover", "type": "registry:component", "title": "Glare Hover", "description": "Hover-triggered moving glare highlight across a card." }, { "name": "gradual-blur", "type": "registry:component", "title": "Gradual Blur", "description": "Multi-layer gradient-masked backdrop blur for soft fade-out edges (top/bottom/left/right)." }, { "name": "image-trail", "type": "registry:component", "title": "Image Trail", "description": "Mouse trail of images with 8 visually distinct GSAP variants." }, { "name": "laser-flow", "type": "registry:component", "title": "Laser Flow", "description": "Volumetric laser beam with wisps and tilting fog volume, rendered with three.js raw shader." }, { "name": "logo-loop", "type": "registry:component", "title": "Logo Loop", "description": "Smooth, infinite, pause-on-hover marquee for partner logos with optional fade-out edges." }, { "name": "magic-rings", "type": "registry:component", "title": "Magic Rings", "description": "WebGL2 concentric ring animation with mouse parallax, hover scale, and click burst. Real three.js shader." }, { "name": "magnet", "type": "registry:component", "title": "Magnet", "description": "Magnetic pull effect that attracts content toward the cursor when nearby." }, { "name": "magnet-lines", "type": "registry:component", "title": "Magnet Lines", "description": "A grid of small line segments that rotate to face the cursor." }, { "name": "meta-balls", "type": "registry:component", "title": "Meta Balls", "description": "Animated metaballs (gooey blob field) with cursor interaction, rendered with OGL shader." }, { "name": "metallic-paint", "type": "registry:component", "title": "Metallic Paint", "description": "Image-driven liquid metallic paint shader (WebGL2) with depth field solved via SOR relaxation." }, { "name": "noise", "type": "registry:component", "title": "Noise", "description": "Full-viewport animated film-grain canvas overlay." }, { "name": "orbit-images", "type": "registry:component", "title": "Orbit Images", "description": "Images orbiting along a configurable SVG path (ellipse, circle, star, heart, infinity, wave, custom)." }, { "name": "pixel-trail", "type": "registry:component", "title": "Pixel Trail", "description": "Pixelated mouse trail with optional gooey blend, rendered with three.js + a canvas-based trail texture." }, { "name": "pixel-transition", "type": "registry:component", "title": "Pixel Transition", "description": "Hover/click reveal that transitions between two contents through a randomized pixel grid effect." }, { "name": "ribbons", "type": "registry:component", "title": "Ribbons", "description": "Colorful spring-driven ribbon trails following the cursor, rendered with OGL polylines." }, { "name": "shape-blur", "type": "registry:component", "title": "Shape Blur", "description": "Mouse-reactive blurred SDF shapes (rounded rect, circle, ring, triangle) rendered with three.js." }, { "name": "splash-cursor", "type": "registry:component", "title": "Splash Cursor", "description": "Liquid splash burst at cursor with curling ripples and waves." }, { "name": "star-border", "type": "registry:component", "title": "Star Border", "description": "Button-like wrapper with two animated radial-gradient sweeps tracing the top and bottom border." }, { "name": "sticker-peel", "type": "registry:component", "title": "Sticker Peel", "description": "Draggable sticker that peels off on hover, with SVG specular lighting and drop shadow filters." }, { "name": "target-cursor", "type": "registry:component", "title": "Target Cursor", "description": "Custom spinning crosshair cursor that snaps to corners of elements matching a selector when hovered." }, { "name": "aurora", "type": "registry:component", "title": "Aurora", "description": "WebGL aurora background with configurable color stops, amplitude, blend and speed. Real OGL shader, not a CSS gradient." }, { "name": "balatro", "type": "registry:component", "title": "Balatro", "description": "Swirling pixel-painted Balatro-style WebGL background with mouse interaction." }, { "name": "ballpit", "type": "registry:component", "title": "Ballpit", "description": "Interactive 3D ball pit using Three.js physics." }, { "name": "beams", "type": "registry:component", "title": "Beams", "description": "Light beams animated with noise displacement." }, { "name": "color-bends", "type": "registry:component", "title": "Color Bends", "description": "Three.js shader background with warped color bands, pointer parallax, noise, and rotation controls." }, { "name": "dark-veil", "type": "registry:component", "title": "Dark Veil", "description": "Dark veil WebGL background with hue shift, scanlines, noise and warp controls." }, { "name": "dither", "type": "registry:component", "title": "Dither", "description": "Bayer-dithered animated wave field." }, { "name": "dot-field", "type": "registry:component", "title": "Dot Field", "description": "Interactive dotted canvas background with cursor bulge, glow, sparkle, and wave controls." }, { "name": "dot-grid", "type": "registry:component", "title": "Dot Grid", "description": "Interactive grid of dots with cursor proximity highlighting and shockwave click physics." }, { "name": "evil-eye", "type": "registry:component", "title": "Evil Eye", "description": "Reactive evil eye background with cursor-tracked pupil." }, { "name": "faulty-terminal", "type": "registry:component", "title": "Faulty Terminal", "description": "OGL terminal-style shader background with scanlines, glitches, curvature, mouse reaction, and load animation." }, { "name": "floating-lines", "type": "registry:component", "title": "Floating Lines", "description": "Layered animated wave lines with parallax & bend." }, { "name": "galaxy", "type": "registry:component", "title": "Galaxy", "description": "Animated galaxy of twinkling stars." }, { "name": "gradient-blinds", "type": "registry:component", "title": "Gradient Blinds", "description": "Animated gradient blinds with spotlight tracking." }, { "name": "grainient", "type": "registry:component", "title": "Grainient", "description": "Animated WebGL2 grainy gradient." }, { "name": "grid-distortion", "type": "registry:component", "title": "Grid Distortion", "description": "Image grid distortion driven by mouse movement." }, { "name": "grid-motion", "type": "registry:component", "title": "Grid Motion", "description": "Grid that pans with mouse position, powered by GSAP." }, { "name": "grid-scan", "type": "registry:component", "title": "Grid Scan", "description": "Animated 3D grid scan with bloom and chromatic aberration. Optional face tracking via face-api.js." }, { "name": "hyperspeed", "type": "registry:component", "title": "Hyperspeed", "description": "Three.js hyperspeed road background with bloom, SMAA, distortion presets, animated light trails, and hold-to-accelerate interaction." }, { "name": "iridescence", "type": "registry:component", "title": "Iridescence", "description": "Animated iridescent WebGL background with optional mouse parallax." }, { "name": "letter-glitch", "type": "registry:component", "title": "Letter Glitch", "description": "Cascading glitchy letter grid background." }, { "name": "light-pillar", "type": "registry:component", "title": "LightPillar", "description": "Volumetric raymarched light pillar." }, { "name": "light-rays", "type": "registry:component", "title": "Light Rays", "description": "Animated volumetric light rays rendered with OGL." }, { "name": "lightning", "type": "registry:component", "title": "Lightning", "description": "Procedural lightning bolt WebGL background." }, { "name": "line-waves", "type": "registry:component", "title": "Line Waves", "description": "Warped line waves background powered by OGL." }, { "name": "liquid-chrome", "type": "registry:component", "title": "Liquid Chrome", "description": "Liquid chrome animated WebGL background with mouse and touch interaction." }, { "name": "liquid-ether", "type": "registry:component", "title": "Liquid Ether", "description": "Interactive liquid shader with flowing distortion and customizable colors." }, { "name": "orb", "type": "registry:component", "title": "Orb", "description": "Dreamy hue-shifting orb with hover interaction." }, { "name": "particles", "type": "registry:component", "title": "Particles", "description": "OGL-based 3D point cloud particles with hover interaction." }, { "name": "pixel-blast", "type": "registry:component", "title": "PixelBlast", "description": "Pixelated dithered shape field with ripples and liquid distortion." }, { "name": "pixel-snow", "type": "registry:component", "title": "Pixel Snow", "description": "Volumetric pixel snowfall background." }, { "name": "plasma", "type": "registry:component", "title": "Plasma", "description": "Volumetric plasma WebGL2 background with optional mouse interaction and color tinting." }, { "name": "plasma-wave", "type": "registry:component", "title": "Plasma Wave", "description": "Raymarched plasma wave background." }, { "name": "prism", "type": "registry:component", "title": "Prism", "description": "Animated raymarched prism with hue and bloom." }, { "name": "prismatic-burst", "type": "registry:component", "title": "PrismaticBurst", "description": "Volumetric ray burst with bend and color gradient." }, { "name": "radar", "type": "registry:component", "title": "Radar", "description": "Radar sweep background rendered with OGL." }, { "name": "ripple-grid", "type": "registry:component", "title": "Ripple Grid", "description": "Animated rippling grid background powered by OGL with mouse interaction." }, { "name": "shape-grid", "type": "registry:component", "title": "Shape Grid", "description": "Animated grid of squares, hexagons, circles, or triangles with hover trail and configurable scroll direction." }, { "name": "silk", "type": "registry:component", "title": "Silk", "description": "Silk-like animated WebGL background using a Three.js shader plane." }, { "name": "soft-aurora", "type": "registry:component", "title": "Soft Aurora", "description": "Soft aurora bands rendered with OGL using Perlin noise." }, { "name": "threads", "type": "registry:component", "title": "Threads", "description": "Animated WebGL line/threads background with mouse parallax." }, { "name": "waves", "type": "registry:component", "title": "Waves", "description": "Perlin-noise wavy line grid that reacts to the cursor." }, { "name": "animated-list", "type": "registry:component", "title": "Animated List", "description": "Scroll-aware list with item-by-item scale + fade transitions and keyboard navigation." }, { "name": "border-glow", "type": "registry:component", "title": "Border Glow", "description": "Card with directional, edge-sensitive mesh-gradient border glow that follows the pointer." }, { "name": "bounce-cards", "type": "registry:component", "title": "Bounce Cards", "description": "GSAP-powered card stack with elastic intro animation and optional hover-to-spread." }, { "name": "bubble-menu", "type": "registry:component", "title": "Bubble Menu", "description": "Pill-style overlay nav with staggered GSAP bubble entrance animation." }, { "name": "card-nav", "type": "registry:component", "title": "Card Nav", "description": "Expandable navbar with three reveal cards animated by GSAP." }, { "name": "card-swap", "type": "registry:component", "title": "Card Swap", "description": "Three-card stack that auto-cycles with skewed perspective transforms (GSAP)." }, { "name": "carousel", "type": "registry:component", "title": "Carousel", "description": "Draggable carousel with spring snap, autoplay, optional loop, and 3D rotateY parallax." }, { "name": "chroma-grid", "type": "registry:component", "title": "Chroma Grid", "description": "Card grid with cursor-following spotlight reveal of color from a desaturated overlay (GSAP)." }, { "name": "circular-gallery", "type": "registry:component", "title": "Circular Gallery", "description": "WebGL bent gallery with momentum scroll, picture-frame distortion, and titles." }, { "name": "counter", "type": "registry:component", "title": "Counter", "description": "Animated rolling-digit counter with spring physics (motion)." }, { "name": "decay-card", "type": "registry:component", "title": "Decay Card", "description": "Image card that warps with SVG turbulence + displacement, lerped to cursor velocity (GSAP)." }, { "name": "dock", "type": "registry:component", "title": "Dock", "description": "macOS-style magnification dock with spring physics. Each item scales smoothly based on cursor distance." }, { "name": "dome-gallery", "type": "registry:component", "title": "Dome Gallery", "description": "Draggable 3D image dome with momentum, click-to-enlarge, and dome blur overlays." }, { "name": "elastic-slider", "type": "registry:component", "title": "Elastic Slider", "description": "Slider that stretches with overshoot decay and bounce-back spring (motion)." }, { "name": "flowing-menu", "type": "registry:component", "title": "Flowing Menu", "description": "Vertical menu where rows reveal an animated marquee from the closest edge on hover (GSAP)." }, { "name": "flying-posters", "type": "registry:component", "title": "Flying Posters", "description": "3D posters rotate on scroll infinitely." }, { "name": "folder", "type": "registry:component", "title": "Folder", "description": "Click to open a folder, fanning out paper snippets that follow the cursor on hover." }, { "name": "glass-icons", "type": "registry:component", "title": "Glass Icons", "description": "Floating glass-effect icon buttons with skewed gradient cards behind a frosted face." }, { "name": "glass-surface", "type": "registry:component", "title": "Glass Surface", "description": "Liquid-glass surface using SVG displacement filters and chromatic offset." }, { "name": "gooey-nav", "type": "registry:component", "title": "Gooey Nav", "description": "Pill-style nav with a gooey, particle-bursting active highlight powered by SVG-style filter blur+contrast." }, { "name": "infinite-menu", "type": "registry:component", "title": "Infinite Menu", "description": "Spherical icosahedron menu rendered with WebGL2 + instanced disc atlas, dragged via arcball physics." }, { "name": "magic-bento", "type": "registry:component", "title": "Magic Bento", "description": "Bento grid with spotlight, particle stars, border glow, tilt, and magnetism." }, { "name": "masonry", "type": "registry:component", "title": "Masonry", "description": "Animated responsive masonry grid with GSAP entrance and hover effects." }, { "name": "model-viewer", "type": "registry:component", "title": "Model Viewer", "description": "Interactive GLTF/GLB/FBX/OBJ model viewer with orbit, parallax, and hover effects." }, { "name": "pill-nav", "type": "registry:component", "title": "Pill Nav", "description": "Animated pill-shaped nav with circular GSAP hover and mobile menu." }, { "name": "pixel-card", "type": "registry:component", "title": "Pixel Card", "description": "Card with shimmering pixel canvas effect on hover/focus." }, { "name": "profile-card", "type": "registry:component", "title": "Profile Card", "description": "Holographic profile card with pointer/device-orientation tilt and animated shine." }, { "name": "reflective-card", "type": "registry:component", "title": "Reflective Card", "description": "Webcam-fed metallic glass card using SVG turbulence and specular lighting filters." }, { "name": "scroll-stack", "type": "registry:component", "title": "Scroll Stack", "description": "Scroll-driven card stack with pin/scale/blur/rotation, powered by Lenis smooth-scroll." }, { "name": "spotlight-card", "type": "registry:component", "title": "Spotlight Card", "description": "Card with a soft radial spotlight that follows the cursor." }, { "name": "stack", "type": "registry:component", "title": "Stack", "description": "Draggable card stack with spring rotation and send-to-back interaction." }, { "name": "staggered-menu", "type": "registry:component", "title": "Staggered Menu", "description": "Full-screen staggered slide-in menu with layered colors and GSAP timelines." }, { "name": "stepper", "type": "registry:component", "title": "Stepper", "description": "Animated multi-step form with sliding step content and round step indicators." }, { "name": "tilted-card", "type": "registry:component", "title": "Tilted Card", "description": "3D tilt-on-mouse card with spring physics and a cursor-following caption." }, { "name": "ascii-text", "type": "registry:component", "title": "ASCII Text", "description": "Renders text with an animated ASCII background for a retro feel." }, { "name": "blur-text", "type": "registry:component", "title": "Blur Text", "description": "Per-word/letter blur-in animation triggered when scrolled into view, with configurable direction, easing and stepped keyframes." }, { "name": "circular-text", "type": "registry:component", "title": "Circular Text", "description": "Layouts characters around a circle with optional rotation animation." }, { "name": "count-up", "type": "registry:component", "title": "Count Up", "description": "Spring-animated number counter that counts up (or down) when scrolled into view, with configurable spring physics, delay, and number formatting." }, { "name": "curved-loop", "type": "registry:component", "title": "Curved Loop", "description": "Marquee text rendered along a curved SVG path that scrolls infinitely and can be dragged for interactive control." }, { "name": "decrypted-text", "type": "registry:component", "title": "Decrypted Text", "description": "Scrambled-character reveal effect that decrypts a string on hover, click, or scroll-into-view, with sequential or random iteration modes." }, { "name": "falling-text", "type": "registry:component", "title": "Falling Text", "description": "Characters fall with gravity + bounce creating a playful entrance." }, { "name": "fuzzy-text", "type": "registry:component", "title": "Fuzzy Text", "description": "Canvas-rendered text that displaces pixel rows or columns on every frame to create a fuzzy/static distortion, with hover, click, and glitch modes." }, { "name": "glitch-text", "type": "registry:component", "title": "Glitch Text", "description": "RGB-split glitch effect on text using clip-path keyframe animation, with optional hover-only mode." }, { "name": "gradient-text", "type": "registry:component", "title": "Gradient Text", "description": "Animated multi-color gradient text with optional border, direction, yoyo and pause-on-hover." }, { "name": "rotating-text", "type": "registry:component", "title": "Rotating Text", "description": "Cycles through an array of phrases with per-character stagger animations on entry and exit, driven by motion springs." }, { "name": "scrambled-text", "type": "registry:component", "title": "Scrambled Text", "description": "Detects cursor position and applies a distortion effect to text." }, { "name": "scroll-float", "type": "registry:component", "title": "Scroll Float", "description": "Scroll-triggered floating text animation with per-character stagger." }, { "name": "scroll-reveal", "type": "registry:component", "title": "Scroll Reveal", "description": "Words reveal in sequence as the container scrolls into view, with optional rotation and blur tied to the scroll position." }, { "name": "scroll-velocity", "type": "registry:component", "title": "Scroll Velocity", "description": "Multi-row marquee that scrolls horizontally at a base velocity and accelerates with spring-smoothed page-scroll movement." }, { "name": "shiny-text", "type": "registry:component", "title": "Shiny Text", "description": "Animated shiny gradient sweep across text, with yoyo + direction controls." }, { "name": "shuffle", "type": "registry:component", "title": "Shuffle", "description": "Per-character shuffle animation: each letter slides through interim glyphs before settling on its final character, with hover replay and ScrollTrigger entrance." }, { "name": "split-text", "type": "registry:component", "title": "Split Text", "description": "Splits text into characters / words for staggered entrance animation." }, { "name": "text-cursor", "type": "registry:component", "title": "Text Cursor", "description": "Trail of repeating text glyphs that follows the cursor, optionally rotating to match direction and floating with random keyframes." }, { "name": "text-pressure", "type": "registry:component", "title": "Text Pressure", "description": "Variable-font heading where each character reacts to cursor proximity by morphing its width, weight, italic and opacity axes." }, { "name": "text-type", "type": "registry:component", "title": "Text Type", "description": "Typewriter effect that types and deletes through one or more sentences with a configurable cursor, blink rate, variable speed, and color rotation." }, { "name": "true-focus", "type": "registry:component", "title": "True Focus", "description": "Applies dynamic blur / clarity based over a series of words in order." }, { "name": "variable-proximity", "type": "registry:component", "title": "Variable Proximity", "description": "Per-letter variable-font interpolation that responds to cursor proximity inside a container, with linear, exponential or gaussian falloff." } ], "component_count": 128, "components_truncated": false, "component_types": { "registry:component": 128 }, "logo": "", "preview_image": "https://sveltebits.xyz/og-pic.png", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [ "docs_unresolved" ], "featured": false }, { "number": 351, "name": "@aniui", "category": "Animated components", "tags": [ "3d", "accessibility", "ai", "animation", "auth", "backgrounds", "blocks", "buttons", "cards", "charts", "forms", "loaders", "maps", "media", "mobile", "navigation", "onboarding", "overlays", "pro-available", "tables" ], "tagline": "Beautiful, accessible React Native components (Uniwind or NativeWind) — copy, paste, own the code. 93 components plus pre-built screen blocks, installable with the shadcn CLI.", "short_description": "", "description": "Beautiful, accessible React Native components (Uniwind or NativeWind) — copy, paste, own the code. 93 components plus pre-built screen blocks, installable with the shadcn CLI.", "framework": "react", "homepage": "https://aniui.dev", "docs": "https://aniui.dev/docs", "github": "https://github.com/anishlp7/aniui", "components_github": "https://github.com/anishlp7/aniui/tree/main/components", "github_default_branch": "main", "github_stars": 71, "last_commit": "2026-07-21T13:24:52Z", "archived": false, "license": "MIT", "open_issues": 4, "registry_template": "https://aniui.dev/r/{name}.json", "registry_index": "https://aniui.dev/registry.json", "components": [ "accordion", "action-rail", "action-sheet", "alert", "alert-dialog", "animate", "animated-header-scrollview", "animated-input-bar", "arc-list", "area-chart", "aspect-ratio", "autocomplete", "avatar", "avatar-group", "badge", "banner", "bar-chart", "barcode-badge", "book-page", "bottom-sheet", "bottom-tabs", "breadcrumb", "button", "calendar", "card", "carousel", "carousel-3d", "carousel-circular", "carousel-parallax", "carousel-scale", "carousel-tilt", "chart-tooltip", "chat", "chat-bubble", "checkbox", "chip", "collapsible", "combobox", "command-menu", "connection-banner", "context-menu", "coupon", "curved-bottom-tabs", "data-table", "date-picker", "dialog", "direction-provider", "drawer", "drawer-nav", "dropdown-menu", "empty-state", "event-ticket", "expandable-view", "fab", "fan-menu", "field", "file-picker", "filling-stack", "flexi-button", "flip-card", "forgot-password", "form", "gooey-popover", "gooey-search-tabs", "gradient", "grid", "hamburger", "header", "home", "hover-card", "image", "image-gallery", "infinite-list", "input", "input-group", "input-otp", "kbd", "keyboard-view", "label", "labeled-separator", "line-chart", "list", "loader", "login", "marquee", "masked-input", "matched-geometry", "menubar", "mobile-dock", "morph-fab", "morphing-tabbar", "notifications", "number-input", "onboarding", "pagination", "password-input", "phone-input", "photo-stack", "pie-chart", "polaroid", "popover", "price", "pricing", "product-detail", "product-list", "profile", "profile-card", "progress", "progress-steps", "prompt-input", "qr-code", "radar-chart", "radial-chart", "radio-group", "rating", "receipt-card", "refresh-control", "rolling-counter", "safe-area", "save-button", "search", "search-bar", "segmented-control", "select", "separator", "settings", "shimmer", "sidebar", "signup", "skeleton", "slide-to-confirm", "slider", "social-button", "spin-button", "spinner", "split-view", "stacked-chips", "stat-card", "status-indicator", "stepper", "streaming-text", "swipe-deck", "swipeable-list-item", "switch", "tab-bar", "table", "tabs", "text", "textarea", "theme", "theme-provider", "theme-switch", "time-picker", "timeline", "toast", "toggle", "toggle-group", "tooltip", "tray", "typing-indicator", "unfold-menu", "utils", "verified-badge", "vertical-flow-carousel", "vertical-page-carousel", "waveform" ], "component_items": [ { "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "Expandable content sections" }, { "name": "action-rail", "type": "registry:ui", "title": "ActionRail", "description": "Expandable icon toolbar that reveals labeled actions, with its own light/dark palette system" }, { "name": "action-sheet", "type": "registry:ui", "title": "ActionSheet", "description": "Action sheet with options" }, { "name": "alert", "type": "registry:ui", "title": "Alert", "description": "Alert message with variants" }, { "name": "alert-dialog", "type": "registry:ui", "title": "AlertDialog", "description": "Confirmation dialog with actions" }, { "name": "animate", "type": "registry:ui", "title": "Animate", "description": "Animation presets, spring configs, easing, and hooks for Reanimated 4" }, { "name": "animated-header-scrollview", "type": "registry:ui", "title": "AnimatedHeaderScrollView", "description": "iOS-style collapsing large-title header ScrollView with blur backdrop on scroll" }, { "name": "animated-input-bar", "type": "registry:ui", "title": "AnimatedInputBar", "description": "Text input with a per-character animated placeholder that cycles through multiple strings" }, { "name": "arc-list", "type": "registry:ui", "title": "ArcList", "description": "Items laid out along a curved arc with proximity scale/opacity, snap-to-focus, and a haptic tick on snap" }, { "name": "area-chart", "type": "registry:ui", "title": "AreaChart", "description": "Skia area chart with entrance draw-on, data morphing, and a drag-to-scrub tooltip" }, { "name": "aspect-ratio", "type": "registry:ui", "title": "AspectRatio", "description": "Constrains children to a fixed width/height ratio" }, { "name": "autocomplete", "type": "registry:ui", "title": "AutoComplete", "description": "Free-text input with inline filtered suggestions, keyboard-safe dropdown, and async loading state" }, { "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "User avatar with image and fallback" }, { "name": "avatar-group", "type": "registry:ui", "title": "AvatarGroup", "description": "Overlapping avatar stack with max count and +N overflow bubble" }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "Small status indicator" }, { "name": "banner", "type": "registry:ui", "title": "Banner", "description": "Full-width notification banner with variants and dismiss" }, { "name": "bar-chart", "type": "registry:ui", "title": "BarChart", "description": "Skia bar chart with staggered grow-in, data morphing, and a drag-to-scrub tooltip" }, { "name": "barcode-badge", "type": "registry:ui", "title": "BarcodeBadge", "description": "Width-encoded barcode strip with compound Root/Bars/Label API and palette overrides" }, { "name": "book-page", "type": "registry:ui", "title": "BookPage", "description": "Book cover with spine gradient, page-edge texture, and an openAngle-driven hinge" }, { "name": "bottom-sheet", "type": "registry:ui", "title": "BottomSheet", "description": "Bottom sheet overlay" }, { "name": "bottom-tabs", "type": "registry:block", "title": "BottomTabsScreen", "description": "Bottom tab navigation bar with active state indicators" }, { "name": "breadcrumb", "type": "registry:ui", "title": "Breadcrumb", "description": "Navigation trail: Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator" }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "A pressable button with variants" }, { "name": "calendar", "type": "registry:ui", "title": "Calendar", "description": "Month calendar with single and range selection" }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "Card container with header, content, footer" }, { "name": "carousel", "type": "registry:ui", "title": "Carousel", "description": "Horizontal scrollable carousel with pagination dots" }, { "name": "carousel-3d", "type": "registry:ui", "title": "Carousel3D", "description": "3D cylindrical carousel with real perspective-projected faces, pan gestures, and snap physics" }, { "name": "carousel-circular", "type": "registry:ui", "title": "CarouselCircular", "description": "Scroll-driven coverflow carousel with per-item lift, tilt, and a blur fade on non-centered items" }, { "name": "carousel-parallax", "type": "registry:ui", "title": "CarouselParallax", "description": "Horizontal carousel with real inner-layer parallax translation and a haptic tick on release" }, { "name": "carousel-scale", "type": "registry:ui", "title": "CarouselScale", "description": "Center-focused carousel where neighbors zoom up and rotate out, with a haptic tick on release" }, { "name": "carousel-tilt", "type": "registry:ui", "title": "CarouselTilt", "description": "Z-axis fan carousel — slides rotate and lift from a bottom pivot, with an optional blur overlay" }, { "name": "chart-tooltip", "type": "registry:ui", "title": "ChartTooltip", "description": "Tooltip overlay for chart data points" }, { "name": "chat", "type": "registry:block", "title": "ChatScreen", "description": "Messaging screen with chat bubbles and input bar" }, { "name": "chat-bubble", "type": "registry:ui", "title": "ChatBubble", "description": "Message bubble for chat with sent/received variants and status" }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "Checkbox with checked state" }, { "name": "chip", "type": "registry:ui", "title": "Chip", "description": "Interactive tag for filters and multi-select" }, { "name": "collapsible", "type": "registry:ui", "title": "Collapsible", "description": "Animated show/hide content" }, { "name": "combobox", "type": "registry:ui", "title": "Combobox", "description": "Searchable select with multi-select, groups, clear, and custom rendering" }, { "name": "command-menu", "type": "registry:ui", "title": "CommandMenu", "description": "Spotlight/kbar-style command palette — portal-based overlay with rigorous Android keyboard handling, groups, and shortcuts" }, { "name": "connection-banner", "type": "registry:ui", "title": "ConnectionBanner", "description": "Animated banner showing online/offline connection status" }, { "name": "context-menu", "type": "registry:ui", "title": "ContextMenu", "description": "Long-press context menu with items and separators" }, { "name": "coupon", "type": "registry:ui", "title": "Coupon", "description": "Two-section promotional coupon with a real tear-line, ticket icon, and orientation prop" }, { "name": "curved-bottom-tabs", "type": "registry:ui", "title": "CurvedBottomTabs", "description": "Bottom tab bar whose curved notch and floating gradient button slide to track the active tab, with badge support and keyboard auto-hide" }, { "name": "data-table", "type": "registry:ui", "title": "DataTable", "description": "Sortable, filterable data table with pagination and custom cell rendering" }, { "name": "date-picker", "type": "registry:ui", "title": "DatePicker", "description": "Date picker with calendar popup and range support" }, { "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "Modal dialog overlay" }, { "name": "direction-provider", "type": "registry:ui", "title": "DirectionProvider", "description": "RTL/LTR direction context with I18nManager integration" }, { "name": "drawer", "type": "registry:ui", "title": "Drawer", "description": "Slide-in side navigation panel" }, { "name": "drawer-nav", "type": "registry:block", "title": "DrawerNavContent", "description": "Side drawer with user profile and icon-labeled navigation" }, { "name": "dropdown-menu", "type": "registry:ui", "title": "DropdownMenu", "description": "Dropdown menu with items, separators, and destructive actions" }, { "name": "empty-state", "type": "registry:ui", "title": "EmptyState", "description": "Placeholder for empty screens and error states" }, { "name": "event-ticket", "type": "registry:ui", "title": "EventTicket", "description": "Event ticket card with perforated edge, date, venue, and seat" }, { "name": "expandable-view", "type": "registry:ui", "title": "ExpandableView", "description": "Generic expand/collapse container with spring-driven width/height/corner-radius morphing and a slot API" }, { "name": "fab", "type": "registry:ui", "title": "FAB", "description": "Floating action button for primary screen actions" }, { "name": "fan-menu", "type": "registry:ui", "title": "FanMenu", "description": "Radial fan menu that staggers labeled pill actions out from a FAB trigger, with tap-outside-to-dismiss backdrop and per-item blur" }, { "name": "field", "type": "registry:ui", "title": "Field", "description": "Layout-focused form field with label, description, and error" }, { "name": "file-picker", "type": "registry:ui", "title": "FilePicker", "description": "File upload UI with dashed border, preview, and remove button" }, { "name": "filling-stack", "type": "registry:ui", "title": "FillingStack", "description": "Vertically browsable card stack with fling gestures and a blur \"filling\" transition between cards" }, { "name": "flexi-button", "type": "registry:ui", "title": "FlexiButton", "description": "Adaptive-width pill button that springs open to reveal a label, with a dimension-change callback" }, { "name": "flip-card", "type": "registry:ui", "title": "FlipCard", "description": "Tap-to-flip card with horizontal/vertical/depth 3D rotation, mid-flip glass blur, and haptic feedback" }, { "name": "forgot-password", "type": "registry:block", "title": "ForgotPasswordScreen", "description": "Password reset flow with email input and confirmation" }, { "name": "form", "type": "registry:ui", "title": "Form", "description": "Form context with validation, error handling, and compound components" }, { "name": "gooey-popover", "type": "registry:ui", "title": "GooeyPopover", "description": "Skia gooey popover that morphs its trigger into the content panel" }, { "name": "gooey-search-tabs", "type": "registry:ui", "title": "GooeySearchTabs", "description": "Skia gooey pill that morphs between a search bar and a tab switcher" }, { "name": "gradient", "type": "registry:ui", "title": "Gradient", "description": "Linear gradient view with configurable colors and direction" }, { "name": "grid", "type": "registry:ui", "title": "Grid", "description": "FlatList-based grid layout with configurable columns and gap" }, { "name": "hamburger", "type": "registry:ui", "title": "Hamburger", "description": "Animated hamburger ⇄ close icon morph driven by a single progress value" }, { "name": "header", "type": "registry:ui", "title": "Header", "description": "Navigation header with back button, title, and right actions" }, { "name": "home", "type": "registry:block", "title": "HomeScreen", "description": "Dashboard home with greeting, quick actions, stats, and activity" }, { "name": "hover-card", "type": "registry:ui", "title": "HoverCard", "description": "Preview content card triggered by hover or long-press" }, { "name": "image", "type": "registry:ui", "title": "Image", "description": "Image with loading placeholder, error fallback, and rounded variants" }, { "name": "image-gallery", "type": "registry:ui", "title": "ImageGallery", "description": "Horizontal image carousel with fullscreen modal and pagination" }, { "name": "infinite-list", "type": "registry:ui", "title": "InfiniteList", "description": "FlatList with auto-loading more items on scroll" }, { "name": "input", "type": "registry:ui", "title": "Input", "description": "Text input with variants and states" }, { "name": "input-group", "type": "registry:ui", "title": "InputGroup", "description": "Compose inputs with addons, buttons, text, and focus-aware container" }, { "name": "input-otp", "type": "registry:ui", "title": "InputOTP", "description": "One-time password input with individual cells" }, { "name": "kbd", "type": "registry:ui", "title": "Kbd", "description": "Keyboard key display with grouping and separator" }, { "name": "keyboard-view", "type": "registry:ui", "title": "KeyboardView", "description": "Keyboard-avoiding wrapper so forms stay visible above the keyboard" }, { "name": "label", "type": "registry:ui", "title": "Label", "description": "Form field label" }, { "name": "labeled-separator", "type": "registry:ui", "title": "LabeledSeparator", "description": "Horizontal separator with centered text label" }, { "name": "line-chart", "type": "registry:ui", "title": "LineChart", "description": "Skia line chart with draw-on entrance, morph-on-data-change, and a scrubbing crosshair tooltip" }, { "name": "list", "type": "registry:ui", "title": "List", "description": "Styled list items" }, { "name": "loader", "type": "registry:ui", "title": "Loader", "description": "Animated loading indicator — segmented comet-tail ring or bouncing dots" }, { "name": "login", "type": "registry:block", "title": "LoginScreen", "description": "Email/password login with social sign-in" }, { "name": "marquee", "type": "registry:ui", "title": "Marquee", "description": "Infinite horizontal ticker for any content — reverse direction, tap-to-pause, and hold-to-speed-up" }, { "name": "masked-input", "type": "registry:ui", "title": "MaskedInput", "description": "Text input with mask formatting for credit cards, phones, dates" }, { "name": "matched-geometry", "type": "registry:ui", "title": "MatchedGeometry", "description": "SwiftUI-style shared-element layout transition primitive — morphs one tagged view into another's position and size when they swap" }, { "name": "menubar", "type": "registry:ui", "title": "Menubar", "description": "Horizontal menu bar with dropdown menus: Menubar, MenubarMenu, MenubarItem" }, { "name": "mobile-dock", "type": "registry:ui", "title": "MobileDock", "description": "Finger-tracked fisheye dock — drag across icons to magnify the one under your touch, release to tap the nearest one" }, { "name": "morph-fab", "type": "registry:ui", "title": "MorphFab", "description": "Skia gooey radial/directional FAB menu with staggered blob-merge spring animation" }, { "name": "morphing-tabbar", "type": "registry:ui", "title": "MorphingTabBar", "description": "Segmented tab bar where each tab's own corner radii and spacing morph to split the active tab into a separated pill" }, { "name": "notifications", "type": "registry:block", "title": "NotificationsScreen", "description": "Grouped notifications list with unread indicators" }, { "name": "number-input", "type": "registry:ui", "title": "NumberInput", "description": "Numeric input with increment/decrement buttons and min/max" }, { "name": "onboarding", "type": "registry:block", "title": "OnboardingScreen", "description": "Welcome carousel with step indicators and skip option" }, { "name": "pagination", "type": "registry:ui", "title": "Pagination", "description": "Page navigation with numbered buttons and prev/next" }, { "name": "password-input", "type": "registry:ui", "title": "PasswordInput", "description": "Password input with show/hide toggle and strength indicator" }, { "name": "phone-input", "type": "registry:ui", "title": "PhoneInput", "description": "Phone number input with country code selector" }, { "name": "photo-stack", "type": "registry:ui", "title": "PhotoStack", "description": "Overlapping stacked photos with a press-lift-and-straighten spring, and optional per-photo onPress" }, { "name": "pie-chart", "type": "registry:ui", "title": "PieChart", "description": "Skia pie/donut chart with grow-in sweep, data morphing, and drag-to-select slice push-out" }, { "name": "polaroid", "type": "registry:ui", "title": "Polaroid", "description": "Polaroid-style photo frame with a press-lift-and-straighten spring and optional washi-tape decoration" }, { "name": "popover", "type": "registry:ui", "title": "Popover", "description": "Contextual overlay with trigger positioning" }, { "name": "price", "type": "registry:ui", "title": "Price", "description": "Formatted currency display with locale and strikethrough support" }, { "name": "pricing", "type": "registry:block", "title": "PricingScreen", "description": "Subscription plan selector with monthly/yearly toggle" }, { "name": "product-detail", "type": "registry:block", "title": "ProductDetailScreen", "description": "Product detail with size selector, quantity picker, and CTA" }, { "name": "product-list", "type": "registry:block", "title": "ProductListScreen", "description": "E-commerce product grid with category filters and wishlist" }, { "name": "profile", "type": "registry:block", "title": "ProfileScreen", "description": "User profile with avatar, stats, menu items, and log out" }, { "name": "profile-card", "type": "registry:ui", "title": "ProfileCard", "description": "Profile card with a cover image, overlapping avatar, location row, and a press-scale action button" }, { "name": "progress", "type": "registry:ui", "title": "Progress", "description": "Progress bar" }, { "name": "progress-steps", "type": "registry:ui", "title": "ProgressSteps", "description": "Multi-step progress indicator for wizards and onboarding" }, { "name": "prompt-input", "type": "registry:ui", "title": "PromptInput", "description": "ChatGPT/Claude-style AI composer — compound: PromptInput, Textarea, Toolbar, Button, Send (stop while streaming)" }, { "name": "qr-code", "type": "registry:ui", "title": "QrCode", "description": "Real, scannable QR code behind an expand/collapse reveal with copy/close actions" }, { "name": "radar-chart", "type": "registry:ui", "title": "RadarChart", "description": "Skia radar/spider chart with staggered grow-in, data morphing, and a drag-to-select axis tooltip" }, { "name": "radial-chart", "type": "registry:ui", "title": "RadialChart", "description": "Skia concentric radial progress rings with grow-in, data morphing, and a drag-to-select tooltip" }, { "name": "radio-group", "type": "registry:ui", "title": "RadioGroup", "description": "Radio button group" }, { "name": "rating", "type": "registry:ui", "title": "Rating", "description": "Star rating with interactive and read-only modes" }, { "name": "receipt-card", "type": "registry:ui", "title": "ReceiptCard", "description": "Tilted, torn-edge receipt card with dotted item leaders and a printed barcode" }, { "name": "refresh-control", "type": "registry:ui", "title": "RefreshControl", "description": "Themed pull-to-refresh control for ScrollView and FlatList" }, { "name": "rolling-counter", "type": "registry:ui", "title": "RollingCounter", "description": "Animated odometer-style rolling number counter with motion-blur, squash/stretch, staggered digits, and correct wrap-around rollover" }, { "name": "safe-area", "type": "registry:ui", "title": "SafeArea", "description": "Styled SafeAreaView wrapper with theme variants" }, { "name": "save-button", "type": "registry:ui", "title": "SaveButton", "description": "Idle → loading → success → done state-machine save button with animated phase transitions" }, { "name": "search", "type": "registry:block", "title": "SearchScreen", "description": "Search screen with recent searches, trending, and live results" }, { "name": "search-bar", "type": "registry:ui", "title": "SearchBar", "description": "Search input with icon, clear button, and cancel" }, { "name": "segmented-control", "type": "registry:ui", "title": "SegmentedControl", "description": "iOS-style segmented control for view switching" }, { "name": "select", "type": "registry:ui", "title": "Select", "description": "Dropdown select with search support" }, { "name": "separator", "type": "registry:ui", "title": "Separator", "description": "Visual divider" }, { "name": "settings", "type": "registry:block", "title": "SettingsScreen", "description": "Settings screen with toggles, navigation rows, and danger zone" }, { "name": "shimmer", "type": "registry:ui", "title": "Shimmer", "description": "Content-aware skeleton with sweep/pulse variants, 4 directions, named color presets, and isLoading reveal" }, { "name": "sidebar", "type": "registry:ui", "title": "Sidebar", "description": "Collapsible animated side navigation panel: SidebarProvider, Sidebar, SidebarTrigger, useSidebar" }, { "name": "signup", "type": "registry:block", "title": "SignUpScreen", "description": "Registration with name, email, password, and terms checkbox" }, { "name": "skeleton", "type": "registry:ui", "title": "Skeleton", "description": "Animated loading placeholder" }, { "name": "slide-to-confirm", "type": "registry:ui", "title": "SlideToConfirm", "description": "Slide-to-pay/confirm control with spring-back and confirmed state" }, { "name": "slider", "type": "registry:ui", "title": "Slider", "description": "Draggable slider for numeric values" }, { "name": "social-button", "type": "registry:ui", "title": "SocialButton", "description": "Branded social sign-in button with default Google/Apple/GitHub/X marks, outline/filled/ghost variants, and a press-scale spring" }, { "name": "spin-button", "type": "registry:ui", "title": "SpinButton", "description": "Toggle button with a custom SVG arc spinner and crossfading label on press" }, { "name": "spinner", "type": "registry:ui", "title": "Spinner", "description": "Loading spinner with sizes" }, { "name": "split-view", "type": "registry:ui", "title": "SplitView", "description": "Draggable, resizable top/bottom split pane with snap points and spring physics" }, { "name": "stacked-chips", "type": "registry:ui", "title": "StackedChips", "description": "Nested, depth-aware expandable chip menu — a trigger reveals further stacked chips" }, { "name": "stat-card", "type": "registry:ui", "title": "StatCard", "description": "KPI display card with value, trend indicator, and change percentage" }, { "name": "status-indicator", "type": "registry:ui", "title": "StatusIndicator", "description": "Colored dot for online/offline/away/busy status" }, { "name": "stepper", "type": "registry:ui", "title": "Stepper", "description": "Numeric increment/decrement control with min/max/step" }, { "name": "streaming-text", "type": "registry:ui", "title": "StreamingText", "description": "Typewriter-style streaming AI response text with a blinking cursor" }, { "name": "swipe-deck", "type": "registry:ui", "title": "SwipeDeck", "description": "Tinder-style swipeable card stack with fling physics and swipe callbacks" }, { "name": "swipeable-list-item", "type": "registry:ui", "title": "SwipeableListItem", "description": "Swipeable list item revealing action buttons on swipe" }, { "name": "switch", "type": "registry:ui", "title": "Switch", "description": "Toggle switch" }, { "name": "tab-bar", "type": "registry:ui", "title": "TabBar", "description": "Bottom tab bar with badge support and active states" }, { "name": "table", "type": "registry:ui", "title": "Table", "description": "Data table with header, body, rows, and cells" }, { "name": "tabs", "type": "registry:ui", "title": "Tabs", "description": "Tab navigation with filled/line variants, sizes, vertical, disabled, and icon support" }, { "name": "text", "type": "registry:ui", "title": "Text", "description": "Typography with heading and body variants" }, { "name": "textarea", "type": "registry:ui", "title": "Textarea", "description": "Multi-line text input" }, { "name": "theme", "type": "registry:theme", "title": "AniUI Theme", "description": "AniUI light/dark color tokens and radius. Convenience only — `aniui init` is authoritative for full RN theme setup." }, { "name": "theme-provider", "type": "registry:ui", "title": "ThemeProvider", "description": "Theme context provider with light/dark/system mode and toggle" }, { "name": "theme-switch", "type": "registry:ui", "title": "ThemeSwitch", "description": "Sun/moon icon-morph theme toggle with an optional full-screen circular wipe transition" }, { "name": "time-picker", "type": "registry:ui", "title": "TimePicker", "description": "Custom time picker with scroll wheels plus DateAndTimePicker (calendar + time)" }, { "name": "timeline", "type": "registry:ui", "title": "Timeline", "description": "Vertical timeline for events, order tracking, activity feeds" }, { "name": "toast", "type": "registry:ui", "title": "Toast", "description": "Notification toast with auto-dismiss, position (top/bottom), and slide-in direction (top/bottom/left/right)" }, { "name": "toggle", "type": "registry:ui", "title": "Toggle", "description": "Two-state toggle button" }, { "name": "toggle-group", "type": "registry:ui", "title": "ToggleGroup", "description": "Group of exclusive toggle buttons" }, { "name": "tooltip", "type": "registry:ui", "title": "Tooltip", "description": "Accessible tooltip with positioning" }, { "name": "tray", "type": "registry:ui", "title": "Tray", "description": "Compound bottom-sheet/navigation-tray system with multi-view push/back navigation, draggable detents, and scroll hand-off" }, { "name": "typing-indicator", "type": "registry:ui", "title": "TypingIndicator", "description": "Animated typing dots for chat interfaces" }, { "name": "unfold-menu", "type": "registry:ui", "title": "UnfoldMenu", "description": "Menu whose trigger unfolds into a full panel, its label morphing into the panel's title as it expands" }, { "name": "utils", "type": "registry:lib", "title": "cn utility", "description": "Tailwind class-merge helper (clsx + tailwind-merge)." }, { "name": "verified-badge", "type": "registry:ui", "title": "VerifiedBadge", "description": "Verified check badge with Name/Handle layout and palette overrides" }, { "name": "vertical-flow-carousel", "type": "registry:ui", "title": "VerticalFlowCarousel", "description": "Vertical coverflow — cards scale, tilt, and fade as they scroll away from center, with a blur overlay on unfocused cards" }, { "name": "vertical-page-carousel", "type": "registry:ui", "title": "VerticalPageCarousel", "description": "Full-bleed vertical pager — one card fills the screen at a time, neighbors scale/fade out, with a haptic tick on release" }, { "name": "waveform", "type": "registry:ui", "title": "Waveform", "description": "Audio waveform bars — driven by real amplitude levels, with an ambient recording fallback" } ], "component_count": 166, "components_truncated": false, "component_types": { "registry:ui": 149, "registry:block": 15, "registry:theme": 1, "registry:lib": 1 }, "logo": "", "preview_image": "https://aniui.dev/og.png", "pro": { "has_pro": true, "pro_url": null, "pricing_url": "https://pro.aniui.dev/" }, "enrichment_errors": [], "featured": false }, { "number": 352, "name": "@threecn", "category": "Charts/data viz", "tags": [ "3d", "backgrounds", "cards", "charts", "maps", "theming" ], "tagline": "3D scenes for shadcn/ui. Theme-aware React Three Fiber components, one command away.", "short_description": "", "description": "3D scenes for shadcn/ui. Theme-aware React Three Fiber components, one command away.", "framework": "react", "homepage": "https://threecn.dev", "docs": "https://threecn.dev/docs", "github": "https://github.com/ln-dev7/threecn", "components_github": "https://github.com/ln-dev7/threecn/tree/master/components", "github_default_branch": "master", "github_stars": 56, "last_commit": "2026-07-20T17:01:02Z", "archived": false, "license": "MIT", "open_issues": 0, "registry_template": "https://threecn.dev/r/{name}.json", "registry_index": "https://threecn.dev/r/registry.json", "components": [ "scene-container", "particle-field", "product-viewer", "floating-card-3d", "text-3d", "product-showcase", "globe", "wave-terrain", "crystal", "halo", "dna-helix", "vortex", "aurora-ribbons", "network-graph", "metaballs", "cube-wave", "iso-city", "warp-tunnel", "phyllotaxis", "strange-attractor", "curl-flow", "cloth", "boids", "voronoi-shatter", "tesseract", "pendulum-wave", "pitch-momentum", "world-cup" ], "component_items": [ { "name": "scene-container", "type": "registry:ui", "title": "SceneContainer", "description": "Base R3F canvas wrapper with theme-aware environment and camera setup." }, { "name": "particle-field", "type": "registry:ui", "title": "ParticleField", "description": "A drifting cloud of particles colored with your shadcn --primary and --muted-foreground tokens." }, { "name": "product-viewer", "type": "registry:ui", "title": "ProductViewer", "description": "An orbitable, polished product volume with an emissive --primary tint; hover slows the spin." }, { "name": "floating-card-3d", "type": "registry:ui", "title": "FloatingCard3D", "description": "A parallax-tilting 3D card with a --background surface, --border edges, and an HTML overlay." }, { "name": "text-3d", "type": "registry:ui", "title": "Text3D", "description": "Extruded, floating 3D text rendered with drei , colored with --primary." }, { "name": "product-showcase", "type": "registry:ui", "title": "ProductShowcase", "description": "A product on a circular pedestal with soft contact shadows, studio lighting and slow auto-rotate." }, { "name": "globe", "type": "registry:ui", "title": "Globe", "description": "A dotted globe rotating slowly with orbit rings, colored with your --primary token." }, { "name": "wave-terrain", "type": "registry:ui", "title": "WaveTerrain", "description": "An undulating wireframe terrain in perspective, drawn with --primary." }, { "name": "crystal", "type": "registry:ui", "title": "Crystal", "description": "A faceted glass gem with real refraction and a glowing core, tinted with --primary." }, { "name": "halo", "type": "registry:ui", "title": "Halo", "description": "A glowing energy core wrapped by tilted orbit rings carrying satellites." }, { "name": "dna-helix", "type": "registry:ui", "title": "DnaHelix", "description": "A rotating double helix of spheres joined by rungs, colored with --primary and --accent." }, { "name": "vortex", "type": "registry:ui", "title": "Vortex", "description": "A spiral galaxy of points fading from --primary at the core to --muted-foreground at the rim." }, { "name": "aurora-ribbons", "type": "registry:ui", "title": "AuroraRibbons", "description": "Silky aurora ribbons drifting in slow sine waves, shaded with a --primary → --accent gradient." }, { "name": "network-graph", "type": "registry:ui", "title": "NetworkGraph", "description": "A living plexus of drifting nodes that link up when close, fading from --primary to --muted-foreground." }, { "name": "metaballs", "type": "registry:ui", "title": "Metaballs", "description": "Liquid metaballs that merge and split as they orbit each other, tinted with --primary." }, { "name": "cube-wave", "type": "registry:ui", "title": "CubeWave", "description": "A grid of instanced cubes riding a radial wave, blending --accent troughs into --primary crests." }, { "name": "iso-city", "type": "registry:ui", "title": "IsoCity", "description": "A procedural isometric skyline rotating under fog, with a few towers pulsing in --primary." }, { "name": "warp-tunnel", "type": "registry:ui", "title": "WarpTunnel", "description": "Hyperspace star streaks racing past the camera, from --foreground heads to --primary tails." }, { "name": "phyllotaxis", "type": "registry:ui", "title": "Phyllotaxis", "description": "A sunflower-style bloom of instanced petals placed by the golden angle, breathing from --primary at the core to --accent at the rim." }, { "name": "strange-attractor", "type": "registry:ui", "title": "StrangeAttractor", "description": "The Aizawa attractor integrated live into one glowing orbit that never repeats, colored --primary to --accent with a sweeping head." }, { "name": "curl-flow", "type": "registry:ui", "title": "CurlFlow", "description": "Particles advected through a divergence-free curl-noise field into silky filaments, tinted --accent to --primary by height." }, { "name": "cloth", "type": "registry:ui", "title": "Cloth", "description": "A real spring-mass cloth (Verlet) hanging from its top edge and rippling under procedural wind, with the theme woven --primary to --accent." }, { "name": "boids", "type": "registry:ui", "title": "Boids", "description": "A living flock steering by separation, alignment and cohesion; each agent tints --accent when slow to --primary at full speed." }, { "name": "voronoi-shatter", "type": "registry:ui", "title": "VoronoiShatter", "description": "A sphere fractured into Voronoi shards that drift apart and snap back together, each facet shading --accent to --primary by height." }, { "name": "tesseract", "type": "registry:ui", "title": "Tesseract", "description": "A 4D hypercube in double rotation projected into 3D — the inner cell endlessly swells through the outer, struts shading --accent to --primary by 4D depth." }, { "name": "pendulum-wave", "type": "registry:ui", "title": "PendulumWave", "description": "A row of pendulums with stepped periods drifting into snakes, arches and chaos before snapping back in phase, bobs tinted --accent to --primary across the swin…" }, { "name": "pitch-momentum", "type": "registry:ui", "title": "PitchMomentum", "description": "A soccer pitch of dots where two rival particle mountains surge and clash as momentum swings, crests whitening where the fronts collide." }, { "name": "world-cup", "type": "registry:ui", "title": "WorldCup", "description": "The World Cup trophy modeled procedurally: two sculpted figures with raised arms lift a continent-embossed globe above a green-banded base, turning under studi…" } ], "component_count": 28, "components_truncated": false, "component_types": { "registry:ui": 28 }, "logo": "", "preview_image": "https://threecn.dev/og?title=3D+scenes+for+shadcn%2Fui.&subtitle=Copy-paste+React+Three+Fiber+scenes+that+adapt+to+your+shadcn+theme.", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [], "featured": false }, { "number": 353, "name": "@tile-ui", "category": "Charts/data viz", "tags": [ "auth", "buttons", "cards", "charts", "dashboard", "design-system", "forms", "hooks", "loaders", "media", "navigation", "overlays", "pro-available", "tables", "theming" ], "tagline": "A lightweight React component library built around a shared SCSS design system and distributed as editable source through the shadcn CLI.", "short_description": "", "description": "A lightweight React component library built around a shared SCSS design system and distributed as editable source through the shadcn CLI.", "framework": "react", "homepage": "https://github.com/zmide/tile-ui", "docs": "https://docs.github.com/", "github": "https://github.com/zmide/tile-ui", "components_github": null, "github_default_branch": "master", "github_stars": 2, "last_commit": "2026-09-05T11:52:07Z", "archived": false, "license": "MIT", "open_issues": 0, "registry_template": "https://react.tileui.zmorg.cn/r/{name}.json", "registry_index": "https://react.tileui.zmorg.cn/r/registry.json", "components": [ "liveline-core", "core", "utils", "portal", "styles", "theme-default", "use-copy-to-clipboard", "use-media-query", "use-local-storage", "button", "input", "textarea", "label", "card", "badge", "skeleton", "kbd", "separator", "table", "progress", "avatar", "switch", "checkbox", "collapsible", "breadcrumb", "pagination", "alert", "aspect-ratio", "spinner", "empty", "marker", "item", "button-group", "input-group", "native-select", "field", "toggle", "toggle-group", "tabs", "accordion", "radio-group", "slider", "scroll-area", "tooltip", "popover", "hover-card", "dialog", "alert-dialog", "sheet", "dropdown-menu", "context-menu", "menubar", "navigation-menu", "select", "combobox", "command", "chart", "calendar", "drawer", "form", "sidebar", "carousel", "resizable", "attachment", "bubble", "direction", "message", "message-scroller", "sonner", "input-otp", "liveline" ], "component_items": [ { "name": "liveline-core", "type": "registry:lib", "title": "Liveline Core", "description": "Framework-independent canvas engine, drawing, and math modules for Liveline." }, { "name": "core", "type": "registry:lib", "title": "Core", "description": "Registry runtime helpers for React Tile UI items." }, { "name": "utils", "type": "registry:lib", "title": "Utils", "description": "Shared utility helpers for Tile UI registries." }, { "name": "portal", "type": "registry:lib", "title": "Portal", "description": "Shared portal container provider and hook for React Tile UI overlays." }, { "name": "styles", "type": "registry:style", "title": "Styles", "description": "Tile UI runtime extensions and shared Sass dependencies." }, { "name": "theme-default", "type": "registry:theme", "title": "Default Theme", "description": "Optional Tile UI default palette and runtime token theme." }, { "name": "use-copy-to-clipboard", "type": "registry:hook", "title": "useCopyToClipboard", "description": "React hook for clipboard copy interactions." }, { "name": "use-media-query", "type": "registry:hook", "title": "useMediaQuery", "description": "React hook for viewport and media query state." }, { "name": "use-local-storage", "type": "registry:hook", "title": "useLocalStorage", "description": "React hook for local and session storage state." }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "Multi-variant React button component for Tile UI." }, { "name": "input", "type": "registry:ui", "title": "Input", "description": "Accessible React input component for Tile UI." }, { "name": "textarea", "type": "registry:ui", "title": "Textarea", "description": "Accessible React textarea component for Tile UI." }, { "name": "label", "type": "registry:ui", "title": "Label", "description": "React label primitive for Tile UI forms." }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "Composable React card primitives for Tile UI." }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "Multi-variant React badge component for Tile UI." }, { "name": "skeleton", "type": "registry:ui", "title": "Skeleton", "description": "Loading placeholder React component for Tile UI." }, { "name": "kbd", "type": "registry:ui", "title": "Kbd", "description": "Keyboard key display primitives for Tile UI." }, { "name": "separator", "type": "registry:ui", "title": "Separator", "description": "Horizontal or vertical divider component for Tile UI." }, { "name": "table", "type": "registry:ui", "title": "Table", "description": "Composable React table primitives for Tile UI." }, { "name": "progress", "type": "registry:ui", "title": "Progress", "description": "Progress bar component for Tile UI." }, { "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "User avatar primitives with image fallback for Tile UI." }, { "name": "switch", "type": "registry:ui", "title": "Switch", "description": "Accessible toggle switch component for Tile UI." }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "Accessible checkbox with indeterminate state for Tile UI." }, { "name": "collapsible", "type": "registry:ui", "title": "Collapsible", "description": "Accessible collapsible content component for Tile UI." }, { "name": "breadcrumb", "type": "registry:ui", "title": "Breadcrumb", "description": "Navigation breadcrumb primitives for Tile UI." }, { "name": "pagination", "type": "registry:ui", "title": "Pagination", "description": "Navigation pagination primitives for Tile UI." }, { "name": "alert", "type": "registry:ui", "title": "Alert", "description": "Alert banner primitives for Tile UI." }, { "name": "aspect-ratio", "type": "registry:ui", "title": "Aspect Ratio", "description": "Fixed-ratio content container for Tile UI." }, { "name": "spinner", "type": "registry:ui", "title": "Spinner", "description": "Loading spinner component for Tile UI." }, { "name": "empty", "type": "registry:ui", "title": "Empty", "description": "Empty state primitives for Tile UI." }, { "name": "marker", "type": "registry:ui", "title": "Marker", "description": "Status marker component for Tile UI." }, { "name": "item", "type": "registry:ui", "title": "Item", "description": "Composable list item primitives for Tile UI." }, { "name": "button-group", "type": "registry:ui", "title": "Button Group", "description": "Grouped button container for Tile UI." }, { "name": "input-group", "type": "registry:ui", "title": "Input Group", "description": "Composable input group primitives for Tile UI." }, { "name": "native-select", "type": "registry:ui", "title": "Native Select", "description": "Native select with custom chevron for Tile UI." }, { "name": "field", "type": "registry:ui", "title": "Field", "description": "Field label/description/message wrapper for Tile UI." }, { "name": "toggle", "type": "registry:ui", "title": "Toggle", "description": "Toggle button with pressed state for Tile UI." }, { "name": "toggle-group", "type": "registry:ui", "title": "Toggle Group", "description": "Grouped toggle buttons for Tile UI." }, { "name": "tabs", "type": "registry:ui", "title": "Tabs", "description": "Tabs navigation primitives for Tile UI." }, { "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "Collapsible accordion for Tile UI." }, { "name": "radio-group", "type": "registry:ui", "title": "Radio Group", "description": "Radio group selection for Tile UI." }, { "name": "slider", "type": "registry:ui", "title": "Slider", "description": "Slider control for Tile UI." }, { "name": "scroll-area", "type": "registry:ui", "title": "Scroll Area", "description": "Custom scroll area for Tile UI." }, { "name": "tooltip", "type": "registry:ui", "title": "Tooltip", "description": "Tooltip overlay for Tile UI." }, { "name": "popover", "type": "registry:ui", "title": "Popover", "description": "Popover overlay for Tile UI." }, { "name": "hover-card", "type": "registry:ui", "title": "Hover Card", "description": "Hover card overlay for Tile UI." }, { "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "Modal dialog for Tile UI." }, { "name": "alert-dialog", "type": "registry:ui", "title": "Alert Dialog", "description": "Alert dialog for Tile UI." }, { "name": "sheet", "type": "registry:ui", "title": "Sheet", "description": "Side sheet overlay for Tile UI." }, { "name": "dropdown-menu", "type": "registry:ui", "title": "Dropdown Menu", "description": "Dropdown menu with checkbox and radio items for Tile UI." }, { "name": "context-menu", "type": "registry:ui", "title": "Context Menu", "description": "Right-click context menu for Tile UI." }, { "name": "menubar", "type": "registry:ui", "title": "Menubar", "description": "Horizontal menu bar for Tile UI." }, { "name": "navigation-menu", "type": "registry:ui", "title": "Navigation Menu", "description": "Navigation menu with viewport for Tile UI." }, { "name": "select", "type": "registry:ui", "title": "Select", "description": "Custom select dropdown for Tile UI." }, { "name": "combobox", "type": "registry:ui", "title": "Combobox", "description": "Searchable combobox for Tile UI." }, { "name": "command", "type": "registry:ui", "title": "Command", "description": "Command palette primitives for Tile UI." }, { "name": "chart", "type": "registry:ui", "title": "Chart", "description": "Chart primitives for Tile UI." }, { "name": "calendar", "type": "registry:ui", "title": "Calendar", "description": "Calendar component for Tile UI." }, { "name": "drawer", "type": "registry:ui", "title": "Drawer", "description": "Drawer overlay for Tile UI." }, { "name": "form", "type": "registry:ui", "title": "Form", "description": "Form primitives for Tile UI." }, { "name": "sidebar", "type": "registry:ui", "title": "Sidebar", "description": "Sidebar layout for Tile UI." }, { "name": "carousel", "type": "registry:ui", "title": "Carousel", "description": "Carousel component for Tile UI." }, { "name": "resizable", "type": "registry:ui", "title": "Resizable", "description": "Resizable panel group for Tile UI." }, { "name": "attachment", "type": "registry:ui", "title": "Attachment", "description": "Attachment primitives for Tile UI." }, { "name": "bubble", "type": "registry:ui", "title": "Bubble", "description": "Bubble chat primitives for Tile UI." }, { "name": "direction", "type": "registry:ui", "title": "Direction", "description": "Direction provider for Tile UI." }, { "name": "message", "type": "registry:ui", "title": "Message", "description": "Message primitives for Tile UI." }, { "name": "message-scroller", "type": "registry:ui", "title": "Message Scroller", "description": "Message scroller for Tile UI." }, { "name": "sonner", "type": "registry:ui", "title": "Sonner", "description": "Toast notifications for Tile UI." }, { "name": "input-otp", "type": "registry:ui", "title": "Input OTP", "description": "One-time password input for Tile UI." }, { "name": "liveline", "type": "registry:ui", "title": "Liveline", "description": "Real-time React canvas chart with line, multi-series, candlestick, and market-data modes." } ], "component_count": 71, "components_truncated": false, "component_types": { "registry:lib": 4, "registry:style": 1, "registry:theme": 1, "registry:hook": 3, "registry:ui": 62 }, "logo": "", "preview_image": "https://opengraph.githubassets.com/55388562f08283c11bbef363a4c69d4ffe42628bdb41ba06d1b9e22706f823f6/zmide/tile-ui", "pro": { "has_pro": true, "pro_url": null, "pricing_url": "https://github.com/enterprise/premium-support" }, "enrichment_errors": [], "featured": false }, { "number": 354, "name": "@vllnt-ui", "category": "AI/chat UI", "tags": [ "accessibility", "ai", "design-system", "hooks" ], "tagline": "VLLNT UI — agent-first React components for AI-native products, from UI primitives to finance and ops domains. Accessible, Radix + Tailwind, you own the code.", "short_description": "", "description": "VLLNT UI — agent-first React components for AI-native products, from UI primitives to finance and ops domains. Accessible, Radix + Tailwind, you own the code.", "framework": "react", "homepage": "https://ui.vllnt.com", "docs": null, "github": null, "components_github": null, "github_default_branch": null, "github_stars": null, "last_commit": null, "archived": false, "license": null, "open_issues": null, "registry_template": "https://ui.vllnt.com/r/{name}.json", "registry_index": null, "components": [], "component_items": [], "component_count": null, "components_truncated": false, "component_types": {}, "logo": "VLLNT", "preview_image": null, "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [ "registry_index_unresolved", "docs_unresolved", "github_unresolved" ], "featured": false }, { "number": 355, "name": "@voraui", "category": "Charts/data viz", "tags": [ "charts", "crypto" ], "tagline": "Open source crypto market analytics components for shadcn/ui - candlestick trading charts, BTC rainbow chart, Fear & Greed and Altseason gauges, live from free public APIs.", "short_description": "", "description": "Open source crypto market analytics components for shadcn/ui - candlestick trading charts, BTC rainbow chart, Fear & Greed and Altseason gauges, live from free public APIs.", "framework": "react", "homepage": "https://voraui.vercel.app", "docs": "https://voraui.vercel.app/docs", "github": "https://github.com/josealbertoruizr/voraui", "components_github": "https://github.com/josealbertoruizr/voraui/tree/main/registry", "github_default_branch": "main", "github_stars": 3, "last_commit": "2026-07-25T16:41:18Z", "archived": false, "license": "MIT", "open_issues": 0, "registry_template": "https://voraui.vercel.app/r/{name}.json", "registry_index": "https://voraui.vercel.app/r/registry.json", "components": [ "fear-greed-gauge", "altseason-gauge", "btc-rainbow-chart", "trading-chart" ], "component_items": [ { "name": "fear-greed-gauge", "type": "registry:block", "title": "Fear & Greed Gauge", "description": "Crypto Fear & Greed index dial with live data from alternative.me." }, { "name": "altseason-gauge", "type": "registry:block", "title": "Altseason Gauge", "description": "Altcoin Season index gauge computed client-side from CoinPaprika data." }, { "name": "btc-rainbow-chart", "type": "registry:block", "title": "BTC Rainbow Chart", "description": "Bitcoin rainbow log-regression chart with Binance history and a bundled 2010-2017 seed." }, { "name": "trading-chart", "type": "registry:block", "title": "Trading Chart", "description": "Candlestick chart with trade markers, clustering, and live Binance updates." } ], "component_count": 4, "components_truncated": false, "component_types": { "registry:block": 4 }, "logo": "", "preview_image": "https://voraui.vercel.app/opengraph-image?c7857195646595d4", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [], "featured": false }, { "number": 356, "name": "@grainly-icons", "category": "Animated components", "tags": [ "animation", "icons" ], "tagline": "Animated grainy icons", "short_description": "", "description": "Animated grainy icons", "framework": "react", "homepage": "https://grainlyicons.abhii.space", "docs": null, "github": "https://github.com/abhix4/grainly-icons", "components_github": "https://github.com/abhix4/grainly-icons/tree/main/components", "github_default_branch": "main", "github_stars": 2, "last_commit": "2026-07-17T14:46:08Z", "archived": false, "license": null, "open_issues": 0, "registry_template": "https://grainlyicons.abhii.space/r/{name}.json", "registry_index": null, "components": [], "component_items": [], "component_count": null, "components_truncated": false, "component_types": {}, "logo": "", "preview_image": null, "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [ "registry_index_unresolved", "docs_unresolved" ], "featured": false }, { "number": 357, "name": "@shadcnloaders", "category": "Animated components", "tags": [ "animation", "loaders" ], "tagline": "A public registry of shadcn-inspired animated loaders and loading states.", "short_description": "", "description": "A public registry of shadcn-inspired animated loaders and loading states.", "framework": "react", "homepage": "https://shadcn-loaders.vercel.app", "docs": null, "github": null, "components_github": null, "github_default_branch": null, "github_stars": null, "last_commit": null, "archived": false, "license": null, "open_issues": null, "registry_template": "https://shadcn-loaders.vercel.app/r/{name}.json", "registry_index": "https://shadcn-loaders.vercel.app/r/registry.json", "components": [ "loader" ], "component_items": [ { "name": "loader", "type": "registry:ui", "title": "Loader", "description": "A single flexible loading spinner component with 42 built-in animated variants (spinner, dots, bars, skeleton, DNA, matrix, atom, solar system, radar sweep and…" } ], "component_count": 1, "components_truncated": false, "component_types": { "registry:ui": 1 }, "logo": "", "preview_image": "https://shadcnloaders.com/image.png", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [ "docs_unresolved", "github_unresolved" ], "featured": false }, { "number": 358, "name": "@shadcn-dashboard", "category": "AI/chat UI", "tags": [ "accessibility", "ai", "auth", "blocks", "cards", "charts", "dashboard", "e-commerce", "forms", "hooks", "maps", "media", "overlays", "payments", "pro-available" ], "tagline": "Shadcn Dashboard is a collection of modern, production-ready dashboard layouts, components, and UI patterns built on top of shadcn/ui and Tailwind CSS. It’s designed to help developers build clean, scalable, and data-driven dashboards faster—without compromising on performance, accessibility, or customization.", "short_description": "", "description": "Shadcn Dashboard is a collection of modern, production-ready dashboard layouts, components, and UI patterns built on top of shadcn/ui and Tailwind CSS. It’s designed to help developers build clean, scalable, and data-driven dashboards faster—without compromising on performance, accessibility, or customization.", "framework": "react", "homepage": "https://shadcndashboard.dev", "docs": "https://shadcndashboard.dev/docs", "github": "https://github.com/shadcndashboard/shadcndashboard", "components_github": "https://github.com/shadcndashboard/shadcndashboard/tree/main/src/components", "github_default_branch": "main", "github_stars": 206, "last_commit": "2026-07-24T12:38:48Z", "archived": false, "license": "MIT", "open_issues": 0, "registry_template": "https://shadcndashboard.dev/r/{name}.json", "registry_index": "https://shadcndashboard.dev/r/registry.json", "components": [ "product-card", "ecommerce-action-card", "total-assets-card", "campaign-performance-card", "total-sales-card", "latest-products-card", "integrations-showcase-card", "contributor-groups-card", "revenue-growth-card", "product-carousel-card", "ai-assistant-card", "upcoming-events-card", "upcoming-appointments-card", "doctor-performance-card", "health-banner", "school-banner", "sales-trend-chart", "total-orders-chart", "sales-overview-chart", "customers-segmentation-chart", "sales-distribution-chart", "saas-metrics-chart", "platform-revenue-chart", "revenue-distribution-chart", "key-insights-chart", "monthly-sales-chart", "revenue-growth-chart", "order-overview-chart", "user-activity-chart", "total-assets-chart", "total-sales-chart", "total-profit-chart", "advertisement-cost-chart", "attendance-overview-chart", "fees-paid-chart", "fees-pending-chart", "grade-distribution-chart", "staff-salary-chart", "bed-occupancy-chart", "school-admissions-chart", "weekly-engagement-chart", "traffic-sources-chart", "freight-volume-sla-chart", "warehouse-capacity-chart", "vehicle-overview-chart", "revenue-trend-mask-chart", "order-channel-distribution-chart", "customer-ratings-chart", "customer-growth-chart", "products-category-chart", "total-sales-comparison-chart", "payments-breakdown-chart", "annual-profit-chart", "sales-report-chart", "weekly-sales-chart", "revenue-updates-chart", "monthly-earnings-chart", "yearly-breakup-chart", "weekly-stats-chart", "sales-locations-chart", "sales-overview-summary-chart", "earning-report-chart", "greeting-banner", "update-banner", "analytics-banner", "logistics-banner", "pos-banner", "driver-list-card", "pos-stat-cards", "top-selling-items-card", "recent-payments-card", "sales-growth-summary-card", "latest-deal-card", "course-widget-card", "selling-products-card", "activity-timeline-card", "user-greeting-card", "small-stat-cards", "upcoming-schedules-card", "recent-transactions-card", "analytics-statistics-card", "sales-by-country-card", "ai-ops-overview", "hospital-ai-ops", "agent-ai-ops", "login-block-1", "login-block-2", "login-block-3", "login-block-4", "login-block-5", "login-block-6", "login-block-7", "signup-01", "signup-02", "signup-03", "signup-04", "signup-05", "signup-06", "signup-07", "otp-01", "otp-02", "otp-03", "otp-04", "otp-05", "otp-06", "otp-07", "forgot-password-01", "forgot-password-02", "forgot-password-03", "forgot-password-04", "forgot-password-05", "forgot-password-06", "forgot-password-07", "multi-step-form-01", "multi-step-form-02", "multi-step-form-03", "multi-step-form-04", "multi-step-form-05", "multi-step-form-06", "dashboard-layout-01", "dashboard-layout-02", "dashboard-layout-03", "application-shell-01", "application-shell-02", "table-01", "table-02", "table-03", "table-04", "table-05", "table-06", "table-07", "table-08", "table-09", "table-10", "table-11", "table-12", "table-13", "table-14", "table-15", "table-16", "table-17", "table-18", "forms-01", "forms-02", "forms-03", "forms-04", "forms-05", "forms-06", "forms-07", "forms-08", "forms-09", "datatable-01", "datatable-02", "datatable-03", "datatable-04", "datatable-05", "datatable-06", "datatable-07", "datatable-08", "datatable-09", "datatable-10", "datatable-11", "datatable-12", "datatable-13", "sidebar-01", "sidebar-02", "sidebar-03", "sidebar-04", "sidebar-05", "sidebar-06", "sidebar-07", "sidebar-08", "sidebar-09", "sidebar-10", "no-data-empty-state", "no-search-results", "empty-chart-card", "connect-data-empty-state", "launch-team-workspace-empty-state", "usage-reports-empty-state", "dashboard-footer-1", "dashboard-footer-2", "dashboard-footer-3", "account-setting-1", "account-setting-2", "kanban-application-01", "kanban-application-02", "dashboard-shell-01", "dashboard-shell-02", "dashboard-shell-03", "dashboard-shell-04", "dashboard-shell-05", "dashboard-shell-06", "dashboard-shell-07", "dashboard-shell-08", "ai-chat-01", "ai-chat-02", "ai-chat-03", "ai-chat-04", "ai-chat-05", "animated-list-01", "animated-list-02", "animated-list-03", "accordion-01", "accordion-02", "accordion-03", "accordion-04", "accordion-05", "accordion-06", "accordion-07", "avatar-01", "avatar-02", "avatar-03", "avatar-04", "avatar-05", "avatar-06", "avatar-07", "avatar-08", "button-01", "button-02", "button-03", "button-04", "button-05", "button-06", "button-07", "button-08", "button-09", "button-10", "button-11", "button-12", "button-13", "button-14", "button-15", "button-16", "button-17", "button-18", "button-19", "badge-01", "badge-02", "badge-03", "badge-04", "badge-05", "badge-06", "badge-07", "badge-08", "badge-09", "calendar-01", "calendar-02", "calendar-03", "calendar-04", "calendar-05", "calendar-06", "calendar-07", "calendar-08", "calendar-09", "calendar-10", "calendar-11", "calendar-12", "calendar-13", "calendar-14", "calendar-15", "tooltip-01", "tooltip-02", "tooltip-03", "tooltip-04", "tooltip-05", "tooltip-06", "tooltip-07", "animated-text-01", "animated-text-02", "animated-text-03", "animated-text-04", "animated-text-05", "input-01", "input-02", "input-03", "input-04", "input-05", "input-06", "input-07", "input-08", "input-09", "input-10", "input-11", "input-12", "input-13", "input-14", "input-15", "input-16", "input-17", "input-18", "input-19", "textarea-01", "textarea-02", "textarea-03", "textarea-04", "textarea-05", "textarea-06", "textarea-07", "textarea-08", "textarea-09", "select-01", "select-02", "select-03", "select-04", "select-05", "select-06", "select-07", "select-08", "select-09", "checkbox-01", "checkbox-02", "checkbox-03", "checkbox-04", "checkbox-05", "checkbox-06", "checkbox-07", "checkbox-08", "checkbox-09", "radio-group-01", "radio-group-02", "radio-group-03", "radio-group-04", "radio-group-05", "radio-group-06", "switch-01", "switch-02", "switch-03", "switch-04", "switch-05", "switch-06", "tabs-01", "tabs-02", "tabs-03", "tabs-04", "tabs-05", "tabs-06", "tabs-07", "area-chart-01", "area-chart-02", "area-chart-03", "area-chart-04", "area-chart-05", "area-chart-06", "area-chart-07", "bar-chart-01", "bar-chart-03", "bar-chart-06", "bar-chart-07", "bar-chart-02", "bar-chart-04", "bar-chart-05", "line-chart-02", "line-chart-03", "line-chart-01", "line-chart-04", "pie-chart-03", "pie-chart-04", "pie-chart-05", "pie-chart-01", "pie-chart-02", "radar-chart-01", "radar-chart-02", "radar-chart-03", "radar-chart-04", "radar-chart-05", "radar-chart-06", "radial-chart-01", "radial-chart-02", "radial-chart-03", "radial-chart-04", "radial-chart-05", "button-group-01", "button-group-02", "button-group-03", "button-group-04", "button-group-05", "button-group-06", "file-upload-01", "input-mask-01", "input-mask-02", "input-mask-03", "number-ticker-01", "number-ticker-02", "number-ticker-03", "number-ticker-04", "number-ticker-05", "pagination-01", "pagination-02", "pagination-03", "popover-01", "popover-02", "popover-03", "popover-04", "popover-05", "popover-06", "scroll-area-01", "scroll-area-02", "scroll-area-03", "shine-border-01" ], "component_items": [ { "name": "product-card", "type": "registry:block", "title": "Card 01 - Product Card", "description": "Display products with weekly sales, new users, & purchased orders in a clean card layout. Suitable for ecommerce stores, product catalogs, and marketplace dash…" }, { "name": "ecommerce-action-card", "type": "registry:block", "title": "Card 02 - Ecommerce Action Card", "description": "Highlight key shopping actions like orders, shipped orders, revenue, or ratings in a compact card. Fits ecommerce dashboards where users need quick access to c…" }, { "name": "total-assets-card", "type": "registry:block", "title": "Card 03 - Total Assets Card", "description": "Present total assets with supporting metrics like employees, projects, clients, and events in a simple overview card. Useful for finance, investment, crypto, a…" }, { "name": "campaign-performance-card", "type": "registry:block", "title": "Card 04 - Campaign Performance Card", "description": "Track marketing campaign results with user metrics along with status reports. Great for advertising platforms, growth teams, and marketing analytics." }, { "name": "total-sales-card", "type": "registry:block", "title": "Card 05 - Total Sales Card", "description": "Highlight total sales revenue with a growth percentage badge and a decorative background illustration. Ideal for ecommerce dashboards that need an eye-catching…" }, { "name": "latest-products-card", "type": "registry:block", "title": "Card 06 - Latest Products Card", "description": "List recently added products with thumbnail, name, buyer count, and price inside a scrollable card. Useful for ecommerce dashboards tracking new product activi…" }, { "name": "integrations-showcase-card", "type": "registry:block", "title": "Card 07 - Integrations Showcase Card", "description": "Showcase connected third-party integrations like Figma, Claude, and cloud storage with an icon and description grid. Great for settings pages and integration m…" }, { "name": "contributor-groups-card", "type": "registry:block", "title": "Card 08 - Contributor Groups Card", "description": "Group contributors, affiliates, and infrastructure partners with tooltip-labeled icons and a call-to-action button. Suited for about pages, changelogs, and par…" }, { "name": "revenue-growth-card", "type": "registry:block", "title": "Card 09 - Revenue Growth Card", "description": "Show a headline revenue growth percentage with a month-over-month comparison in a compact card. Fits finance and sales dashboards that need a quick trend indic…" }, { "name": "product-carousel-card", "type": "registry:block", "title": "Card 10 - Product Carousel Card", "description": "Auto-playing product image carousel with progress dots and a call-to-action overlay. Great for ecommerce dashboards promoting featured products or premium plan…" }, { "name": "ai-assistant-card", "type": "registry:block", "title": "Card 11 - AI Assistant Card", "description": "An Ask AI panel with provider tabs for Claude, ChatGPT, and Gemini, quick feature shortcuts, and a chat input. Ideal for AI-powered dashboards and copilots." }, { "name": "upcoming-events-card", "type": "registry:block", "title": "Card 12 - Upcoming Events Card", "description": "List upcoming events with date, time, and type badges in a clean bordered card. Suitable for education platforms, school portals, and event calendars." }, { "name": "upcoming-appointments-card", "type": "registry:block", "title": "Card 13 - Upcoming Appointments Card", "description": "Display a patient appointment schedule with avatars, doctor names, times, and type badges. Built for healthcare portals and clinic dashboards." }, { "name": "doctor-performance-card", "type": "registry:block", "title": "Card 14 - Doctor Performance Card", "description": "Track doctor performance with avatar, specialty, patient count, rating, and availability status in a bordered list card. Suitable for healthcare and clinic das…" }, { "name": "health-banner", "type": "registry:block", "title": "Card 15 - Health Banner", "description": "Track health-related updates with a dropdown monthly & yearly selection report card in a clean banner layout. Suitable for healthcare portals and patient dashb…" }, { "name": "school-banner", "type": "registry:block", "title": "Card 16 - School Banner", "description": "Manage school updates or important notices with dropdown options using this engaging banner section. Great for education platforms, student portals, and LMS." }, { "name": "sales-trend-chart", "type": "registry:block", "title": "Chart 01 - Sales Trend chart", "description": "Track sales performance over time with a clear trend visualization. Useful for monitoring growth, seasonal patterns, and business performance at a glance." }, { "name": "total-orders-chart", "type": "registry:block", "title": "Chart 02 - Total Orders Chart", "description": "Display total sales in an easy-to-read chart for quick business insights. Great for ecommerce dashboards, order management systems, and sales reports." }, { "name": "sales-overview-chart", "type": "registry:block", "title": "Chart 03 - Sales Overview Chart", "description": "View sales data across different dates in a single chart. Helps compare performance, identify trends, and monitor business growth." }, { "name": "customers-segmentation-chart", "type": "registry:block", "title": "Chart 04 - Customers Segmentation Chart", "description": "Group customers into meaningful segments based on selected data. Ideal for marketing dashboards, CRM platforms, and customer analytics." }, { "name": "sales-distribution-chart", "type": "registry:block", "title": "Chart 05 - Sales Distribution Chart", "description": "Understand how sales are distributed across products, categories, and monthly reports. Makes it easier to spot top-performing areas and sales gaps." }, { "name": "saas-metrics-chart", "type": "registry:block", "title": "Chart 06 - SaaS Metrics Chart", "description": "Monitor key SaaS metrics like automations, revenue, or active users. Best for product analytics, startup dashboards, and subscription platforms." }, { "name": "platform-revenue-chart", "type": "registry:block", "title": "Chart 07 - Platform Revenue Chart", "description": "Visualize revenue generated across daily, monthly, and yearly timelines. Useful for tracking business performance and comparing revenue sources." }, { "name": "revenue-distribution-chart", "type": "registry:block", "title": "Chart 08 - Revenue Distribution Chart", "description": "Break down revenue into multiple categories for better financial analysis. Helps teams understand where income is coming from." }, { "name": "key-insights-chart", "type": "registry:block", "title": "Chart 09 - Key Insights Chart", "description": "Highlight important business metrics in a simple, visually organized, region-wise format. Suitable for executive dashboards and quick performance reviews." }, { "name": "monthly-sales-chart", "type": "registry:block", "title": "Chart 10 - Monthly Sales Chart", "description": "Compare monthly sales performance with an easy-to-read chart layout. Helps identify growth trends and seasonal sales changes." }, { "name": "revenue-growth-chart", "type": "registry:block", "title": "Chart 11 - Revenue Growth Chart", "description": "Track revenue growth in percentage with clear visual comparisons. Useful for financial dashboards and business reporting." }, { "name": "order-overview-chart", "type": "registry:block", "title": "Chart 12 - Order Overview Chart", "description": "Summarize order activity in a compact chart with meaningful insights and comparisons. Fits ecommerce dashboards, inventory systems, and sales monitoring tools." }, { "name": "user-activity-chart", "type": "registry:block", "title": "Chart 13 - User Activity Chart", "description": "Visualize user activity and checkouts over time. Perfect for analytics dashboards, SaaS platforms, and community applications." }, { "name": "total-assets-chart", "type": "registry:block", "title": "Chart 14 - Total Assets Chart", "description": "Display total assets in a simple chart for financial monitoring. Suitable for accounting systems, business dashboards, and portfolio tracking." }, { "name": "total-sales-chart", "type": "registry:block", "title": "Chart 15 - Total Sales Chart", "description": "Present total sales figures with a clean visual summary in the chart. Helps teams measure overall sales performance without scanning detailed reports." }, { "name": "total-profit-chart", "type": "registry:block", "title": "Chart 16 - Total Profit Chart", "description": "Monitor profit trends using a chart designed for financial reporting. Useful for evaluating business performance and profitability." }, { "name": "advertisement-cost-chart", "type": "registry:block", "title": "Chart 17 - Advertisement Cost Chart", "description": "Track advertising expenses across campaigns or time periods. Helps marketing teams measure spending and optimize campaign budgets." }, { "name": "attendance-overview-chart", "type": "registry:block", "title": "Chart 18 - Attendance Overview Chart", "description": "Show attendance data in a visual format that is easy to understand, along with time periods. Great for schools, workplaces, and employee management systems." }, { "name": "fees-paid-chart", "type": "registry:block", "title": "Chart 19 - Fees Paid Chart", "description": "Display paid fees with a simple chart for quick financial tracking. Useful for education portals, billing systems, and payment dashboards." }, { "name": "fees-pending-chart", "type": "registry:block", "title": "Chart 20 - Fees Pending Chart", "description": "Monitor outstanding fees with a clear visual overview. Helps administrators identify pending payments and improve collection tracking." }, { "name": "grade-distribution-chart", "type": "registry:block", "title": "Chart 21 - Grade Distribution Chart", "description": "Visualize grade distribution across students or classes in one chart. Suitable for school dashboards, academic reports, and education platforms." }, { "name": "staff-salary-chart", "type": "registry:block", "title": "Chart 22 - Staff Salary Chart", "description": "Present staff salary data with a structured chart for easy comparison. Useful for HR dashboards, payroll systems, and workforce analytics." }, { "name": "bed-occupancy-chart", "type": "registry:block", "title": "Chart 23 - Bed Occupancy Chart", "description": "Track bed occupancy across ICU, Emergency, General Ward, and Pediatric departments with a radial chart and per-department breakdown. Ideal for hospital managem…" }, { "name": "school-admissions-chart", "type": "registry:block", "title": "Chart 24 - School Admissions Chart", "description": "Visualize new admissions vs returning students with a stacked half-circle radial chart and a total student count at a glance. Ideal for school dashboards, educ…" }, { "name": "weekly-engagement-chart", "type": "registry:block", "title": "Chart 25 - Weekly Engagement Chart", "description": "Visualize weekly engagement with a segmented bar chart alongside impressions and engagement totals. Ideal for marketing dashboards, campaign reports, and analy…" }, { "name": "traffic-sources-chart", "type": "registry:block", "title": "Chart 26 - Traffic Sources Chart", "description": "Visualize traffic split across Organic, Paid, and Referral sources with a segmented distribution bar and per-source tooltips. Ideal for marketing dashboards an…" }, { "name": "freight-volume-sla-chart", "type": "registry:block", "title": "Chart 27 - Freight Volume & SLA Performance Chart", "description": "Track freight volume and SLA compliance with a dual-axis area chart, period selector, and animated stat totals. Ideal for logistics and supply chain dashboards." }, { "name": "warehouse-capacity-chart", "type": "registry:block", "title": "Chart 28 - Warehouse Storage Capacity Chart", "description": "Visualize warehouse hub storage utilization with a segmented block bar chart, average utilization banner, and a 2-column regional hub breakdown list. Ideal for…" }, { "name": "vehicle-overview-chart", "type": "registry:block", "title": "Chart 29 - Vehicle Telemetry Overview Chart", "description": "Fleet vehicle distribution overview with a multi-segmented allocation bar and a breakdown list of vehicle types with usage duration and percentage share. Ideal…" }, { "name": "revenue-trend-mask-chart", "type": "registry:block", "title": "Chart 30 - Revenue Trend Mask Chart", "description": "Stacked area chart of daily sales split by channel with a cursor-following highlight mask and a selectable date range. Great for revenue and sales trend dashbo…" }, { "name": "order-channel-distribution-chart", "type": "registry:block", "title": "Chart 31 - Order Channel Distribution Chart", "description": "Interactive donut chart breaking down orders by sales channel with patterned segments, hover highlighting, and a percentage legend. Great for POS and sales cha…" }, { "name": "customer-ratings-chart", "type": "registry:block", "title": "Chart 32 - Customer Ratings Chart", "description": "Guest satisfaction card with a star rating summary, a trend badge, and a daily review-volume bar chart highlighting the peak day. Ideal for feedback and CSAT d…" }, { "name": "customer-growth-chart", "type": "registry:block", "title": "Chart 33 - Customer Growth Chart", "description": "Track weekly customer growth with a headline count, a growth-percentage badge, a compact area chart, and a week-over-week comparison list. Ideal for ecommerce …" }, { "name": "products-category-chart", "type": "registry:block", "title": "Chart 34 - Products Category Chart", "description": "Compare product distribution across years with a headline count, growth badge, donut chart, and a footer profit note. Ideal for ecommerce and inventory dashboa…" }, { "name": "total-sales-comparison-chart", "type": "registry:block", "title": "Chart 35 - Total Sales Comparison Chart", "description": "Compare online vs offline total sales across months with a year selector, headline total, and a growth-percentage badge in a combined bar and line chart. Ideal…" }, { "name": "payments-breakdown-chart", "type": "registry:block", "title": "Chart 36 - Payments Breakdown Chart", "description": "Track payment volume across the week with a headline count, growth badge, stacked bar chart, and a Paypal vs Credit/Debit Card legend split. Ideal for ecommerc…" }, { "name": "annual-profit-chart", "type": "registry:block", "title": "Chart 37 - Annual Profit Chart", "description": "Track annual profit with a conversion rate banner, area chart trend, and a breakdown of cart, wishlist, and checkout metrics. Ideal for ecommerce and sales das…" }, { "name": "sales-report-chart", "type": "registry:block", "title": "Chart 38 - Sales Report Chart", "description": "Toggle between profit and expenses views with a tabbed header, sales-this-year and last-year summary stats, and an area chart or bar chart trend. Ideal for fin…" }, { "name": "weekly-sales-chart", "type": "registry:block", "title": "Chart 39 - Weekly Sales Chart", "description": "Track weekly sales with a dropdown period selector, a headline total with a growth-percentage badge, and a rounded bar chart with a highlighted day and custom …" }, { "name": "revenue-updates-chart", "type": "registry:block", "title": "Chart 40 - Revenue Updates Chart", "description": "Revenue updates chart with a year selector, a stacked earnings/expense bar chart, and a summary panel with total earnings, this month's earnings and expense, a…" }, { "name": "monthly-earnings-chart", "type": "registry:block", "title": "Chart 41 - Monthly Earnings Chart", "description": "Compact monthly earnings card with a headline value, growth-percentage badge, and a sparkline area chart. Ideal for dashboard overview widgets." }, { "name": "yearly-breakup-chart", "type": "registry:block", "title": "Chart 42 - Yearly Breakup Chart", "description": "Yearly revenue breakup card with a headline value, growth-percentage badge, year legend, and a donut pie chart. Ideal for finance and admin dashboards." }, { "name": "weekly-stats-chart", "type": "registry:block", "title": "Chart 43 - Weekly Stats Chart", "description": "Weekly stats card with an average sales area chart and a ranked list of top sales, best seller, and most commented entries with icons and record badges. Ideal …" }, { "name": "sales-locations-chart", "type": "registry:block", "title": "Chart 44 - Sales Locations Chart", "description": "Sales from locations chart comparing USA and India monthly sales with a stacked bar chart, legend, and tooltip. Ideal for sales and ecommerce dashboards." }, { "name": "sales-overview-summary-chart", "type": "registry:block", "title": "Chart 45 - Sales Overview Summary Chart", "description": "Sales overview chart with a headline total, growth-percentage badge, an earning/profit/expense legend, and a single-hue stacked bar chart. Ideal for sales and …" }, { "name": "earning-report-chart", "type": "registry:block", "title": "Chart 46 - Earning Report Chart", "description": "Earning reports donut chart with a centered total label, plus a customer segment breakdown showing share, earnings, and growth-percentage badges. Ideal for fin…" }, { "name": "greeting-banner", "type": "registry:block", "title": "Card 17 - Greeting Banner", "description": "Welcome users with a personalized message and highlight important messages with a CTA button. Perfect for dashboard homepages and employee or customer portals." }, { "name": "update-banner", "type": "registry:block", "title": "Card 18 - Update Banner", "description": "Notify users about new features or any updates in a clear card block along with a CTA button. Helps improve product communication without interrupting the UX." }, { "name": "analytics-banner", "type": "registry:block", "title": "Card 19 - Analytics Banner", "description": "Showcase important business metrics with a date picker & monthly, yearly dropdowns in a visually engaging analytics banner. Useful for reporting insights." }, { "name": "logistics-banner", "type": "registry:block", "title": "Card 20 - Logistics Banner", "description": "Logistics & supply chain command banner with fleet SLA badge and region dropdown selection. Suitable for logistics, fleet management, and supply chain dashboar…" }, { "name": "pos-banner", "type": "registry:block", "title": "Card 21 - POS Banner", "description": "Restaurant POS terminal banner with shift status badge, live kitchen connection indicator, and sync status. Suitable for point-of-sale and restaurant dashboard…" }, { "name": "driver-list-card", "type": "registry:block", "title": "Card 22 - Driver List Card", "description": "Scrollable active fleet drivers list with avatar, vehicle, status badge, and rating in a bordered card. Suitable for logistics and fleet management dashboards." }, { "name": "pos-stat-cards", "type": "registry:block", "title": "Card 23 - POS Stat Cards", "description": "Restaurant POS analytics grid with a top taste picks highlight card and gross sales, orders, table occupancy, and average check stat cards with trend badges. S…" }, { "name": "top-selling-items-card", "type": "registry:block", "title": "Card 24 - Top Selling Items Card", "description": "Top selling dishes list with item image, category, revenue, and order count, plus a dropdown menu for menu actions. Suitable for POS and restaurant dashboards." }, { "name": "recent-payments-card", "type": "registry:block", "title": "Card 25 - Recent Payments Card", "description": "POS payment transactions list with payment method icon, order reference, terminal, and amount trend indicator, plus a dropdown menu for settlement actions. Sui…" }, { "name": "sales-growth-summary-card", "type": "registry:block", "title": "Card 26 - Sales Growth Summary Card", "description": "Celebrate a sales milestone with a personalized greeting, growth percentage, and a quick breakdown of orders, deliveries, and revenue. Ideal for ecommerce and …" }, { "name": "latest-deal-card", "type": "registry:block", "title": "Card 27 - Latest Deal Card", "description": "Track a deal's progress toward its target with a progress bar, coupons-used count, and a stack of recent purchaser avatars. Ideal for ecommerce and promotions …" }, { "name": "course-widget-card", "type": "registry:block", "title": "Card 28 - Course Widget Card", "description": "Promote a course or webinar with a cover image, title, description, and a stack of enrolled participant avatars. Ideal for education platforms and community da…" }, { "name": "selling-products-card", "type": "registry:block", "title": "Card 29 - Best Selling Products Card", "description": "Highlight best-selling products with a decorative background illustration and a per-product price and sales-percentage progress bar. Ideal for ecommerce and ma…" }, { "name": "activity-timeline-card", "type": "registry:block", "title": "Card 30 - Activity Timeline Card", "description": "Display a chronological log of daily activities with timestamps, a connected dot timeline, and optional linked references. Ideal for admin, sales, and finance …" }, { "name": "user-greeting-card", "type": "registry:block", "title": "Card 31 - User Greeting Card", "description": "Personalized welcome banner with a greeting, subtitle, quick stat breakdown, and a decorative background illustration. Ideal for dashboard homepages and CRM ov…" }, { "name": "small-stat-cards", "type": "registry:block", "title": "Card 32 - Small Stat Cards", "description": "A row of three compact stat cards showing refunds, sales, and earnings with an icon, value, and trend percentage badge. Ideal for dashboard overview sections." }, { "name": "upcoming-schedules-card", "type": "registry:block", "title": "Card 33 - Upcoming Schedules Card", "description": "Upcoming corporate events card with tabbed filtering (All, Delivered, Shipping), a dropdown menu, and event entries showing freight name, ID, HQ, and destinati…" }, { "name": "recent-transactions-card", "type": "registry:block", "title": "Card 34 - Recent Transactions Card", "description": "Recent transactions list card with payment method icons, descriptions, transaction amounts, a dropdown menu, and a view full report button. Ideal for finance a…" }, { "name": "analytics-statistics-card", "type": "registry:block", "title": "Card 35 - Analytics Statistics Card", "description": "Analytics dashboard statistics layout with a main earnings/expense summary card featuring a background illustration, plus weekly sales and purchase orders stat…" }, { "name": "sales-by-country-card", "type": "registry:block", "title": "Card 36 - Sales by Country Card", "description": "Sales by country list card with flag icons, revenue figures, country names, a dropdown menu, and growth-percentage badges. Ideal for sales and finance dashboar…" }, { "name": "ai-ops-overview", "type": "registry:block", "title": "AI Ops 01 - Token Routing Console", "description": "A token routing console for LLM control planes — model priority and budget guardrail stats, a per-model token usage & spend routing list with priority ranks an…" }, { "name": "hospital-ai-ops", "type": "registry:block", "title": "AI Ops 02 - Hospital AI Control Center", "description": "An AI care operations dashboard for hospitals, medical centers, and social care teams — with a status banner, triage & risk stat cards, a care escalation timel…" }, { "name": "agent-ai-ops", "type": "registry:block", "title": "AI Ops 03 - Agent Usage & API Console", "description": "An agent fleet usage console — with an account header, a usage summary card with Tokens/Spend/Requests tabs, a daily usage chart, a top-models-by-usage breakdo…" }, { "name": "login-block-1", "type": "registry:block", "title": "Login Form 01 - Standard Card Layout", "description": "A minimalist, centered card layout for login. Features email, password, and social login options. Ideal for straightforward authentication flows in SaaS apps o…" }, { "name": "login-block-2", "type": "registry:block", "title": "Login Form 02 - Split Screen with Video Branding", "description": "A modern split-screen login layout featuring a background video loop on one side and the form on the other. Perfect for branded, customer-facing applications." }, { "name": "login-block-3", "type": "registry:block", "title": "Login Form 03 - Full Page Marketing Layout", "description": "A two-column landing page style login layout featuring marketing copy, text morph animations, a brand slider, and testimonials alongside the login card." }, { "name": "login-block-4", "type": "registry:block", "title": "Login Form 04 - Card Layout with Brand Logos", "description": "A centered login card layout that includes a dedicated footer section displaying a grid of trusted company logos to build social proof." }, { "name": "login-block-5", "type": "registry:block", "title": "Login Form 05 - Split Screen with 3D Animation", "description": "A creative split-screen login layout featuring an immersive Three.js interactive 3D color bends animation on one side and the form on the other." }, { "name": "login-block-6", "type": "registry:block", "title": "Login Form 06 - Interactive Particle Field", "description": "A split-screen login layout with an interactive canvas particle field that drifts ambiently and reacts to cursor movement on one side and the form on the other." }, { "name": "login-block-7", "type": "registry:block", "title": "Login Form 07 - Diagonal Marquee Carousel", "description": "A two-column login layout with the sign-in form on the left and an infinitely scrolling, diagonally slanted image marquee filling the right panel." }, { "name": "signup-01", "type": "registry:block", "title": "Signup Form 01 - Essential Centered Card", "description": "A clean, centrally aligned card design for creating accounts. Includes core input fields and social providers, making it perfect for frictionless user onboardi…" }, { "name": "signup-02", "type": "registry:block", "title": "Signup Form 02 - Divided Screen with Video Panel", "description": "A dual-panel registration screen that showcases a looping ambient video alongside the signup form. Excellent for creating a premium first impression for new us…" }, { "name": "signup-03", "type": "registry:block", "title": "Signup Form 03 - Two-Column Showcase Layout", "description": "A full-page hero layout designed for conversions. Combines animated text, client logos, and social proof in the left column with the registration form in the r…" }, { "name": "signup-04", "type": "registry:block", "title": "Signup Form 04 - Card Design with Trusted Partners", "description": "A centered registration card enhanced with a logo gallery in the footer. Displays trusted partner brands immediately below the signup fields to increase conver…" }, { "name": "signup-05", "type": "registry:block", "title": "Signup Form 05 - Immersive Three.js Split View", "description": "An innovative dual-panel registration view that pairs the signup form with an interactive, WebGL-powered 3D color bending visualization for a highly modern aes…" }, { "name": "signup-06", "type": "registry:block", "title": "Signup Form 06 - Interactive Particle Field", "description": "A split-screen registration layout with an interactive canvas particle field that drifts ambiently and reacts to cursor movement on one side and the signup for…" }, { "name": "signup-07", "type": "registry:block", "title": "Signup Form 07 - Diagonal Marquee Carousel", "description": "A two-column signup layout with the registration form on the left and an infinitely scrolling, diagonally slanted image marquee filling the right panel." }, { "name": "otp-01", "type": "registry:block", "title": "OTP Form 01 - Minimal Verification Card", "description": "A focused, center-aligned verification box. Contains a secure code input and a resend action, providing a distraction-free experience for identity confirmation." }, { "name": "otp-02", "type": "registry:block", "title": "OTP Form 02 - Video Background Split View", "description": "A side-by-side verification layout combining an engaging video background with a secure OTP input panel. Great for maintaining brand immersion during security …" }, { "name": "otp-03", "type": "registry:block", "title": "OTP Form 03 - Landing Page Style Verification", "description": "A comprehensive verification page that leverages a two-column structure. Displays marketing messages and trust indicators on one side while handling OTP entry …" }, { "name": "otp-04", "type": "registry:block", "title": "OTP Form 04 - Verification Card with Social Proof", "description": "A focused verification card that builds trust by featuring a grid of sponsor or client logos at the bottom, reassuring users during the authentication step." }, { "name": "otp-05", "type": "registry:block", "title": "OTP Form 05 - Interactive 3D Verification Panel", "description": "A visually striking verification layout that splits the screen between the OTP input and a dynamic, interactive Three.js 3D abstract animation, elevating the s…" }, { "name": "otp-06", "type": "registry:block", "title": "OTP Form 06 - Interactive Particle Field", "description": "A split-screen verification layout with an interactive canvas particle field that drifts ambiently and reacts to cursor movement on one side and the OTP form o…" }, { "name": "otp-07", "type": "registry:block", "title": "OTP Form 07 - Diagonal Marquee Carousel", "description": "A two-column verification layout with the OTP form on the left and an infinitely scrolling, diagonally slanted image marquee filling the right panel." }, { "name": "forgot-password-01", "type": "registry:block", "title": "Forgot Password Form 01 - Clean Recovery Card", "description": "A simple, centered recovery form. Provides an email field and clear instructions to help users regain access to their accounts quickly and easily." }, { "name": "forgot-password-02", "type": "registry:block", "title": "Forgot Password Form 02 - Branded Video Split Layout", "description": "A bi-fold password reset page featuring a continuous video loop on the left and the recovery inputs on the right. Keeps the user engaged even during account re…" }, { "name": "forgot-password-03", "type": "registry:block", "title": "Forgot Password Form 03 - Feature-Rich Recovery Page", "description": "An expansive account recovery layout built like a landing page. Uses dynamic text animations and a brand carousel to reassure users while they reset their cred…" }, { "name": "forgot-password-04", "type": "registry:block", "title": "Forgot Password Form 04 - Recovery Card with Company Logos", "description": "A recovery card design supplemented by a bottom section containing prominent company logos. Adds an element of professional credibility to the password reset p…" }, { "name": "forgot-password-05", "type": "registry:block", "title": "Forgot Password Form 05 - 3D Color Bends Split Screen", "description": "A highly engaging password reset screen utilizing a side-by-side design. Features an abstract 3D canvas animation on the left to complement the recovery form o…" }, { "name": "forgot-password-06", "type": "registry:block", "title": "Forgot Password Form 06 - Interactive Particle Field", "description": "A split-screen password reset layout with an interactive canvas particle field that drifts ambiently and reacts to cursor movement on one side and the recovery…" }, { "name": "forgot-password-07", "type": "registry:block", "title": "Forgot Password Form 07 - Diagonal Marquee Carousel", "description": "A two-column password recovery layout with the reset form on the left and an infinitely scrolling, diagonally slanted image marquee filling the right panel." }, { "name": "multi-step-form-01", "type": "registry:block", "title": "Multi Step Form 01 - Appointment Booking Wizard", "description": "Guide patients through a multi-step appointment booking flow with patient details, visit scheduling, and a final review before confirmation. Great for clinic p…" }, { "name": "multi-step-form-02", "type": "registry:block", "title": "Multi Step Form 02 - Workspace Setup Wizard", "description": "Spin up a new workspace through an animated multi-step form covering workspace details, team invites, and a final launch confidence check-in. Great for SaaS on…" }, { "name": "multi-step-form-03", "type": "registry:block", "title": "Multi Step Form 03 - User Profile Form", "description": "Collect user details through a structured multi-section form with step-by-step navigation. Best suited for account setup, workspace configuration, and onboardi…" }, { "name": "multi-step-form-04", "type": "registry:block", "title": "Multi Step Form 04 - Multi-Step Onboarding Form", "description": "Guide users through account creation with a progress bar and a multi-step registration experience. Perfect for SaaS onboarding, membership platforms, and appli…" }, { "name": "multi-step-form-05", "type": "registry:block", "title": "Multi Step Form 05 - Onboarding Form", "description": "An animated multi-step onboarding form with a circular progress indicator, role-selection cards, and a success screen. Perfect for user onboarding, sign-up flo…" }, { "name": "multi-step-form-06", "type": "registry:block", "title": "Multi Step Form 06 - Survey Form", "description": "An animated multi-step survey form with radio-group option cards, a live animated score counter, and an email capture step. Ideal for feedback collection, NPS …" }, { "name": "dashboard-layout-01", "type": "registry:block", "title": "Dashboard Layout 01 - Admin Dashboard Layout", "description": "Start your admin panel with a complete dashboard structure that keeps navigation, content, and user actions well organized. Perfect for SaaS platforms, analyti…" }, { "name": "dashboard-layout-02", "type": "registry:block", "title": "Dashboard Layout 02 - RTL Layout", "description": "Supports right to left languages with a layout designed for Arabic, Hebrew, and multilingual applications. Build localized dashboards without restructuring you…" }, { "name": "dashboard-layout-03", "type": "registry:block", "title": "Dashboard Layout 03 - Horizontal Layout", "description": "Choose a horizontal navigation pattern for dashboards that need maximum workspace and simplified navigation. Great for enterprise tools, reporting platforms, a…" }, { "name": "application-shell-01", "type": "registry:block", "title": "Chat Application Shell 01", "description": "Create chat interfaces with a complete application layout including conversations, message area, and input sections. Save development time by customizing a pro…" }, { "name": "application-shell-02", "type": "registry:block", "title": "Notes Application Shell 01", "description": "Organize note taking experiences with structured layouts for navigation, editing, and content management. Customize the shell to build documentation tools, per…" }, { "name": "table-01", "type": "registry:block", "title": "Table 01 - Top Selling Products Table", "description": "Track best selling products with ratings, pricing, demand status, and built in add, edit, and delete actions. Great for inventory management, product administr…" }, { "name": "table-02", "type": "registry:block", "title": "Table 02 - Sales Orders Table", "description": "Monitor recent sales orders with searchable records, pagination, payment details, and order statuses. Built for ecommerce dashboards, billing systems, and orde…" }, { "name": "table-03", "type": "registry:block", "title": "Table 03 - Projects and Orders Table", "description": "Manage projects, assigned managers, order values, and progress from a sortable table with status indicators and quick actions. Useful for project tracking, ope…" }, { "name": "table-04", "type": "registry:block", "title": "Table 04 - Best Performing AI Products Table", "description": "Compare top performing AI products with structured metrics for quick revenue and performance tracking. Fits AI marketplaces, SaaS dashboards, and product analy…" }, { "name": "table-05", "type": "registry:block", "title": "Table 05 - Recent Enrollments Table", "description": "Display recent student enrollments with grades, subjects, enrollment status, and quick add, edit & delete actions. Suitable for education portals, LMS dashboar…" }, { "name": "table-06", "type": "registry:block", "title": "Table 06 - Recent Patients Table", "description": "Organize patient records with age, department, diagnosis, treatment status, and management action buttons. Designed for hospital dashboards, healthcare portals…" }, { "name": "table-07", "type": "registry:block", "title": "Table 07 - Customer Details Editable Table", "description": "Update customer records directly from an editable table with search, status filters, and quick row actions. Perfect for CRM platforms, customer support tools, …" }, { "name": "table-08", "type": "registry:block", "title": "Table 08 - Revenue Table", "description": "Analyze revenue across different months and product categories using sortable tabular data. Best for finance dashboards, sales reporting, and business performa…" }, { "name": "table-09", "type": "registry:block", "title": "Table 09 - Filter Table", "description": "Find records faster with searchable data, column filters, and row selection using checkboxes. Useful for admin panels, reporting tools, and large business data…" }, { "name": "table-10", "type": "registry:block", "title": "Table 10 - Users Management Table", "description": "Manage users with role, subscription plan, billing method, account status, and action controls from one table. Ideal for SaaS applications, workspace administr…" }, { "name": "table-11", "type": "registry:block", "title": "Table 11 - Top Performing Products Table", "description": "Compare product performance using sales, earnings, category, and technology information in one view. Suitable for ecommerce analytics, inventory reporting, and…" }, { "name": "table-12", "type": "registry:block", "title": "Table 12 - Customer Reviews Table", "description": "Review customer feedback with searchable records, review dates, and user details for faster moderation. Helps support teams monitor customer sentiment and impr…" }, { "name": "table-13", "type": "registry:block", "title": "Table 13 - Projects Activity Tracking Table", "description": "Track ongoing projects with budgets, assigned teams, project leaders, and activity progress in one organized table. Built for project management dashboards, ag…" }, { "name": "table-14", "type": "registry:block", "title": "Table 14 - Live POS Kitchen & Order Queue Table", "description": "Real-time restaurant order queue table with order & location, server, item images with names, KDS status badge, and amount & time in a scrollable card. Built f…" }, { "name": "table-15", "type": "registry:block", "title": "Table 15 - Active Freight Shipments Table", "description": "Freight shipment tracking table with tracking ID, route, carrier, status badge, ETA, and a row action dropdown menu, in a scrollable card. Built for logistics …" }, { "name": "table-16", "type": "registry:block", "title": "Table 16 - Latest Reviews Table", "description": "Customer reviews table with product thumbnail, customer details, star rating, review text, status badge, search, and a row action dropdown menu. Built for ecom…" }, { "name": "table-17", "type": "registry:block", "title": "Table 17 - Product Payments Table", "description": "Product order table with thumbnail, payment progress bar, payment status, order status badge, and a row action dropdown menu, inside a scrollable card. Built f…" }, { "name": "table-18", "type": "registry:block", "title": "Table 18 - Top Projects Table", "description": "Top projects table with row checkboxes, icon thumbnail, budget, manager avatar, a progress bar per project, a search input in the header, and a row action drop…" }, { "name": "forms-01", "type": "registry:block", "title": "Form 01 - Edit Profile Form", "description": "Update personal information, profile visibility, and account preferences from a clean settings layout. Ideal for user dashboards, profile management pages, and…" }, { "name": "forms-02", "type": "registry:block", "title": "Form 02 - Advanced Settings Sidebar Layout", "description": "Organize account settings with sidebar navigation for faster access to preferences. Great for managing profile information, notifications, security, and appear…" }, { "name": "forms-03", "type": "registry:block", "title": "Form 03 - E-commerce Checkout Form", "description": "Complete online purchases with a streamlined checkout process from shipping to payment. Suitable for ecommerce stores that require secure and user-friendly ord…" }, { "name": "forms-04", "type": "registry:block", "title": "Form 04 - Student Registration Form", "description": "Register students using a structured enrollment form with guardian and subject details. Useful for schools, educational platforms, and online course registrati…" }, { "name": "forms-05", "type": "registry:block", "title": "Form 05 - Employee Registration Form", "description": "Capture employee information with dedicated sections for personal details and job preferences. Fits HR portals, recruitment systems, and staff onboarding appli…" }, { "name": "forms-06", "type": "registry:block", "title": "Form 06 - Repeater Form", "description": "Collect multiple entries dynamically without creating separate forms for each record. Useful for surveys, inventory management, expense reports, and custom dat…" }, { "name": "forms-07", "type": "registry:block", "title": "Form 07 - Form with Tab", "description": "Separate complex forms into organized tabs for a cleaner and more manageable experience. Perfect for lengthy forms with multiple categories, settings, or confi…" }, { "name": "forms-08", "type": "registry:block", "title": "Form 08 - Subscription Plan Builder", "description": "A SaaS checkout-style form for picking a plan, toggling add-ons, applying a promo code, and previewing a live order summary. Perfect for billing, checkout, and…" }, { "name": "forms-09", "type": "registry:block", "title": "Form 09 - Agent API Keys", "description": "An AI agent credential manager with a sidebar quick-copy snippet, a card grid of agent keys with a dropdown-menu of reveal/copy/rotate/revoke actions, and a cr…" }, { "name": "datatable-01", "type": "registry:block", "title": "Datatable 01 - Exportable Datatable", "description": "Download table records with a single click for reporting, backups, and data sharing. This block is specially built for any application that requires quick and …" }, { "name": "datatable-02", "type": "registry:block", "title": "Datatable 02 - Dense Table", "description": "Display large datasets in a compact table layout with reduced spacing for better visibility. Ideal for dashboards where users need to scan more records without…" }, { "name": "datatable-03", "type": "registry:block", "title": "Datatable 03 - Sorting Table", "description": "Sort rows by different columns to quickly organize and compare data. Suitable for admin panels, user management, inventory, and reporting interfaces." }, { "name": "datatable-04", "type": "registry:block", "title": "Datatable 04 - Filter Table", "description": "Filter table records with flexible controls to help users find relevant data faster, along with search functionality. Great for CRM systems, ecommerce dashboar…" }, { "name": "datatable-05", "type": "registry:block", "title": "Datatable 05 - Paginated Table", "description": "Break large datasets into manageable pages for improved performance and navigation. Fits dashboards that handle customers, orders, products, or financial recor…" }, { "name": "datatable-06", "type": "registry:block", "title": "Datatable 06 - Row Select Table", "description": "Export single or multiple rows for bulk actions and data management tasks. Useful for user administration, order processing, and inventory management." }, { "name": "datatable-07", "type": "registry:block", "title": "Datatable 07 - Column Visibility Table", "description": "Show or hide table columns to create a personalized data view for different users. Perfect for dashboards with customizable reporting and flexible workflows." }, { "name": "datatable-08", "type": "registry:block", "title": "Datatable 08 - Editable Table", "description": "Edit table data directly within rows without leaving the current page. Works well for inventory updates, project tracking, and business management tools." }, { "name": "datatable-09", "type": "registry:block", "title": "Datatable 09 - Sticky Table", "description": "Keep important headers or columns visible while scrolling through large datasets. Helpful for financial reports, analytics dashboards, and data-heavy applicati…" }, { "name": "datatable-10", "type": "registry:block", "title": "Datatable 10 - Column Drag and Drop Table", "description": "Reorder table columns with drag and drop to match different user preferences. Suitable for customizable dashboards and data management interfaces." }, { "name": "datatable-11", "type": "registry:block", "title": "Datatable 11 - Row Drag and Drop Table", "description": "Rearrange table rows using drag and drop for better organization and prioritization. Great for task management, workflow builders, and content management syste…" }, { "name": "datatable-12", "type": "registry:block", "title": "Datatable 12 - Expandable Table", "description": "Use this expandable table to reveal additional details with collapsible rows without navigating away from the page. Useful for customer records, order informat…" }, { "name": "datatable-13", "type": "registry:block", "title": "Datatable 13 - Advanced User Table", "description": "A feature-rich user management table with search, status filtering, sorting, row selection, and pagination. Useful for admin panels, user directories, and cust…" }, { "name": "sidebar-01", "type": "registry:block", "title": "Sidebar 01 - Classic Admin Sidebar", "description": "Navigate dashboards with a clean vertical sidebar featuring grouped links for dashboards, pages, apps, and settings. Includes branding, a collapsible layout, a…" }, { "name": "sidebar-02", "type": "registry:block", "title": "Sidebar 02 - Mini Sidebar Navigation", "description": "Save screen space with a compact sidebar that keeps essential navigation within easy reach. Great for modern dashboards where minimal layouts and faster naviga…" }, { "name": "sidebar-03", "type": "registry:block", "title": "Sidebar 03 - Two Column Sidebar", "description": "Separate navigation into two organized columns for better content discovery and quicker access to key sections. Suitable for dashboards with analytics, applica…" }, { "name": "sidebar-04", "type": "registry:block", "title": "Sidebar 04 - Compact Dashboard Navigation", "description": "Keep navigation simple with a clean single column sidebar focused on frequently used pages and tools. Fits lightweight admin panels, internal portals, and prod…" }, { "name": "sidebar-05", "type": "registry:block", "title": "Sidebar 05 - Admin Sidebar with Promo", "description": "Combine structured dashboard navigation with a dedicated promotional section for upgrades or announcements. Useful for SaaS products that highlight premium pla…" }, { "name": "sidebar-06", "type": "registry:block", "title": "Sidebar 06 - Card Layout Admin Dashboard Sidebar", "description": "Navigate large applications through collapsible menu groups, intuitive icons, and well-organized sections. Designed for admin interfaces that require scalable …" }, { "name": "sidebar-07", "type": "registry:block", "title": "Sidebar 07 - Animated Mega-Menu Console Sidebar", "description": "Enhance dashboard navigation with animated interactions, expandable flyout menus, and a searchable console-style layout. Ideal for cloud platforms, developer t…" }, { "name": "sidebar-08", "type": "registry:block", "title": "Sidebar 08 - Admin Dashboard Sidebar", "description": "Manage dashboard navigation with organized menu groups, icons, and collapsible sections for a cleaner sidebar. Built for admin panels, SaaS platforms, and busi…" }, { "name": "sidebar-09", "type": "registry:block", "title": "Sidebar 09 - Dual Panel Mail Sidebar", "description": "Combine a collapsed icon rail, a searchable mail list panel, and a floating quick-action rail in one layout. Suited for mail clients, inbox management tools, a…" }, { "name": "sidebar-10", "type": "registry:block", "title": "Sidebar 10 - Workspace Sidebar with Info Panel", "description": "Pair a workspace switcher, AI shortcut, favorites, and collapsible project groups with a right-hand panel for schedules, meetings, and checklists. Great for pr…" }, { "name": "no-data-empty-state", "type": "registry:block", "title": "Empty State 01 - No Data Empty State", "description": "Help users understand why content is missing instead of displaying a blank screen. Perfect for new projects, dashboards, and first-time experiences that encour…" }, { "name": "no-search-results", "type": "registry:block", "title": "Empty State 02 - No Search Results", "description": "Guide users when searches return no matches with clear messaging and helpful suggestions. Improve search experiences by encouraging refined keywords or adjuste…" }, { "name": "empty-chart-card", "type": "registry:block", "title": "Empty State 03 - Empty Chart Card", "description": "Display informative placeholders when analytics or reports have no available data. Great for dashboards waiting for integrations, metrics, or newly connected d…" }, { "name": "connect-data-empty-state", "type": "registry:block", "title": "Empty State 04 - Connect Data Empty State", "description": "Prompt users to link a live source or import a CSV before their workspace fills up with data. Pairs primary connection actions with quick-access guide links fo…" }, { "name": "launch-team-workspace-empty-state", "type": "registry:block", "title": "Empty State 05 - Launch Team Workspace Empty State", "description": "Kick off a new workspace by inviting core teammates and syncing the directory, then surface the next quick actions like deliverables, briefs, and standups." }, { "name": "usage-reports-empty-state", "type": "registry:block", "title": "Empty State 06 - Usage Reports Empty State", "description": "Let users scope a report by team, project, and date range, then trigger generation from a split action button before any reports have been produced yet." }, { "name": "dashboard-footer-1", "type": "registry:block", "title": "Dashboard Footer 01 - Dashboard Footer with Navigation & Social Links", "description": "Display essential footer navigation together with social media buttons in a clean layout. Great for SaaS dashboards, admin panels, and web apps that need quick…" }, { "name": "dashboard-footer-2", "type": "registry:block", "title": "Dashboard Footer 02 - Minimal Copyright Footer", "description": "Keep your dashboard clean with a simple one line footer showing copyright information only. Perfect for internal tools, admin dashboards, and applications that…" }, { "name": "dashboard-footer-3", "type": "registry:block", "title": "Dashboard Footer 03 - Compact Dashboard Footer with Links & Social Icons", "description": "Combine copyright text, quick navigation links, and social media icons in a single horizontal footer. Best for modern dashboards where space is limited but ess…" }, { "name": "account-setting-1", "type": "registry:block", "title": "Account Setting 01 - API Keys & Billing Settings", "description": "Manage API keys, usage limits, billing information, and third-party integrations from a single account settings layout. Perfect for SaaS dashboards that need s…" }, { "name": "account-setting-2", "type": "registry:block", "title": "Account Setting 02 - Profile & Security Settings", "description": "Update personal information, manage passwords, and configure account security with a clean settings interface. Designed for applications that require simple pr…" }, { "name": "kanban-application-01", "type": "registry:block", "title": "Kanban Application 01 - Simple Task Board", "description": "Manage tasks across To Do, In Progress, and Done columns with a drag-and-drop Kanban board. Add and remove tasks inline, making it a great starting point for l…" }, { "name": "kanban-application-02", "type": "registry:block", "title": "Kanban Application 02 - Task Board with Assignees", "description": "Organize tasks across To Do, In Progress, In Review, and Done columns with due dates, assignees, and an add or edit task dialog. Ideal for sprint boards, team …" }, { "name": "dashboard-shell-01", "type": "registry:block", "title": "Dashboard Shell 01 - Ecommerce Overview", "description": "A complete ecommerce admin dashboard shell with overview tabs, update banner, total sales chart, total assets, orders, profit, advertisement cost, and projects…" }, { "name": "dashboard-shell-02", "type": "registry:block", "title": "Dashboard Shell 02 - Ecommerce Sales & Analytics", "description": "A full-featured ecommerce dashboard shell with store overview, monthly sales, revenue growth, customer segmentation, order overview, user activity, ecommerce a…" }, { "name": "dashboard-shell-03", "type": "registry:block", "title": "Dashboard Shell 03 - Marketing & Traffic Analytics", "description": "A marketing analytics dashboard shell featuring a report banner, key insights, website visits, sales distribution, product action cards, campaign performance, …" }, { "name": "dashboard-shell-04", "type": "registry:block", "title": "Dashboard Shell 04 - SaaS & AI Dashboard", "description": "A SaaS and AI-focused dashboard shell with a header, metric cards, sales overview, revenue distribution, AI chat assistant, and best AI products sections. Perf…" }, { "name": "dashboard-shell-05", "type": "registry:block", "title": "Dashboard Shell 05 - School & Education Dashboard", "description": "A school and education management dashboard shell with a header, metric cards, attendance overview, grade distribution, fees paid, fees pending, staff salary, …" }, { "name": "dashboard-shell-06", "type": "registry:block", "title": "Dashboard Shell 06 - Healthcare & Hospital Dashboard", "description": "A healthcare and hospital management dashboard shell with a header, total patients, monthly revenue, weekly appointments, patient flow, recent patients, doctor…" }, { "name": "dashboard-shell-07", "type": "registry:block", "title": "Dashboard Shell 07 - Restaurant POS Analytics Dashboard", "description": "A restaurant POS analytics dashboard shell with a POS header, KPI stat cards, weekly revenue overview, order type distribution, top selling items, recent payme…" }, { "name": "dashboard-shell-08", "type": "registry:block", "title": "Dashboard Shell 08 - Logistics & Supply Chain Command", "description": "A logistics and supply chain dashboard shell with a fleet command header, KPI metric grid, freight volume & SLA trend chart, carrier cost breakdown, shipment s…" }, { "name": "ai-chat-01", "type": "registry:block", "title": "AI Chat 01 - Chat", "description": "A complete AI chat conversation block with a centered welcome and suggested prompts, a scrollable message thread with assistant and user bubbles, and a compose…" }, { "name": "ai-chat-02", "type": "registry:block", "title": "AI Chat 02 - Composer", "description": "A standalone AI chat composer with file attachments (drag, drop, and paste), a model picker with effort levels and a thinking toggle, speech-to-text dictation,…" }, { "name": "ai-chat-03", "type": "registry:block", "title": "AI Chat 03 - Chat Shell", "description": "The frame around an AI chat: a collapsible sidebar with pinned and recent chats, rename and delete actions, a command-palette style search dialog, a workspace …" }, { "name": "ai-chat-04", "type": "registry:block", "title": "AI Chat 04 - Assistant Panel", "description": "A docked AI assistant panel that sits alongside your app content at desktop sizes and slides in as a sheet below the lg breakpoint: a header with chat history,…" }, { "name": "ai-chat-05", "type": "registry:block", "title": "AI Chat 05 - Share Dialog", "description": "The sharing flow for an AI chat: a dialog with visibility options (private, team, or public link) and a copy-link row, ready to drop into any chat block." }, { "name": "animated-list-01", "type": "registry:component", "title": "Animated List 01 - Default", "description": "Animated List component" }, { "name": "animated-list-02", "type": "registry:component", "title": "Animated List 02 - Setup Steps", "description": "Setup Steps component" }, { "name": "animated-list-03", "type": "registry:component", "title": "Animated List 03 - Expandable Stack", "description": "Expandable stack of cards showing notifications with dynamic spring layouts" }, { "name": "accordion-01", "type": "registry:component", "title": "Accordion-01 - Default", "description": "Default accordion component" }, { "name": "accordion-02", "type": "registry:component", "title": "Accordion-02 - Multi-level", "description": "Multi-level accordion component" }, { "name": "accordion-03", "type": "registry:component", "title": "Accordion-03 - Numbered FAQ", "description": "FAQ accordion with numbered items, background fill on open, and +/- toggle" }, { "name": "accordion-04", "type": "registry:component", "title": "Accordion-04 - Card", "description": "Accordion wrapped in a rounded card with left-aligned +/- icons and border dividers" }, { "name": "accordion-05", "type": "registry:component", "title": "Accordion-05 - Media", "description": "Accordion with icon trigger, description, and an image revealed on open" }, { "name": "accordion-06", "type": "registry:component", "title": "Accordion-06 - Filled Trigger", "description": "Accordion with a filled accent background on the trigger header" }, { "name": "accordion-07", "type": "registry:component", "title": "Accordion-07 - Motion Services", "description": "Animated accordion with a number bubble, sliding title shift, and an expanding bottom line on hover and active states — built with motion/react for fluid sprin…" }, { "name": "avatar-01", "type": "registry:component", "title": "Avatar-01 - Default", "description": "Default avatar component" }, { "name": "avatar-02", "type": "registry:component", "title": "Avatar-02 - Group", "description": "Group avatar component" }, { "name": "avatar-03", "type": "registry:component", "title": "Avatar-03 - Badge", "description": "Badge avatar component" }, { "name": "avatar-04", "type": "registry:component", "title": "Avatar-04 - Border", "description": "Border avatar component" }, { "name": "avatar-05", "type": "registry:component", "title": "Avatar-05 - Counter", "description": "Counter avatar component" }, { "name": "avatar-06", "type": "registry:component", "title": "Avatar-06 - Fallback", "description": "Fallback avatar component" }, { "name": "avatar-07", "type": "registry:component", "title": "Avatar-07 - Selectable Avatar", "description": "Animated selectable avatar button with optional badge and name label" }, { "name": "avatar-08", "type": "registry:component", "title": "Avatar-08 - Avatar stack", "description": "Stacked avatar group with overflow count and popularity indicator" }, { "name": "button-01", "type": "registry:component", "title": "Button-01 - With Icon", "description": "With Icon button component" }, { "name": "button-02", "type": "registry:component", "title": "Button-02 - Shiny Text", "description": "Shiny Text button component" }, { "name": "button-03", "type": "registry:component", "title": "Button-03 - Shine Hover", "description": "Shine Hover button component" }, { "name": "button-04", "type": "registry:component", "title": "Button-04 - Heartbeat Effect", "description": "Heartbeat Effect button component" }, { "name": "button-05", "type": "registry:component", "title": "Button-05 - Get Figma File", "description": "Get Figma File button component" }, { "name": "button-06", "type": "registry:component", "title": "Button-06 - Animated Border", "description": "Animated Border button component" }, { "name": "button-07", "type": "registry:component", "title": "Button-07 - Social", "description": "Social button component" }, { "name": "button-08", "type": "registry:component", "title": "Button-08 - Social Icon", "description": "Social Icon button component" }, { "name": "button-09", "type": "registry:component", "title": "Button-09 - Outline With Icon", "description": "Outline With Icon button component" }, { "name": "button-10", "type": "registry:component", "title": "Button-10 - Save", "description": "Save button component" }, { "name": "button-11", "type": "registry:component", "title": "Button-11 - Cancel", "description": "Cancel button component" }, { "name": "button-12", "type": "registry:component", "title": "Button-12 - Default", "description": "Default button component" }, { "name": "button-13", "type": "registry:component", "title": "Button-13 - Size xs", "description": "Size xs button component" }, { "name": "button-14", "type": "registry:component", "title": "Button-14 - Size sm", "description": "Size sm button component" }, { "name": "button-15", "type": "registry:component", "title": "Button-15 - Size lg", "description": "Size lg button component" }, { "name": "button-16", "type": "registry:component", "title": "Button-16 - Ripple Spotlight", "description": "Mouse-tracking ripple spotlight effect button" }, { "name": "button-17", "type": "registry:component", "title": "Button-17 - Blob Fill", "description": "Circle blob expands from bottom center on hover to fill the button" }, { "name": "button-18", "type": "registry:component", "title": "Button-18 - Promo Code Copy", "description": "Animated promo code copy button with blur transition and progress fill" }, { "name": "button-19", "type": "registry:component", "title": "Button-19 - Interactive Hover", "description": "Interactive Hover button" }, { "name": "badge-01", "type": "registry:component", "title": "Badge-01 - Default", "description": "Badge component" }, { "name": "badge-02", "type": "registry:component", "title": "Badge-02 - Count", "description": "Badge component" }, { "name": "badge-03", "type": "registry:component", "title": "Badge-03 - Outline", "description": "Badge component" }, { "name": "badge-04", "type": "registry:component", "title": "Badge-04 - With Icon", "description": "Badge component" }, { "name": "badge-05", "type": "registry:component", "title": "Badge-05 - Link", "description": "Badge component" }, { "name": "badge-06", "type": "registry:component", "title": "Badge-06 - Error", "description": "Badge component" }, { "name": "badge-07", "type": "registry:component", "title": "Badge-07 - Success", "description": "Animated success badge with top glow and letter-by-letter reveal" }, { "name": "badge-08", "type": "registry:component", "title": "Badge-08 - Pending", "description": "Animated pending badge with spinning loader and top glow" }, { "name": "badge-09", "type": "registry:component", "title": "Badge-09 - Failed", "description": "Animated failed badge with top glow and letter-by-letter reveal" }, { "name": "calendar-01", "type": "registry:component", "title": "Calendar-01 - Standard calendar", "description": "Calendar component" }, { "name": "calendar-02", "type": "registry:component", "title": "Calendar-02 - Style calendar", "description": "Calendar component" }, { "name": "calendar-03", "type": "registry:component", "title": "Calendar-03 - Time calendar", "description": "Calendar component" }, { "name": "calendar-04", "type": "registry:component", "title": "Calendar-04 - Dialog calendar", "description": "Calendar component" } ], "component_count": 508, "components_truncated": true, "component_types": { "registry:block": 200, "registry:component": 308 }, "logo": "", "preview_image": "https://shadcndashboard.dev/images/og-image/homepage.webp", "pro": { "has_pro": true, "pro_url": null, "pricing_url": "https://shadcndashboard.dev/pricing" }, "enrichment_errors": [], "featured": false }, { "number": 359, "name": "@usva", "category": "Animated components", "tags": [ "3d", "animation", "blocks", "buttons", "cards", "dashboard", "forms", "loaders", "maps", "marketing", "media", "navigation", "onboarding", "overlays", "payments", "retro", "theming" ], "tagline": "A React design language in three themes, where kajo is atmospheric and dark, sisu is dense and quick, and savi is the light ground. One token vocabulary underneath, including WebGL atmospheres that honour reduced-motion. Every component installs from npm or copies in from this registry.", "short_description": "", "description": "A React design language in three themes, where kajo is atmospheric and dark, sisu is dense and quick, and savi is the light ground. One token vocabulary underneath, including WebGL atmospheres that honour reduced-motion. Every component installs from npm or copies in from this registry.", "framework": "react", "homepage": "https://usva.build", "docs": "https://usva.build/docs", "github": "https://github.com/matt-pasek/usva", "components_github": null, "github_default_branch": "main", "github_stars": 3, "last_commit": "2026-09-11T05:01:01Z", "archived": false, "license": null, "open_issues": 1, "registry_template": "https://usva.build/r/{name}.json", "registry_index": "https://usva.build/r/registry.json", "components": [ "announcement", "avatar", "badge", "button", "callout", "card", "checkbox", "chip", "code-snippet", "color-field", "dialog", "drawer", "dropdown-menu", "hint-popover", "input", "knob", "label", "list", "loading-overlay", "log-line", "notification-badge", "overlay-core", "popover", "progress", "radio", "select", "skeleton", "slider", "spinner", "stat-chip", "switch", "tabs", "terminal", "textarea", "toast", "toggle-chip", "tooltip", "bento-grid", "case-study-hero", "checklist-card", "cta-banner", "dashboard-grid", "disclosure-row", "empty-state", "entity-card", "feature-carousel", "field-group", "footer", "hero-split", "mockup-showcase", "page-header", "panel", "progress-row", "pullquote", "roadmap-timeline", "section-heading", "section-label", "segmented-control", "stat-bento", "stat-card", "step-chips", "step-list", "stripe-card", "toolbar", "sula-core", "sula-fab", "sula-field", "sula-frame", "sula-loader", "sula-motion", "sula-nav", "sula-segmented", "page-transition", "reveal", "atmospheres-core", "hehku", "kajastus", "kuulto", "kynnos", "loimu", "routa", "utu", "vare" ], "component_items": [ { "name": "announcement", "type": "registry:ui", "title": null, "description": null }, { "name": "avatar", "type": "registry:ui", "title": null, "description": null }, { "name": "badge", "type": "registry:ui", "title": null, "description": null }, { "name": "button", "type": "registry:ui", "title": null, "description": null }, { "name": "callout", "type": "registry:ui", "title": null, "description": null }, { "name": "card", "type": "registry:ui", "title": null, "description": null }, { "name": "checkbox", "type": "registry:ui", "title": null, "description": null }, { "name": "chip", "type": "registry:ui", "title": null, "description": null }, { "name": "code-snippet", "type": "registry:ui", "title": null, "description": null }, { "name": "color-field", "type": "registry:ui", "title": null, "description": null }, { "name": "dialog", "type": "registry:ui", "title": null, "description": null }, { "name": "drawer", "type": "registry:ui", "title": null, "description": null }, { "name": "dropdown-menu", "type": "registry:ui", "title": null, "description": null }, { "name": "hint-popover", "type": "registry:ui", "title": null, "description": null }, { "name": "input", "type": "registry:ui", "title": null, "description": null }, { "name": "knob", "type": "registry:ui", "title": null, "description": null }, { "name": "label", "type": "registry:ui", "title": null, "description": null }, { "name": "list", "type": "registry:ui", "title": null, "description": null }, { "name": "loading-overlay", "type": "registry:ui", "title": null, "description": null }, { "name": "log-line", "type": "registry:ui", "title": null, "description": null }, { "name": "notification-badge", "type": "registry:ui", "title": null, "description": null }, { "name": "overlay-core", "type": "registry:ui", "title": null, "description": null }, { "name": "popover", "type": "registry:ui", "title": null, "description": null }, { "name": "progress", "type": "registry:ui", "title": null, "description": null }, { "name": "radio", "type": "registry:ui", "title": null, "description": null }, { "name": "select", "type": "registry:ui", "title": null, "description": null }, { "name": "skeleton", "type": "registry:ui", "title": null, "description": null }, { "name": "slider", "type": "registry:ui", "title": null, "description": null }, { "name": "spinner", "type": "registry:ui", "title": null, "description": null }, { "name": "stat-chip", "type": "registry:ui", "title": null, "description": null }, { "name": "switch", "type": "registry:ui", "title": null, "description": null }, { "name": "tabs", "type": "registry:ui", "title": null, "description": null }, { "name": "terminal", "type": "registry:ui", "title": null, "description": null }, { "name": "textarea", "type": "registry:ui", "title": null, "description": null }, { "name": "toast", "type": "registry:ui", "title": null, "description": null }, { "name": "toggle-chip", "type": "registry:ui", "title": null, "description": null }, { "name": "tooltip", "type": "registry:ui", "title": null, "description": null }, { "name": "bento-grid", "type": "registry:ui", "title": null, "description": null }, { "name": "case-study-hero", "type": "registry:ui", "title": null, "description": null }, { "name": "checklist-card", "type": "registry:ui", "title": null, "description": null }, { "name": "cta-banner", "type": "registry:ui", "title": null, "description": null }, { "name": "dashboard-grid", "type": "registry:ui", "title": null, "description": null }, { "name": "disclosure-row", "type": "registry:ui", "title": null, "description": null }, { "name": "empty-state", "type": "registry:ui", "title": null, "description": null }, { "name": "entity-card", "type": "registry:ui", "title": null, "description": null }, { "name": "feature-carousel", "type": "registry:ui", "title": null, "description": null }, { "name": "field-group", "type": "registry:ui", "title": null, "description": null }, { "name": "footer", "type": "registry:ui", "title": null, "description": null }, { "name": "hero-split", "type": "registry:ui", "title": null, "description": null }, { "name": "mockup-showcase", "type": "registry:ui", "title": null, "description": null }, { "name": "page-header", "type": "registry:ui", "title": null, "description": null }, { "name": "panel", "type": "registry:ui", "title": null, "description": null }, { "name": "progress-row", "type": "registry:ui", "title": null, "description": null }, { "name": "pullquote", "type": "registry:ui", "title": null, "description": null }, { "name": "roadmap-timeline", "type": "registry:ui", "title": null, "description": null }, { "name": "section-heading", "type": "registry:ui", "title": null, "description": null }, { "name": "section-label", "type": "registry:ui", "title": null, "description": null }, { "name": "segmented-control", "type": "registry:ui", "title": null, "description": null }, { "name": "stat-bento", "type": "registry:ui", "title": null, "description": null }, { "name": "stat-card", "type": "registry:ui", "title": null, "description": null }, { "name": "step-chips", "type": "registry:ui", "title": null, "description": null }, { "name": "step-list", "type": "registry:ui", "title": null, "description": null }, { "name": "stripe-card", "type": "registry:ui", "title": null, "description": null }, { "name": "toolbar", "type": "registry:ui", "title": null, "description": null }, { "name": "sula-core", "type": "registry:ui", "title": null, "description": null }, { "name": "sula-fab", "type": "registry:ui", "title": null, "description": null }, { "name": "sula-field", "type": "registry:ui", "title": null, "description": null }, { "name": "sula-frame", "type": "registry:ui", "title": null, "description": null }, { "name": "sula-loader", "type": "registry:ui", "title": null, "description": null }, { "name": "sula-motion", "type": "registry:ui", "title": null, "description": null }, { "name": "sula-nav", "type": "registry:ui", "title": null, "description": null }, { "name": "sula-segmented", "type": "registry:ui", "title": null, "description": null }, { "name": "page-transition", "type": "registry:ui", "title": null, "description": null }, { "name": "reveal", "type": "registry:ui", "title": null, "description": null }, { "name": "atmospheres-core", "type": "registry:ui", "title": null, "description": null }, { "name": "hehku", "type": "registry:ui", "title": null, "description": null }, { "name": "kajastus", "type": "registry:ui", "title": null, "description": null }, { "name": "kuulto", "type": "registry:ui", "title": null, "description": null }, { "name": "kynnos", "type": "registry:ui", "title": null, "description": null }, { "name": "loimu", "type": "registry:ui", "title": null, "description": null }, { "name": "routa", "type": "registry:ui", "title": null, "description": null }, { "name": "utu", "type": "registry:ui", "title": null, "description": null }, { "name": "vare", "type": "registry:ui", "title": null, "description": null } ], "component_count": 83, "components_truncated": false, "component_types": { "registry:ui": 83 }, "logo": "", "preview_image": "https://usva.build/og", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [], "featured": false }, { "number": 360, "name": "@atelier", "category": "Animated components", "tags": [ "3d", "ai", "animation", "backgrounds", "glassmorphism", "media", "payments", "retro", "text-effects" ], "tagline": "A WebGL and Motion system for React that runs many effects on one shared canvas. Shader, cursor, scroll and text effects, 3D galleries, plus page transitions for Next.js. Built with Three.js, React Three Fiber, Motion, and Lenis smooth scroll.", "short_description": "", "description": "A WebGL and Motion system for React that runs many effects on one shared canvas. Shader, cursor, scroll and text effects, 3D galleries, plus page transitions for Next.js. Built with Three.js, React Three Fiber, Motion, and Lenis smooth scroll.", "framework": "react", "homepage": "https://www.atelier-ui.com", "docs": "https://www.atelier-ui.com/en/docs", "github": "https://github.com/whatisjery/atelier-ui", "components_github": "https://github.com/whatisjery/atelier-ui/tree/main/src/registry", "github_default_branch": "main", "github_stars": 28, "last_commit": "2026-08-20T21:44:10Z", "archived": false, "license": "MIT", "open_issues": 0, "registry_template": "https://www.atelier-ui.com/r/{name}.json", "registry_index": "https://www.atelier-ui.com/r/registry.json", "components": [ "fluid-distortion", "pixel-trail", "magnetic-dot-grid", "pixelated-text", "image-trail", "infinite-gallery", "text-scramble", "liquid-media", "infinite-parallax", "infinite-zoom", "scattered-scroll", "text-split", "text-bounce", "webgl-portal", "webgl-provider", "smooth-scroll", "webgl-image", "webgl-video", "webgl-text", "curve-media", "lens-media", "text-fluid", "pixel-media", "webgl-scene", "sphere-gallery", "spiral-gallery", "pixel-scroll", "orbit-gallery", "edge-bounce", "agent-rules", "base", "text-roll", "halftone-glow", "elastic-stick", "glowing-fog", "gradient-flow", "wavy-scroll", "letter-swarm", "magnify-trail", "stacking-grid", "scattered-grid", "hover-burst", "tag-cloud", "falling-text", "image-bloom", "dither-cursor", "page-transition", "clip-transition", "band-transition", "stripe-transition", "pixel-transition" ], "component_items": [ { "name": "fluid-distortion", "type": "registry:component", "title": "Fluid Distortion", "description": "A fluid distortion effect that follows the cursor." }, { "name": "pixel-trail", "type": "registry:component", "title": "Pixel Trail", "description": "A trail of pixels that follows the cursor." }, { "name": "magnetic-dot-grid", "type": "registry:component", "title": "Magnetic Dot Grid", "description": "A grid of dots that reacts to the cursor." }, { "name": "pixelated-text", "type": "registry:component", "title": "Pixelated Text", "description": "Text that pixelates in and out." }, { "name": "image-trail", "type": "registry:component", "title": "Image Trail", "description": "A trail of images that follows the cursor." }, { "name": "infinite-gallery", "type": "registry:component", "title": "Infinite Gallery", "description": "A gallery that loops forever." }, { "name": "text-scramble", "type": "registry:component", "title": "Text Scramble", "description": "Text that scrambles into place." }, { "name": "liquid-media", "type": "registry:component", "title": "Liquid Media", "description": "An image or video that ripples under the cursor." }, { "name": "infinite-parallax", "type": "registry:component", "title": "Infinite Parallax", "description": "Infinite scrolling columns with parallax." }, { "name": "infinite-zoom", "type": "registry:component", "title": "Infinite Zoom", "description": "An infinite zoom through images." }, { "name": "scattered-scroll", "type": "registry:component", "title": "Scattered Scroll", "description": "Items that spread apart while scrolling." }, { "name": "text-split", "type": "registry:component", "title": "Text Split", "description": "A utility that splits text for animation." }, { "name": "text-bounce", "type": "registry:component", "title": "Text Bounce", "description": "Text that bounces away on hover." }, { "name": "webgl-portal", "type": "registry:component", "title": "Webgl Portal", "description": "A shared portal between the DOM and the canvas." }, { "name": "webgl-provider", "type": "registry:component", "title": "Webgl Provider", "description": "A single shared WebGL canvas for the whole app." }, { "name": "smooth-scroll", "type": "registry:component", "title": "Smooth Scroll", "description": "Smooth scrolling for the whole page." }, { "name": "webgl-image", "type": "registry:component", "title": "Webgl Image", "description": "A WebGL plane that mirrors an image." }, { "name": "webgl-video", "type": "registry:component", "title": "Webgl Video", "description": "A WebGL plane that mirrors a video." }, { "name": "webgl-text", "type": "registry:component", "title": "Webgl Text", "description": "A WebGL plane that mirrors text." }, { "name": "curve-media", "type": "registry:component", "title": "Curve Media", "description": "An image or video that bends as you scroll." }, { "name": "lens-media", "type": "registry:component", "title": "Lens Media", "description": "An image or video with a cursor-following lens." }, { "name": "text-fluid", "type": "registry:component", "title": "Text Fluid", "description": "Text with an animated shimmer and distortion." }, { "name": "pixel-media", "type": "registry:component", "title": "Pixel Media", "description": "An image or video that breaks into pixels under the cursor." }, { "name": "webgl-scene", "type": "registry:component", "title": "Webgl Scene", "description": "A viewport with its own scene and camera on the shared canvas." }, { "name": "sphere-gallery", "type": "registry:component", "title": "Sphere Gallery", "description": "A gallery of images mapped onto a sphere." }, { "name": "spiral-gallery", "type": "registry:component", "title": "Spiral Gallery", "description": "An infinite carousel of images staggered along a spiraling tube that scrolls indefinitely." }, { "name": "pixel-scroll", "type": "registry:component", "title": "Pixel Scroll", "description": "A grid of pixels that fills in as you scroll." }, { "name": "orbit-gallery", "type": "registry:component", "title": "Orbit Gallery", "description": "A gallery of images on rotating rings." }, { "name": "edge-bounce", "type": "registry:component", "title": "Edge Bounce", "description": "A wrapper that bounces away from the cursor on hover." }, { "name": "agent-rules", "type": "registry:component", "title": "Agent Rules", "description": "Wiring rules an AI agent reads before using Atelier components." }, { "name": "base", "type": "registry:component", "title": "Base", "description": "The Atelier system: one shared canvas, smooth scroll, and the agent rules." }, { "name": "text-roll", "type": "registry:component", "title": "Text Roll", "description": "Text that rolls through its letters." }, { "name": "halftone-glow", "type": "registry:component", "title": "Halftone Glow", "description": "A glowing halftone background." }, { "name": "elastic-stick", "type": "registry:component", "title": "Elastic Stick", "description": "Items that bounce and stick to the center while scrolling." }, { "name": "glowing-fog", "type": "registry:component", "title": "Glowing Fog", "description": "A glowing fog background." }, { "name": "gradient-flow", "type": "registry:component", "title": "Gradient Flow", "description": "An animated flowing gradient background." }, { "name": "wavy-scroll", "type": "registry:component", "title": "Wavy Scroll", "description": "Text and images that wave across the screen while scrolling." }, { "name": "letter-swarm", "type": "registry:component", "title": "Letter Swarm", "description": "Letters that come together into readable text as you scroll, then scatter again." }, { "name": "magnify-trail", "type": "registry:component", "title": "Magnify Trail", "description": "Images that traverse the screen, magnifying and rising to the top of the stack as they pass the center." }, { "name": "stacking-grid", "type": "registry:component", "title": "Stacking Grid", "description": "A configurable grid of cards that stacks to the center while scrolling." }, { "name": "scattered-grid", "type": "registry:component", "title": "Scattered Grid", "description": "A grid that scatters away from the hovered item." }, { "name": "hover-burst", "type": "registry:component", "title": "Hover Burst", "description": "Images or items that burst around the cursor when it enters an element." }, { "name": "tag-cloud", "type": "registry:component", "title": "Tag Cloud", "description": "Flat images scattered over a draggable sphere, where depth is only a change of scale." }, { "name": "falling-text", "type": "registry:component", "title": "Falling Text", "description": "Text that falls and bounces when the cursor moves over it." }, { "name": "image-bloom", "type": "registry:component", "title": "Image Bloom", "description": "Images that pop up along the cursor's path and fade out behind it." }, { "name": "dither-cursor", "type": "registry:component", "title": "Dither Cursor", "description": "A trail of dithered dots that follows the cursor and bends the scene behind it." }, { "name": "page-transition", "type": "registry:component", "title": "Page Transition", "description": "A route transition engine that covers the page during navigation." }, { "name": "clip-transition", "type": "registry:component", "title": "Clip Transition", "description": "A page transition that clips and scales the page behind a cover." }, { "name": "band-transition", "type": "registry:component", "title": "Band Transition", "description": "A page transition that sweeps staggered bands across the page." }, { "name": "stripe-transition", "type": "registry:component", "title": "Stripe Transition", "description": "A page transition that wipes a staggered grid of stripes across the page." }, { "name": "pixel-transition", "type": "registry:component", "title": "Pixel Transition", "description": "A page transition that pixelates the screen with a fixed grid of squares." } ], "component_count": 51, "components_truncated": false, "component_types": { "registry:component": 51 }, "logo": "", "preview_image": "https://atelier-ui.com/images/og_img_light.jpg", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [], "featured": false }, { "number": 361, "name": "@atomloader", "category": "Animated components", "tags": [ "animation", "blocks", "glassmorphism", "loaders" ], "tagline": "Lightweight, customizable CSS-animated atoms loaders for React.", "short_description": "", "description": "Lightweight, customizable CSS-animated atoms loaders for React.", "framework": "react", "homepage": "https://atomloader.roothq.tech", "docs": null, "github": "https://github.com/HimanshuTamoli24/loader", "components_github": "https://github.com/HimanshuTamoli24/loader/tree/main/components", "github_default_branch": "main", "github_stars": 3, "last_commit": "2026-08-23T05:30:23Z", "archived": false, "license": null, "open_issues": 0, "registry_template": "https://atomloader.roothq.tech/r/{name}.json", "registry_index": "https://atomloader.roothq.tech/r/registry.json", "components": [ "atom-loader", "dot-pulse-loader", "dot-duo-orbit-loader", "dot-trio-breathe-loader", "dot-quad-spin-loader", "dot-cross-bounce-loader", "dot-linear-cascade-loader", "dot-vertical-drip-loader", "dot-diagonal-meteor-loader", "dot-corner-ping-loader", "dot-center-burst-loader", "dot-split-merge-loader", "dot-snake-3x3-loader", "dot-flicker-sparse-loader", "dot-magnet-pull-loader", "dot-twin-helix-loader", "dot-leapfrog-line-loader", "dot-vortex-micro-loader", "dot-echo-pulse-loader", "dot-asym-corner-loader", "dot-matrix-scan-loader", "grid-full-wave-loader", "grid-checker-invert-loader", "grid-radial-ripple-loader", "grid-cascade-cols-loader", "grid-sweep-rows-loader", "grid-spiral-traverse-loader", "grid-diamond-submatrix-loader", "grid-corner-collision-loader", "grid-stagger-3x3-loader", "grid-glitch-scatter-loader", "grid-cross-scan-loader", "grid-perimeter-flow-loader", "grid-bipolar-pulse-loader", "grid-diagonal-split-loader", "grid-hollow-cross-loader", "grid-snake-zigzag-loader", "grid-radar-sweep-loader", "grid-checker-ripple-loader", "grid-interlace-cols-loader", "grid-matrix-rain-loader", "square-perimeter-orbit-loader", "square-dual-chase-loader", "square-quad-corner-loader", "square-concentric-iris-loader", "square-nested-3x3-loader", "square-double-ring-loader", "square-collapse-implode-loader", "square-expand-explode-loader", "square-edge-sweep-loader", "square-opposing-tails-loader", "square-corner-pulse-loader", "square-hollow-wave-loader", "square-cross-fill-loader", "square-diagonal-split-loader", "square-snake-inward-loader", "square-radar-crosshair-loader", "square-checker-corners-loader", "square-leapfrog-edges-loader", "square-asym-notch-loader", "square-breathe-solid-loader", "square-tunnel-depth-loader", "square-stair-drop-loader", "square-dna-helix-loader", "square-vortex-spin-loader", "square-glitch-perimeter-loader", "square-echo-burst-loader", "square-magnetic-core-loader", "square-counter-scan-loader", "square-flicker-mesh-loader", "square-triple-orbit-loader", "circle-orbit-smooth-loader", "circle-dual-orbit-opposing-loader", "circle-triple-pulse-loader", "circle-iris-dilation-loader", "circle-radial-burst-loader", "circle-imploding-core-loader", "circle-compass-scan-loader", "circle-wave-crest-loader", "circle-eclipse-shadow-loader", "circle-split-arcs-loader", "circle-dna-orbit-loader", "circle-magnet-flux-loader", "circle-leapfrog-quad-loader", "circle-asym-crescent-loader", "circle-vortex-drain-loader", "circle-radar-blip-loader", "circle-stair-spiral-loader", "circle-checker-orbit-loader", "circle-flicker-corona-loader", "circle-glitch-orbit-loader", "circle-harmonic-pulse-loader", "circle-snake-tail-loader", "circle-triple-concentric-loader", "circle-bipolar-flash-loader", "circle-quad-quadrant-loader", "circle-orbit-handoff-loader", "circle-cross-intersection-loader", "circle-breathe-subtle-loader", "circle-supernova-blast-loader", "circle-hourglass-orbit-loader", "ring-orbit-single-loader", "ring-dual-chase-loader", "ring-quad-sync-loader", "ring-counter-spin-loader", "ring-breathe-glow-loader", "ring-staccato-pulse-loader", "ring-iris-expand-loader", "ring-collapse-center-loader", "ring-wave-ripple-loader", "ring-flicker-spark-loader", "ring-leapfrog-step-loader", "ring-snake-segment-loader", "ring-radar-sweep-loader", "ring-dna-twins-loader", "ring-vortex-accelerate-loader", "ring-bipolar-flash-loader", "ring-glitch-stutter-loader", "ring-magnet-attract-loader", "ring-checker-alt-loader", "ring-supernova-bloom-loader", "hex-perimeter-orbit-loader", "hex-dual-chase-loader", "hex-solid-breathe-loader", "hex-radial-burst-loader", "hex-implosion-core-loader", "hex-wave-traverse-loader", "hex-spiral-inward-loader", "hex-vertex-pulse-loader", "hex-counter-flow-loader", "hex-radar-scan-loader", "hex-dna-interlace-loader", "hex-magnet-pull-loader", "hex-leapfrog-hops-loader", "hex-iris-dilation-loader", "hex-stair-descent-loader", "hex-checker-phase-loader", "hex-vortex-swirl-loader", "hex-glitch-scatter-loader", "hex-flicker-sparkle-loader", "hex-column-scan-loader", "hex-diagonal-meteor-loader", "hex-asym-cut-loader", "hex-triple-orbit-loader", "hex-pulse-ring-loader", "hex-supernova-loader", "triangle-perimeter-orbit-loader", "triangle-dual-chase-loader", "triangle-apex-pulse-loader", "triangle-solid-breathe-loader", "triangle-wave-cascade-loader", "triangle-inverted-vortex-loader", "triangle-collapse-core-loader", "triangle-burst-explode-loader", "triangle-counter-flow-loader", "triangle-stair-drop-loader", "triangle-dna-helix-loader", "triangle-snake-perimeter-loader", "triangle-radar-sector-loader", "triangle-leapfrog-corners-loader", "triangle-iris-dilation-loader", "triangle-magnet-core-loader", "triangle-checker-lattice-loader", "triangle-glitch-edge-loader", "triangle-flicker-beacon-loader", "triangle-triple-apex-loader", "triangle-asym-right-loader", "triangle-bipolar-flash-loader", "triangle-supernova-loader", "triangle-column-sweep-loader", "triangle-pulse-hollow-loader", "diamond-orbit-smooth-loader", "diamond-dual-chase-loader", "diamond-radial-burst-loader", "diamond-solid-breathe-loader", "diamond-collapse-core-loader", "diamond-wave-ripple-loader", "diamond-stair-cascade-loader", "diamond-iris-dilation-loader", "diamond-vortex-spin-loader", "diamond-counter-flow-loader", "diamond-magnet-pulse-loader", "diamond-leapfrog-hops-loader", "diamond-snake-track-loader", "diamond-radar-sweep-loader", "diamond-dna-helix-loader", "diamond-checker-alt-loader", "diamond-flicker-gem-loader", "diamond-glitch-stutter-loader", "diamond-bipolar-flash-loader", "diamond-supernova-loader", "star-orbit-blaze-loader", "star-radial-burst-loader", "star-solid-breathe-loader", "star-flicker-twinkle-loader", "star-vortex-spin-loader", "star-collapse-implode-loader", "star-stair-cascade-loader", "star-radar-sweep-loader", "star-glitch-stutter-loader", "star-supernova-blast-loader", "cross-laser-sweep-loader", "cross-radial-burst-loader", "cross-imploding-arms-loader", "cross-quad-orbit-loader", "cross-breathe-glow-loader", "plus-diagonal-wave-loader", "plus-dual-chase-loader", "plus-iris-expansion-loader", "plus-magnet-pulse-loader", "x-diagonal-chase-loader", "x-corner-collision-loader", "x-radial-burst-loader", "x-dna-twins-loader", "x-counterflow-spin-loader", "x-vortex-acceleration-loader", "cross-leapfrog-step-loader", "cross-radar-sweep-loader", "cross-stair-cascade-loader", "cross-checker-alternate-loader", "cross-glitch-stutter-loader", "cross-flicker-spark-loader", "x-stair-descent-loader", "x-snake-track-loader", "x-supernova-blast-loader", "x-bipolar-flash-loader", "flower-petal-bloom-loader", "flower-orbit-petal-loader", "flower-solid-breathe-loader", "flower-vortex-swirl-loader", "flower-iris-dilation-loader", "flower-counter-spin-loader", "flower-flicker-dew-loader", "flower-stair-cascade-loader", "flower-radar-sweep-loader", "flower-glitch-stutter-loader", "spiral-inward-vortex-loader", "spiral-outward-burst-loader", "spiral-dual-galaxy-loader", "spiral-vortex-drain-loader", "spiral-wave-traverse-loader", "spiral-stair-descent-loader", "spiral-counter-flow-loader", "spiral-dna-helix-loader", "spiral-magnet-core-loader", "spiral-leapfrog-hop-loader", "spiral-radar-blip-loader", "spiral-flicker-spark-loader", "spiral-glitch-scatter-loader", "spiral-breathe-subtle-loader", "spiral-bipolar-flash-loader", "spiral-supernova-loader", "spiral-triple-track-loader", "spiral-iris-dilation-loader", "spiral-checker-alt-loader", "spiral-pulse-core-loader", "wave-sine-horizontal-loader", "wave-sine-vertical-loader", "wave-diagonal-crest-loader", "wave-counter-collision-loader", "wave-interlace-cascade-loader", "wave-radial-expansion-loader", "wave-stair-drop-loader", "wave-dna-helix-loader", "wave-vortex-spiral-loader", "wave-leapfrog-hops-loader", "wave-snake-undulation-loader", "wave-radar-beam-loader", "wave-magnet-surge-loader", "wave-checker-polarity-loader", "wave-glitch-distortion-loader", "wave-flicker-sea-loader", "wave-breathe-tide-loader", "wave-bipolar-surge-loader", "wave-supernova-crest-loader", "wave-iris-pulse-loader", "orbit-single-satellite-loader", "orbit-binary-stars-loader", "orbit-triple-system-loader", "orbit-quad-ring-loader", "orbit-counter-rotational-loader", "orbit-radial-burst-loader", "orbit-collapse-blackhole-loader", "orbit-dna-helix-loader", "orbit-vortex-cyclone-loader", "orbit-stair-quantum-loader", "orbit-leapfrog-pair-loader", "orbit-snake-comet-loader", "orbit-radar-sweep-loader", "orbit-magnet-flux-loader", "orbit-checker-polarity-loader", "orbit-glitch-drift-loader", "orbit-flicker-dust-loader", "orbit-breathe-harmony-loader", "orbit-bipolar-flash-loader", "orbit-supernova-flare-loader", "ripple-concentric-out-loader", "ripple-concentric-in-loader", "ripple-dual-source-loader", "ripple-diamond-pulse-loader", "ripple-square-contour-loader", "ripple-vortex-eddy-loader", "ripple-stair-drop-loader", "ripple-dna-helix-loader", "ripple-magnet-flux-loader", "ripple-leapfrog-wave-loader", "ripple-radar-blip-loader", "ripple-checker-alt-loader", "ripple-glitch-surface-loader", "ripple-flicker-pond-loader", "ripple-supernova-ring-loader", "burst-radial-nova-loader", "burst-quad-corner-loader", "burst-staccato-fire-loader", "burst-vortex-plasma-loader", "burst-iris-dilation-loader", "burst-counter-pulse-loader", "burst-dna-helix-loader", "burst-magnet-recoil-loader", "burst-leapfrog-cluster-loader", "burst-radar-ignition-loader", "burst-checker-flash-loader", "burst-glitch-scatter-loader", "burst-flicker-sparkle-loader", "burst-breathe-pulse-loader", "burst-supernova-core-loader", "matrix-digital-rain-loader", "matrix-laser-scan-loader", "matrix-diagonal-cascade-loader", "matrix-quantum-stutter-loader", "matrix-vortex-core-loader", "matrix-radar-sector-loader", "matrix-snake-traversal-loader", "matrix-dna-interlaced-loader", "matrix-magnet-collapse-loader", "matrix-leapfrog-swap-loader", "matrix-checker-polarity-loader", "matrix-flicker-static-loader", "matrix-breathe-subtle-loader", "matrix-bipolar-counter-loader", "matrix-supernova-flash-loader", "checker-alt-pulse-loader", "checker-wave-diagonal-loader", "checker-radial-ripple-loader", "checker-counter-flow-loader", "checker-vortex-spin-loader", "checker-stair-drop-loader", "checker-radar-sweep-loader", "checker-dna-helix-loader", "checker-glitch-stutter-loader", "checker-supernova-flash-loader", "radar-sweep-classic-loader", "radar-crosshair-scan-loader", "radar-dual-beam-loader", "radar-counter-sweep-loader", "radar-blip-pulse-loader", "radar-vortex-swirl-loader", "radar-stair-sector-loader", "radar-glitch-interference-loader", "radar-flicker-beacon-loader", "radar-supernova-burst-loader", "pyramid-apex-cascade-loader", "pyramid-inverted-funnel-loader", "pyramid-solid-breathe-loader", "pyramid-vortex-drain-loader", "pyramid-radial-burst-loader", "pyramid-counter-slide-loader", "pyramid-stair-steps-loader", "pyramid-dna-helix-loader", "pyramid-magnet-core-loader", "pyramid-leapfrog-tiers-loader", "pyramid-checker-alt-loader", "pyramid-glitch-stutter-loader", "pyramid-flicker-flame-loader", "pyramid-bipolar-flash-loader", "pyramid-supernova-loader", "chevron-up-sweep-loader", "chevron-down-cascade-loader", "chevron-right-pulse-loader", "chevron-left-pulse-loader", "chevron-dual-opposing-loader", "chevron-orbit-loop-loader", "chevron-vortex-spin-loader", "chevron-radial-burst-loader", "chevron-dna-helix-loader", "chevron-magnet-pull-loader", "chevron-leapfrog-forward-loader", "chevron-checker-alt-loader", "chevron-glitch-stutter-loader", "chevron-flicker-spark-loader", "chevron-supernova-loader", "heart-beat-pulse-loader", "heart-perimeter-orbit-loader", "heart-solid-breathe-loader", "heart-radial-burst-loader", "heart-stair-cascade-loader", "heart-counter-flow-loader", "heart-vortex-spin-loader", "heart-dna-helix-loader", "heart-flicker-spark-loader" ], "component_items": [ { "name": "atom-loader", "type": "registry:ui", "title": "Atom Loader", "description": "Universal CSS-animated matrix loader with 500+ pattern configurations." }, { "name": "dot-pulse-loader", "type": "registry:ui", "title": "Dot Pulse", "description": "A single central dot rhythmically pulsing with a soft glow." }, { "name": "dot-duo-orbit-loader", "type": "registry:ui", "title": "Dot Duo Orbit", "description": "Two opposing dots revolving around a vacant center point." }, { "name": "dot-trio-breathe-loader", "type": "registry:ui", "title": "Dot Trio Breathe", "description": "Three collinear dots breathing with phase-shifted opacity." }, { "name": "dot-quad-spin-loader", "type": "registry:ui", "title": "Dot Quad Spin", "description": "Four cardinal dots chasing each other in a continuous circular sequence." }, { "name": "dot-cross-bounce-loader", "type": "registry:ui", "title": "Dot Cross Bounce", "description": "Five dots forming a plus shape with energetic cross-harmonic bouncing." }, { "name": "dot-linear-cascade-loader", "type": "registry:ui", "title": "Dot Linear Cascade", "description": "A 5-dot horizontal row cascading left-to-right like a laser line." }, { "name": "dot-vertical-drip-loader", "type": "registry:ui", "title": "Dot Vertical Drip", "description": "A vertical stream of five particles falling smoothly downwards." }, { "name": "dot-diagonal-meteor-loader", "type": "registry:ui", "title": "Dot Diagonal Meteor", "description": "A diagonal streak of particles traveling downwards from corner to corner." }, { "name": "dot-corner-ping-loader", "type": "registry:ui", "title": "Dot Corner Ping", "description": "Four corner dots bouncing alternating energy across diagonals." }, { "name": "dot-center-burst-loader", "type": "registry:ui", "title": "Dot Center Burst", "description": "A center particle exploding outward to 8 surrounding boundary dots." }, { "name": "dot-split-merge-loader", "type": "registry:ui", "title": "Dot Split Merge", "description": "Two particles split from center, travel to opposite edges, and return." }, { "name": "dot-snake-3x3-loader", "type": "registry:ui", "title": "Dot Snake 3x3", "description": "A single particle tracing a continuous 3x3 serpentine path." }, { "name": "dot-flicker-sparse-loader", "type": "registry:ui", "title": "Dot Flicker Sparse", "description": "A randomized constellation of 6 sparse dots flickering unpredictably." }, { "name": "dot-magnet-pull-loader", "type": "registry:ui", "title": "Dot Magnet Pull", "description": "Outer perimeter dots pulled simultaneously toward the gravitational center." }, { "name": "dot-twin-helix-loader", "type": "registry:ui", "title": "Dot Twin Helix", "description": "Two interlaced vertical particle paths waving in counter-phase oscillation." }, { "name": "dot-leapfrog-line-loader", "type": "registry:ui", "title": "Dot Leapfrog Line", "description": "Particles leapfrogging over one another across a horizontal corridor." }, { "name": "dot-vortex-micro-loader", "type": "registry:ui", "title": "Dot Vortex Micro", "description": "A tight 4-dot vortex spinning with accelerating angular momentum." }, { "name": "dot-echo-pulse-loader", "type": "registry:ui", "title": "Dot Echo Pulse", "description": "A primary dot pulse followed by twin secondary micro-echoes." }, { "name": "dot-asym-corner-loader", "type": "registry:ui", "title": "Dot Asym Corner", "description": "An intentionally asymmetric cluster with 3 heavy corners and 1 light edge." }, { "name": "dot-matrix-scan-loader", "type": "registry:ui", "title": "Dot Matrix Scan", "description": "A roving single-dot laser scanning down through matrix coordinates." }, { "name": "grid-full-wave-loader", "type": "registry:ui", "title": "Grid Full Wave", "description": "A complete 5x5 matrix animated with smooth diagonal surface ripples." }, { "name": "grid-checker-invert-loader", "type": "registry:ui", "title": "Grid Checker Invert", "description": "Alternating checkerboard tiles swapping brightness polarity in rhythm." }, { "name": "grid-radial-ripple-loader", "type": "registry:ui", "title": "Grid Radial Ripple", "description": "Concentric rings propagating outwards through the 5x5 lattice." }, { "name": "grid-cascade-cols-loader", "type": "registry:ui", "title": "Grid Cascade Cols", "description": "Columns illuminating sequentially from left to right like an equalizer." }, { "name": "grid-sweep-rows-loader", "type": "registry:ui", "title": "Grid Sweep Rows", "description": "Horizontal rows sweeping downwards in a rhythmic vertical scan." }, { "name": "grid-spiral-traverse-loader", "type": "registry:ui", "title": "Grid Spiral Traverse", "description": "A continuous spiral path sweeping all 25 grid dots inward to center." }, { "name": "grid-diamond-submatrix-loader", "type": "registry:ui", "title": "Grid Diamond Submatrix", "description": "A dense 5x5 grid with diamond-weighted harmonic intensity." }, { "name": "grid-corner-collision-loader", "type": "registry:ui", "title": "Grid Corner Collision", "description": "Four corner wavefronts rushing to collide at the exact central node." }, { "name": "grid-stagger-3x3-loader", "type": "registry:ui", "title": "Grid Stagger 3x3", "description": "A tight 3x3 matrix firing in alternating staggered column pairs." }, { "name": "grid-glitch-scatter-loader", "type": "registry:ui", "title": "Grid Glitch Scatter", "description": "Digital glitch distortion randomly displacing active matrix clusters." }, { "name": "grid-cross-scan-loader", "type": "registry:ui", "title": "Grid Cross Scan", "description": "Simultaneous vertical and horizontal line scans intersecting at center." }, { "name": "grid-perimeter-flow-loader", "type": "registry:ui", "title": "Grid Perimeter Flow", "description": "Outer 16-dot border circulating clockwise around a quiescent interior." }, { "name": "grid-bipolar-pulse-loader", "type": "registry:ui", "title": "Grid Bipolar Pulse", "description": "Top and bottom grid rows pulsing in opposition against the middle tier." }, { "name": "grid-diagonal-split-loader", "type": "registry:ui", "title": "Grid Diagonal Split", "description": "Upper-left and lower-right triangles illuminating in antiphase cycle." }, { "name": "grid-hollow-cross-loader", "type": "registry:ui", "title": "Grid Hollow Cross", "description": "A matrix cross with hollow center pulsing outward like a radar crosshair." }, { "name": "grid-snake-zigzag-loader", "type": "registry:ui", "title": "Grid Snake Zigzag", "description": "Particles zig-zagging back and forth across every horizontal corridor." }, { "name": "grid-radar-sweep-loader", "type": "registry:ui", "title": "Grid Radar Sweep", "description": "A 360-degree radar beam scanning across the complete 5x5 grid." }, { "name": "grid-checker-ripple-loader", "type": "registry:ui", "title": "Grid Checker Ripple", "description": "Checkerboard pattern with outward traveling concentric brightness waves." }, { "name": "grid-interlace-cols-loader", "type": "registry:ui", "title": "Grid Interlace Cols", "description": "Even and odd columns oscillating up and down in counterflow motion." }, { "name": "grid-matrix-rain-loader", "type": "registry:ui", "title": "Grid Matrix Rain", "description": "Digital matrix data streams trickling down with independent column delays." }, { "name": "square-perimeter-orbit-loader", "type": "registry:ui", "title": "Square Perimeter Orbit", "description": "A bright single particle cycling around a 5x5 square perimeter." }, { "name": "square-dual-chase-loader", "type": "registry:ui", "title": "Square Dual Chase", "description": "Two diametrically opposed particles chasing around a square boundary." }, { "name": "square-quad-corner-loader", "type": "registry:ui", "title": "Square Quad Corner", "description": "Four particles initiating at corners, sweeping along edges in sync." }, { "name": "square-concentric-iris-loader", "type": "registry:ui", "title": "Square Concentric Iris", "description": "Concentric 5x5 outer and 3x3 inner square rings expanding and contracting." }, { "name": "square-nested-3x3-loader", "type": "registry:ui", "title": "Square Nested 3x3", "description": "A compact 3x3 square perimeter with rapid clockwise dot traversal." }, { "name": "square-double-ring-loader", "type": "registry:ui", "title": "Square Double Ring", "description": "Outer 5x5 square and inner 3x3 square spinning in counter-rotation." }, { "name": "square-collapse-implode-loader", "type": "registry:ui", "title": "Square Collapse Implode", "description": "A hollow square collapsing step-by-step into a solid central mass." }, { "name": "square-expand-explode-loader", "type": "registry:ui", "title": "Square Expand Explode", "description": "A single central pixel expanding outward to form a large square contour." }, { "name": "square-edge-sweep-loader", "type": "registry:ui", "title": "Square Edge Sweep", "description": "Each of the 4 edges illuminating in sequential clockwise cascade." }, { "name": "square-opposing-tails-loader", "type": "registry:ui", "title": "Square Opposing Tails", "description": "Two opposing light trails orbiting in reverse directions across square edges." }, { "name": "square-corner-pulse-loader", "type": "registry:ui", "title": "Square Corner Pulse", "description": "The 4 corner vertices pulsing with sharp, energetic accents." }, { "name": "square-hollow-wave-loader", "type": "registry:ui", "title": "Square Hollow Wave", "description": "A traveling wave cycling around hollow square boundaries." }, { "name": "square-cross-fill-loader", "type": "registry:ui", "title": "Square Cross Fill", "description": "A square that fills inwards via horizontal and vertical center bars." }, { "name": "square-diagonal-split-loader", "type": "registry:ui", "title": "Square Diagonal Split", "description": "A square perimeter cut diagonally with two asynchronous lighting phases." }, { "name": "square-snake-inward-loader", "type": "registry:ui", "title": "Square Snake Inward", "description": "A continuous snake crawling along square edges and spiraling to the center." }, { "name": "square-radar-crosshair-loader", "type": "registry:ui", "title": "Square Radar Crosshair", "description": "A square boundary with an internal sweeping radar crosshair." }, { "name": "square-checker-corners-loader", "type": "registry:ui", "title": "Square Checker Corners", "description": "A square perimeter with alternating corner and edge checker polarity." }, { "name": "square-leapfrog-edges-loader", "type": "registry:ui", "title": "Square Leapfrog Edges", "description": "Particles leapfrogging between adjacent midpoints of the square." }, { "name": "square-asym-notch-loader", "type": "registry:ui", "title": "Square Asym Notch", "description": "A square contour with one notched corner creating asymmetric orbit flow." }, { "name": "square-breathe-solid-loader", "type": "registry:ui", "title": "Square Breathe Solid", "description": "A solid 4x4 square breathing with smooth harmonic intensity waves." }, { "name": "square-tunnel-depth-loader", "type": "registry:ui", "title": "Square Tunnel Depth", "description": "Concentric square layers creating an illusion of 3D depth acceleration." }, { "name": "square-stair-drop-loader", "type": "registry:ui", "title": "Square Stair Drop", "description": "Square rows dropping down sequentially like gravity-driven stairs." }, { "name": "square-dna-helix-loader", "type": "registry:ui", "title": "Square DNA Helix", "description": "Opposing square sides oscillating vertically with sinusoidal delay offset." }, { "name": "square-vortex-spin-loader", "type": "registry:ui", "title": "Square Vortex Spin", "description": "A square matrix animated as an angular swirling vortex." }, { "name": "square-glitch-perimeter-loader", "type": "registry:ui", "title": "Square Glitch Perimeter", "description": "A square perimeter with digital micro-stutters and random dropouts." }, { "name": "square-echo-burst-loader", "type": "registry:ui", "title": "Square Echo Burst", "description": "A center dot exploding into a 3x3 square, followed by a 5x5 echo." }, { "name": "square-magnetic-core-loader", "type": "registry:ui", "title": "Square Magnetic Core", "description": "Outer square edges magnetized toward an active central nucleus." }, { "name": "square-counter-scan-loader", "type": "registry:ui", "title": "Square Counter Scan", "description": "Top and bottom edges scanning right, left and right edges scanning down." }, { "name": "square-flicker-mesh-loader", "type": "registry:ui", "title": "Square Flicker Mesh", "description": "A hollow square with flickering boundary nodes resembling digital circuitry." }, { "name": "square-triple-orbit-loader", "type": "registry:ui", "title": "Square Triple Orbit", "description": "Three particles distributed equally, traveling around a square ring." }, { "name": "circle-orbit-smooth-loader", "type": "registry:ui", "title": "Circle Orbit Smooth", "description": "A luminous particle orbiting smoothly around a circular 12-dot ring." }, { "name": "circle-dual-orbit-opposing-loader", "type": "registry:ui", "title": "Circle Dual Orbit Opposing", "description": "Two opposing particles traveling in counter-rotational directions." }, { "name": "circle-triple-pulse-loader", "type": "registry:ui", "title": "Circle Triple Pulse", "description": "Three equidistant particles orbiting around a circle with synchronized pulses." }, { "name": "circle-iris-dilation-loader", "type": "registry:ui", "title": "Circle Iris Dilation", "description": "A circular perimeter expanding and contracting like a camera aperture." }, { "name": "circle-radial-burst-loader", "type": "registry:ui", "title": "Circle Radial Burst", "description": "A center point bursting radially outward into a sparkling circular boundary." }, { "name": "circle-imploding-core-loader", "type": "registry:ui", "title": "Circle Imploding Core", "description": "A circular perimeter collapsing into a dense central nucleus." }, { "name": "circle-compass-scan-loader", "type": "registry:ui", "title": "Circle Compass Scan", "description": "Four cardinal dots rotating like a nautical compass pointer." }, { "name": "circle-wave-crest-loader", "type": "registry:ui", "title": "Circle Wave Crest", "description": "A sinusoidal crest circulating continuously around circular edges." }, { "name": "circle-eclipse-shadow-loader", "type": "registry:ui", "title": "Circle Eclipse Shadow", "description": "A traveling dark shadow occluding and revealing circular nodes." }, { "name": "circle-split-arcs-loader", "type": "registry:ui", "title": "Circle Split Arcs", "description": "Two semi-circular arcs separating and reconnecting at the poles." }, { "name": "circle-dna-orbit-loader", "type": "registry:ui", "title": "Circle DNA Orbit", "description": "Two interlaced particles oscillating along circular perimeter coordinates." }, { "name": "circle-magnet-flux-loader", "type": "registry:ui", "title": "Circle Magnet Flux", "description": "Radial flux lines pulling inwards and repelling outwards in breath cycle." }, { "name": "circle-leapfrog-quad-loader", "type": "registry:ui", "title": "Circle Leapfrog Quad", "description": "Four particles hopping over each other around circular positions." }, { "name": "circle-asym-crescent-loader", "type": "registry:ui", "title": "Circle Asym Crescent", "description": "An asymmetric crescent moon formation with energetic lead-edge lighting." }, { "name": "circle-vortex-drain-loader", "type": "registry:ui", "title": "Circle Vortex Drain", "description": "A swirling circular drain spinning with accelerating rotational speed." }, { "name": "circle-radar-blip-loader", "type": "registry:ui", "title": "Circle Radar Blip", "description": "A 360-degree radar sweep leaving a glowing blip at the circular perimeter." }, { "name": "circle-stair-spiral-loader", "type": "registry:ui", "title": "Circle Stair Spiral", "description": "Stepped circular progression descending through progressive quadrant steps." }, { "name": "circle-checker-orbit-loader", "type": "registry:ui", "title": "Circle Checker Orbit", "description": "Alternating active and passive dots circling around a central core." }, { "name": "circle-flicker-corona-loader", "type": "registry:ui", "title": "Circle Flicker Corona", "description": "A stellar solar corona with randomized twinkling circular flares." }, { "name": "circle-glitch-orbit-loader", "type": "registry:ui", "title": "Circle Glitch Orbit", "description": "A circular orbit that periodically stutters and jumps across angles." }, { "name": "circle-harmonic-pulse-loader", "type": "registry:ui", "title": "Circle Harmonic Pulse", "description": "A circular perimeter expanding in harmonic rhythm with central resonance." }, { "name": "circle-snake-tail-loader", "type": "registry:ui", "title": "Circle Snake Tail", "description": "A 6-dot snake wrapping around a circular path with an elongated tail." }, { "name": "circle-triple-concentric-loader", "type": "registry:ui", "title": "Circle Triple Concentric", "description": "Three concentric circular tiers expanding outward in wave phase." }, { "name": "circle-bipolar-flash-loader", "type": "registry:ui", "title": "Circle Bipolar Flash", "description": "Top and bottom arcs flashing alternately in high-contrast strobe rhythm." }, { "name": "circle-quad-quadrant-loader", "type": "registry:ui", "title": "Circle Quad Quadrant", "description": "Four quadrants of a circle lighting sequentially like a clock face." }, { "name": "circle-orbit-handoff-loader", "type": "registry:ui", "title": "Circle Orbit Handoff", "description": "Energy handed off between two orbiting particles at opposite poles." }, { "name": "circle-cross-intersection-loader", "type": "registry:ui", "title": "Circle Cross Intersection", "description": "A circular ring intersected by an interior cross with synchronized pulse." }, { "name": "circle-breathe-subtle-loader", "type": "registry:ui", "title": "Circle Breathe Subtle", "description": "A delicate 8-dot circle breathing with calm, meditative opacity." }, { "name": "circle-supernova-blast-loader", "type": "registry:ui", "title": "Circle Supernova Blast", "description": "An explosive core blast that illuminates the outer circle with high bloom." }, { "name": "circle-hourglass-orbit-loader", "type": "registry:ui", "title": "Circle Hourglass Orbit", "description": "A circle with an inner hourglass constriction guiding internal flow." }, { "name": "ring-orbit-single-loader", "type": "registry:ui", "title": "Ring Orbit Single", "description": "A classic smooth single dot orbiting a 12-particle circular perimeter." }, { "name": "ring-dual-chase-loader", "type": "registry:ui", "title": "Ring Dual Chase", "description": "Two trailing points chasing around the ring at 180-degree offset." }, { "name": "ring-quad-sync-loader", "type": "registry:ui", "title": "Ring Quad Sync", "description": "Four quadrant particles rotating in synchronized orbital harmony." }, { "name": "ring-counter-spin-loader", "type": "registry:ui", "title": "Ring Counter Spin", "description": "Two opposing light beams moving in opposite directions and passing through each other." }, { "name": "ring-breathe-glow-loader", "type": "registry:ui", "title": "Ring Breathe Glow", "description": "The entire ring expands and contracts in smooth luminosity waves." }, { "name": "ring-staccato-pulse-loader", "type": "registry:ui", "title": "Ring Staccato Pulse", "description": "Stepped rhythmic pulses firing in angular cadence around the ring." }, { "name": "ring-iris-expand-loader", "type": "registry:ui", "title": "Ring Iris Expand", "description": "Ring boundaries dilating outward with bright blooming perimeter nodes." }, { "name": "ring-collapse-center-loader", "type": "registry:ui", "title": "Ring Collapse Center", "description": "Outer ring collapsing toward center before radiating back out." }, { "name": "ring-wave-ripple-loader", "type": "registry:ui", "title": "Ring Wave Ripple", "description": "Sinusoidal amplitude waves traveling continuously around the ring." }, { "name": "ring-flicker-spark-loader", "type": "registry:ui", "title": "Ring Flicker Spark", "description": "Sparks dancing along ring circumference with subtle randomized decay." }, { "name": "ring-leapfrog-step-loader", "type": "registry:ui", "title": "Ring Leapfrog Step", "description": "Pairs of particles leapfrogging one another around the ring." }, { "name": "ring-snake-segment-loader", "type": "registry:ui", "title": "Ring Snake Segment", "description": "A continuous 5-dot snake gliding smoothly along the circumference." }, { "name": "ring-radar-sweep-loader", "type": "registry:ui", "title": "Ring Radar Sweep", "description": "Sweeping angular radar sector lighting ring nodes in rotation." }, { "name": "ring-dna-twins-loader", "type": "registry:ui", "title": "Ring DNA Twins", "description": "Dual intertwined phase nodes oscillating across the circular rim." }, { "name": "ring-vortex-accelerate-loader", "type": "registry:ui", "title": "Ring Vortex Accelerate", "description": "A vortex acceleration pulling particles around the perimeter into an eddy." }, { "name": "ring-bipolar-flash-loader", "type": "registry:ui", "title": "Ring Bipolar Flash", "description": "North and South arcs pulsing alternately with East and West arcs." }, { "name": "ring-glitch-stutter-loader", "type": "registry:ui", "title": "Ring Glitch Stutter", "description": "A ring orbit with intentional micro-stutters and sudden angle hops." }, { "name": "ring-magnet-attract-loader", "type": "registry:ui", "title": "Ring Magnet Attract", "description": "Ring nodes pulling in and bouncing back with elastic magnetic tension." }, { "name": "ring-checker-alt-loader", "type": "registry:ui", "title": "Ring Checker Alt", "description": "Even and odd ring dots oscillating in antiphase square wave rhythm." }, { "name": "ring-supernova-bloom-loader", "type": "registry:ui", "title": "Ring Supernova Bloom", "description": "A high-bloom flash traveling around the ring leaving an ethereal trail." }, { "name": "hex-perimeter-orbit-loader", "type": "registry:ui", "title": "Hex Perimeter Orbit", "description": "A bright particle traveling around a hexagonal matrix perimeter." }, { "name": "hex-dual-chase-loader", "type": "registry:ui", "title": "Hex Dual Chase", "description": "Two particles chasing each other around a 6-sided hexagonal ring." }, { "name": "hex-solid-breathe-loader", "type": "registry:ui", "title": "Hex Solid Breathe", "description": "A solid filled hexagon breathing with radiant harmonic waves." }, { "name": "hex-radial-burst-loader", "type": "registry:ui", "title": "Hex Radial Burst", "description": "A central hex core exploding outward to the 6 outer vertices." }, { "name": "hex-implosion-core-loader", "type": "registry:ui", "title": "Hex Implosion Core", "description": "Six hexagonal vertices collapsing sequentially into the center." }, { "name": "hex-wave-traverse-loader", "type": "registry:ui", "title": "Hex Wave Traverse", "description": "A sinusoidal wave propagating left-to-right through the hex lattice." }, { "name": "hex-spiral-inward-loader", "type": "registry:ui", "title": "Hex Spiral Inward", "description": "A particle following a tight hexagonal spiral path directly to the nucleus." }, { "name": "hex-vertex-pulse-loader", "type": "registry:ui", "title": "Hex Vertex Pulse", "description": "The six primary hexagonal corner vertices flashing in syncopated rhythm." }, { "name": "hex-counter-flow-loader", "type": "registry:ui", "title": "Hex Counter Flow", "description": "Upper and lower hex arcs rotating in opposing directional vectors." }, { "name": "hex-radar-scan-loader", "type": "registry:ui", "title": "Hex Radar Scan", "description": "A rotating radar beam sweeping across all hexagonal coordinate sectors." }, { "name": "hex-dna-interlace-loader", "type": "registry:ui", "title": "Hex DNA Interlace", "description": "Two intertwined nodes weaving in helical phase around the hexagon." }, { "name": "hex-magnet-pull-loader", "type": "registry:ui", "title": "Hex Magnet Pull", "description": "Hexagonal outer edges magnetized toward a pulsing central dot." }, { "name": "hex-leapfrog-hops-loader", "type": "registry:ui", "title": "Hex Leapfrog Hops", "description": "Particles leapfrogging between opposite vertices of the hexagon." }, { "name": "hex-iris-dilation-loader", "type": "registry:ui", "title": "Hex Iris Dilation", "description": "The hexagonal aperture expanding and contracting in breath cycles." }, { "name": "hex-stair-descent-loader", "type": "registry:ui", "title": "Hex Stair Descent", "description": "Stepped lighting cascading downwards row-by-row through the hexagon." }, { "name": "hex-checker-phase-loader", "type": "registry:ui", "title": "Hex Checker Phase", "description": "Alternating hexagonal nodes oscillating between light and dark phases." }, { "name": "hex-vortex-swirl-loader", "type": "registry:ui", "title": "Hex Vortex Swirl", "description": "An accelerating angular swirl sweeping through the hexagonal grid." }, { "name": "hex-glitch-scatter-loader", "type": "registry:ui", "title": "Hex Glitch Scatter", "description": "A hexagonal perimeter distorted with digital jitter and node dropouts." }, { "name": "hex-flicker-sparkle-loader", "type": "registry:ui", "title": "Hex Flicker Sparkle", "description": "Micro-flickers illuminating across the hex lattice like a cut gemstone." }, { "name": "hex-column-scan-loader", "type": "registry:ui", "title": "Hex Column Scan", "description": "Vertical columns sweeping across the hexagon from left to right." }, { "name": "hex-diagonal-meteor-loader", "type": "registry:ui", "title": "Hex Diagonal Meteor", "description": "Diagonal wavefront shooting across the hexagon from top-left to bottom-right." }, { "name": "hex-asym-cut-loader", "type": "registry:ui", "title": "Hex Asym Cut", "description": "An asymmetric hexagon with one clipped facet and dynamic lead lighting." }, { "name": "hex-triple-orbit-loader", "type": "registry:ui", "title": "Hex Triple Orbit", "description": "Three particles distributed around 120-degree hex vertices in orbit." }, { "name": "hex-pulse-ring-loader", "type": "registry:ui", "title": "Hex Pulse Ring", "description": "A hollow hex ring pulsing with sharp harmonic peaks." }, { "name": "hex-supernova-loader", "type": "registry:ui", "title": "Hex Supernova", "description": "A blazing nuclear center expanding to ignite all surrounding hex nodes." }, { "name": "triangle-perimeter-orbit-loader", "type": "registry:ui", "title": "Triangle Perimeter Orbit", "description": "A bright particle traveling around a 3-sided triangular perimeter." }, { "name": "triangle-dual-chase-loader", "type": "registry:ui", "title": "Triangle Dual Chase", "description": "Two trailing particles chasing each other along triangular edges." }, { "name": "triangle-apex-pulse-loader", "type": "registry:ui", "title": "Triangle Apex Pulse", "description": "Energy radiating from the top apex down through the base corners." }, { "name": "triangle-solid-breathe-loader", "type": "registry:ui", "title": "Triangle Solid Breathe", "description": "A solid filled triangle breathing with harmonic opacity waves." }, { "name": "triangle-wave-cascade-loader", "type": "registry:ui", "title": "Triangle Wave Cascade", "description": "Horizontal tiers lighting sequentially from apex down to base." }, { "name": "triangle-inverted-vortex-loader", "type": "registry:ui", "title": "Triangle Inverted Vortex", "description": "An inverted triangle with an internal swirling clockwise vortex." }, { "name": "triangle-collapse-core-loader", "type": "registry:ui", "title": "Triangle Collapse Core", "description": "Triangular vertices imploding into the geometric center point." }, { "name": "triangle-burst-explode-loader", "type": "registry:ui", "title": "Triangle Burst Explode", "description": "Center particle exploding outward into an expansive triangular shell." }, { "name": "triangle-counter-flow-loader", "type": "registry:ui", "title": "Triangle Counter Flow", "description": "Two edges lighting upward while the base sweeps right." }, { "name": "triangle-stair-drop-loader", "type": "registry:ui", "title": "Triangle Stair Drop", "description": "Particles cascading down the left and right slopes like water drops." }, { "name": "triangle-dna-helix-loader", "type": "registry:ui", "title": "Triangle DNA Helix", "description": "Left and right slanted edges oscillating in counter-phase sinusoidal wave." }, { "name": "triangle-snake-perimeter-loader", "type": "registry:ui", "title": "Triangle Snake Perimeter", "description": "A 4-dot snake continuously circumnavigating the triangle boundary." }, { "name": "triangle-radar-sector-loader", "type": "registry:ui", "title": "Triangle Radar Sector", "description": "A radar beam scanning across triangular angular coordinates." }, { "name": "triangle-leapfrog-corners-loader", "type": "registry:ui", "title": "Triangle Leapfrog Corners", "description": "Particles leaping across the three corner points in rhythm." }, { "name": "triangle-iris-dilation-loader", "type": "registry:ui", "title": "Triangle Iris Dilation", "description": "Triangular contour expanding and contracting with breathing aperture." }, { "name": "triangle-magnet-core-loader", "type": "registry:ui", "title": "Triangle Magnet Core", "description": "Three side edges magnetically pulled toward the centroid." }, { "name": "triangle-checker-lattice-loader", "type": "registry:ui", "title": "Triangle Checker Lattice", "description": "A triangular grid with alternating checkerboard nodes." }, { "name": "triangle-glitch-edge-loader", "type": "registry:ui", "title": "Triangle Glitch Edge", "description": "A triangle perimeter disrupted with randomized digital glitch stutters." }, { "name": "triangle-flicker-beacon-loader", "type": "registry:ui", "title": "Triangle Flicker Beacon", "description": "Twinkling beacon nodes highlighting the triangular contour." }, { "name": "triangle-triple-apex-loader", "type": "registry:ui", "title": "Triangle Triple Apex", "description": "Three concentric triangles nested within each other cascading outward." }, { "name": "triangle-asym-right-loader", "type": "registry:ui", "title": "Triangle Asym Right", "description": "A right-angled triangle with sharp asymmetrical wave acceleration." }, { "name": "triangle-bipolar-flash-loader", "type": "registry:ui", "title": "Triangle Bipolar Flash", "description": "Apex dot flashing in alternating rhythm against the bottom baseline." }, { "name": "triangle-supernova-loader", "type": "registry:ui", "title": "Triangle Supernova", "description": "High-intensity explosion bursting from the triangle center." }, { "name": "triangle-column-sweep-loader", "type": "registry:ui", "title": "Triangle Column Sweep", "description": "Vertical columns scanning left-to-right across the triangular shape." }, { "name": "triangle-pulse-hollow-loader", "type": "registry:ui", "title": "Triangle Pulse Hollow", "description": "A crisp hollow triangle pulsing with rhythmic energy peaks." }, { "name": "diamond-orbit-smooth-loader", "type": "registry:ui", "title": "Diamond Orbit Smooth", "description": "A glowing particle orbiting around a rotated 45-degree diamond contour." }, { "name": "diamond-dual-chase-loader", "type": "registry:ui", "title": "Diamond Dual Chase", "description": "Two particles chasing each other around diamond vertices in sync." }, { "name": "diamond-radial-burst-loader", "type": "registry:ui", "title": "Diamond Radial Burst", "description": "Central nucleus bursting outward along diamond diagonal axes." }, { "name": "diamond-solid-breathe-loader", "type": "registry:ui", "title": "Diamond Solid Breathe", "description": "A solid filled diamond breathing with meditative opacity waves." }, { "name": "diamond-collapse-core-loader", "type": "registry:ui", "title": "Diamond Collapse Core", "description": "Four diamond points imploding into the center point." }, { "name": "diamond-wave-ripple-loader", "type": "registry:ui", "title": "Diamond Wave Ripple", "description": "Concentric diamond waves rippling outward from the center." }, { "name": "diamond-stair-cascade-loader", "type": "registry:ui", "title": "Diamond Stair Cascade", "description": "Stepped lighting cascading from top apex to bottom point." }, { "name": "diamond-iris-dilation-loader", "type": "registry:ui", "title": "Diamond Iris Dilation", "description": "Diamond aperture dilating open and closed in smooth cycles." }, { "name": "diamond-vortex-spin-loader", "type": "registry:ui", "title": "Diamond Vortex Spin", "description": "An angular vortex spinning along diamond facets." }, { "name": "diamond-counter-flow-loader", "type": "registry:ui", "title": "Diamond Counter Flow", "description": "Left and right diamond facets rotating in opposing directions." }, { "name": "diamond-magnet-pulse-loader", "type": "registry:ui", "title": "Diamond Magnet Pulse", "description": "Four diamond points pulled inward by a strong magnetic core." }, { "name": "diamond-leapfrog-hops-loader", "type": "registry:ui", "title": "Diamond Leapfrog Hops", "description": "Particles leaping across the 4 cardinal diamond points." }, { "name": "diamond-snake-track-loader", "type": "registry:ui", "title": "Diamond Snake Track", "description": "A 4-dot snake gliding around diamond perimeter corners." }, { "name": "diamond-radar-sweep-loader", "type": "registry:ui", "title": "Diamond Radar Sweep", "description": "A sweeping radar beam traversing diamond coordinate angles." }, { "name": "diamond-dna-helix-loader", "type": "registry:ui", "title": "Diamond DNA Helix", "description": "Two diagonal diamond axes oscillating with harmonic phase delay." }, { "name": "diamond-checker-alt-loader", "type": "registry:ui", "title": "Diamond Checker Alt", "description": "Alternating nodes flashing in antiphase diamond polarity." }, { "name": "diamond-flicker-gem-loader", "type": "registry:ui", "title": "Diamond Flicker Gem", "description": "Gemstone sparkle flickering across internal diamond facets." }, { "name": "diamond-glitch-stutter-loader", "type": "registry:ui", "title": "Diamond Glitch Stutter", "description": "A diamond contour with digital jitter and micro-phase offsets." }, { "name": "diamond-bipolar-flash-loader", "type": "registry:ui", "title": "Diamond Bipolar Flash", "description": "Vertical points and horizontal points strobing in alternating beat." }, { "name": "diamond-supernova-loader", "type": "registry:ui", "title": "Diamond Supernova", "description": "A high-bloom diamond flare exploding across all coordinates." }, { "name": "star-orbit-blaze-loader", "type": "registry:ui", "title": "Star Orbit Blaze", "description": "A glowing particle orbiting around an 8-pointed star matrix." }, { "name": "star-radial-burst-loader", "type": "registry:ui", "title": "Star Radial Burst", "description": "Star rays bursting outwards from the central core." }, { "name": "star-solid-breathe-loader", "type": "registry:ui", "title": "Star Solid Breathe", "description": "A star constellation breathing with celestial opacity waves." }, { "name": "star-flicker-twinkle-loader", "type": "registry:ui", "title": "Star Flicker Twinkle", "description": "Randomized celestial twinkling across star vertices." }, { "name": "star-vortex-spin-loader", "type": "registry:ui", "title": "Star Vortex Spin", "description": "Star rays spinning with angular vortex acceleration." }, { "name": "star-collapse-implode-loader", "type": "registry:ui", "title": "Star Collapse Implode", "description": "Star points collapsing inward to create a dense core." }, { "name": "star-stair-cascade-loader", "type": "registry:ui", "title": "Star Stair Cascade", "description": "Star rays illuminating in clockwise sequence." }, { "name": "star-radar-sweep-loader", "type": "registry:ui", "title": "Star Radar Sweep", "description": "A radar beam sweeping across star points." }, { "name": "star-glitch-stutter-loader", "type": "registry:ui", "title": "Star Glitch Stutter", "description": "Digital glitch stutters distorting star point activation." }, { "name": "star-supernova-blast-loader", "type": "registry:ui", "title": "Star Supernova Blast", "description": "A blinding supernova blast radiating across star points." }, { "name": "cross-laser-sweep-loader", "type": "registry:ui", "title": "Cross Laser Sweep", "description": "Vertical and horizontal laser bars sweeping across a central nexus." }, { "name": "cross-radial-burst-loader", "type": "registry:ui", "title": "Cross Radial Burst", "description": "Central intersection bursting outward along the four orthogonal arms." }, { "name": "cross-imploding-arms-loader", "type": "registry:ui", "title": "Cross Imploding Arms", "description": "Four orthogonal arm tips collapsing simultaneously into the center." }, { "name": "cross-quad-orbit-loader", "type": "registry:ui", "title": "Cross Quad Orbit", "description": "Four dots traveling along cross boundaries in synchronized rotation." }, { "name": "cross-breathe-glow-loader", "type": "registry:ui", "title": "Cross Breathe Glow", "description": "A cross matrix breathing with radiant center-weighted glow." }, { "name": "plus-diagonal-wave-loader", "type": "registry:ui", "title": "Plus Diagonal Wave", "description": "A bold plus matrix illuminated with diagonal wavefronts." }, { "name": "plus-dual-chase-loader", "type": "registry:ui", "title": "Plus Dual Chase", "description": "Two particles chasing each other around the contours of a plus icon." }, { "name": "plus-iris-expansion-loader", "type": "registry:ui", "title": "Plus Iris Expansion", "description": "The center core expanding outward into the full plus boundary." }, { "name": "plus-magnet-pulse-loader", "type": "registry:ui", "title": "Plus Magnet Pulse", "description": "The outer arms snapping inward with strong magnetic attraction." }, { "name": "x-diagonal-chase-loader", "type": "registry:ui", "title": "X Diagonal Chase", "description": "Particles racing across intersecting diagonal X tracks." }, { "name": "x-corner-collision-loader", "type": "registry:ui", "title": "X Corner Collision", "description": "Four corner dots surging inward to collide at the exact X center." }, { "name": "x-radial-burst-loader", "type": "registry:ui", "title": "X Radial Burst", "description": "An energetic explosion blasting outward from the X intersection." }, { "name": "x-dna-twins-loader", "type": "registry:ui", "title": "X DNA Twins", "description": "Two diagonal legs oscillating with dual sinusoidal phase delay." }, { "name": "x-counterflow-spin-loader", "type": "registry:ui", "title": "X Counterflow Spin", "description": "Opposing diagonal tracks pulsing in counter-directional flow." }, { "name": "x-vortex-acceleration-loader", "type": "registry:ui", "title": "X Vortex Acceleration", "description": "Diagonal X arms spinning with progressive vortex acceleration." }, { "name": "cross-leapfrog-step-loader", "type": "registry:ui", "title": "Cross Leapfrog Step", "description": "Particles leapfrogging between horizontal and vertical arm positions." }, { "name": "cross-radar-sweep-loader", "type": "registry:ui", "title": "Cross Radar Sweep", "description": "A sweeping radar beam traversing the cross matrix." }, { "name": "cross-stair-cascade-loader", "type": "registry:ui", "title": "Cross Stair Cascade", "description": "Vertical arm cascading down while horizontal arm cascades right." }, { "name": "cross-checker-alternate-loader", "type": "registry:ui", "title": "Cross Checker Alternate", "description": "Horizontal and vertical arms flashing in alternating antiphase beat." }, { "name": "cross-glitch-stutter-loader", "type": "registry:ui", "title": "Cross Glitch Stutter", "description": "A cross matrix with digital jitter and micro-stutter dropouts." }, { "name": "cross-flicker-spark-loader", "type": "registry:ui", "title": "Cross Flicker Spark", "description": "Sparkling nodes illuminating randomly across cross arms." }, { "name": "x-stair-descent-loader", "type": "registry:ui", "title": "X Stair Descent", "description": "Stepped lighting cascading down the diagonal legs of an X." }, { "name": "x-snake-track-loader", "type": "registry:ui", "title": "X Snake Track", "description": "A continuous snake tracing through all 9 nodes of the X matrix." }, { "name": "x-supernova-blast-loader", "type": "registry:ui", "title": "X Supernova Blast", "description": "A brilliant supernova flash radiating across the diagonal X." }, { "name": "x-bipolar-flash-loader", "type": "registry:ui", "title": "X Bipolar Flash", "description": "Top two arms and bottom two arms strobing in alternating phase." }, { "name": "flower-petal-bloom-loader", "type": "registry:ui", "title": "Flower Petal Bloom", "description": "A floral matrix with four petals expanding in continuous bloom." }, { "name": "flower-orbit-petal-loader", "type": "registry:ui", "title": "Flower Orbit Petal", "description": "A bright particle traveling around the outer perimeter of 4 petals." }, { "name": "flower-solid-breathe-loader", "type": "registry:ui", "title": "Flower Solid Breathe", "description": "A complete floral formation breathing with harmonious radiance." }, { "name": "flower-vortex-swirl-loader", "type": "registry:ui", "title": "Flower Vortex Swirl", "description": "Petal nodes swirling in accelerating angular pinwheel motion." }, { "name": "flower-iris-dilation-loader", "type": "registry:ui", "title": "Flower Iris Dilation", "description": "Flower petals opening and closing in rhythmic breathing cycles." }, { "name": "flower-counter-spin-loader", "type": "registry:ui", "title": "Flower Counter Spin", "description": "Opposing petal pairs rotating in alternating directional arcs." }, { "name": "flower-flicker-dew-loader", "type": "registry:ui", "title": "Flower Flicker Dew", "description": "Dewdrop sparkles twinkling softly across floral petal nodes." }, { "name": "flower-stair-cascade-loader", "type": "registry:ui", "title": "Flower Stair Cascade", "description": "Petals lighting sequentially in a clockwise cascade." }, { "name": "flower-radar-sweep-loader", "type": "registry:ui", "title": "Flower Radar Sweep", "description": "A radar beam sweeping across all four floral quadrants." }, { "name": "flower-glitch-stutter-loader", "type": "registry:ui", "title": "Flower Glitch Stutter", "description": "A floral matrix with digital glitch displacements and phase jumps." }, { "name": "spiral-inward-vortex-loader", "type": "registry:ui", "title": "Spiral Inward Vortex", "description": "A luminous particle swirling along an inward logarithmic spiral." }, { "name": "spiral-outward-burst-loader", "type": "registry:ui", "title": "Spiral Outward Burst", "description": "A spiral unwinding from the center core to the outer boundary." }, { "name": "spiral-dual-galaxy-loader", "type": "registry:ui", "title": "Spiral Dual Galaxy", "description": "Two galactic spiral arms rotating in balanced symmetry." }, { "name": "spiral-vortex-drain-loader", "type": "registry:ui", "title": "Spiral Vortex Drain", "description": "Accelerating spiral vortex draining energy toward the central sink." }, { "name": "spiral-wave-traverse-loader", "type": "registry:ui", "title": "Spiral Wave Traverse", "description": "A progressive amplitude wave traveling along spiral coordinates." }, { "name": "spiral-stair-descent-loader", "type": "registry:ui", "title": "Spiral Stair Descent", "description": "Stepped lighting descending down a winding spiral staircase." }, { "name": "spiral-counter-flow-loader", "type": "registry:ui", "title": "Spiral Counter Flow", "description": "Two particles traversing the spiral in opposite directions." }, { "name": "spiral-dna-helix-loader", "type": "registry:ui", "title": "Spiral DNA Helix", "description": "Interlaced nodes oscillating in counter-phase around spiral coils." }, { "name": "spiral-magnet-core-loader", "type": "registry:ui", "title": "Spiral Magnet Core", "description": "A spiral contour magnetically drawn toward its central focus." }, { "name": "spiral-leapfrog-hop-loader", "type": "registry:ui", "title": "Spiral Leapfrog Hop", "description": "Particles leapfrogging between spiral arm revolutions." }, { "name": "spiral-radar-blip-loader", "type": "registry:ui", "title": "Spiral Radar Blip", "description": "A radar beam sweeping across spiral arm coordinates." }, { "name": "spiral-flicker-spark-loader", "type": "registry:ui", "title": "Spiral Flicker Spark", "description": "Sparkles flickering along spiral curves like burning powder." }, { "name": "spiral-glitch-scatter-loader", "type": "registry:ui", "title": "Spiral Glitch Scatter", "description": "Digital glitch displacement distorting the spiral pathway." }, { "name": "spiral-breathe-subtle-loader", "type": "registry:ui", "title": "Spiral Breathe Subtle", "description": "A full spiral matrix breathing in harmonic intensity cycles." } ], "component_count": 591, "components_truncated": true, "component_types": { "registry:ui": 591 }, "logo": "", "preview_image": "https://loader.roothq.tech/opengraph-image?42599ae02824b9b7", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [ "docs_unresolved" ], "featured": false }, { "number": 362, "name": "@mediadrop", "category": "Forms", "tags": [ "blocks", "forms", "loaders", "media" ], "tagline": "Drag-and-drop file upload blocks for React built on react-mediadrop — dropzone, avatar uploader, multi-file upload form, and direct-to-S3 upload.", "short_description": "", "description": "Drag-and-drop file upload blocks for React built on react-mediadrop — dropzone, avatar uploader, multi-file upload form, and direct-to-S3 upload.", "framework": "react", "homepage": "https://www.mediadrop.dev", "docs": "https://mediadrop.dev/docs", "github": "https://github.com/autorender/react-mediadrop", "components_github": "https://github.com/autorender/react-mediadrop/tree/main/registry", "github_default_branch": "main", "github_stars": 26, "last_commit": "2026-09-13T18:54:33Z", "archived": false, "license": "MIT", "open_issues": 10, "registry_template": "https://www.mediadrop.dev/r/{name}.json", "registry_index": "https://www.mediadrop.dev/r/registry.json", "components": [ "dropzone", "avatar-uploader", "multi-file-upload-form", "s3-direct-upload" ], "component_items": [ { "name": "dropzone", "type": "registry:block", "title": "MediaDrop Dropzone", "description": "Drag-and-drop file upload block built on react-mediadrop's useMediaDrop hook, with per-file progress and cancel." }, { "name": "avatar-uploader", "type": "registry:block", "title": "MediaDrop Avatar Uploader", "description": "Circular single-image avatar picker built on react-mediadrop's useMediaDrop hook, with click/drag replace and upload progress." }, { "name": "multi-file-upload-form", "type": "registry:block", "title": "MediaDrop Multi-File Upload Form", "description": "Multi-file picker with a review list and an explicit submit step — add files, then upload — with per-file progress, cancel, and retry." }, { "name": "s3-direct-upload", "type": "registry:block", "title": "MediaDrop S3 Direct Upload", "description": "Direct-to-S3 upload block using a presigned PUT URL you supply per file, built on react-mediadrop's xhr-upload transport." } ], "component_count": 4, "components_truncated": false, "component_types": { "registry:block": 4 }, "logo": "", "preview_image": "https://www.mediadrop.dev/og-image.png", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [], "featured": false }, { "number": 363, "name": "@ai2", "category": "Animated components", "tags": [ "accessibility", "ai", "animation", "auth", "buttons", "cards", "design-system", "forms", "glassmorphism", "hooks", "loaders", "media", "navigation", "overlays", "pro-available", "tables", "theming" ], "tagline": "Agent-native design system for the shadcn CLI: 51 base components with a full variant, tone and size matrix on an OKLCH token layer, plus 307 styled variations. MIT.", "short_description": "", "description": "Agent-native design system for the shadcn CLI: 51 base components with a full variant, tone and size matrix on an OKLCH token layer, plus 307 styled variations. MIT.", "framework": "react", "homepage": "https://ai2.design", "docs": "https://ai2.design/docs/installation", "github": "https://github.com/ai2design/ai2-registry", "components_github": "https://github.com/ai2design/ai2-registry/tree/main/registry", "github_default_branch": "main", "github_stars": 1, "last_commit": "2026-08-05T09:42:56Z", "archived": false, "license": "MIT", "open_issues": 0, "registry_template": "https://ai2.design/r/{name}.json", "registry_index": "https://ai2.design/r/registry.json", "components": [ "tokens", "button", "theme-indigo", "glass", "primitives", "primitives-base", "card", "file-input", "input-group", "input", "textarea", "label", "checkbox", "radio-group", "switch", "badge", "avatar", "progress", "skeleton", "spinner", "separator", "kbd", "field", "tabs", "accordion", "alert", "tooltip", "breadcrumb", "dialog", "sheet", "popover", "dropdown-menu", "select", "command", "sonner", "table", "alert-dialog", "toggle", "toggle-group", "pagination", "combobox", "slider", "scroll-area", "hover-card", "collapsible", "button-group", "empty", "item", "drawer", "input-otp", "calendar", "date-picker", "context-menu", "menubar", "resizable", "carousel", "accordion-demo", "alert-demo", "alert-dialog-demo", "avatar-demo", "badge-demo", "breadcrumb-demo", "button-demo", "card-demo", "checkbox-demo", "combobox-demo", "command-demo", "dialog-demo", "dropdown-menu-demo", "field-demo", "input-demo", "kbd-demo", "label-demo", "pagination-demo", "popover-demo", "progress-demo", "radio-group-demo", "select-demo", "separator-demo", "sheet-demo", "skeleton-demo", "sonner-demo", "spinner-demo", "switch-demo", "table-demo", "tabs-demo", "textarea-demo", "toggle-demo", "toggle-group-demo", "tooltip-demo", "file-input-demo", "input-group-demo", "button-group-demo", "collapsible-demo", "hover-card-demo", "scroll-area-demo", "slider-demo", "calendar-demo", "date-picker-demo", "drawer-demo", "empty-demo", "input-otp-demo", "item-demo", "carousel-demo", "context-menu-demo", "menubar-demo", "resizable-demo", "avatars-badge", "avatars-glass", "avatars-magnetic", "avatars-stack", "avatars-styled", "avatars-threed", "badges-animated", "badges-glass", "badges-particle", "badges-shine", "badges-status", "badges-styled", "buttons-3d", "buttons-animated", "buttons-glass", "buttons-glow", "buttons-gradient", "buttons-magnetic", "buttons-particle", "buttons-pill", "buttons-ripple", "buttons-shiny", "buttons-stroke", "buttons-text-animated", "inputs-glass", "inputs-magnetic", "inputs-otp", "inputs-styled", "inputs-typewriter", "inputs-validation", "loaders-dna", "loaders-morph", "loaders-orbital", "loaders-particle", "loaders-skeleton", "loaders-styled", "loaders-text", "progress-circular", "progress-indeterminate", "progress-liquid", "progress-stepped", "progress-styled", "progress-threed", "toggles-3d", "toggles-liquid", "toggles-neon", "toggles-particle", "toggles-styled", "toggles-themed", "tooltips-animated", "tooltips-interactive", "tooltips-magnetic", "tooltips-rich", "tooltips-shape", "tooltips-styled", "alert-styled", "card-styled", "checkbox-styled", "separator-styled", "skeleton-styled", "textarea-styled", "accordion-styled", "kbd-styled", "label-styled", "radio-group-styled", "slider-styled", "tabs-styled", "alert-dialog-styled", "dialog-styled", "drawer-styled", "hover-card-styled", "popover-styled", "sheet-styled", "breadcrumb-styled", "command-styled", "context-menu-styled", "dropdown-menu-styled", "menubar-styled", "pagination-styled", "combobox-styled", "field-styled", "file-input-styled", "input-group-styled", "input-otp-styled", "select-styled", "button-group-styled", "calendar-styled", "date-picker-styled", "item-styled", "table-styled", "toggle-group-styled", "carousel-styled", "collapsible-styled", "empty-styled", "resizable-styled", "scroll-area-styled", "sonner-styled", "dialog-blur", "dialog-bordered", "dialog-corner", "dialog-header", "dialog-motion", "alert-dialog-accent", "alert-dialog-glass", "alert-dialog-illustration", "alert-dialog-layout", "alert-dialog-motion", "sheet-blur", "sheet-content", "sheet-header", "sheet-inset", "sheet-motion", "hover-card-accent", "hover-card-layout", "hover-card-motion", "hover-card-placement", "hover-card-tone", "popover-accent", "popover-compact", "popover-motion", "popover-placement", "popover-tone", "drawer-blur", "drawer-content", "drawer-header", "drawer-motion", "drawer-side", "accordion-accent", "accordion-glass", "accordion-numbered", "accordion-timeline", "accordion-underline", "carousel-coverflow", "carousel-fraction", "carousel-parallax", "carousel-thumbnails", "carousel-vertical", "collapsible-accent", "collapsible-glass", "collapsible-notice", "collapsible-split", "collapsible-underline", "resizable-accent", "resizable-inset", "resizable-minimal", "resizable-panel", "resizable-ratio", "scroll-area-fade", "scroll-area-gutter", "scroll-area-inset", "scroll-area-primary", "scroll-area-shadow", "alert-action", "alert-banner", "alert-motion", "alert-outline", "alert-solid", "breadcrumb-collapse", "empty-error", "empty-glass", "empty-motion", "empty-onboarding", "empty-search", "pagination-glass", "skeleton-avatar", "skeleton-card", "skeleton-shapes", "skeleton-table", "skeleton-text", "sonner-compact", "sonner-motion", "sonner-position", "sonner-progress", "sonner-rich", "breadcrumb-bar", "breadcrumb-glass", "breadcrumb-icon", "breadcrumb-motion", "command-accent", "command-compact", "command-dialog", "command-empty", "command-motion", "context-menu-check", "context-menu-compact", "context-menu-glass", "context-menu-motion", "context-menu-submenu", "dropdown-menu-glass", "dropdown-menu-motion", "dropdown-menu-placement", "dropdown-menu-shortcut", "dropdown-menu-tone", "menubar-accent", "menubar-dense", "menubar-motion", "menubar-shortcut", "menubar-tone", "pagination-compact", "pagination-motion", "pagination-outline", "pagination-rich", "tabs-accent", "tabs-badge", "tabs-glass", "tabs-motion", "tabs-vertical", "button-group-glass", "button-group-icon", "button-group-motion", "button-group-tone", "button-group-vertical", "calendar-event", "calendar-minimal", "calendar-motion", "calendar-tone", "calendar-week", "card-media", "card-motion", "card-outline", "card-pricing", "card-stat", "checkbox-card", "checkbox-indeterminate", "checkbox-list", "checkbox-switch", "checkbox-tone", "combobox-async", "combobox-motion", "combobox-multi", "combobox-rich", "combobox-tone", "date-picker-compact", "date-picker-motion", "date-picker-preset", "date-picker-time", "date-picker-tone", "field-glass", "field-group", "field-help", "field-motion", "field-validation", "file-input-compact", "file-input-motion", "file-input-preview", "file-input-progress", "file-input-tone", "input-group-action", "input-group-glass", "input-group-search", "input-group-tone", "input-group-unit", "input-otp-glass", "input-otp-length", "input-otp-motion", "input-otp-state", "input-otp-tone", "item-drag", "item-media", "item-motion", "item-select", "item-status", "kbd-combo", "kbd-glass", "kbd-mac", "kbd-motion", "kbd-tone", "label-badge", "label-float", "label-help", "label-size", "label-tone", "radio-group-glass", "radio-group-image", "radio-group-list", "radio-group-motion", "radio-group-tone", "select-motion", "select-multi", "select-rich", "select-search", "select-tone", "separator-decorative", "separator-dotted", "separator-thick", "separator-tone", "separator-vertical", "slider-marks", "slider-minimal", "slider-range", "slider-tone", "slider-vertical", "table-glass" ], "component_items": [ { "name": "tokens", "type": "registry:theme", "title": "ai2 Tokens", "description": "ai2 extension tokens: tone colors (brand, success, warning, danger, info + soft pairs), surface-2/3 and motion variables. Required by every ai2 component; inst…" }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "Button with a full variant x tone x size matrix: 5 variants (solid, soft, outline, ghost, link), 6 tones (neutral, brand, success, warning, danger, info), 10 s…" }, { "name": "theme-indigo", "type": "registry:theme", "title": "ai2 Indigo", "description": "Indigo brand theme for ai2: recolors the brand tone channel (solid + soft pairs) in light and dark mode. Install on top of any ai2 setup; every component using…" }, { "name": "glass", "type": "registry:lib", "title": "Glass", "description": "Floating surface treatments: glass.overlay (translucent + blur, for tooltips/dropdowns), glass.frosted (heavier blur + deep layered shadow, for modals), glass.…" }, { "name": "primitives", "type": "registry:lib", "title": "Primitives", "description": "Headless primitive adapter: the single entry point every ai2 component imports its unstyled behaviour from. Components never import the primitive library direc…" }, { "name": "primitives-base", "type": "registry:lib", "title": "Primitives (Base UI)", "description": "The second provider behind the ai2 primitive adapter: the same surface as @ai2/primitives, bound to Base UI instead of Radix. A pro block imports the adapter, …" }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "Card surface with 4 variants (outline, elevated, soft, glass) and 3 inset scales (sm, md, lg) that pad header, content and footer together. Parts: Card, CardHe…" }, { "name": "file-input", "type": "registry:ui", "title": "File Input", "description": "Styled file picker: hidden native input under a custom surface with a leading icon (lucide or remixicon), placeholder or selected file name, multiple-file coun…" }, { "name": "input-group", "type": "registry:ui", "title": "Input Group", "description": "Composable input shell: InputGroup carries the field appearance with 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg) and 3 tones (neutral, success, dan…" }, { "name": "input", "type": "registry:ui", "title": "Input", "description": "Text input with 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg) and 3 tones (neutral, success, danger) for validation states via border and focus ring …" }, { "name": "textarea", "type": "registry:ui", "title": "Textarea", "description": "Auto-growing textarea (field-sizing-content) with 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg) and 3 tones (neutral, success, danger) matching Input…" }, { "name": "label", "type": "registry:ui", "title": "Label", "description": "Accessible form label built on radix-ui Label with 2 sizes (sm, md). Auto-dims when the associated control is disabled." }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "Checkbox on radix-ui with 4 tones (neutral, brand, success, danger) and 3 sizes (sm, md, lg). Invalid state via aria-invalid." }, { "name": "radio-group", "type": "registry:ui", "title": "Radio Group", "description": "Radio group + item on radix-ui with 4 tones and 3 sizes. Exports RadioGroup and RadioGroupItem." }, { "name": "switch", "type": "registry:ui", "title": "Switch", "description": "Toggle switch on radix-ui with 4 tones (neutral, brand, success, danger) and 3 sizes (sm, md, lg). Thumb travel and easing use ai2 motion tokens." }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "Badge with a variant x tone x size matrix: 3 variants (solid, soft, outline), 6 tones, 3 sizes (sm, md, lg). Icons work with both lucide svg and remixicon i ch…" }, { "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "Avatar on radix-ui with 5 sizes (xs-xl) and 2 shapes (circle, rounded), plus AvatarGroup for overlapping stacks with an optional max that collapses the rest in…" }, { "name": "progress", "type": "registry:ui", "title": "Progress", "description": "Progress bar on radix-ui with 6 tones (neutral, brand, success, warning, danger, info) and 3 sizes. Fill animates using ai2 motion tokens." }, { "name": "skeleton", "type": "registry:ui", "title": "Skeleton", "description": "Loading placeholder on the ai2 surface-3 token with 3 shapes (line, circle, rect) and 2 animations (pulse, none). Style dimensions via className." }, { "name": "spinner", "type": "registry:ui", "title": "Spinner", "description": "Loading spinner (lucide) with 3 tones (current, brand, muted) and 4 sizes (sm-xl). Has role=status and an aria-label." }, { "name": "separator", "type": "registry:ui", "title": "Separator", "description": "Horizontal or vertical divider on radix-ui with 2 variants (solid, dashed) and an optional centered label that renders a two-line divider with text (e.g. OR). …" }, { "name": "kbd", "type": "registry:ui", "title": "Kbd", "description": "Keyboard key hint styled with the ai2 mono font and surface tokens. Use for shortcuts and command hints." }, { "name": "field", "type": "registry:ui", "title": "Field", "description": "Form field composition: Field, FieldControl, FieldLabel, FieldDescription, FieldError. Auto-wires accessibility: FieldControl (a Slot around any control) recei…" }, { "name": "tabs", "type": "registry:ui", "title": "Tabs", "description": "Tabs on radix-ui with 3 variants (solid segmented, line underline, pill) and 2 sizes (sm, md). Variant and size flow from TabsList to every trigger via context…" }, { "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "Accordion on radix-ui with 3 variants (default divided rows, separated cards, outline boxed) plus animated open/close (ai2 motion tokens) and a rotating chevro…" }, { "name": "alert", "type": "registry:ui", "title": "Alert", "description": "Alert with a variant x tone matrix: 2 variants (soft, outline) x 6 tones. Optional leading icon, AlertTitle and AlertDescription. role=alert." }, { "name": "tooltip", "type": "registry:ui", "title": "Tooltip", "description": "Tooltip on radix-ui with portal, arrow, directional slide/zoom animations and 2 content sizes (sm, md). Tooltip wraps its own Provider, so a single import work…" }, { "name": "breadcrumb", "type": "registry:ui", "title": "Breadcrumb", "description": "Accessible breadcrumb (nav + ordered list) with link, current page, separator and ellipsis parts. Semantic aria-current on the active page." }, { "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "Modal dialog on radix-ui with portal, overlay, focus trap, fade/zoom animations and 5 content sizes (sm, md, lg, xl, full) that cap the width from the sm break…" }, { "name": "sheet", "type": "registry:ui", "title": "Sheet", "description": "Slide-in panel on radix-ui Dialog with 4 sides (right, left, top, bottom), 3 sizes (sm, md, lg) that set the panel width for the left/right sides, and directio…" }, { "name": "popover", "type": "registry:ui", "title": "Popover", "description": "Popover on radix-ui with portal, directional slide/zoom animations, 3 content sizes (sm, md, lg) and an optional anchor. Exports Popover, PopoverTrigger, Popov…" }, { "name": "dropdown-menu", "type": "registry:ui", "title": "Dropdown Menu", "description": "Full dropdown menu on radix-ui: items (default + danger variant), checkbox items, radio group, submenus, labels, separators and shortcuts. Keyboard navigable." }, { "name": "select", "type": "registry:ui", "title": "Select", "description": "Select on radix-ui. Trigger follows the Input contract: 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg), 3 tones (neutral, success, danger). Grouped it…" }, { "name": "command", "type": "registry:ui", "title": "Command", "description": "Command palette (cmdk) with fuzzy search, groups, items, shortcuts and a CommandDialog wrapper for a ⌘K experience." }, { "name": "sonner", "type": "registry:ui", "title": "Toast (Sonner)", "description": "Toast notifications via sonner, themed with ai2 tokens and synced to next-themes. Drop the Toaster once in your root layout, then call toast() anywhere." }, { "name": "table", "type": "registry:ui", "title": "Table", "description": "Composable table primitives (Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption) with hover rows, selected state and hori…" }, { "name": "alert-dialog", "type": "registry:ui", "title": "Alert Dialog", "description": "Confirmation dialog on radix-ui AlertDialog for destructive or irreversible actions. Action button defaults to the danger tone; cancel is focused first per WAI…" }, { "name": "toggle", "type": "registry:ui", "title": "Toggle", "description": "Two-state toggle button on radix-ui with 2 variants (default, outline), 3 sizes and 2 tones (neutral, brand). Pressed state uses the accent token (neutral) or …" }, { "name": "toggle-group", "type": "registry:ui", "title": "Toggle Group", "description": "Single or multiple selection toggle group on radix-ui. Inherits variant/size/tone from the group via context; outline variant renders as a segmented control." }, { "name": "pagination", "type": "registry:ui", "title": "Pagination", "description": "Accessible pagination nav (previous/next, page links, ellipsis) styled with ai2 button variants. Current page gets aria-current." }, { "name": "combobox", "type": "registry:ui", "title": "Combobox", "description": "Searchable single-select built from Popover + Command. Trigger follows the Input contract: 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg), 3 tones (ne…" }, { "name": "slider", "type": "registry:ui", "title": "Slider", "description": "Range slider on radix-ui with 4 tones (neutral, brand, success, danger) coloring the range and thumb, and 3 sizes (sm, md, lg) for the track and thumb. Support…" }, { "name": "scroll-area", "type": "registry:ui", "title": "Scroll Area", "description": "Custom cross-browser scroll container on radix-ui with a thin token-colored scrollbar. Exports ScrollArea and ScrollBar (vertical or horizontal orientation)." }, { "name": "hover-card", "type": "registry:ui", "title": "Hover Card", "description": "Rich hover preview on radix-ui with portal, directional slide/zoom animations and 3 content sizes (sm, md, lg). Exports HoverCard, HoverCardTrigger, HoverCardC…" }, { "name": "collapsible", "type": "registry:ui", "title": "Collapsible", "description": "Single expand/collapse region on radix-ui. Exports Collapsible, CollapsibleTrigger, CollapsibleContent. Unstyled by design so it composes into any layout." }, { "name": "button-group", "type": "registry:ui", "title": "Button Group", "description": "Joins buttons, inputs and selects into a single segmented control on horizontal or vertical orientation, collapsing inner radii and borders. Exports ButtonGrou…" }, { "name": "empty", "type": "registry:ui", "title": "Empty", "description": "Empty-state placeholder: Empty wrapper with EmptyHeader, EmptyMedia (default or icon variant), EmptyTitle, EmptyDescription and EmptyContent for actions. Cente…" }, { "name": "item", "type": "registry:ui", "title": "Item", "description": "List/row primitive with 3 variants (default, outline, muted) and 2 sizes (default, sm). Parts: Item, ItemGroup, ItemMedia (default/icon/image), ItemContent, It…" }, { "name": "drawer", "type": "registry:ui", "title": "Drawer", "description": "Draggable drawer on vaul with 4 directions (top, right, bottom, left), a drag handle on the bottom variant, overlay and snap behavior. Exports Drawer, DrawerTr…" }, { "name": "input-otp", "type": "registry:ui", "title": "Input OTP", "description": "One-time-passcode input on input-otp with individual slots, a blinking fake caret, active-slot ring and aria-invalid danger styling. Exports InputOTP, InputOTP…" }, { "name": "calendar", "type": "registry:ui", "title": "Calendar", "description": "Date calendar on react-day-picker v10 styled with ai2 Button and tokens. Single, multiple and range selection, dropdown or label caption, outside days, week nu…" }, { "name": "date-picker", "type": "registry:ui", "title": "Date Picker", "description": "Date field that opens a Calendar in a Popover. Controlled or uncontrolled via value/defaultValue and onValueChange; formats the selected date with date-fns and…" }, { "name": "context-menu", "type": "registry:ui", "title": "Context Menu", "description": "Right-click menu on radix-ui with items, checkbox and radio items, submenus, labels, separators and shortcuts. Item variant default or danger. Icons work with …" }, { "name": "menubar", "type": "registry:ui", "title": "Menubar", "description": "Application menu bar on radix-ui with top-level menus, items, checkbox and radio items, submenus, labels, separators and shortcuts. Item variant default or dan…" }, { "name": "resizable", "type": "registry:ui", "title": "Resizable", "description": "Resizable split panels on react-resizable-panels with horizontal or vertical groups and an optional drag handle. Exports ResizablePanelGroup, ResizablePanel, R…" }, { "name": "carousel", "type": "registry:ui", "title": "Carousel", "description": "Slider/carousel on embla-carousel-react with horizontal or vertical orientation, keyboard support and prev/next controls built from ai2 Button. Exports Carouse…" }, { "name": "accordion-demo", "type": "registry:example", "title": "Accordion Demo", "description": "Usage example for the ai2 accordion component." }, { "name": "alert-demo", "type": "registry:example", "title": "Alert Demo", "description": "Usage example for the ai2 alert component." }, { "name": "alert-dialog-demo", "type": "registry:example", "title": "Alert dialog Demo", "description": "Usage example for the ai2 alert-dialog component." }, { "name": "avatar-demo", "type": "registry:example", "title": "Avatar Demo", "description": "Usage example for the ai2 avatar component." }, { "name": "badge-demo", "type": "registry:example", "title": "Badge Demo", "description": "Usage example for the ai2 badge component." }, { "name": "breadcrumb-demo", "type": "registry:example", "title": "Breadcrumb Demo", "description": "Usage example for the ai2 breadcrumb component." }, { "name": "button-demo", "type": "registry:example", "title": "Button Demo", "description": "Usage example for the ai2 button component." }, { "name": "card-demo", "type": "registry:example", "title": "Card Demo", "description": "Usage example for the ai2 card component." }, { "name": "checkbox-demo", "type": "registry:example", "title": "Checkbox Demo", "description": "Usage example for the ai2 checkbox component." }, { "name": "combobox-demo", "type": "registry:example", "title": "Combobox Demo", "description": "Usage example for the ai2 combobox component." }, { "name": "command-demo", "type": "registry:example", "title": "Command Demo", "description": "Usage example for the ai2 command component." }, { "name": "dialog-demo", "type": "registry:example", "title": "Dialog Demo", "description": "Usage example for the ai2 dialog component." }, { "name": "dropdown-menu-demo", "type": "registry:example", "title": "Dropdown menu Demo", "description": "Usage example for the ai2 dropdown-menu component." }, { "name": "field-demo", "type": "registry:example", "title": "Field Demo", "description": "Usage example for the ai2 field component." }, { "name": "input-demo", "type": "registry:example", "title": "Input Demo", "description": "Usage example for the ai2 input component." }, { "name": "kbd-demo", "type": "registry:example", "title": "Kbd Demo", "description": "Usage example for the ai2 kbd component." }, { "name": "label-demo", "type": "registry:example", "title": "Label Demo", "description": "Usage example for the ai2 label component." }, { "name": "pagination-demo", "type": "registry:example", "title": "Pagination Demo", "description": "Usage example for the ai2 pagination component." }, { "name": "popover-demo", "type": "registry:example", "title": "Popover Demo", "description": "Usage example for the ai2 popover component." }, { "name": "progress-demo", "type": "registry:example", "title": "Progress Demo", "description": "Usage example for the ai2 progress component." }, { "name": "radio-group-demo", "type": "registry:example", "title": "Radio group Demo", "description": "Usage example for the ai2 radio-group component." }, { "name": "select-demo", "type": "registry:example", "title": "Select Demo", "description": "Usage example for the ai2 select component." }, { "name": "separator-demo", "type": "registry:example", "title": "Separator Demo", "description": "Usage example for the ai2 separator component." }, { "name": "sheet-demo", "type": "registry:example", "title": "Sheet Demo", "description": "Usage example for the ai2 sheet component." }, { "name": "skeleton-demo", "type": "registry:example", "title": "Skeleton Demo", "description": "Usage example for the ai2 skeleton component." }, { "name": "sonner-demo", "type": "registry:example", "title": "Sonner Demo", "description": "Usage example for the ai2 sonner component." }, { "name": "spinner-demo", "type": "registry:example", "title": "Spinner Demo", "description": "Usage example for the ai2 spinner component." }, { "name": "switch-demo", "type": "registry:example", "title": "Switch Demo", "description": "Usage example for the ai2 switch component." }, { "name": "table-demo", "type": "registry:example", "title": "Table Demo", "description": "Usage example for the ai2 table component." }, { "name": "tabs-demo", "type": "registry:example", "title": "Tabs Demo", "description": "Usage example for the ai2 tabs component." }, { "name": "textarea-demo", "type": "registry:example", "title": "Textarea Demo", "description": "Usage example for the ai2 textarea component." }, { "name": "toggle-demo", "type": "registry:example", "title": "Toggle Demo", "description": "Usage example for the ai2 toggle component." }, { "name": "toggle-group-demo", "type": "registry:example", "title": "Toggle group Demo", "description": "Usage example for the ai2 toggle-group component." }, { "name": "tooltip-demo", "type": "registry:example", "title": "Tooltip Demo", "description": "Usage example for the ai2 tooltip component." }, { "name": "file-input-demo", "type": "registry:example", "title": "File input Demo", "description": "Usage example for the ai2 file-input component." }, { "name": "input-group-demo", "type": "registry:example", "title": "Input group Demo", "description": "Usage example for the ai2 input-group component." }, { "name": "button-group-demo", "type": "registry:example", "title": "Button group Demo", "description": "Usage example for the ai2 button-group component." }, { "name": "collapsible-demo", "type": "registry:example", "title": "Collapsible Demo", "description": "Usage example for the ai2 collapsible component." }, { "name": "hover-card-demo", "type": "registry:example", "title": "Hover card Demo", "description": "Usage example for the ai2 hover-card component." }, { "name": "scroll-area-demo", "type": "registry:example", "title": "Scroll area Demo", "description": "Usage example for the ai2 scroll-area component." }, { "name": "slider-demo", "type": "registry:example", "title": "Slider Demo", "description": "Usage example for the ai2 slider component." }, { "name": "calendar-demo", "type": "registry:example", "title": "Calendar Demo", "description": "Usage example for the ai2 calendar component." }, { "name": "date-picker-demo", "type": "registry:example", "title": "Date picker Demo", "description": "Usage example for the ai2 date-picker component." }, { "name": "drawer-demo", "type": "registry:example", "title": "Drawer Demo", "description": "Usage example for the ai2 drawer component." }, { "name": "empty-demo", "type": "registry:example", "title": "Empty Demo", "description": "Usage example for the ai2 empty component." }, { "name": "input-otp-demo", "type": "registry:example", "title": "Input otp Demo", "description": "Usage example for the ai2 input-otp component." }, { "name": "item-demo", "type": "registry:example", "title": "Item Demo", "description": "Usage example for the ai2 item component." }, { "name": "carousel-demo", "type": "registry:example", "title": "Carousel Demo", "description": "Usage example for the ai2 carousel component." }, { "name": "context-menu-demo", "type": "registry:example", "title": "Context menu Demo", "description": "Usage example for the ai2 context-menu component." }, { "name": "menubar-demo", "type": "registry:example", "title": "Menubar Demo", "description": "Usage example for the ai2 menubar component." }, { "name": "resizable-demo", "type": "registry:example", "title": "Resizable Demo", "description": "Usage example for the ai2 resizable component." }, { "name": "avatars-badge", "type": "registry:component", "title": "Badge avatars", "description": "Styled avatars: the Badge set. 5 decorative avatars variations (NotifyAvatar, StatusRingAvatar, TypingAvatar, NewAvatar, VerifiedAvatar) on the ai2 token syste…" }, { "name": "avatars-glass", "type": "registry:component", "title": "Glass avatars", "description": "Styled avatars: the Glass set. 5 decorative avatars variations (FrostAvatar, TintAvatar, SheenAvatar, CrystalAvatar, HaloGlassAvatar) on the ai2 token system, …" }, { "name": "avatars-magnetic", "type": "registry:component", "title": "Magnetic avatars", "description": "Styled avatars: the Magnetic set. 5 decorative avatars variations (MagneticAvatar, TiltAvatar, PopAvatar, WobbleAvatar, FollowAvatar) on the ai2 token system, …" }, { "name": "avatars-stack", "type": "registry:component", "title": "Stack avatars", "description": "Styled avatars: the Stack set. 5 decorative avatars variations (AvatarStack, AvatarStackMore, AvatarRowGap, FannedStack, GridAvatars) on the ai2 token system, …" }, { "name": "avatars-styled", "type": "registry:component", "title": "Avatars essentials", "description": "Styled avatars: the essentials set. 5 decorative avatars variations (RingAvatar, StatusAvatar, GradientRingAvatar, GlowAvatar, SquircleAvatar) on the ai2 token…" }, { "name": "avatars-threed", "type": "registry:component", "title": "3D avatars", "description": "Styled avatars: the 3D set. 5 decorative avatars variations (CoinAvatar, CardTiltAvatar, LayeredAvatar, ShadowLiftAvatar, CubeAvatar) on the ai2 token system, …" }, { "name": "badges-animated", "type": "registry:component", "title": "Animated badges", "description": "Styled badges: the Animated set. 5 decorative badges variations (ShimmerBadge, BounceBadge, FlipBadge, SlideBadge, WobbleBadge) on the ai2 token system, powere…" }, { "name": "badges-glass", "type": "registry:component", "title": "Glass badges", "description": "Styled badges: the Glass set. 5 decorative badges variations (FrostBadge, TintBadge, CrystalBadge, SmokeBadge, HaloBadge) on the ai2 token system, driven by CS…" }, { "name": "badges-particle", "type": "registry:component", "title": "Particle badges", "description": "Styled badges: the Particle set. 5 decorative badges variations (SparkBadge, BurstBadge, TrailBadge, ConfettiBadge, GlitterBadge) on the ai2 token system, powe…" }, { "name": "badges-shine", "type": "registry:component", "title": "Shine badges", "description": "Styled badges: the Shine set. 5 decorative badges variations (MetallicBadge, NeonBadge, HolographicBadge, GoldBadge, ChromeBadge) on the ai2 token system, powe…" }, { "name": "badges-status", "type": "registry:component", "title": "Status badges", "description": "Styled badges: the Status set. 5 decorative badges variations (OnlineBadge, AwayBadge, BusyBadge, OfflineBadge, CountBadge) on the ai2 token system, powered by…" }, { "name": "badges-styled", "type": "registry:component", "title": "Badges essentials", "description": "Styled badges: the essentials set. 5 decorative badges variations (DotBadge, GradientBadge, GlowBadge, PulseBadge, OutlineBadge) on the ai2 token system, power…" }, { "name": "buttons-3d", "type": "registry:component", "title": "3D buttons", "description": "Styled buttons: the 3D set. 5 decorative buttons variations (PushButton, TiltButton, LayeredButton, EmbossButton, LiftButton) on the ai2 token system, powered …" }, { "name": "buttons-animated", "type": "registry:component", "title": "Animated buttons", "description": "Styled buttons: the Animated set. 5 decorative buttons variations (BounceButton, ScaleButton, SlideButton, RotateButton, BreatheButton) on the ai2 token system…" }, { "name": "buttons-glass", "type": "registry:component", "title": "Glass buttons", "description": "Styled buttons: the Glass set. 5 decorative buttons variations (FrostButton, TintButton, CrystalButton, SmokeButton, DepthButton) on the ai2 token system, powe…" }, { "name": "buttons-glow", "type": "registry:component", "title": "Glow buttons", "description": "Styled buttons: the Glow set. 5 decorative buttons variations (GlowButton, PulseGlowButton, AuraButton, NeonButton, EmberButton) on the ai2 token system, power…" }, { "name": "buttons-gradient", "type": "registry:component", "title": "Gradient buttons", "description": "Styled buttons: the Gradient set. 5 decorative buttons variations (FlowButton, ConicButton, DuotoneButton, AuroraButton, SunsetButton) on the ai2 token system,…" }, { "name": "buttons-magnetic", "type": "registry:component", "title": "Magnetic buttons", "description": "Styled buttons: the Magnetic set. 5 decorative buttons variations (MagneticButton, RepelButton, TiltPointerButton, ElasticButton, SquishButton) on the ai2 toke…" }, { "name": "buttons-particle", "type": "registry:component", "title": "Particle buttons", "description": "Styled buttons: the Particle set. 5 decorative buttons variations (BurstButton, ConfettiButton, SparkleButton, RiseButton, PopButton) on the ai2 token system, …" }, { "name": "buttons-pill", "type": "registry:component", "title": "Pill buttons", "description": "Styled buttons: the Pill set. 5 decorative buttons variations (FillButton, CenterFillButton, SwapButton, OutlineFillButton, DotButton) on the ai2 token system,…" }, { "name": "buttons-ripple", "type": "registry:component", "title": "Ripple buttons", "description": "Styled buttons: the Ripple set. 5 decorative buttons variations (RippleButton, EchoButton, SonarButton, PingButton, FlashButton) on the ai2 token system, power…" }, { "name": "buttons-shiny", "type": "registry:component", "title": "Shiny buttons", "description": "Styled buttons: the Shiny set. 5 decorative buttons variations (ShimmerButton, SheenButton, MetallicButton, SpotlightButton, HolographicButton) on the ai2 toke…" }, { "name": "buttons-stroke", "type": "registry:component", "title": "Stroke buttons", "description": "Styled buttons: the Stroke set. 5 decorative buttons variations (RotateStrokeButton, BeamButton, GradientStrokeButton, CornersButton, GrowRingButton) on the ai…" }, { "name": "buttons-text-animated", "type": "registry:component", "title": "Text-animated buttons", "description": "Styled buttons: the Text-animated set. 5 decorative buttons variations (BounceTextButton, WaveTextButton, RevealTextButton, FlipTextButton, SlideTextButton) on…" }, { "name": "inputs-glass", "type": "registry:component", "title": "Glass inputs", "description": "Styled inputs: the Glass set. 5 decorative inputs variations (FrostInput, TintInput, CrystalInput, SmokeInput, DepthGlassInput) on the ai2 token system, driven…" }, { "name": "inputs-magnetic", "type": "registry:component", "title": "Magnetic inputs", "description": "Styled inputs: the Magnetic set. 5 decorative inputs variations (TiltInput, GlowTrailInput, ExpandInput, ShakeInput, SpotlightInput) on the ai2 token system, p…" }, { "name": "inputs-otp", "type": "registry:component", "title": "OTP inputs", "description": "Styled inputs: the OTP set. 5 decorative inputs variations (PinInput, SegmentInput, CodeInput, MaskedInput, StepperInput) on the ai2 token system, driven by CS…" }, { "name": "inputs-styled", "type": "registry:component", "title": "Inputs essentials", "description": "Styled inputs: the essentials set. 5 decorative inputs variations (UnderlineInput, FloatInput, GlowInput, FilledInput, IconInput) on the ai2 token system, driv…" }, { "name": "inputs-typewriter", "type": "registry:component", "title": "Typewriter inputs", "description": "Styled inputs: the Typewriter set. 5 decorative inputs variations (TypewriterInput, CyclePlaceholderInput, CaretInput, GhostInput, MorphLabelInput) on the ai2 …" }, { "name": "inputs-validation", "type": "registry:component", "title": "Validation inputs", "description": "Styled inputs: the Validation set. 5 decorative inputs variations (SuccessInput, ErrorInput, LiveInput, StrengthInput, CharCountInput) on the ai2 token system,…" }, { "name": "loaders-dna", "type": "registry:component", "title": "DNA loaders", "description": "Styled loaders: the DNA set. 5 decorative loaders variations (HelixLoader, LadderLoader, TwistLoader, CoilLoader, WeaveLoader) on the ai2 token system, powered…" }, { "name": "loaders-morph", "type": "registry:component", "title": "Morph loaders", "description": "Styled loaders: the Morph set. 5 decorative loaders variations (BlobLoader, FlipLoader, StretchLoader, TriadLoader, SpinSquareLoader) on the ai2 token system, …" }, { "name": "loaders-orbital", "type": "registry:component", "title": "Orbital loaders", "description": "Styled loaders: the Orbital set. 5 decorative loaders variations (SolarLoader, BinaryLoader, CometLoader, SatelliteLoader, GyroLoader) on the ai2 token system,…" }, { "name": "loaders-particle", "type": "registry:component", "title": "Particle loaders", "description": "Styled loaders: the Particle set. 5 decorative loaders variations (SwarmLoader, ScatterLoader, ConvergeLoader, TrailLoader, FireflyLoader) on the ai2 token sys…" }, { "name": "loaders-skeleton", "type": "registry:component", "title": "Skeleton loaders", "description": "Styled loaders: the Skeleton set. 5 decorative loaders variations (LineSkeleton, CardSkeleton, AvatarSkeleton, TextSkeleton, ListSkeleton) on the ai2 token sys…" }, { "name": "loaders-styled", "type": "registry:component", "title": "Loaders essentials", "description": "Styled loaders: the essentials set. 5 decorative loaders variations (DotsLoader, BarsLoader, RingLoader, PulseLoader, OrbitLoader) on the ai2 token system, pow…" }, { "name": "loaders-text", "type": "registry:component", "title": "Text loaders", "description": "Styled loaders: the Text set. 5 decorative loaders variations (TypingLoader, EllipsisLoader, ScrambleLoader, WaveTextLoader, BlinkLoader) on the ai2 token syst…" }, { "name": "progress-circular", "type": "registry:component", "title": "Circular progress", "description": "Styled progress: the Circular set. 5 decorative progress variations (RingProgress, ConicProgress, DualRingProgress, DashRingProgress, GlowRingProgress) on the …" }, { "name": "progress-indeterminate", "type": "registry:component", "title": "Indeterminate progress", "description": "Styled progress: the Indeterminate set. 5 decorative progress variations (BarSweepProgress, DualBarProgress, PulseTrackProgress, MarchProgress, CometProgress) …" }, { "name": "progress-liquid", "type": "registry:component", "title": "Liquid progress", "description": "Styled progress: the Liquid set. 5 decorative progress variations (WaveProgress, BubbleProgress, TideProgress, DropProgress, FoamProgress) on the ai2 token sys…" }, { "name": "progress-stepped", "type": "registry:component", "title": "Stepped progress", "description": "Styled progress: the Stepped set. 5 decorative progress variations (StepsProgress, DotsStepProgress, NumberedProgress, CheckStepProgress, PillStepProgress) on …" }, { "name": "progress-styled", "type": "registry:component", "title": "Progress essentials", "description": "Styled progress: the essentials set. 5 decorative progress variations (StripedProgress, GradientProgress, GlowProgress, SegmentedProgress, ShimmerProgress) on …" }, { "name": "progress-threed", "type": "registry:component", "title": "3D progress", "description": "Styled progress: the 3D set. 5 decorative progress variations (RaisedProgress, TubeProgress, BevelProgress, GlossProgress, InsetProgress) on the ai2 token syst…" }, { "name": "toggles-3d", "type": "registry:component", "title": "3D toggles", "description": "Styled toggles: the 3D set. 5 decorative toggles variations (RaisedToggle, PillPressToggle, TactileToggle, DomeToggle, SwitchLeverToggle) on the ai2 token syst…" }, { "name": "toggles-liquid", "type": "registry:component", "title": "Liquid toggles", "description": "Styled toggles: the Liquid set. 5 decorative toggles variations (LiquidToggle, BlobToggle, DropToggle, WaveToggle, MercuryToggle) on the ai2 token system, powe…" }, { "name": "toggles-neon", "type": "registry:component", "title": "Neon toggles", "description": "Styled toggles: the Neon set. 5 decorative toggles variations (NeonToggle, OutlineNeonToggle, PulseNeonToggle, TubeToggle, FlickerToggle) on the ai2 token syst…" }, { "name": "toggles-particle", "type": "registry:component", "title": "Particle toggles", "description": "Styled toggles: the Particle set. 5 decorative toggles variations (ParticleToggle, SparkToggle, TrailToggle, ConfettiToggle, CometToggle) on the ai2 token syst…" }, { "name": "toggles-styled", "type": "registry:component", "title": "Toggles essentials", "description": "Styled toggles: the essentials set. 5 decorative toggles variations (IOSToggle, SquareToggle, IconToggle, GlowToggle, LabeledToggle) on the ai2 token system, p…" }, { "name": "toggles-themed", "type": "registry:component", "title": "Themed toggles", "description": "Styled toggles: the Themed set. 5 decorative toggles variations (DayNightToggle, CheckXToggle, OnOffToggle, EyeToggle, LockToggle) on the ai2 token system, pow…" }, { "name": "tooltips-animated", "type": "registry:component", "title": "Animated tooltips", "description": "Styled tooltips: the Animated set. 5 decorative tooltips variations (PopTooltip, FlipTooltip, SwingTooltip, TypeTooltip, GlowInTooltip) on the ai2 token system…" }, { "name": "tooltips-interactive", "type": "registry:component", "title": "Interactive tooltips", "description": "Styled tooltips: the Interactive set. 5 decorative tooltips variations (ScaleTooltip, UnderlineTooltip, LiftTooltip, FadeScaleTooltip, DelayTooltip) on the ai2…" }, { "name": "tooltips-magnetic", "type": "registry:component", "title": "Magnetic tooltips", "description": "Styled tooltips: the Magnetic set. 5 decorative tooltips variations (MagneticTooltip, FloatTooltip, TiltTooltip, SpotlightTooltip, ParallaxTooltip) on the ai2 …" }, { "name": "tooltips-rich", "type": "registry:component", "title": "Rich tooltips", "description": "Styled tooltips: the Rich set. 5 decorative tooltips variations (TitleTooltip, IconTooltip, KbdTooltip, MediaTooltip, MenuTooltip) on the ai2 token system, dri…" }, { "name": "tooltips-shape", "type": "registry:component", "title": "Shape tooltips", "description": "Styled tooltips: the Shape set. 5 decorative tooltips variations (BubbleTooltip, PillTooltip, NotchTooltip, CalloutTooltip, BadgeTooltip) on the ai2 token syst…" }, { "name": "tooltips-styled", "type": "registry:component", "title": "Tooltips essentials", "description": "Styled tooltips: the essentials set. 5 decorative tooltips variations (GlassTooltip, GradientTooltip, ArrowTooltip, DarkTooltip, SlideTooltip) on the ai2 token…" }, { "name": "alert-styled", "type": "registry:component", "title": "Alert essentials", "description": "Styled alert: the essentials set. 5 decorative alert variations (SoftAlert, LeftBarAlert, GlassAlert, GlowAlert, IconPulseAlert) on the ai2 token system, power…" }, { "name": "card-styled", "type": "registry:component", "title": "Card essentials", "description": "Styled card: the essentials set. 5 decorative card variations (GlassCard, GradientBorderCard, GlowCard, TiltCard, SpotlightCard) on the ai2 token system, power…" }, { "name": "checkbox-styled", "type": "registry:component", "title": "Checkbox essentials", "description": "Styled checkbox: the essentials set. 5 decorative checkbox variations (FillCheckbox, BounceCheckbox, DrawCheckbox, GlowCheckbox, RoundedCheckbox) on the ai2 to…" }, { "name": "separator-styled", "type": "registry:component", "title": "Separator essentials", "description": "Styled separator: the essentials set. 5 decorative separator variations (GradientSeparator, DashedSeparator, LabelSeparator, IconSeparator, GlowSeparator) on t…" }, { "name": "skeleton-styled", "type": "registry:component", "title": "Skeleton essentials", "description": "Styled skeleton: the essentials set. 5 decorative skeleton variations (ShimmerSkeleton, PulseSkeleton, WaveSkeleton, GradientSkeleton, GlowSkeleton) on the ai2…" }, { "name": "textarea-styled", "type": "registry:component", "title": "Textarea essentials", "description": "Styled textarea: the essentials set. 5 decorative textarea variations (UnderlineTextarea, FloatTextarea, GlowTextarea, FilledTextarea, CountTextarea) on the ai…" }, { "name": "accordion-styled", "type": "registry:component", "title": "Accordion essentials", "description": "Styled accordion: the essentials set. 5 decorative accordion variations (BorderedAccordion, SeparatedAccordion, FilledAccordion, GhostAccordion, PlusAccordion)…" }, { "name": "kbd-styled", "type": "registry:component", "title": "Kbd essentials", "description": "Styled kbd: the essentials set. 5 decorative kbd variations (RaisedKbd, FlatKbd, GlowKbd, OutlineKbd, SoftKbd) on the ai2 token system, driven by CSS token tra…" }, { "name": "label-styled", "type": "registry:component", "title": "Label essentials", "description": "Styled label: the essentials set. 5 decorative label variations (RequiredLabel, UppercaseLabel, PillLabel, IconLabel, GradientLabel) on the ai2 token system, d…" }, { "name": "radio-group-styled", "type": "registry:component", "title": "Group-styled radio", "description": "Styled radio: the Group-styled set. 5 decorative radio variations (SegmentedRadio, CardRadio, PillRadio, DotRadio, IconRadio) on the ai2 token system, powered …" }, { "name": "slider-styled", "type": "registry:component", "title": "Slider essentials", "description": "Styled slider: the essentials set. 5 decorative slider variations (GradientSlider, GlowSlider, TicksSlider, BubbleSlider, ThickSlider) on the ai2 token system,…" }, { "name": "tabs-styled", "type": "registry:component", "title": "Tabs essentials", "description": "Styled tabs: the essentials set. 5 decorative tabs variations (UnderlineTabs, PillTabs, SegmentedTabs, BoxedTabs, IconTabs) on the ai2 token system, powered by…" }, { "name": "alert-dialog-styled", "type": "registry:component", "title": "Dialog-styled alert", "description": "Styled alert: the Dialog-styled set. 5 decorative alert variations (ConfirmAlert, DestructiveAlert, InfoAlert, SuccessAlert, IconAlert) on the ai2 token system…" }, { "name": "dialog-styled", "type": "registry:component", "title": "Dialog essentials", "description": "Styled dialog: the essentials set. 5 decorative dialog variations (CenterDialog, SlideUpDialog, GlassDialog, FullscreenDialog, DropDialog) on the ai2 token sys…" }, { "name": "drawer-styled", "type": "registry:component", "title": "Drawer essentials", "description": "Styled drawer: the essentials set. 5 decorative drawer variations (BottomDrawer, TopDrawer, GlassDrawer, RoundedDrawer, SnapDrawer) on the ai2 token system, po…" }, { "name": "hover-card-styled", "type": "registry:component", "title": "Card-styled hover", "description": "Styled hover: the Card-styled set. 5 decorative hover variations (ProfileHoverCard, GlassHoverCard, PreviewHoverCard, StatsHoverCard, MediaHoverCard) on the ai…" }, { "name": "popover-styled", "type": "registry:component", "title": "Popover essentials", "description": "Styled popover: the essentials set. 5 decorative popover variations (ArrowPopover, GlassPopover, MenuPopover, FormPopover, RichPopover) on the ai2 token system…" }, { "name": "sheet-styled", "type": "registry:component", "title": "Sheet essentials", "description": "Styled sheet: the essentials set. 5 decorative sheet variations (RightSheet, LeftSheet, TopSheet, BottomSheet, GlassSheet) on the ai2 token system, powered by …" }, { "name": "breadcrumb-styled", "type": "registry:component", "title": "Breadcrumb essentials", "description": "Styled breadcrumb: the essentials set. 5 decorative breadcrumb variations (SlashBreadcrumb, ChevronBreadcrumb, PillBreadcrumb, ArrowBreadcrumb, DotBreadcrumb) …" }, { "name": "command-styled", "type": "registry:component", "title": "Command essentials", "description": "Styled command: the essentials set. 5 decorative command variations (SimpleCommand, GroupedCommand, IconCommand, GlassCommand, KbdCommand) on the ai2 token sys…" }, { "name": "context-menu-styled", "type": "registry:component", "title": "Menu-styled context", "description": "Styled context: the Menu-styled set. 5 decorative context variations (SimpleContextMenu, IconContextMenu, ShortcutContextMenu, SectionContextMenu, DangerContex…" }, { "name": "dropdown-menu-styled", "type": "registry:component", "title": "Menu-styled dropdown", "description": "Styled dropdown: the Menu-styled set. 5 decorative dropdown variations (SimpleMenu, IconMenu, SectionMenu, CheckMenu, RichMenu) on the ai2 token system, powere…" }, { "name": "menubar-styled", "type": "registry:component", "title": "Menubar essentials", "description": "Styled menubar: the essentials set. 5 decorative menubar variations (BarMenubar, PillMenubar, GlassMenubar, MinimalMenubar, IconMenubar) on the ai2 token syste…" }, { "name": "pagination-styled", "type": "registry:component", "title": "Pagination essentials", "description": "Styled pagination: the essentials set. 5 decorative pagination variations (NumberedPagination, ArrowsPagination, DotsPagination, PillPagination, MinimalPaginat…" }, { "name": "combobox-styled", "type": "registry:component", "title": "Combobox essentials", "description": "Styled combobox: the essentials set. 5 decorative combobox variations (SimpleCombobox, GlassCombobox, IconCombobox, TagsCombobox, InlineCombobox) on the ai2 to…" }, { "name": "field-styled", "type": "registry:component", "title": "Field essentials", "description": "Styled field: the essentials set. 5 decorative field variations (StackedField, FloatingField, InlineField, CardField, BorderedField) on the ai2 token system, d…" }, { "name": "file-input-styled", "type": "registry:component", "title": "Input-styled file", "description": "Styled file: the Input-styled set. 5 decorative file variations (DropzoneFile, ButtonFile, AvatarFile, ListFile, GlassFile) on the ai2 token system, powered by…" }, { "name": "input-group-styled", "type": "registry:component", "title": "Group-styled input", "description": "Styled input: the Group-styled set. 5 decorative input variations (PrefixGroup, SuffixGroup, IconGroup, ButtonGroup, SegmentGroup) on the ai2 token system, dri…" }, { "name": "input-otp-styled", "type": "registry:component", "title": "Otp-styled input", "description": "Styled input: the Otp-styled set. 5 decorative input variations (BoxOtp, UnderlineOtp, RoundedOtp, SeparatedOtp, FilledOtp) on the ai2 token system, powered by…" }, { "name": "select-styled", "type": "registry:component", "title": "Select essentials", "description": "Styled select: the essentials set. 5 decorative select variations (SimpleSelect, GlassSelect, IconSelect, PillSelect, GroupedSelect) on the ai2 token system, p…" }, { "name": "button-group-styled", "type": "registry:component", "title": "Group-styled button", "description": "Styled button: the Group-styled set. 5 decorative button variations (AttachedGroup, SplitGroup, ToolbarGroup, PillGroup, StepperGroup) on the ai2 token system,…" }, { "name": "calendar-styled", "type": "registry:component", "title": "Calendar essentials", "description": "Styled calendar: the essentials set. 5 decorative calendar variations (ClassicCalendar, RoundedCalendar, CompactCalendar, GlassCalendar, RangeCalendar) on the …" }, { "name": "date-picker-styled", "type": "registry:component", "title": "Picker-styled date", "description": "Styled date: the Picker-styled set. 5 decorative date variations (SimpleDatePicker, RangeDatePicker, GlassDatePicker, InlineDatePicker, IconDatePicker) on the …" }, { "name": "item-styled", "type": "registry:component", "title": "Item essentials", "description": "Styled item: the essentials set. 5 decorative item variations (SimpleItem, IconItem, AvatarItem, ActionItem, CardItem) on the ai2 token system, driven by CSS t…" }, { "name": "table-styled", "type": "registry:component", "title": "Table essentials", "description": "Styled table: the essentials set. 5 decorative table variations (StripedTable, BorderedTable, HoverGlowTable, CompactTable, CardTable) on the ai2 token system,…" }, { "name": "toggle-group-styled", "type": "registry:component", "title": "Group-styled toggle", "description": "Styled toggle: the Group-styled set. 5 decorative toggle variations (SegmentedToggleGroup, PillToggleGroup, IconToggleGroup, OutlineToggleGroup, GhostToggleGro…" }, { "name": "carousel-styled", "type": "registry:component", "title": "Carousel essentials", "description": "Styled carousel: the essentials set. 5 decorative carousel variations (SlideCarousel, FadeCarousel, CardsCarousel, DotsCarousel, AutoCarousel) on the ai2 token…" }, { "name": "collapsible-styled", "type": "registry:component", "title": "Collapsible essentials", "description": "Styled collapsible: the essentials set. 5 decorative collapsible variations (SimpleCollapsible, CardCollapsible, GhostCollapsible, PlusCollapsible, PreviewColl…" }, { "name": "empty-styled", "type": "registry:component", "title": "Empty essentials", "description": "Styled empty: the essentials set. 5 decorative empty variations (SimpleEmpty, IconEmpty, IllustrationEmpty, ActionEmpty, CardEmpty) on the ai2 token system, dr…" }, { "name": "resizable-styled", "type": "registry:component", "title": "Resizable essentials", "description": "Styled resizable: the essentials set. 5 decorative resizable variations (HorizontalResizable, VerticalResizable, HandleResizable, NestedResizable, GlassResizab…" }, { "name": "scroll-area-styled", "type": "registry:component", "title": "Area-styled scroll", "description": "Styled scroll: the Area-styled set. 5 decorative scroll variations (ThinScrollArea, RoundedScrollArea, ColoredScrollArea, OverlayScrollArea, BothScrollArea) on…" }, { "name": "sonner-styled", "type": "registry:component", "title": "Sonner essentials", "description": "Styled sonner: the essentials set. 5 decorative sonner variations (SimpleToaster, ToneToaster, GlassToaster, ActionToaster, PromiseToaster) on the ai2 token sy…" }, { "name": "dialog-blur", "type": "registry:component", "title": "Blur dialog", "description": "Styled dialog: the Blur set. 5 decorative dialog variations (SoftBlurDialog, HeavyBlurDialog, DarkBlurDialog, TintBlurDialog, GradientBlurDialog) on the ai2 to…" }, { "name": "dialog-bordered", "type": "registry:component", "title": "Bordered dialog", "description": "Styled dialog: the Bordered set. 5 decorative dialog variations (RingDialog, GlowDialog, GradientBorderDialog, InsetDialog, AccentBarDialog) on the ai2 token s…" }, { "name": "dialog-corner", "type": "registry:component", "title": "Corner dialog", "description": "Styled dialog: the Corner set. 5 decorative dialog variations (TopRightDialog, BottomRightDialog, TopCenterDialog, DockedDialog, OffsetDialog) on the ai2 token…" }, { "name": "dialog-header", "type": "registry:component", "title": "Header dialog", "description": "Styled dialog: the Header set. 5 decorative dialog variations (AccentHeaderDialog, IconHeaderDialog, GradientHeaderDialog, StickyHeaderDialog, DividerHeaderDia…" }, { "name": "dialog-motion", "type": "registry:component", "title": "Motion dialog", "description": "Styled dialog: the Motion set. 5 decorative dialog variations (FlipDialog, SwingDialog, ZoomDialog, ElasticDialog, RotateDialog) on the ai2 token system, power…" }, { "name": "alert-dialog-accent", "type": "registry:component", "title": "Dialog-accent alert", "description": "Styled alert: the Dialog-accent set. 5 decorative alert variations (TopBarAlert, SideBarAlert, RingAlert, GlowAlert, FillAlert) on the ai2 token system, powere…" }, { "name": "alert-dialog-glass", "type": "registry:component", "title": "Dialog-glass alert", "description": "Styled alert: the Dialog-glass set. 5 decorative alert variations (FrostAlert, TintAlert, DarkAlert, BlurAlert, CrystalAlert) on the ai2 token system, powered …" }, { "name": "alert-dialog-illustration", "type": "registry:component", "title": "Dialog-illustration alert", "description": "Styled alert: the Dialog-illustration set. 5 decorative alert variations (SpotlightAlert, BadgeAlert, CircleAlert, GradientAlert, BannerAlert) on the ai2 token…" }, { "name": "alert-dialog-layout", "type": "registry:component", "title": "Dialog-layout alert", "description": "Styled alert: the Dialog-layout set. 5 decorative alert variations (CenteredAlert, HorizontalAlert, CompactAlert, WideAlert, SplitAlert) on the ai2 token syste…" }, { "name": "alert-dialog-motion", "type": "registry:component", "title": "Dialog-motion alert", "description": "Styled alert: the Dialog-motion set. 5 decorative alert variations (ShakeAlert, PopAlert, DropAlert, ZoomAlert, SlideAlert) on the ai2 token system, powered by…" }, { "name": "sheet-blur", "type": "registry:component", "title": "Blur sheet", "description": "Styled sheet: the Blur set. 5 decorative sheet variations (SoftBlurSheet, HeavyBlurSheet, DarkBlurSheet, TintBlurSheet, GradientBlurSheet) on the ai2 token sys…" }, { "name": "sheet-content", "type": "registry:component", "title": "Content sheet", "description": "Styled sheet: the Content set. 5 decorative sheet variations (MenuSheet, FormSheet, ListSheet, DetailSheet, SplitSheet) on the ai2 token system, powered by fra…" }, { "name": "sheet-header", "type": "registry:component", "title": "Header sheet", "description": "Styled sheet: the Header set. 5 decorative sheet variations (TitleSheet, StickySheet, FooterSheet, DividerSheet, AccentSheet) on the ai2 token system, powered …" }, { "name": "sheet-inset", "type": "registry:component", "title": "Inset sheet", "description": "Styled sheet: the Inset set. 5 decorative sheet variations (FloatingSheet, RoundedSheet, MarginSheet, CardSheet, PillSheet) on the ai2 token system, powered by…" }, { "name": "sheet-motion", "type": "registry:component", "title": "Motion sheet", "description": "Styled sheet: the Motion set. 5 decorative sheet variations (SlideSheet, SpringSheet, FadeSheet, ScaleSheet, OvershootSheet) on the ai2 token system, powered b…" }, { "name": "hover-card-accent", "type": "registry:component", "title": "Card-accent hover", "description": "Styled hover: the Card-accent set. 5 decorative hover variations (BorderHoverCard, GlowHoverCard, RingHoverCard, TopBarHoverCard, FillHoverCard) on the ai2 tok…" }, { "name": "hover-card-layout", "type": "registry:component", "title": "Card-layout hover", "description": "Styled hover: the Card-layout set. 5 decorative hover variations (HorizontalHoverCard, CompactHoverCard, WideHoverCard, StackedHoverCard, SplitHoverCard) on th…" }, { "name": "hover-card-motion", "type": "registry:component", "title": "Card-motion hover", "description": "Styled hover: the Card-motion set. 5 decorative hover variations (FadeHoverCard, ScaleHoverCard, SlideHoverCard, PopHoverCard, SpringHoverCard) on the ai2 toke…" }, { "name": "hover-card-placement", "type": "registry:component", "title": "Card-placement hover", "description": "Styled hover: the Card-placement set. 5 decorative hover variations (TopHoverCard, BottomHoverCard, LeftHoverCard, RightHoverCard, FollowHoverCard) on the ai2 …" }, { "name": "hover-card-tone", "type": "registry:component", "title": "Card-tone hover", "description": "Styled hover: the Card-tone set. 5 decorative hover variations (PrimaryHoverCard, SuccessHoverCard, WarningHoverCard, DangerHoverCard, InfoHoverCard) on the ai…" }, { "name": "popover-accent", "type": "registry:component", "title": "Accent popover", "description": "Styled popover: the Accent set. 5 decorative popover variations (BorderPopover, GlowPopover, RingPopover, TopBarPopover, FillPopover) on the ai2 token system, …" }, { "name": "popover-compact", "type": "registry:component", "title": "Compact popover", "description": "Styled popover: the Compact set. 5 decorative popover variations (MiniPopover, DensePopover, WidePopover, TallPopover, SplitPopover) on the ai2 token system, p…" }, { "name": "popover-motion", "type": "registry:component", "title": "Motion popover", "description": "Styled popover: the Motion set. 5 decorative popover variations (FadePopover, ScalePopover, SlidePopover, PopPopover, SpringPopover) on the ai2 token system, p…" }, { "name": "popover-placement", "type": "registry:component", "title": "Placement popover", "description": "Styled popover: the Placement set. 5 decorative popover variations (TopPopover, BottomPopover, LeftPopover, RightPopover, CornerPopover) on the ai2 token syste…" }, { "name": "popover-tone", "type": "registry:component", "title": "Tone popover", "description": "Styled popover: the Tone set. 5 decorative popover variations (PrimaryPopover, SuccessPopover, WarningPopover, DangerPopover, InfoPopover) on the ai2 token sys…" }, { "name": "drawer-blur", "type": "registry:component", "title": "Blur drawer", "description": "Styled drawer: the Blur set. 5 decorative drawer variations (SoftBlurDrawer, HeavyBlurDrawer, DarkBlurDrawer, TintBlurDrawer, GradientBlurDrawer) on the ai2 to…" }, { "name": "drawer-content", "type": "registry:component", "title": "Content drawer", "description": "Styled drawer: the Content set. 5 decorative drawer variations (MenuDrawer, FormDrawer, ListDrawer, DetailDrawer, GridDrawer) on the ai2 token system, powered …" }, { "name": "drawer-header", "type": "registry:component", "title": "Header drawer", "description": "Styled drawer: the Header set. 5 decorative drawer variations (TitleDrawer, StickyDrawer, FooterDrawer, HandleDrawer, DividerDrawer) on the ai2 token system, p…" }, { "name": "drawer-motion", "type": "registry:component", "title": "Motion drawer", "description": "Styled drawer: the Motion set. 5 decorative drawer variations (SlideDrawer, SpringDrawer, FadeDrawer, ScaleDrawer, OvershootDrawer) on the ai2 token system, po…" }, { "name": "drawer-side", "type": "registry:component", "title": "Side drawer", "description": "Styled drawer: the Side set. 5 decorative drawer variations (RightDrawer, LeftDrawer, RightInsetDrawer, LeftInsetDrawer, CornerDrawer) on the ai2 token system,…" }, { "name": "accordion-accent", "type": "registry:component", "title": "Accent accordion", "description": "Styled accordion: the Accent set. 5 decorative accordion variations (BarAccordion, GrowAccordion, GlowAccordion, LeftAccordion, FullAccordion) on the ai2 token…" }, { "name": "accordion-glass", "type": "registry:component", "title": "Glass accordion", "description": "Styled accordion: the Glass set. 5 decorative accordion variations (FrostAccordion, TintAccordion, SmokeAccordion, CrystalAccordion, DepthAccordion) on the ai2…" }, { "name": "accordion-numbered", "type": "registry:component", "title": "Numbered accordion", "description": "Styled accordion: the Numbered set. 5 decorative accordion variations (CircleAccordion, SquareAccordion, OutlineAccordion, FilledAccordion, GhostAccordion) on …" }, { "name": "accordion-timeline", "type": "registry:component", "title": "Timeline accordion", "description": "Styled accordion: the Timeline set. 5 decorative accordion variations (LineAccordion, DashedAccordion, NodeAccordion, FilledAccordion, GradientAccordion) on th…" }, { "name": "accordion-underline", "type": "registry:component", "title": "Underline accordion", "description": "Styled accordion: the Underline set. 5 decorative accordion variations (SweepAccordion, CenterAccordion, GrowAccordion, DoubleAccordion, DashedAccordion) on th…" }, { "name": "carousel-coverflow", "type": "registry:component", "title": "Coverflow carousel", "description": "Styled carousel: the Coverflow set. 5 decorative carousel variations (FlowCarousel, DeepCarousel, TiltCarousel, FanCarousel, StackCarousel) on the ai2 token sy…" }, { "name": "carousel-fraction", "type": "registry:component", "title": "Fraction carousel", "description": "Styled carousel: the Fraction set. 5 decorative carousel variations (CounterCarousel, BarCarousel, RingCarousel, CornerCarousel, CombinedCarousel) on the ai2 t…" }, { "name": "carousel-parallax", "type": "registry:component", "title": "Parallax carousel", "description": "Styled carousel: the Parallax set. 5 decorative carousel variations (SoftCarousel, DeepCarousel, LayeredCarousel, TiltCarousel, ZoomCarousel) on the ai2 token …" }, { "name": "carousel-thumbnails", "type": "registry:component", "title": "Thumbnails carousel", "description": "Styled carousel: the Thumbnails set. 5 decorative carousel variations (BelowCarousel, SideCarousel, DotsThumbsCarousel, ScaledCarousel, BorderedCarousel) on th…" }, { "name": "carousel-vertical", "type": "registry:component", "title": "Vertical carousel", "description": "Styled carousel: the Vertical set. 5 decorative carousel variations (SlideCarousel, FadeCarousel, CardsCarousel, DotsCarousel, StackCarousel) on the ai2 token …" }, { "name": "collapsible-accent", "type": "registry:component", "title": "Accent collapsible", "description": "Styled collapsible: the Accent set. 5 decorative collapsible variations (BarCollapsible, GrowCollapsible, GlowCollapsible, LeftCollapsible, FullCollapsible) on…" }, { "name": "collapsible-glass", "type": "registry:component", "title": "Glass collapsible", "description": "Styled collapsible: the Glass set. 5 decorative collapsible variations (FrostCollapsible, TintCollapsible, SmokeCollapsible, CrystalCollapsible, DepthCollapsib…" }, { "name": "collapsible-notice", "type": "registry:component", "title": "Notice collapsible", "description": "Styled collapsible: the Notice set. 5 decorative collapsible variations (InfoCollapsible, SuccessCollapsible, WarningCollapsible, DangerCollapsible, MutedColla…" }, { "name": "collapsible-split", "type": "registry:component", "title": "Split collapsible", "description": "Styled collapsible: the Split set. 5 decorative collapsible variations (PillCollapsible, SquareCollapsible, GhostCollapsible, OutlineCollapsible, FilledCollaps…" }, { "name": "collapsible-underline", "type": "registry:component", "title": "Underline collapsible", "description": "Styled collapsible: the Underline set. 5 decorative collapsible variations (SweepCollapsible, CenterCollapsible, GrowCollapsible, DoubleCollapsible, DashedColl…" }, { "name": "resizable-accent", "type": "registry:component", "title": "Accent resizable", "description": "Styled resizable: the Accent set. 5 decorative resizable variations (BarResizable, GlowResizable, RingResizable, FillResizable, EdgeResizable) on the ai2 token…" } ], "component_count": 414, "components_truncated": true, "component_types": { "registry:theme": 2, "registry:ui": 51, "registry:lib": 3, "registry:example": 51, "registry:component": 307 }, "logo": "", "preview_image": "https://ai2.design/opengraph-image", "pro": { "has_pro": true, "pro_url": null, "pricing_url": "https://ai2.design/pricing" }, "enrichment_errors": [], "featured": false }, { "number": 364, "name": "@whiskeyjack", "category": "Animated components", "tags": [ "accessibility", "animation", "buttons", "cards", "charts", "dashboard", "design-system", "forms", "glassmorphism", "hooks", "loaders", "maps", "mobile", "navigation", "overlays", "theming" ], "tagline": "A Tauri-first design system: thumb-first components with Metro-style pivot navigation, frosted bottom nav, and tap-again confirmations, on a CSS-variable token pipeline. Hardened across nine shipping apps before extraction.", "short_description": "", "description": "A Tauri-first design system: thumb-first components with Metro-style pivot navigation, frosted bottom nav, and tap-again confirmations, on a CSS-variable token pipeline. Hardened across nine shipping apps before extraction.", "framework": "react", "homepage": "https://whiskeyjack.net", "docs": null, "github": null, "components_github": null, "github_default_branch": null, "github_stars": null, "last_commit": null, "archived": false, "license": null, "open_issues": null, "registry_template": "https://whiskeyjack.net/r/{name}.json", "registry_index": "https://whiskeyjack.net/r/registry.json", "components": [ "action-pill", "app-panes", "app-shell", "badge", "beam", "bottom-drawer", "bottom-nav", "button-row", "button", "calendar-heatmap", "card", "checkbox-group", "checkbox", "color-input", "confirm-button", "disclosure-toggle", "drawer-action", "empty-state", "header-stand-in", "input", "mobile-bottom-nav", "notice", "page-title-context", "progress-bar", "pull-to-refresh-indicator", "reorder-list", "scroll-indicator", "search-field", "segmented-control", "select", "sidebar-tabs", "slider", "tab-bar", "textarea", "toast", "toggle-group", "toggle", "accent-foreground", "announce", "compact-control", "direction", "material-you", "merge-refs", "option-tile", "use-drag-reorder", "use-focus-trap", "use-input-type", "use-layout-gate", "use-nav-reset", "use-pull-to-refresh", "use-reduced-motion", "use-route-focus", "use-scroll-fade", "use-scroll-indicator", "use-scroll-region", "use-sliding-indicator", "use-stand-in-target", "use-swipe-navigation", "use-tab-bar-fade", "use-theme", "use-travel-direction", "utils" ], "component_items": [ { "name": "action-pill", "type": "registry:ui", "title": "ActionPill", "description": "Toolbar pill of icon actions that collapse and grow as the page's context changes." }, { "name": "app-panes", "type": "registry:ui", "title": "AppPanes", "description": "The three-phase content row below a floating header: optional left sidebar, main region, optional right rail, each gated on the layout variants." }, { "name": "app-shell", "type": "registry:ui", "title": "AppShell", "description": "The app layout skeleton: a fixed-height shell or a document scroller, with a frosted header, nav pills, and the main scroll region." }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "Tone-tinted pill label on the semantic color scales, for status and classification at a glance." }, { "name": "beam", "type": "registry:ui", "title": "Beam", "description": "A travelling light around an element's edge, for the one thing on a screen that needs the eye." }, { "name": "bottom-drawer", "type": "registry:ui", "title": "BottomDrawer", "description": "Bottom sheet on mobile, centered dialog on desktop. Swipe, backdrop, Escape, and hardware Back all dismiss it." }, { "name": "bottom-nav", "type": "registry:ui", "title": "BottomNav", "description": "Pill-shaped frosted bottom navigation, hand-composed from BottomNavItem and BottomNavAction." }, { "name": "button-row", "type": "registry:ui", "title": "ButtonRow", "description": "Side-by-side buttons that share a row and stack full-width when they no longer fit." }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "The action button. Labels wrap to two lines rather than overflowing, so long translated text stays inside the pill." }, { "name": "calendar-heatmap", "type": "registry:ui", "title": "CalendarHeatmap", "description": "GitHub-contributions-style activity heatmap, in squares or check-in dots." }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "The elevated surface primitive, with header, title, description, content, and footer slots." }, { "name": "checkbox-group", "type": "registry:ui", "title": "CheckboxGroup", "description": "Pick-any tile grid: the multi-select counterpart to ToggleGroup." }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "A single checkbox, with the mixed state a parent selection needs." }, { "name": "color-input", "type": "registry:ui", "title": "ColorInput", "description": "Focusable swatch button that opens the OS-native color picker and returns the chosen hex." }, { "name": "confirm-button", "type": "registry:ui", "title": "ConfirmButton", "description": "Tap-again-to-confirm button for a destructive or disruptive action, with the armed state announced to assistive tech." }, { "name": "disclosure-toggle", "type": "registry:ui", "title": "DisclosureToggle", "description": "Caret-and-label text button that expands and collapses an adjacent region, with aria-expanded and the touch and focus floors built in." }, { "name": "drawer-action", "type": "registry:ui", "title": "DrawerAction", "description": "A single action in a BottomDrawer footer: plain, form-submit, or tap-again-confirm." }, { "name": "empty-state", "type": "registry:ui", "title": "EmptyState", "description": "Centered icon tile, title, subtitle, and optional call to action for an empty list or a fresh install." }, { "name": "header-stand-in", "type": "registry:ui", "title": "HeaderStandIn", "description": "Header copy of a field whose primary lives in a scroller: grows in while the primary is scrolled away, collapses when it returns." }, { "name": "input", "type": "registry:ui", "title": "Input", "description": "Labeled text field that wires a real label to the input for you, with an optional hint, error and password reveal." }, { "name": "mobile-bottom-nav", "type": "registry:ui", "title": "MobileBottomNav", "description": "Data-driven bottom nav that collapses its items into a hamburger menu when they and the toolbar would overflow the viewport." }, { "name": "notice", "type": "registry:ui", "title": "Notice", "description": "Inline tone-tinted status box for context-bound messages, with each tone setting its own ARIA live-region role." }, { "name": "page-title-context", "type": "registry:ui", "title": "PageTitleProvider", "description": "React context that lets any page set the desktop header title." }, { "name": "progress-bar", "type": "registry:ui", "title": "ProgressBar", "description": "The accent progress primitive: determinate fill, busy sweep, open-ended indicator, or segment accumulation against a tally." }, { "name": "pull-to-refresh-indicator", "type": "registry:ui", "title": "PullToRefreshIndicator", "description": "Frosted pill and spinner that slides down as you pull; the visual companion to usePullToRefresh." }, { "name": "reorder-list", "type": "registry:ui", "title": "ReorderList", "description": "Drag-to-reorder list with an accessible arrow-button fallback, so it works by pointer, touch, and keyboard." }, { "name": "scroll-indicator", "type": "registry:ui", "title": "ScrollIndicator", "description": "Read-only auto-hiding scroll thumb for scrollers whose native scrollbar would run behind floating chrome." }, { "name": "search-field", "type": "registry:ui", "title": "SearchField", "description": "Search pill: a rounded-full text input with a leading magnifier and a trailing clear button." }, { "name": "segmented-control", "type": "registry:ui", "title": "SegmentedControl", "description": "Compact pick-one control: one bordered strip, divided into segments." }, { "name": "select", "type": "registry:ui", "title": "Select", "description": "Styled native select for a one-of-n choice with more options than a segmented control can show." }, { "name": "sidebar-tabs", "type": "registry:ui", "title": "SidebarTabs", "description": "TabBar's wide-layout counterpart: a vertical tab rail for a desktop sidebar, with each item's progress pinned to its bottom edge." }, { "name": "slider", "type": "registry:ui", "title": "Slider", "description": "Range input with an optional mono value readout beside its label." }, { "name": "tab-bar", "type": "registry:ui", "title": "TabBar", "description": "Metro-style pivot tabs with a sliding accent underline that doubles as each tab's progress bar." }, { "name": "textarea", "type": "registry:ui", "title": "Textarea", "description": "Multi-line field with an optional character readout and auto-grow." }, { "name": "toast", "type": "registry:ui", "title": "Toast", "description": "Floating notification pill fixed below the header, for app-level messages and background work." }, { "name": "toggle-group", "type": "registry:ui", "title": "ToggleGroup", "description": "Segmented tile control for one-of-n choices, such as a light / dark / system theme picker." }, { "name": "toggle", "type": "registry:ui", "title": "Toggle", "description": "Switch control with a label and optional description, for a single on/off setting." }, { "name": "accent-foreground", "type": "registry:lib", "title": "applyAccentColor", "description": "Retint the whole UI from one accent color, with a WCAG-legible foreground picked automatically." }, { "name": "announce", "type": "registry:lib", "title": "announce", "description": "Announce a message to assistive technology through a shared live region." }, { "name": "compact-control", "type": "registry:lib", "title": "compactControlClass", "description": "The geometry of a compact control: a small pill, chip or segment that sits on a line with body text." }, { "name": "direction", "type": "registry:lib", "title": "isRTL", "description": "Detect right-to-left direction for JS-driven interactions that CSS cannot reach." }, { "name": "material-you", "type": "registry:lib", "title": "applyMaterialYou", "description": "Map Android's wallpaper-derived Material You palette onto the design-system surface and accent tokens." }, { "name": "merge-refs", "type": "registry:lib", "title": "useMergedRefs", "description": "Combine an internal ref with a forwarded one." }, { "name": "option-tile", "type": "registry:lib", "title": "optionTileClass", "description": "The selectable-tile class recipe shared by ToggleGroup and CheckboxGroup." }, { "name": "use-drag-reorder", "type": "registry:hook", "title": "useDragReorder", "description": "Drag-to-reorder list logic with an accessible keyboard path, behind ReorderList." }, { "name": "use-focus-trap", "type": "registry:hook", "title": "useFocusTrap", "description": "Trap focus inside an overlay while it is open, and restore it to the trigger on close." }, { "name": "use-input-type", "type": "registry:hook", "title": "useInputType", "description": "Detect touch versus mouse input, for controls that phrase or size themselves differently." }, { "name": "use-layout-gate", "type": "registry:hook", "title": "useLayoutGate", "description": "Read the wide / xlwide layout gates in JS, for a decision CSS cannot express." }, { "name": "use-nav-reset", "type": "registry:hook", "title": "useRegisterNavReset", "description": "Double-tap the nav item for the page you are already on to bring the top and the active tab back into view, then to go to the page's start." }, { "name": "use-pull-to-refresh", "type": "registry:hook", "title": "usePullToRefresh", "description": "Touch pull-to-refresh that coexists with tab swipes and overscroll-behavior: none." }, { "name": "use-reduced-motion", "type": "registry:hook", "title": "useReducedMotion", "description": "Respect the user's reduced-motion preference in JS-driven motion." }, { "name": "use-route-focus", "type": "registry:hook", "title": "useRouteFocus", "description": "Move focus to the main content on route change, so keyboard and screen-reader users land in the new page." }, { "name": "use-scroll-fade", "type": "registry:hook", "title": "useScrollFade", "description": "Vertical edge-fade masks for a height-capped scrollable panel; returns the CSS class to apply." }, { "name": "use-scroll-indicator", "type": "registry:hook", "title": "useScrollIndicator", "description": "Scroll metrics (thumb size, position, visibility) that drive ScrollIndicator." }, { "name": "use-scroll-region", "type": "registry:hook", "title": "useScrollRegion / useScrollReset / useScrollMemory", "description": "Scroll the app's real scroll region – to the top on a first visit, back to where you left it on a return – whichever scroller the Layout chose." }, { "name": "use-sliding-indicator", "type": "registry:hook", "title": "useSlidingIndicator", "description": "Measures the active item in a tab-like container so one element can animate between items instead of the highlight jumping." }, { "name": "use-stand-in-target", "type": "registry:hook", "title": "useStandInTarget", "description": "Watches a field's primary instance and reports when it scrolls out of view, so a HeaderStandIn can speak for it." }, { "name": "use-swipe-navigation", "type": "registry:hook", "title": "useSwipeNavigation", "description": "Swipe between tabs with an axis-locked touch gesture that flips direction under RTL." }, { "name": "use-tab-bar-fade", "type": "registry:hook", "title": "useTabBarFade", "description": "Edge-fade masks for a horizontally overflowing tab strip; returns the CSS class to apply." }, { "name": "use-theme", "type": "registry:hook", "title": "useTheme", "description": "The theme engine: light, dark, system, and OLED, with persistence and theme-color meta kept in sync." }, { "name": "use-travel-direction", "type": "registry:hook", "title": "useTravelDirection", "description": "Names which way a sliding indicator is travelling, so each of its edges can take its own easing." }, { "name": "utils", "type": "registry:lib", "title": "cn", "description": "Tailwind class merging (clsx plus tailwind-merge)." } ], "component_count": 62, "components_truncated": false, "component_types": { "registry:ui": 37, "registry:lib": 8, "registry:hook": 17 }, "logo": "", "preview_image": "https://whiskeyjack.net/og-image.jpg", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [ "docs_unresolved", "github_unresolved" ], "featured": false }, { "number": 365, "name": "@atroui", "category": "Animated components", "tags": [ "animation", "blocks", "buttons", "cards", "dashboard", "developer-tools", "forms", "icons", "loaders", "marketing", "media", "navigation", "theming" ], "tagline": "Dark-first React / Next.js components and marketing blocks. Install with the shadcn CLI and own the source.", "short_description": "", "description": "Dark-first React / Next.js components and marketing blocks. Install with the shadcn CLI and own the source.", "framework": "react", "homepage": "https://www.atroui.com", "docs": "https://www.atroui.com/docs", "github": "https://github.com/atroui/atroui", "components_github": null, "github_default_branch": "master", "github_stars": 3, "last_commit": "2026-09-10T15:53:48Z", "archived": false, "license": "MIT", "open_issues": 2, "registry_template": "https://www.atroui.com/r/{name}.json", "registry_index": "https://www.atroui.com/r/registry.json", "components": [ "utils", "brand", "project-brief", "button", "theme-toggle", "adaptive-theme", "theme-adapt", "card", "textarea", "form-select", "breadcrumbs", "prose", "fade-in", "stagger", "scroll-progress", "logo", "home-hero", "home-who", "site-header", "footer-bold", "home-principle", "home-work", "home-lab", "home-crafts", "pricing-overview", "feature-grid", "logo-cloud", "contextual-cta", "exit-intent-popup", "contact-form", "site-footer", "faq", "waitlist-form", "newsletter-form", "calendly-embed", "made-with-embed", "theme-provider", "mockup-frame", "timeline-animation", "founder-avatar", "site-url", "seo", "analytics", "social-share", "before-after-slider", "visual-case-study", "ar-portfolio", "live-dashboard", "project-planner", "testimonial-schema", "json-ld", "analytics-provider", "og-live-preview", "og-examples", "og-workspace", "thumbnail-live-preview", "thumbnail-workspace", "scope-chat", "journal-content", "resources-content", "api-contact", "api-waitlist", "api-newsletter", "api-generate", "api-thumbnail", "api-scope", "count-up", "deadline-countdown", "currently", "project-list", "log-preview", "changelog", "command-menu", "reveal", "theme-toggle-icon", "site-header-narrow", "site-footer-narrow", "social-float", "reading-shelf", "personal-hero", "resume", "local-clock", "weather-chip", "stack-list" ], "component_items": [ { "name": "utils", "type": "registry:lib", "title": "Utils", "description": "cn() helper (clsx + tailwind-merge)." }, { "name": "brand", "type": "registry:lib", "title": "Brand", "description": "getBrand() and DEFAULT_BRAND - edit or override with NEXT_PUBLIC_SITE_*." }, { "name": "project-brief", "type": "registry:lib", "title": "Project Brief", "description": "Shared ProjectBrief type + OG/thumbnail href helpers for Scope → Planner → social card glue." }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "AtroUI button with CVA variants. Source lands in your project." }, { "name": "theme-toggle", "type": "registry:ui", "title": "Theme Toggle", "description": "Light / system / dark toggle using next-themes." }, { "name": "adaptive-theme", "type": "registry:lib", "title": "Adaptive Theme", "description": "Contrast helpers that lift muted type to WCAG AA against the canvas." }, { "name": "theme-adapt", "type": "registry:ui", "title": "Adaptive Theme Switch", "description": "Light/dark switch that keeps brand canvases and lifts type that would vanish in the other mode." }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "Elevated surface with header, content, and footer slots." }, { "name": "textarea", "type": "registry:ui", "title": "Textarea", "description": "Multi-line text input styled for AtroUI forms." }, { "name": "form-select", "type": "registry:ui", "title": "Form Select", "description": "Accessible select built on Base UI." }, { "name": "breadcrumbs", "type": "registry:ui", "title": "Breadcrumbs", "description": "Path navigation trail for docs and product pages." }, { "name": "prose", "type": "registry:ui", "title": "Prose", "description": "Long-form typography container for articles and MDX." }, { "name": "fade-in", "type": "registry:ui", "title": "Fade In", "description": "Scroll-triggered fade + rise using motion." }, { "name": "stagger", "type": "registry:ui", "title": "Stagger", "description": "Stagger children on scroll with StaggerChild." }, { "name": "scroll-progress", "type": "registry:ui", "title": "Scroll Progress", "description": "Reading-progress bar driven by scroll position." }, { "name": "logo", "type": "registry:component", "title": "Logo", "description": "Interrupted-A mark and wordmark. Edit the SVG in your repo." }, { "name": "home-hero", "type": "registry:block", "title": "Home Hero", "description": "Docs-matching homepage hero with editable CONTENT (stamp, CTAs, sprint, OG preview panel)." }, { "name": "home-who", "type": "registry:block", "title": "Home Who", "description": "Founder / who band with editable CONTENT constants." }, { "name": "site-header", "type": "registry:block", "title": "Site Header", "description": "Sticky site header with editable NAV and CTA." }, { "name": "footer-bold", "type": "registry:block", "title": "Bold Footer", "description": "Bold footer with editable headline, studio links, and socials." }, { "name": "home-principle", "type": "registry:block", "title": "Home Principle", "description": "How-we-work principles band with editable CONTENT and PRINCIPLES." }, { "name": "home-work", "type": "registry:block", "title": "Home Work", "description": "Selected work band with editable PROJECTS list." }, { "name": "home-lab", "type": "registry:block", "title": "Home Lab", "description": "Free tools / lab band with editable TOOLS catalog." }, { "name": "home-crafts", "type": "registry:block", "title": "Home Crafts", "description": "Capabilities / crafts band with editable CONTENT and CRAFTS (distinct from pricing)." }, { "name": "pricing-overview", "type": "registry:block", "title": "Pricing Overview", "description": "Fixed-package pricing band with editable CONTENT and PACKAGES." }, { "name": "feature-grid", "type": "registry:block", "title": "Feature Grid", "description": "Product feature grid with editable CONTENT and FEATURES." }, { "name": "logo-cloud", "type": "registry:block", "title": "Logo Cloud", "description": "Partner / client name strip with editable CONTENT and NAMES." }, { "name": "contextual-cta", "type": "registry:block", "title": "Contextual CTA", "description": "Sticky scroll CTA with editable CONTENT (no analytics wiring)." }, { "name": "exit-intent-popup", "type": "registry:block", "title": "Exit Intent Popup", "description": "Exit-intent dialog with editable CONTENT and storage keys." }, { "name": "contact-form", "type": "registry:block", "title": "Contact Form", "description": "Multi-step contact form with editable CONTENT; posts to your API." }, { "name": "site-footer", "type": "registry:block", "title": "Site Footer", "description": "Lighter footer with editable CONTENT and link columns." }, { "name": "faq", "type": "registry:block", "title": "FAQ", "description": "Accordion FAQ with editable CONTENT and ITEMS." }, { "name": "waitlist-form", "type": "registry:block", "title": "Waitlist Form", "description": "Email waitlist form with editable CONTENT; posts to your API." }, { "name": "newsletter-form", "type": "registry:block", "title": "Newsletter Form", "description": "Email newsletter form with editable CONTENT; posts to your API." }, { "name": "calendly-embed", "type": "registry:block", "title": "Calendly Embed", "description": "Theme-aware Calendly iframe with editable CONTENT and email fallback." }, { "name": "made-with-embed", "type": "registry:block", "title": "Made With Embed", "description": "Credit badge + copyable HTML snippet with editable CONTENT." }, { "name": "theme-provider", "type": "registry:ui", "title": "Theme Provider", "description": "next-themes wrapper for class-based dark mode." }, { "name": "mockup-frame", "type": "registry:ui", "title": "Mockup Frame", "description": "Browser-frame UI placeholder for case studies." }, { "name": "timeline-animation", "type": "registry:ui", "title": "Timeline Animation", "description": "Scroll-linked sequenced motion for hero timelines." }, { "name": "founder-avatar", "type": "registry:ui", "title": "Founder Avatar", "description": "Circular founder portrait with editable CONTENT src." }, { "name": "site-url", "type": "registry:lib", "title": "Site URL", "description": "getSiteUrl() for metadata and JSON-LD." }, { "name": "seo", "type": "registry:lib", "title": "SEO helpers", "description": "getSiteDomain() helper for structured data." }, { "name": "analytics", "type": "registry:lib", "title": "Analytics", "description": "trackEvent and experiment helpers." }, { "name": "social-share", "type": "registry:block", "title": "Social Share", "description": "X / LinkedIn / copy-link share bar." }, { "name": "before-after-slider", "type": "registry:block", "title": "Before / After", "description": "Compare wireframe vs shipped UI mockups." }, { "name": "visual-case-study", "type": "registry:block", "title": "Case Study", "description": "Case study band with editable CONTENT and before/after." }, { "name": "ar-portfolio", "type": "registry:block", "title": "AR Portfolio", "description": "model-viewer AR portfolio with editable CONTENT models." }, { "name": "live-dashboard", "type": "registry:block", "title": "Live Dashboard", "description": "Studio status board with editable CONTENT projects." }, { "name": "project-planner", "type": "registry:block", "title": "Project Planner", "description": "Multi-step project scoping planner UI." }, { "name": "testimonial-schema", "type": "registry:block", "title": "Testimonial Schema", "description": "Review JSON-LD with editable CONTENT." }, { "name": "json-ld", "type": "registry:block", "title": "JSON-LD", "description": "Site graph, article, FAQ, and breadcrumb JSON-LD helpers." }, { "name": "analytics-provider", "type": "registry:block", "title": "Analytics Provider", "description": "Plausible / GA loader with trackEvent helpers." }, { "name": "og-live-preview", "type": "registry:block", "title": "OG Live Preview", "description": "CSS OG card preview with editable CONTENT presets." }, { "name": "og-examples", "type": "registry:block", "title": "OG Examples", "description": "OG style gallery with editable CONTENT examples." }, { "name": "og-workspace", "type": "registry:block", "title": "OG Workspace", "description": "OG generator UI shell. Wire CONTENT.endpoint (Host API)." }, { "name": "thumbnail-live-preview", "type": "registry:block", "title": "Thumbnail Preview", "description": "CSS thumbnail preview with editable CONTENT." }, { "name": "thumbnail-workspace", "type": "registry:block", "title": "Thumbnail Workspace", "description": "Thumbnail generator UI shell. Wire CONTENT.endpoint (Host API)." }, { "name": "scope-chat", "type": "registry:block", "title": "Scope Chat", "description": "AI scoping chat UI. Wire CONTENT.endpoint (Host API)." }, { "name": "journal-content", "type": "registry:block", "title": "Journal", "description": "Blog index layout with editable CONTENT posts." }, { "name": "resources-content", "type": "registry:block", "title": "Resources", "description": "Resource library layout with editable CONTENT items." }, { "name": "api-contact", "type": "registry:item", "title": "Contact API", "description": "POST /api/contact - honeypot, rate limit, SMTP via atroui/api/contact." }, { "name": "api-waitlist", "type": "registry:item", "title": "Waitlist API", "description": "POST /api/waitlist - Resend audience or SMTP via atroui/api/waitlist." }, { "name": "api-newsletter", "type": "registry:item", "title": "Newsletter API", "description": "POST /api/newsletter - Resend audience or SMTP via atroui/api/newsletter." }, { "name": "api-generate", "type": "registry:item", "title": "OG Generate API", "description": "POST /api/generate - consumer HF/Google keys via atroui/api/generate. No keys shipped." }, { "name": "api-thumbnail", "type": "registry:item", "title": "Thumbnail API", "description": "POST /api/thumbnail - consumer HF/Google/XAI keys via atroui/api/thumbnail. No keys shipped." }, { "name": "api-scope", "type": "registry:item", "title": "Scope Chat API", "description": "POST /api/scope - rule-based by default; optional XAI_API_KEY via atroui/api/scope." }, { "name": "count-up", "type": "registry:block", "title": "Count Up", "description": "In-view count-up number with reduced-motion support." }, { "name": "deadline-countdown", "type": "registry:block", "title": "Deadline Countdown", "description": "Days-to-deadline band with segmented progress and CountUp." }, { "name": "currently", "type": "registry:block", "title": "Currently", "description": "Narrow “now” list with editable stamp and items." }, { "name": "project-list", "type": "registry:block", "title": "Project List", "description": "Hairline project list with tags and optional view-all link." }, { "name": "log-preview", "type": "registry:block", "title": "Log Preview", "description": "Recent log entries band with view-all link." }, { "name": "changelog", "type": "registry:block", "title": "Changelog", "description": "Filterable month-grouped changelog list." }, { "name": "command-menu", "type": "registry:block", "title": "Command Menu", "description": "⌘K command palette for nav, posts, connect, and theme." }, { "name": "reveal", "type": "registry:block", "title": "Reveal", "description": "IntersectionObserver reveal using .atro-reveal CSS." }, { "name": "theme-toggle-icon", "type": "registry:block", "title": "Theme Toggle Icon", "description": "Compact sun/moon theme toggle for narrow chrome." }, { "name": "site-header-narrow", "type": "registry:block", "title": "Site Header Narrow", "description": "Sticky 640px personal header with mono nav and theme icon." }, { "name": "site-footer-narrow", "type": "registry:block", "title": "Site Footer Narrow", "description": "Quiet personal footer with tagline and link grid." }, { "name": "social-float", "type": "registry:block", "title": "Social Float", "description": "Fixed social FAB with expandable link tray." }, { "name": "reading-shelf", "type": "registry:block", "title": "Reading Shelf", "description": "Horizontal book-cover shelf for currently reading." }, { "name": "personal-hero", "type": "registry:block", "title": "Personal Hero", "description": "Narrow personal intro with status, lede links, and meta." }, { "name": "resume", "type": "registry:block", "title": "Resume", "description": "Printable resume layout with experience, skills, and projects." }, { "name": "local-clock", "type": "registry:block", "title": "Local Clock", "description": "Timezone-aware local time chip." }, { "name": "weather-chip", "type": "registry:block", "title": "Weather Chip", "description": "Open-Meteo weather chip — no API key required." }, { "name": "stack-list", "type": "registry:block", "title": "Stack List", "description": "Sectioned tools/stack definition list." } ], "component_count": 84, "components_truncated": false, "component_types": { "registry:lib": 7, "registry:ui": 15, "registry:component": 1, "registry:block": 55, "registry:item": 6 }, "logo": "", "preview_image": "https://www.atroui.com/opengraph-image", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [], "featured": false }, { "number": 366, "name": "@knock-codes", "category": "Blocks & sections (marketing/SaaS)", "tags": [ "auth", "blocks", "hooks", "overlays" ], "tagline": "Copy-paste, session-gated access blocks for React — PIN/Knock Code unlock screens, protected routes/layouts/modals, a headless useKnockCodes hook, and full-page templates.", "short_description": "", "description": "Copy-paste, session-gated access blocks for React — PIN/Knock Code unlock screens, protected routes/layouts/modals, a headless useKnockCodes hook, and full-page templates.", "framework": "react", "homepage": "https://knock.codes", "docs": null, "github": null, "components_github": null, "github_default_branch": null, "github_stars": null, "last_commit": null, "archived": false, "license": null, "open_issues": null, "registry_template": "https://knock.codes/r/react/{name}.json", "registry_index": "https://knock.codes/r/react/registry.json", "components": [ "blur-veil", "code-field", "cooldown-notice", "expiry-pill", "preview-bar", "preview-ribbon", "preview-watermark", "recipient-line", "relock-control", "request-access", "client-preview-gate", "cooldown-screen", "expired-notice", "gated-section", "open-invitation", "preview-chrome", "quick-gate", "revoked-notice", "teaser-gate" ], "component_items": [ { "name": "blur-veil", "type": "registry:component", "title": "Blur veil", "description": "Shows an inert blurred teaser beneath a prompt; blur is presentation, not security. Does not verify codes, persist state, or grant or revoke access. Contract: …" }, { "name": "code-field", "type": "registry:component", "title": "Code field", "description": "Displays controlled demo-code entry, normalizing pasted message artifacts. Does not verify codes, unlock content, store values, or make network requests. Contr…" }, { "name": "cooldown-notice", "type": "registry:component", "title": "Cooldown notice", "description": "Displays a calm countdown without enforcing a retry policy. Does not verify codes, persist state, or grant or revoke access. Contract: the consumer owns lifecy…" }, { "name": "expiry-pill", "type": "registry:component", "title": "Expiry pill", "description": "Shows a preview lifetime as fine, expiring soon, or expired. Does not verify codes, persist state, or grant or revoke access. Contract: the consumer owns lifec…" }, { "name": "preview-bar", "type": "registry:component", "title": "Preview bar", "description": "Keeps build identity, expiry, feedback and relocking available after unlock. Does not verify codes, persist state, or grant or revoke access. Contract: the con…" }, { "name": "preview-ribbon", "type": "registry:component", "title": "Preview ribbon", "description": "Keeps a draft label visible within preview screenshots. Does not verify codes, persist state, or grant or revoke access. Contract: the consumer owns lifecycle …" }, { "name": "preview-watermark", "type": "registry:component", "title": "Preview watermark", "description": "Marks unlocked work with a light recipient or build overlay for screenshots. Does not verify codes, persist state, or grant or revoke access. Contract: the con…" }, { "name": "recipient-line", "type": "registry:component", "title": "Recipient line", "description": "Addresses a private preview to its intended recipient. Does not verify codes, persist state, or grant or revoke access. Contract: the consumer owns lifecycle t…" }, { "name": "relock-control", "type": "registry:component", "title": "Relock control", "description": "Lets the consumer hide a preview on a shared screen. Does not verify codes, persist state, or grant or revoke access. Contract: the consumer owns lifecycle tim…" }, { "name": "request-access", "type": "registry:component", "title": "Request access", "description": "Routes a recipient without a code to the preview owner. Does not verify codes, persist state, or grant or revoke access. Contract: the consumer owns lifecycle …" }, { "name": "client-preview-gate", "type": "registry:block", "title": "Client preview gate", "description": "Your next chapter is ready for a first look. Enter the code from your invitation. Does not verify codes, persist state, or grant or revoke access. Contract: al…" }, { "name": "cooldown-screen", "type": "registry:block", "title": "Cooldown screen", "description": "Your preview is still here. Give it a moment before your next try. Does not verify codes, persist state, or grant or revoke access. Contract: all blocks share …" }, { "name": "expired-notice", "type": "registry:block", "title": "Expired notice", "description": "The invitation window has ended. Ask the studio for a fresh link. Does not verify codes, persist state, or grant or revoke access. Contract: all blocks share c…" }, { "name": "gated-section", "type": "registry:block", "title": "Gated section", "description": "This part of the preview was prepared for invited reviewers. Does not verify codes, persist state, or grant or revoke access. Contract: all blocks share contro…" }, { "name": "open-invitation", "type": "registry:block", "title": "Open invitation", "description": "This look is for you. Continue when you are ready. Does not verify codes, persist state, or grant or revoke access. Contract: all blocks share controlled input…" }, { "name": "preview-chrome", "type": "registry:block", "title": "Preview chrome", "description": "Enter your invitation code to see the draft. Does not verify codes, persist state, or grant or revoke access. Contract: all blocks share controlled input and v…" }, { "name": "quick-gate", "type": "registry:block", "title": "Quick gate", "description": "Enter your preview code to continue. Does not verify codes, persist state, or grant or revoke access. Contract: all blocks share controlled input and visibilit…" }, { "name": "revoked-notice", "type": "registry:block", "title": "Revoked notice", "description": "The owner has withdrawn access. Contact them if you need another look. Does not verify codes, persist state, or grant or revoke access. Contract: all blocks sh…" }, { "name": "teaser-gate", "type": "registry:block", "title": "Teaser gate", "description": "Your private preview is just one invitation away. Does not verify codes, persist state, or grant or revoke access. Contract: all blocks share controlled input …" } ], "component_count": 19, "components_truncated": false, "component_types": { "registry:component": 10, "registry:block": 9 }, "logo": "", "preview_image": "https://knock.codes/og.png", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [ "docs_unresolved", "github_unresolved" ], "featured": false }, { "number": 367, "name": "@knot-ui", "category": "Animated components", "tags": [ "animation", "blocks", "buttons", "cards", "glassmorphism", "media", "navigation" ], "tagline": "A registry of animated, cinematic React components and UI blocks for shadcn — buttons, cards, folders, navbars and more, built with Tailwind CSS v4 and Motion.", "short_description": "", "description": "A registry of animated, cinematic React components and UI blocks for shadcn — buttons, cards, folders, navbars and more, built with Tailwind CSS v4 and Motion.", "framework": "react", "homepage": "https://knot-ui.trupal.me", "docs": "https://knot-ui.trupal.me/docs/components", "github": null, "components_github": null, "github_default_branch": null, "github_stars": null, "last_commit": null, "archived": false, "license": null, "open_issues": null, "registry_template": "https://knot-ui.trupal.me/r/{name}.json", "registry_index": "https://knot-ui.trupal.me/r/registry.json", "components": [ "button", "rise-button", "glare-button", "flip-button", "glass-button", "slide-button", "slide-link-button", "square-button", "flip-card", "navbar", "orbiting-avatars", "fan-folder", "open-folder", "lift-folder", "hand-toggle" ], "component_items": [ { "name": "button", "type": "registry:component", "title": "Premium Snow Button", "description": "A cinematic button with realistic snowflake particle effects rendered on a canvas." }, { "name": "rise-button", "type": "registry:component", "title": "Rise Button", "description": "A button with a rising overlay animation on hover." }, { "name": "glare-button", "type": "registry:component", "title": "Glare Button", "description": "A dark button with a sweeping glare highlight on hover." }, { "name": "flip-button", "type": "registry:component", "title": "Flip Button", "description": "A button that flips between a light front face and dark back face in 3D on hover." }, { "name": "glass-button", "type": "registry:component", "title": "Glass Button", "description": "A frosted-glass morphism button with backdrop blur and inset highlights." }, { "name": "slide-button", "type": "registry:component", "title": "Slide Button", "description": "A button with a sliding color overlay revealing from one side on hover." }, { "name": "slide-link-button", "type": "registry:component", "title": "Slide Link Button", "description": "A minimal link-style button with a sliding underlay on hover." }, { "name": "square-button", "type": "registry:component", "title": "Square Button", "description": "A sharp-cornered button with decorative corner brackets." }, { "name": "flip-card", "type": "registry:component", "title": "Flip Card", "description": "A book-style flip card with a spine tab that reveals on hover." }, { "name": "navbar", "type": "registry:component", "title": "Navbar", "description": "A floating navbar that shrinks and collapses to a pill shape on scroll." }, { "name": "orbiting-avatars", "type": "registry:component", "title": "Orbiting Avatars", "description": "A circular orbit of avatar images that spin around a central CTA button." }, { "name": "fan-folder", "type": "registry:component", "title": "Fan Folder", "description": "Cards fan out and spread behind the folder on hover." }, { "name": "open-folder", "type": "registry:component", "title": "Open Folder", "description": "Lid opens with 3D perspective and floating cards emerge on hover." }, { "name": "lift-folder", "type": "registry:component", "title": "Lift Folder", "description": "Lid lifts up in 3D while stacked cards reveal behind it on hover." }, { "name": "hand-toggle", "type": "registry:component", "title": "Theme Toggle", "description": "A dithered 'hand of god' dark-mode toggle with a circular view-transition reveal." } ], "component_count": 15, "components_truncated": false, "component_types": { "registry:component": 15 }, "logo": "", "preview_image": null, "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [ "github_unresolved" ], "featured": false }, { "number": 368, "name": "@remotionui", "category": "Animated components", "tags": [ "ai", "animation", "audio", "backgrounds", "blocks", "cards", "charts", "dashboard", "forms", "glassmorphism", "hooks", "icons", "loaders", "maps", "media", "retro", "text-effects" ], "tagline": "Copy-paste motion components for Remotion video projects - 200 captions, charts, transitions, backgrounds, and full compositions.", "short_description": "", "description": "Copy-paste motion components for Remotion video projects - 200 captions, charts, transitions, backgrounds, and full compositions.", "framework": "react", "homepage": "https://remotionui.com", "docs": "https://remotionui.com/docs/components", "github": "https://github.com/riaz37/remotion-ui", "components_github": null, "github_default_branch": "main", "github_stars": 60, "last_commit": "2026-09-16T19:40:38Z", "archived": false, "license": "MIT", "open_issues": 0, "registry_template": "https://remotionui.com/r/{name}.json", "registry_index": "https://remotionui.com/r/index.json", "components": [ "timing", "springs", "transition-timing", "ai-composer-utils", "code-syntax", "text-emphasis", "motion-tokens", "gpu", "layout", "motion-wrapper", "motion-primitive", "use-stagger", "fade-in", "fade-out", "slide-up", "slide-left", "scale-in", "typewriter", "counter", "blur-in", "spring-in", "stagger-children", "marker-highlight", "progress-bar", "rotate-in", "transition-fade", "transition-slide", "lower-third", "title-card", "feature-list", "stat-card", "quote-card", "end-card", "intro", "showcase", "hero-loop", "caption-utils", "audio-viz-utils", "map-utils", "path-utils", "caption-highlight", "audiogram-bars", "path-draw", "map-canvas", "map-route", "map-markers", "transition-wipe", "transition-clock-wipe", "transition-light-leak", "blur-reveal", "grid-pixelate-wipe", "frosted-glass-wipe", "directional-wipe", "spatial-push", "chromatic-aberration-wipe", "zoom-through", "mesh-gradient-bg", "dynamic-grid", "simulated-cursor", "confetti-burst", "device-mockup-zoom", "caption-scene", "audiogram-scene", "logo-reveal", "map-flight", "auto-fit-title", "social-clip", "media-utils", "chart-utils", "text-fit-utils", "waveform-line", "audio-pulse", "karaoke-captions", "line-chart-draw", "cursor-path", "media-frame", "media-sequence", "split-screen", "b-roll-stack", "caption-bumper", "animated-bar-chart", "metric-ticker", "timeline-steps", "callout-spotlight", "zoom-pan-frame", "code-reveal", "hook-card", "talking-head-layout", "comment-callout", "tutorial-clip", "data-story", "creator-reel", "podcast-clip", "blur-focus-in", "staggered-fade-up", "masked-slide-reveal", "tracking-in", "light-sweep-text", "slot-roll", "matrix-decode", "rgb-glitch-text", "infinite-marquee", "perspective-marquee", "strikethrough-replace", "terminal-simulator", "code-accordion", "code-diff-wipe", "data-flow-pipes", "drag-drop-flow", "chat-to-preview", "hero-device-assemble", "ecosystem-orbit", "bento-pan", "browser-flow", "ai-generation-canvas", "ai-composer-showcase", "live-code-split", "deploy-reveal", "dashboard-populate", "pricing-focus", "landing-code-showcase", "tool-menu-slide", "image-expand", "claude-chat", "chat-gpt", "v0", "claude-code", "opencode", "text-split", "path-morph", "displacement-transition", "displacement-presentation", "sample-media", "split-text-chars", "audio-reactive-scale", "srt-caption-track", "transition-circle-reveal", "transition-card-flip", "transition-blinds", "transition-whip-pan", "transition-morph-shape", "transition-liquid-warp", "skew-in", "scramble-text", "text-mask-video", "handwriting-text", "stroke-to-fill-text", "variable-font-morph", "liquid-text-morph", "wave-text", "neon-flicker-text", "aurora-bg", "particle-field", "topographic-lines-bg", "caustics-bg", "animated-noise-grain", "light-rays", "parallax-layers", "shake-emphasis", "glow-pulse", "motion-trail", "squash-stretch", "orbit-motion", "depth-of-field-blur", "scanline-crt", "bar-chart-race", "donut-chart", "pie-slice-reveal", "scatter-plot-pop", "bubble-chart-pack", "gauge-dial", "sparkline-row", "heatmap-grid", "comparison-bars", "funnel-chart", "radar-chart", "treemap-blocks", "waterfall-chart", "stacked-area-chart", "candlestick-chart", "gantt-timeline", "word-pop-captions", "caption-emoji-beat", "speaker-label-captions", "transcript-scroll", "subtitle-translate", "waveform-bars-radial", "vu-meter", "voice-note-bubble", "beat-pulse-grid", "audio-scrubber", "poll-overlay", "reaction-burst", "countdown-timer", "sports-scorebug", "news-ticker-bar", "form-fill-sequence", "notification-stack", "tab-switch-panel", "search-results-populate", "file-tree-reveal", "kanban-move", "commit-graph", "comparison-table", "pricing-card", "faq-accordion", "team-grid", "logo-wall", "changelog-entry", "roadmap-lanes", "org-chart-build", "quiz-question", "weather-card", "calendar-month-fill", "arrow-annotate", "badge-stamp", "shape-morph", "blob-morph", "dashed-path-travel", "connector-lines", "svg-mask-reveal", "map-heat-overlay", "globe-arc", "multi-device-lineup", "device-mockup-3d", "paper-shader", "light-tunnel-bg", "text-reveal-shader", "dither-field-bg", "warp-bands-bg", "grain-gradient-bg", "product-turntable-3d", "text-extrude-3d", "card-stack-3d", "globe-points-3d" ], "component_items": [ { "name": "timing", "type": "registry:lib", "title": null, "description": "Frame timing helpers and enter easing" }, { "name": "springs", "type": "registry:lib", "title": null, "description": "Default spring configurations" }, { "name": "transition-timing", "type": "registry:lib", "title": null, "description": "Shared TransitionSeries timing helpers and layered progress curves" }, { "name": "ai-composer-utils", "type": "registry:lib", "title": null, "description": "Shared typewriter, caret, morph, and intro helpers for AI composer scenes" }, { "name": "code-syntax", "type": "registry:lib", "title": null, "description": "Syntax tokenizer, editor palettes, and revealable code line renderer for the code scenes" }, { "name": "text-emphasis", "type": "registry:lib", "title": null, "description": "Word-level phrase matching and marker geometry for scenes that sweep emphasis across text" }, { "name": "motion-tokens", "type": "registry:lib", "title": null, "description": "Named motion duration and stagger tokens" }, { "name": "gpu", "type": "registry:lib", "title": null, "description": "WebGL2 fragment-shader effect factory for GPU primitives" }, { "name": "layout", "type": "registry:lib", "title": null, "description": "Format-agnostic layout helpers" }, { "name": "motion-wrapper", "type": "registry:lib", "title": null, "description": "Inline wrapper for enter/exit animations (avoids AbsoluteFill overlap)" }, { "name": "motion-primitive", "type": "registry:lib", "title": null, "description": "Enter/exit motion contract shared by the animation primitives — opacity leads, exits are shorter, and a bounded Sequence times the exit itself" }, { "name": "use-stagger", "type": "registry:hook", "title": null, "description": "Hook for staggered child delays" }, { "name": "fade-in", "type": "registry:ui", "title": null, "description": "Opacity-only entrance, with an exit that lands on the end of its sequence" }, { "name": "fade-out", "type": "registry:ui", "title": null, "description": "Held exit that accelerates away, timed to the last frame of its sequence by default" }, { "name": "slide-up", "type": "registry:ui", "title": null, "description": "Rise into place, with an optional mask reveal and automatic exit" }, { "name": "slide-left", "type": "registry:ui", "title": null, "description": "Slide in from either side, with an optional mask reveal and automatic exit" }, { "name": "scale-in", "type": "registry:ui", "title": null, "description": "Grow into place from just under full size, with an optional spring and exit" }, { "name": "typewriter", "type": "registry:ui", "title": null, "description": "Typewriter reveal with rhythm, pauses, looping, and a caret that only blinks at rest" }, { "name": "counter", "type": "registry:ui", "title": null, "description": "Animated number with grouping, decimals, odometer digit roll and a reserved width" }, { "name": "blur-in", "type": "registry:ui", "title": null, "description": "Resolve out of a defocus — blur clears before the move lands" }, { "name": "spring-in", "type": "registry:ui", "title": null, "description": "Spring-driven scale and rise, with snappy, smooth and bouncy presets" }, { "name": "stagger-children", "type": "registry:ui", "title": null, "description": "Offset children onto their own sequences, in forward, reverse, centre or edge order, in and out" }, { "name": "marker-highlight", "type": "registry:ui", "title": null, "description": "Highlighter stroke swept word by word across a phrase, with marker, knockout, underline and box variants" }, { "name": "progress-bar", "type": "registry:ui", "title": null, "description": "Inline progress bar with determinate and indeterminate modes, segments and a value readout" }, { "name": "rotate-in", "type": "registry:ui", "title": null, "description": "Swing into place in plane or hinged in depth on the x/y axis" }, { "name": "transition-fade", "type": "registry:ui", "title": null, "description": "Crossfade between scenes, or dip the cut through a colour" }, { "name": "transition-slide", "type": "registry:ui", "title": null, "description": "Slide transition helper for TransitionSeries" }, { "name": "lower-third", "type": "registry:block", "title": null, "description": "Name plate that plays its whole life: wipes out from the frame edge, settles, holds, then retreats the way it came" }, { "name": "title-card", "type": "registry:block", "title": null, "description": "Opening card where each headline line rises out of its own mask and one sweep of light crosses it as it stands" }, { "name": "feature-list", "type": "registry:block", "title": null, "description": "List being ticked off: each row arrives in turn, its rule draws across, and its check strokes in behind it" }, { "name": "stat-card", "type": "registry:block", "title": null, "description": "A number landing: the ring fills while the counter rolls, then the label and the change against the last period settle" }, { "name": "quote-card", "type": "registry:block", "title": null, "description": "Pull quote read aloud: the mark draws, the quote rises line by line, a marker sweeps the phrase, the attribution lands last" }, { "name": "end-card", "type": "registry:block", "title": null, "description": "Outro built in the order a viewer acts on it: title, button assembling under its label, address typing, channels, one pulse" }, { "name": "intro", "type": "registry:block", "title": null, "description": "5-second branded intro: chapter marker, headline, topic rail" }, { "name": "showcase", "type": "registry:block", "title": null, "description": "Full demo reel with TransitionSeries" }, { "name": "hero-loop", "type": "registry:block", "title": null, "description": "12-second seamless brand ident: the RemotionUI logo animated from its own parts over the site's phosphor light, with a transparent variant" }, { "name": "caption-utils", "type": "registry:lib", "title": null, "description": "Caption page grouping and word-active helpers" }, { "name": "audio-viz-utils", "type": "registry:lib", "title": null, "description": "Windowed audio spectrum helpers" }, { "name": "map-utils", "type": "registry:lib", "title": null, "description": "MapLibre and Turf geospatial helpers" }, { "name": "path-utils", "type": "registry:lib", "title": null, "description": "SVG path measuring, sampling, auto-fit and waypoint helpers" }, { "name": "caption-highlight", "type": "registry:ui", "title": null, "description": "TikTok-style word-by-word caption highlight" }, { "name": "audiogram-bars", "type": "registry:ui", "title": null, "description": "Audio-reactive spectrum bar visualization" }, { "name": "path-draw", "type": "registry:ui", "title": null, "description": "SVG stroke reveal with auto-fit framing, multi-path stagger and a drawing head" }, { "name": "map-canvas", "type": "registry:ui", "title": null, "description": "Deterministic MapLibre map mount" }, { "name": "map-route", "type": "registry:ui", "title": null, "description": "Animated GeoJSON route line on a map" }, { "name": "map-markers", "type": "registry:ui", "title": null, "description": "GeoJSON circle and label markers on a map" }, { "name": "transition-wipe", "type": "registry:ui", "title": null, "description": "Wipe transition helper for TransitionSeries" }, { "name": "transition-clock-wipe", "type": "registry:ui", "title": null, "description": "Clock sweep that reads the composition size itself" }, { "name": "transition-light-leak", "type": "registry:ui", "title": null, "description": "Film flare overlay that peaks on the cut and hides the seam under it" }, { "name": "blur-reveal", "type": "registry:ui", "title": null, "description": "Cut where the outgoing scene softens away and the incoming one resolves out of blur" }, { "name": "grid-pixelate-wipe", "type": "registry:ui", "title": null, "description": "Reveal where the next scene arrives one grid cell at a time" }, { "name": "frosted-glass-wipe", "type": "registry:ui", "title": null, "description": "A pane of frosted glass crosses the frame and leaves the next scene behind it" }, { "name": "directional-wipe", "type": "registry:ui", "title": null, "description": "Soft-edged wipe that uncovers the next scene without exposing the background" }, { "name": "spatial-push", "type": "registry:ui", "title": null, "description": "Push where both scenes travel locked edge to edge across the frame" }, { "name": "chromatic-aberration-wipe", "type": "registry:ui", "title": null, "description": "Slide that pulls the colour channels apart at its fastest point and recombines them on landing" }, { "name": "zoom-through", "type": "registry:ui", "title": null, "description": "Camera push-through: one scene drives past the lens, the next lands out of the same move" }, { "name": "mesh-gradient-bg", "type": "registry:ui", "title": null, "description": "Living mesh gradient blob background" }, { "name": "dynamic-grid", "type": "registry:ui", "title": null, "description": "Subtle drifting dot and line grid background" }, { "name": "simulated-cursor", "type": "registry:ui", "title": null, "description": "Frame-timed cursor with press, click ripples, hit targets and labels" }, { "name": "confetti-burst", "type": "registry:ui", "title": null, "description": "Frame-driven confetti burst overlay" }, { "name": "device-mockup-zoom", "type": "registry:block", "title": null, "description": "Cinematic laptop, phone, or browser mockup with staged UI and slow camera pullback" }, { "name": "caption-scene", "type": "registry:block", "title": null, "description": "Lower-third TikTok-style captions synced to audio" }, { "name": "audiogram-scene", "type": "registry:block", "title": null, "description": "Podcast audiogram layout with spectrum bars" }, { "name": "logo-reveal", "type": "registry:block", "title": null, "description": "Logo mark draw-on with wordmark and tagline beats" }, { "name": "map-flight", "type": "registry:block", "title": null, "description": "Animated map flyover with route reveal and markers" }, { "name": "auto-fit-title", "type": "registry:block", "title": null, "description": "Headline sized to the frame it is given, then assembled word by word so any length lands the same way" }, { "name": "social-clip", "type": "registry:block", "title": null, "description": "9:16 social clip with hook, captions, and CTA" }, { "name": "media-utils", "type": "registry:lib", "title": null, "description": "Media item timing and fit helpers" }, { "name": "chart-utils", "type": "registry:lib", "title": null, "description": "Chart scaling and SVG path helpers" }, { "name": "text-fit-utils", "type": "registry:lib", "title": null, "description": "Safe headline fitting helpers" }, { "name": "waveform-line", "type": "registry:ui", "title": null, "description": "Audio waveform line visualization" }, { "name": "audio-pulse", "type": "registry:ui", "title": null, "description": "Audio-reactive pulse rings" }, { "name": "karaoke-captions", "type": "registry:ui", "title": null, "description": "Active-word karaoke caption styling" }, { "name": "line-chart-draw", "type": "registry:ui", "title": null, "description": "SVG line chart that draws itself on" }, { "name": "cursor-path", "type": "registry:ui", "title": null, "description": "Cursor travelling a path with drawn trail and click ripples" }, { "name": "media-frame", "type": "registry:block", "title": null, "description": "One piece of media presented: the frame opens like a shutter under a slow push, then the title masks up and the caption settles" }, { "name": "media-sequence", "type": "registry:block", "title": null, "description": "Edited run of shots pushed on one after another, with a chapter strip that fills through the item playing" }, { "name": "split-screen", "type": "registry:block", "title": null, "description": "Before/after that is actually made: panels meet at the divider, labels land, and the divider can travel across to leave one side whole" }, { "name": "b-roll-stack", "type": "registry:block", "title": null, "description": "Deck of supporting shots dealt one at a time: each rides to the front with its label while the last slides back into the stack" }, { "name": "caption-bumper", "type": "registry:block", "title": null, "description": "Between-beats card that punches its line in word by word, draws a rule under it, and wipes out when its hold is over" }, { "name": "animated-bar-chart", "type": "registry:block", "title": null, "description": "Ranked bar chart scene with a value axis" }, { "name": "metric-ticker", "type": "registry:block", "title": null, "description": "KPI cards that count themselves in" }, { "name": "timeline-steps", "type": "registry:block", "title": null, "description": "Process walked step by step: the rail draws ahead of a travelling head that lands on each step, works it through a closing ring, then checks it off" }, { "name": "callout-spotlight", "type": "registry:block", "title": null, "description": "Spotlight that is aimed: the mask closes from the whole frame onto the target, a ring pings it, then a connector draws out to the callout" }, { "name": "zoom-pan-frame", "type": "registry:block", "title": null, "description": "Camera move on a still driven by focal points, settling before the cut, with an optional label chip" }, { "name": "code-reveal", "type": "registry:block", "title": null, "description": "Editor window that writes a syntax-highlighted file character by character, then focuses the lines that matter" }, { "name": "hook-card", "type": "registry:block", "title": null, "description": "Short-form opener where the hook rises line by line out of its mask and an underline draws under the promise" }, { "name": "talking-head-layout", "type": "registry:block", "title": null, "description": "Talking-head clip frame that opens on the speaker, slides a name plate out from behind it, and plays the spoken lines in a reserved caption zone with the wavef…" }, { "name": "comment-callout", "type": "registry:block", "title": null, "description": "Viewer comment answered on screen: it lands from the feed, the ask is marked up, the creator hearts it, and the reply is typed and sent" }, { "name": "tutorial-clip", "type": "registry:block", "title": null, "description": "Tutorial clip composition for demos and explainers" }, { "name": "data-story", "type": "registry:block", "title": null, "description": "Data storytelling composition template" }, { "name": "creator-reel", "type": "registry:block", "title": null, "description": "Vertical creator media composition template" }, { "name": "podcast-clip", "type": "registry:block", "title": null, "description": "Podcast clip composition with audio visuals and captions" }, { "name": "blur-focus-in", "type": "registry:ui", "title": null, "description": "Text fades from heavy blur into sharp focus" }, { "name": "staggered-fade-up", "type": "registry:ui", "title": null, "description": "Words rise with cascading fade-up stagger" }, { "name": "masked-slide-reveal", "type": "registry:ui", "title": null, "description": "Words slide up through a horizontal mask" }, { "name": "tracking-in", "type": "registry:ui", "title": null, "description": "Letter-spacing collapses with spring snap" }, { "name": "light-sweep-text", "type": "registry:ui", "title": null, "description": "Light gradient sweeps across dim text" }, { "name": "slot-roll", "type": "registry:ui", "title": null, "description": "Characters roll like a slot reel into place" }, { "name": "matrix-decode", "type": "registry:ui", "title": null, "description": "Scramble resolves left-to-right into target text" }, { "name": "rgb-glitch-text", "type": "registry:ui", "title": null, "description": "Signal-lock RGB glitch text with channel splits, slices, and scanlines" }, { "name": "infinite-marquee", "type": "registry:ui", "title": null, "description": "Endlessly scrolling horizontal text band" }, { "name": "perspective-marquee", "type": "registry:ui", "title": null, "description": "Marquee tilted in 3D with depth fade" }, { "name": "strikethrough-replace", "type": "registry:ui", "title": null, "description": "Strikes out one phrase and puts another in its place, on a three-beat correction timeline" }, { "name": "terminal-simulator", "type": "registry:block", "title": null, "description": "Terminal window that types a command, streams spinner-to-check build steps with timings, then returns the prompt" }, { "name": "code-accordion", "type": "registry:block", "title": null, "description": "Stepped walkthrough where each section opens, writes its code, is checked off, and closes behind the next" }, { "name": "code-diff-wipe", "type": "registry:block", "title": null, "description": "Diff patch landing line by line: an apply front travels the file, removals collapse, additions open and write in" }, { "name": "data-flow-pipes", "type": "registry:block", "title": null, "description": "Pipeline running end to end: stages come up in order, pipes draw between them, and a stream of payloads hops through, lighting each stage and ticking its tally" }, { "name": "drag-drop-flow", "type": "registry:block", "title": null, "description": "Cursor drags a file out of a media library into a drop zone that arms, catches it, and uploads it to completion" }, { "name": "chat-to-preview", "type": "registry:block", "title": null, "description": "Prompt-to-render loop: the ask types into the composer and sends into the thread, the answer streams back, and the preview assembles from wireframe to rendered…" }, { "name": "hero-device-assemble", "type": "registry:block", "title": null, "description": "Device layers assemble hero" }, { "name": "ecosystem-orbit", "type": "registry:block", "title": null, "description": "Logo with orbiting satellites" }, { "name": "bento-pan", "type": "registry:block", "title": null, "description": "Camera pan across a bento grid of metric cards" }, { "name": "browser-flow", "type": "registry:block", "title": null, "description": "URL to browser preview flow" }, { "name": "ai-generation-canvas", "type": "registry:block", "title": null, "description": "Prompt-to-dashboard generation with morphing input, skeleton shimmer, and card flips" }, { "name": "ai-composer-showcase", "type": "registry:block", "title": null, "description": "Showcase reel cutting through five AI composer interfaces with title and end cards" }, { "name": "live-code-split", "type": "registry:block", "title": null, "description": "Editor on the left, its rendered output live on the right" }, { "name": "deploy-reveal", "type": "registry:block", "title": null, "description": "Terminal deploy to browser" }, { "name": "dashboard-populate", "type": "registry:block", "title": null, "description": "Dashboard metrics populate" }, { "name": "pricing-focus", "type": "registry:block", "title": null, "description": "Pricing tier focus animation" }, { "name": "landing-code-showcase", "type": "registry:block", "title": null, "description": "Landing with install commands" }, { "name": "tool-menu-slide", "type": "registry:block", "title": null, "description": "Tool menu slide-in" }, { "name": "image-expand", "type": "registry:block", "title": null, "description": "A still opens from a card to full frame, then takes its caption" }, { "name": "claude-chat", "type": "registry:block", "title": null, "description": "Claude composer card with typed prompt and waveform-to-send morph" }, { "name": "chat-gpt", "type": "registry:block", "title": null, "description": "ChatGPT composer pill with greeting, suggestion chips, and voice-to-send morph" }, { "name": "v0", "type": "registry:block", "title": null, "description": "v0 composer with greeting, model chip, project selector, and mic-to-send morph" }, { "name": "claude-code", "type": "registry:block", "title": null, "description": "Claude Code terminal welcome screen with CLI prompt typing" }, { "name": "opencode", "type": "registry:block", "title": null, "description": "OpenCode TUI composer with agent and model status" }, { "name": "text-split", "type": "registry:lib", "title": null, "description": "Split a string into chars, words or lines with staggered per-unit timing" }, { "name": "path-morph", "type": "registry:lib", "title": null, "description": "Cached SVG path morphing with winding alignment and box fitting" }, { "name": "displacement-transition", "type": "registry:lib", "title": null, "description": "Frame maths for displacement-map and shape-mask transitions" }, { "name": "displacement-presentation", "type": "registry:lib", "title": null, "description": "Shared TransitionSeries presentation for warp and shape-mask cuts" }, { "name": "sample-media", "type": "registry:lib", "title": null, "description": "Placeholder stills, captions, and audio for composition defaults" }, { "name": "split-text-chars", "type": "registry:ui", "title": null, "description": "Split text into chars, words or lines and stagger them in" }, { "name": "audio-reactive-scale", "type": "registry:ui", "title": null, "description": "Scales any child by per-frame audio amplitude" }, { "name": "srt-caption-track", "type": "registry:ui", "title": null, "description": "Renders a caption track straight from an SRT or WebVTT file" }, { "name": "transition-circle-reveal", "type": "registry:ui", "title": null, "description": "Circular mask that opens from any point onto the next scene" }, { "name": "transition-card-flip", "type": "registry:ui", "title": null, "description": "Whole-frame 3D flip that hands off on backface culling" }, { "name": "transition-blinds", "type": "registry:ui", "title": null, "description": "Staggered slats sweeping open to reveal the next scene" }, { "name": "transition-whip-pan", "type": "registry:ui", "title": null, "description": "Fast pan with directional motion blur along the travel axis" }, { "name": "transition-morph-shape", "type": "registry:ui", "title": null, "description": "Reveal through a shape that morphs as it grows across the frame" }, { "name": "transition-liquid-warp", "type": "registry:ui", "title": null, "description": "Liquid displacement warp that stirs one scene into the next" }, { "name": "skew-in", "type": "registry:ui", "title": null, "description": "Skew + translate, editorial feel" }, { "name": "scramble-text", "type": "registry:ui", "title": null, "description": "Random-glyph scramble resolving per character" }, { "name": "text-mask-video", "type": "registry:ui", "title": null, "description": "Video or gradient showing through letterforms" }, { "name": "handwriting-text", "type": "registry:ui", "title": null, "description": "Takes a string and strokes it on" }, { "name": "stroke-to-fill-text", "type": "registry:ui", "title": null, "description": "Outline text filling solid" }, { "name": "variable-font-morph", "type": "registry:ui", "title": null, "description": "Animates weight/width axes of a variable font" }, { "name": "liquid-text-morph", "type": "registry:ui", "title": null, "description": "Letterforms morphing between two words" }, { "name": "wave-text", "type": "registry:ui", "title": null, "description": "Per-character sine displacement" }, { "name": "neon-flicker-text", "type": "registry:ui", "title": null, "description": "Neon sign flicker and settle" }, { "name": "aurora-bg", "type": "registry:ui", "title": null, "description": "Drifting light ribbons" }, { "name": "particle-field", "type": "registry:ui", "title": null, "description": "Ambient drifting particles with depth" }, { "name": "topographic-lines-bg", "type": "registry:ui", "title": null, "description": "Contour lines drifting" }, { "name": "caustics-bg", "type": "registry:ui", "title": null, "description": "Underwater light caustics" }, { "name": "animated-noise-grain", "type": "registry:ui", "title": null, "description": "Film grain overlay" }, { "name": "light-rays", "type": "registry:ui", "title": null, "description": "Volumetric god rays drifting across the stage" }, { "name": "parallax-layers", "type": "registry:ui", "title": null, "description": "Depth-offset layers on one driver" }, { "name": "shake-emphasis", "type": "registry:ui", "title": null, "description": "Short impact shake" }, { "name": "glow-pulse", "type": "registry:ui", "title": null, "description": "Rhythmic glow for CTAs and live indicators" }, { "name": "motion-trail", "type": "registry:ui", "title": null, "description": "Echo trails behind a moving element" }, { "name": "squash-stretch", "type": "registry:ui", "title": null, "description": "The animation principle as a primitive" }, { "name": "orbit-motion", "type": "registry:ui", "title": null, "description": "Element orbiting a center point" }, { "name": "depth-of-field-blur", "type": "registry:ui", "title": null, "description": "Rack focus between layers" }, { "name": "scanline-crt", "type": "registry:ui", "title": null, "description": "CRT scanlines and curvature overlay" }, { "name": "bar-chart-race", "type": "registry:ui", "title": null, "description": "Ranked bars reorder over time" }, { "name": "donut-chart", "type": "registry:ui", "title": null, "description": "Multi-segment donut with labels" }, { "name": "pie-slice-reveal", "type": "registry:ui", "title": null, "description": "Slices sweep in sequentially" }, { "name": "scatter-plot-pop", "type": "registry:ui", "title": null, "description": "Points pop in on stagger, optional trend line" }, { "name": "bubble-chart-pack", "type": "registry:ui", "title": null, "description": "Circle-packed values settling into place" }, { "name": "gauge-dial", "type": "registry:ui", "title": null, "description": "Needle sweeps to target" }, { "name": "sparkline-row", "type": "registry:ui", "title": null, "description": "Compact trend lines that read at small sizes" }, { "name": "heatmap-grid", "type": "registry:ui", "title": null, "description": "Cell grid filling by intensity, contribution-graph style" }, { "name": "comparison-bars", "type": "registry:ui", "title": null, "description": "Two-series before/after with delta callout" }, { "name": "funnel-chart", "type": "registry:ui", "title": null, "description": "Stage bars narrowing with drop-off percentages" }, { "name": "radar-chart", "type": "registry:ui", "title": null, "description": "Multi-axis spider chart drawing its polygon" }, { "name": "treemap-blocks", "type": "registry:ui", "title": null, "description": "Nested rectangles sized by value" }, { "name": "waterfall-chart", "type": "registry:ui", "title": null, "description": "Cumulative bridge with positive/negative steps" }, { "name": "stacked-area-chart", "type": "registry:ui", "title": null, "description": "Multiple series stacking as they draw on" }, { "name": "candlestick-chart", "type": "registry:ui", "title": null, "description": "OHLC financial series" }, { "name": "gantt-timeline", "type": "registry:ui", "title": null, "description": "Date-scaled schedule bars" }, { "name": "word-pop-captions", "type": "registry:ui", "title": null, "description": "Narrowed: one word at a time, alone on frame" }, { "name": "caption-emoji-beat", "type": "registry:ui", "title": null, "description": "Emoji punctuation landing on beats" }, { "name": "speaker-label-captions", "type": "registry:ui", "title": null, "description": "Narrowed: multi-speaker caption track with name tags and color coding" }, { "name": "transcript-scroll", "type": "registry:ui", "title": null, "description": "Full readable transcript scrolling with the active line marked" }, { "name": "subtitle-translate", "type": "registry:ui", "title": null, "description": "Dual-language stacked subtitles" }, { "name": "waveform-bars-radial", "type": "registry:ui", "title": null, "description": "Circular bars around a center element" }, { "name": "vu-meter", "type": "registry:ui", "title": null, "description": "Segmented level meter with peak hold" }, { "name": "voice-note-bubble", "type": "registry:ui", "title": null, "description": "Chat-style audio message with waveform and playhead" }, { "name": "beat-pulse-grid", "type": "registry:ui", "title": null, "description": "Grid cells pulsing on detected beats" }, { "name": "audio-scrubber", "type": "registry:ui", "title": null, "description": "Waveform with traveling playhead and time labels" }, { "name": "poll-overlay", "type": "registry:block", "title": null, "description": "Question with bars filling to results" }, { "name": "reaction-burst", "type": "registry:block", "title": null, "description": "Narrowed: hearts/likes rising continuously" }, { "name": "countdown-timer", "type": "registry:block", "title": null, "description": "Numeric or ring countdown to zero" }, { "name": "sports-scorebug", "type": "registry:block", "title": null, "description": "Broadcast score furniture with clock" }, { "name": "news-ticker-bar", "type": "registry:block", "title": null, "description": "Broadcast lower ticker with headlines" }, { "name": "form-fill-sequence", "type": "registry:block", "title": null, "description": "Fields typing and validating in order" }, { "name": "notification-stack", "type": "registry:block", "title": null, "description": "Toasts stacking and dismissing" }, { "name": "tab-switch-panel", "type": "registry:block", "title": null, "description": "Tab bar with cross-fading panels" }, { "name": "search-results-populate", "type": "registry:block", "title": null, "description": "Query typed, results streaming in and ranking" }, { "name": "file-tree-reveal", "type": "registry:block", "title": null, "description": "Directory tree expanding node by node" }, { "name": "kanban-move", "type": "registry:block", "title": null, "description": "Cards moving across columns" }, { "name": "commit-graph", "type": "registry:block", "title": null, "description": "Branch/merge graph drawing itself" }, { "name": "comparison-table", "type": "registry:block", "title": null, "description": "Multi-column feature matrix" }, { "name": "pricing-card", "type": "registry:block", "title": null, "description": "Tier card with price roll and features" }, { "name": "faq-accordion", "type": "registry:block", "title": null, "description": "Narrowed: Q/A text rows expanding" }, { "name": "team-grid", "type": "registry:block", "title": null, "description": "Avatar grid with role labels on stagger" }, { "name": "logo-wall", "type": "registry:block", "title": null, "description": "Client logo grid, grayscale to color" }, { "name": "changelog-entry", "type": "registry:block", "title": null, "description": "Version header with categorized change rows" }, { "name": "roadmap-lanes", "type": "registry:block", "title": null, "description": "Swimlanes of shipped/building/planned" }, { "name": "org-chart-build", "type": "registry:block", "title": null, "description": "Hierarchy assembling top-down" }, { "name": "quiz-question", "type": "registry:block", "title": null, "description": "Question, options, correct-answer reveal" }, { "name": "weather-card", "type": "registry:block", "title": null, "description": "Conditions with animated iconography" }, { "name": "calendar-month-fill", "type": "registry:block", "title": null, "description": "Month grid populating with events" }, { "name": "arrow-annotate", "type": "registry:ui", "title": null, "description": "Hand-drawn arrow pointing at a target" }, { "name": "badge-stamp", "type": "registry:ui", "title": null, "description": "Stamp/seal impact with rotation settle" }, { "name": "shape-morph", "type": "registry:ui", "title": null, "description": "Path interpolation between two shapes" }, { "name": "blob-morph", "type": "registry:ui", "title": null, "description": "Organic blob continuously morphing" }, { "name": "dashed-path-travel", "type": "registry:ui", "title": null, "description": "Narrowed: any element traveling any path with a dashed trail" }, { "name": "connector-lines", "type": "registry:ui", "title": null, "description": "Narrowed: primitive that draws edges between anchored elements" }, { "name": "svg-mask-reveal", "type": "registry:ui", "title": null, "description": "Arbitrary SVG shape as a reveal mask" }, { "name": "map-heat-overlay", "type": "registry:ui", "title": null, "description": "Density overlay fading in over the basemap" }, { "name": "globe-arc", "type": "registry:ui", "title": null, "description": "Arcs between points on a globe" }, { "name": "multi-device-lineup", "type": "registry:ui", "title": null, "description": "Phone + tablet + laptop showing one responsive design" }, { "name": "device-mockup-3d", "type": "registry:block", "title": null, "description": "Laptop product shot in real 3D: lid opens, then a turn and push-in over a lit floor" }, { "name": "paper-shader", "type": "registry:lib", "title": null, "description": "Deterministic frame driver and first-draw gate for Paper shader fields" }, { "name": "light-tunnel-bg", "type": "registry:ui", "title": null, "description": "Flight down a twisting barrel of light with a defocused vanishing point" }, { "name": "text-reveal-shader", "type": "registry:ui", "title": null, "description": "Words condensing out of light into liquid chrome" }, { "name": "dither-field-bg", "type": "registry:ui", "title": null, "description": "Two-colour ordered-dither field quantised to a pixel grid" }, { "name": "warp-bands-bg", "type": "registry:ui", "title": null, "description": "Colour bands folded through noise and a swirl" }, { "name": "grain-gradient-bg", "type": "registry:ui", "title": null, "description": "Multi-colour gradient with grain worked through it" }, { "name": "product-turntable-3d", "type": "registry:block", "title": null, "description": "A product on a studio turntable: the model turns a full revolution under a soft key and rim while the camera holds, with a contact shadow anchoring it to the f…" }, { "name": "text-extrude-3d", "type": "registry:block", "title": null, "description": "Extruded 3D headline with a lit bevel: the letters rise and settle as the camera pulls back across them" }, { "name": "card-stack-3d", "type": "registry:block", "title": null, "description": "A stack of physical cards fanning out in depth, each with real thickness and an edge highlight, turning to face the camera" }, { "name": "globe-points-3d", "type": "registry:block", "title": null, "description": "Lit sphere with instanced city markers and arcs rising between them, turning slowly under a rim light" } ], "component_count": 235, "components_truncated": false, "component_types": { "registry:lib": 24, "registry:hook": 1, "registry:ui": 124, "registry:block": 86 }, "logo": "", "preview_image": "https://remotionui.com/opengraph-image?8cdd49bc96a2e9f7", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [], "featured": false }, { "number": 369, "name": "@vernostudio", "category": "Theming/styling", "tags": [ "accessibility", "loaders", "media", "theming" ], "tagline": "The full OKLCH scale plus every variable shadcn components read, so anything you install lands on the same tokens instead of its own colors.", "short_description": "", "description": "The full OKLCH scale plus every variable shadcn components read, so anything you install lands on the same tokens instead of its own colors.", "framework": "react", "homepage": "https://verno-studio.vercel.app/components", "docs": null, "github": "https://github.com/verno-studio/website", "components_github": null, "github_default_branch": "main", "github_stars": 2, "last_commit": "2026-08-14T18:57:41Z", "archived": false, "license": "MIT", "open_issues": 0, "registry_template": "https://verno-studio.vercel.app/r/{name}.json", "registry_index": "https://verno-studio.vercel.app/r/registry.json", "components": [ "theme", "badge", "file-tree", "json-view", "spinner" ], "component_items": [ { "name": "theme", "type": "registry:theme", "title": "Theme", "description": "The color scale plus the variables shadcn components read, so a component from either registry agrees with the other on what --background means." }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "A label for the metadata a reader scans rather than reads. Eight hues with a low-contrast pair each, plus inverted and the house gradient, in three sizes with …" }, { "name": "file-tree", "type": "registry:ui", "title": "File Tree", "description": "A directory listing with collapsible folders, built from nested disclosures rather than a tree role." }, { "name": "json-view", "type": "registry:ui", "title": "JSON View", "description": "A collapsible tree for inspecting a JSON payload, with syntax roles, search highlighting and the full ARIA tree keyboard model." }, { "name": "spinner", "type": "registry:ui", "title": "Spinner", "description": "A wireframe atom that assembles itself and then turns in space: three orbits arrive one per beat, then the whole thing turns as one. Three sizes, in the curren…" } ], "component_count": 5, "components_truncated": false, "component_types": { "registry:theme": 1, "registry:ui": 4 }, "logo": "", "preview_image": "https://verno-studio.vercel.app/opengraph-image.gif", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [ "docs_unresolved" ], "featured": false }, { "number": 370, "name": "@onchain-ui", "category": "Forms", "tags": [ "auth", "buttons", "cards", "crypto", "design-system", "forms", "hooks", "icons" ], "tagline": "Web3 components for shadcn apps. Wallet identity, token logos, balances, and market UI primitives for EVM products.", "short_description": "", "description": "Web3 components for shadcn apps. Wallet identity, token logos, balances, and market UI primitives for EVM products.", "framework": "react", "homepage": "https://onchain-ui.dev", "docs": "https://onchain-ui.dev/docs", "github": "https://github.com/GavinJaynes/onchain-ui", "components_github": "https://github.com/GavinJaynes/onchain-ui/tree/main/registry", "github_default_branch": "main", "github_stars": 1, "last_commit": "2026-09-09T02:00:45Z", "archived": false, "license": "MIT", "open_issues": 0, "registry_template": "https://onchain-ui.dev/r/{name}.json", "registry_index": "https://onchain-ui.dev/r/registry.json", "components": [ "address-display", "address-identity", "amount-input", "asset-input", "asset-row", "chain-select", "connect-wallet", "connector-list", "crypto-icons", "network-logo", "onchain-config", "sonner", "token-balance", "token-logo", "token-price", "token-stack", "use-available-connectors", "wallet-button" ], "component_items": [ { "name": "address-display", "type": "registry:ui", "title": "Address Display", "description": "Displays an EVM wallet address with copy-to-clipboard and an optional block explorer link." }, { "name": "address-identity", "type": "registry:ui", "title": "Address Identity", "description": "Resolves an EVM address to an ENS or Base name with optional avatar, copy-to-clipboard, and explorer link." }, { "name": "amount-input", "type": "registry:ui", "title": "Amount Input", "description": "Controlled decimal string input for token amounts. Preserves precision and incomplete edits, with an optional fractional digit limit." }, { "name": "asset-input", "type": "registry:ui", "title": "Asset Input", "description": "Labeled amount field for swaps, sells, and deposits, with slots for token selection, supporting text, balances, and actions. No wallet provider required." }, { "name": "asset-row", "type": "registry:ui", "title": "Asset Row", "description": "Displays a practical portfolio or watchlist row from token identity, network, amount, value, and change." }, { "name": "chain-select", "type": "registry:ui", "title": "Chain Select", "description": "Network selector for wallet switching or filtering, with optional all-networks and unsupported-chain states." }, { "name": "connect-wallet", "type": "registry:block", "title": "Connect Wallet", "description": "A complete connect, identity, and disconnect surface wired to wagmi." }, { "name": "connector-list", "type": "registry:ui", "title": "Connector List", "description": "A wallet picker list with icons, pending state, and a no-wallet-detected fallback." }, { "name": "crypto-icons", "type": "registry:lib", "title": "Crypto Icons", "description": "Swappable adapter that resolves token and network icons for onchain-ui components." }, { "name": "network-logo", "type": "registry:ui", "title": "Network Logo", "description": "Displays a network or chain logo with known chain fallbacks." }, { "name": "onchain-config", "type": "registry:lib", "title": "Onchain Config", "description": "One file for app-wide chain settings: explorers, network names, read clients, and avatar gateways." }, { "name": "sonner", "type": "registry:ui", "title": "Sonner", "description": "Toast notifications themed by your app's CSS tokens. A framework-agnostic Toaster with no next-themes dependency." }, { "name": "token-balance", "type": "registry:ui", "title": "Token Balance", "description": "Displays a token amount with optional logo, fiat value, and change." }, { "name": "token-logo", "type": "registry:ui", "title": "Token Logo", "description": "Displays a token image with resilient symbol, name, or address fallback." }, { "name": "token-price", "type": "registry:ui", "title": "Token Price", "description": "Formats token prices with optional positive, negative, or neutral change." }, { "name": "token-stack", "type": "registry:ui", "title": "Token Stack", "description": "Displays overlapping token logos for baskets, pools, routes, and portfolio rows." }, { "name": "use-available-connectors", "type": "registry:hook", "title": "useAvailableConnectors", "description": "Filters unavailable injected wallets while preserving mobile and remote wagmi connectors." }, { "name": "wallet-button", "type": "registry:ui", "title": "Wallet Button", "description": "The connected-wallet pill: resolved identity, network mark, and a disclosure chevron." } ], "component_count": 18, "components_truncated": false, "component_types": { "registry:ui": 14, "registry:block": 1, "registry:lib": 2, "registry:hook": 1 }, "logo": "", "preview_image": "https://onchain-ui.dev/opengraph-image?5d415e1eb2e79572", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [], "featured": false }, { "number": 371, "name": "@afterglow", "category": "Animated components", "tags": [ "ai", "animation", "auth", "blocks", "buttons", "cards", "charts", "dashboard", "forms", "hooks", "loaders", "media", "navigation", "overlays", "retro", "tables", "text-effects", "theming" ], "tagline": "A complete terminal UI system for shadcn with Base UI components, terminal-specific building blocks, and eight phosphor color themes.", "short_description": "", "description": "A complete terminal UI system for shadcn with Base UI components, terminal-specific building blocks, and eight phosphor color themes.", "framework": "react", "homepage": "https://afterglow.thebuilder.dk", "docs": "https://afterglow.thebuilder.dk/docs", "github": "https://github.com/thebuilder/afterglow", "components_github": "https://github.com/thebuilder/afterglow/tree/main/registry", "github_default_branch": "main", "github_stars": 7, "last_commit": "2026-09-19T13:12:13Z", "archived": false, "license": null, "open_issues": 0, "registry_template": "https://afterglow.thebuilder.dk/r/{name}.json", "registry_index": "https://afterglow.thebuilder.dk/r/registry.json", "components": [ "theme", "accordion", "alert", "alert-dialog", "avatar", "badge", "breadcrumb", "button", "calendar", "card", "chart", "checkbox", "code-block", "collapsible", "combobox", "command", "context-menu", "dialog", "dropdown-menu", "empty", "hover-card", "input", "input-group", "input-otp", "kbd", "label", "pagination", "popover", "progress", "radio-group", "resizable", "scroll-area", "select", "separator", "sheet", "skeleton", "slider", "spinner", "switch", "table", "tabs", "textarea", "toast", "toggle", "toggle-group", "tooltip", "alarm-button", "boot-log", "caret", "connector", "eyebrow", "led", "prompt", "scanlines", "screen", "shell", "terminal-window", "date-picker", "operator-dashboard", "terminal", "use-copied", "use-reduced-motion", "typewriter", "scramble", "grain", "glitch" ], "component_items": [ { "name": "theme", "type": "registry:theme", "title": "Terminal Theme", "description": "The tokens, typography, motion and CRT effects used by every component." }, { "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "Sections that open one at a time or many. The marker is a plus that rotates into a minus." }, { "name": "alert", "type": "registry:ui", "title": "Alert", "description": "A notice with a lit left edge and a matching icon. Four tones." }, { "name": "alert-dialog", "type": "registry:ui", "title": "Alert Dialog", "description": "A pink confirmation dialog for destructive or irreversible actions." }, { "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "Initials in mono inside a bordered square." }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "A bordered rectangle of tracked-out mono for a status or a count. Eight variants." }, { "name": "breadcrumb", "type": "registry:ui", "title": "Breadcrumb", "description": "A path in mono, separated by slashes, with the current segment in white." }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "Seven variants and five sizes in uppercase mono. `primary` is filled phosphor; `signal` marks urgent states." }, { "name": "calendar", "type": "registry:ui", "title": "Calendar", "description": "A square month grid with phosphor selection, an amber today marker and Afterglow navigation buttons." }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "A panel with a colored left edge, or `accent={false}` for none. With a `CardLink`, the edge traces the card on hover." }, { "name": "chart", "type": "registry:ui", "title": "Chart", "description": "Recharts wired to the five chart colors, terminal tooltip and stepped reveal." }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "`[ ]` and `[x]`. A square that fills with the beam when it is on." }, { "name": "code-block", "type": "registry:ui", "title": "Code Block", "description": "Shiki wired to the phosphor palette, with a copy button. Takes a string of code and highlights it on the server." }, { "name": "collapsible", "type": "registry:ui", "title": "Collapsible", "description": "The accordion without the styling, for when you have drawn the trigger yourself." }, { "name": "combobox", "type": "registry:ui", "title": "Combobox", "description": "A text field that filters its list as you type. With `multiple` set, each pick becomes a chip in the field." }, { "name": "command", "type": "registry:ui", "title": "Command", "description": "A search line and a list that narrows as you type. Groups, shortcuts, and a dialog wrapper." }, { "name": "context-menu", "type": "registry:ui", "title": "Context Menu", "description": "A system menu at the pointer, with choices, submenus, shortcut hints and destructive actions." }, { "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "Opens in four steps rather than on a curve, with one pass of the beam down the panel." }, { "name": "dropdown-menu", "type": "registry:ui", "title": "Dropdown Menu", "description": "Items, checkbox and radio items, submenus, and shortcut hints in the same mono as the keys." }, { "name": "empty", "type": "registry:ui", "title": "Empty", "description": "A dashed hairline box for a list with nothing in it." }, { "name": "hover-card", "type": "registry:ui", "title": "Hover Card", "description": "A bordered preview panel for a link, with one phosphor edge and room for interactive content." }, { "name": "input", "type": "registry:ui", "title": "Input", "description": "A hairline field in mono with a phosphor caret. Focus brightens the border instead of adding a ring." }, { "name": "input-group", "type": "registry:ui", "title": "Input Group", "description": "Icons, text and buttons inside a field's border. The whole group glows while the control in it has focus." }, { "name": "input-otp", "type": "registry:ui", "title": "Input OTP", "description": "One cell per character, with a drawn caret in the active one." }, { "name": "kbd", "type": "registry:ui", "title": "Kbd", "description": "A key with two pixels of implied depth under it. Pass `glyph` for `⌘`, `⇧` and `↵`." }, { "name": "label", "type": "registry:ui", "title": "Label", "description": "A field's name, set as an eyebrow. Small, tracked out, phosphor." }, { "name": "pagination", "type": "registry:ui", "title": "Pagination", "description": "Page numbers as joined cells, so a run of them reads as one control." }, { "name": "popover", "type": "registry:ui", "title": "Popover", "description": "A bordered panel anchored to its trigger." }, { "name": "progress", "type": "registry:ui", "title": "Progress", "description": "Three pixels of track and a light in it. Pass `indeterminate` for a segment that sweeps and leaves." }, { "name": "radio-group", "type": "registry:ui", "title": "Radio Group", "description": "Terminal-style radio marks in their unchecked and checked states: `( )` and `(•)`." }, { "name": "resizable", "type": "registry:ui", "title": "Resizable", "description": "Panels split by a hairline that lights when you take hold of it." }, { "name": "scroll-area", "type": "registry:ui", "title": "Scroll Area", "description": "A hairline track and a square thumb, in place of the operating system's own." }, { "name": "select", "type": "registry:ui", "title": "Select", "description": "A trigger that reads as a field, and a list whose chosen row carries a lit left edge." }, { "name": "separator", "type": "registry:ui", "title": "Separator", "description": "One pixel of the border color, horizontal or vertical." }, { "name": "sheet", "type": "registry:ui", "title": "Sheet", "description": "A drawer from any of the four edges. The edge it slides from keeps a lit border." }, { "name": "skeleton", "type": "registry:ui", "title": "Skeleton", "description": "Placeholder rows in dim phosphor." }, { "name": "slider", "type": "registry:ui", "title": "Slider", "description": "A hairline track, a lit range, and a square handle. Single value or range." }, { "name": "spinner", "type": "registry:ui", "title": "Spinner", "description": "A lit pixel travelling a 3x3 grid, four brightness levels trailing behind it." }, { "name": "switch", "type": "registry:ui", "title": "Switch", "description": "A squared-off rocker in two sizes." }, { "name": "table", "type": "registry:ui", "title": "Table", "description": "A manifest in mono with hairline rules. `is-numeric` gives a cell amber tabular figures." }, { "name": "tabs", "type": "registry:ui", "title": "Tabs", "description": "Two variants: joined segments and a quieter line." }, { "name": "textarea", "type": "registry:ui", "title": "Textarea", "description": "A multiline field that grows with its content." }, { "name": "toast", "type": "registry:ui", "title": "Toast", "description": "Sonner alerts that blink into place with a border, tint and icon for each tone." }, { "name": "toggle", "type": "registry:ui", "title": "Toggle", "description": "A button that stays down." }, { "name": "toggle-group", "type": "registry:ui", "title": "Toggle Group", "description": "Toggles joined the way the segmented tabs are." }, { "name": "tooltip", "type": "registry:ui", "title": "Tooltip", "description": "A compact label with one lit edge and no arrow." }, { "name": "alarm-button", "type": "registry:component", "title": "Alarm Button", "description": "Two flashes and a rest, the way a warning lamp blinks. Pointing at it stops the flashing." }, { "name": "boot-log", "type": "registry:component", "title": "Boot Log", "description": "A self test that prints itself line by line, at its final height from the first frame." }, { "name": "caret", "type": "registry:component", "title": "Caret", "description": "A blinking block that follows the surrounding font size." }, { "name": "connector", "type": "registry:component", "title": "Connector", "description": "A rule extending left or right from a heading." }, { "name": "eyebrow", "type": "registry:component", "title": "Eyebrow", "description": "The tracked-out line above a heading, with an optional block caret." }, { "name": "led", "type": "registry:component", "title": "LED", "description": "A status lamp and the line it sits in. Four tones, and the idle one holds still." }, { "name": "prompt", "type": "registry:component", "title": "Prompt", "description": "A shell line. Sigil, field and caret share one row with no border between them." }, { "name": "scanlines", "type": "registry:component", "title": "Scanlines", "description": "The glass. Two densities, a multiply blend, and a fixed mode for putting a whole page behind one sheet." }, { "name": "screen", "type": "registry:component", "title": "Screen", "description": "A framed CRT surface. Scanlines by default, with the aperture grille, bloom, roll bar and grain opt in." }, { "name": "shell", "type": "registry:component", "title": "Shell", "description": "A command transcript and prompt with command history. Bring the commands and their effects." }, { "name": "terminal-window", "type": "registry:component", "title": "Terminal Window", "description": "Window chrome in three conventions: macOS, Windows, or a slim hairline version. Resizable and collapsible." }, { "name": "date-picker", "type": "registry:block", "title": "Date Picker", "description": "A calendar, popover and button composed into an installable single-date picker." }, { "name": "operator-dashboard", "type": "registry:block", "title": "Operator Dashboard", "description": "A full-page operations dashboard with boot status, volume health, rebuild progress and a shell." }, { "name": "terminal", "type": "registry:style", "title": "Terminal Preset", "description": "The shared theme and every registry component in one `shadcn init` preset." }, { "name": "use-copied", "type": "registry:hook", "title": "Use Copied", "description": "Writes a string to the clipboard and holds a `copied` flag for two seconds, so a control can confirm the copy." }, { "name": "use-reduced-motion", "type": "registry:hook", "title": "Use Reduced Motion", "description": "Reads the reduced-motion query and re-reads it when the setting changes, for the effects CSS cannot switch off." }, { "name": "typewriter", "type": "registry:component", "title": "Typewriter", "description": "A line that types itself one character at a time, at its finished width from the first frame." }, { "name": "scramble", "type": "registry:component", "title": "Scramble", "description": "Text resolving out of glyph soup, left to right. On mount, on hover, or when it scrolls into view." }, { "name": "grain", "type": "registry:component", "title": "Grain", "description": "Tube noise over anything. A static filter by default, or a capped canvas loop that pauses off screen." }, { "name": "glitch", "type": "registry:component", "title": "Glitch", "description": "Channel separation over a subtree. Two colour-shifted copies clipped into bands that jump on steps." } ], "component_count": 66, "components_truncated": false, "component_types": { "registry:theme": 1, "registry:ui": 45, "registry:component": 15, "registry:block": 2, "registry:style": 1, "registry:hook": 2 }, "logo": "", "preview_image": "https://afterglow.thebuilder.dk/opengraph-image?b9e089f11262cf31", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [], "featured": false }, { "number": 372, "name": "@agentblog", "category": "AI/chat UI", "tags": [ "ai", "cms", "hooks", "theming" ], "tagline": "A complete blog for Next.js, installed like a component. Built to be read and cited by AI search engines.", "short_description": "", "description": "A complete blog for Next.js, installed like a component. Built to be read and cited by AI search engines.", "framework": "react", "homepage": "https://agentblog.dev", "docs": "https://docs.agentblog.dev/", "github": "https://github.com/goldk3y/agentblog", "components_github": null, "github_default_branch": "main", "github_stars": 10, "last_commit": "2026-09-01T14:50:30Z", "archived": false, "license": "MIT", "open_issues": 10, "registry_template": "https://agentblog.dev/r/{name}.json", "registry_index": "https://agentblog.dev/r/registry.json", "components": [ "blog-core", "blog-schema", "blog-ui", "mdx-components", "blog-routes", "seo-routes", "publish-webhook", "source-mdx", "eeat-pages", "blog-minimal", "blog", "agent-kit", "theme" ], "component_items": [ { "name": "blog-core", "type": "registry:lib", "title": "AgentBlog core", "description": "The library layer every other AgentBlog item builds on: the typed config, the content source facade, shared metadata defaults that survive Next.js's shallow me…" }, { "name": "blog-schema", "type": "registry:lib", "title": "AgentBlog JSON-LD builders", "description": "Typed schema.org @graph builders for BlogPosting, WebPage, BreadcrumbList, Person, Organization, WebSite, ImageObject, and FAQPage. Cross-references are @id st…" }, { "name": "blog-ui", "type": "registry:block", "title": "AgentBlog reading experience", "description": "The components a blog post is made of: post cards, byline with rel=author and machine-readable dates, answer capsule, server-rendered table of contents, author…" }, { "name": "mdx-components", "type": "registry:component", "title": "AgentBlog MDX components", "description": "The component map an AgentBlog post renders through: headings with stable anchors, real tables, server-highlighted code blocks, callouts, statistics with a req…" }, { "name": "blog-routes", "type": "registry:block", "title": "AgentBlog routes", "description": "Fully prerendered /blog index, post, category, tag, and author routes. generateStaticParams returns every slug, there is no client component in the article ren…" }, { "name": "seo-routes", "type": "registry:block", "title": "AgentBlog SEO routes", "description": "sitemap.xml built from real content dates rather than the build clock, an environment-guarded robots.txt that declares your AI access preferences, an RSS 2.0 f…" }, { "name": "publish-webhook", "type": "registry:block", "title": "AgentBlog publish webhook", "description": "A publish endpoint that revalidates the metadata routes as well as the page routes, because sitemap.xml and feed.xml are cached route handlers that a naive web…" }, { "name": "source-mdx", "type": "registry:block", "title": "AgentBlog MDX content source", "description": "Posts as MDX files in your repository, which is the storage option a coding agent can genuinely maintain. Includes the content source adapter, the single MDX c…" }, { "name": "eeat-pages", "type": "registry:block", "title": "AgentBlog trust pages", "description": "An editorial policy page with a real review and corrections process. This is the Trust surface a search quality rater looks for and almost no blog has one, whi…" }, { "name": "blog-minimal", "type": "registry:block", "title": "AgentBlog without the webhook or the agent kit", "description": "The full blog, minus the two items a reader never sees: no /api/publish route and no secrets in .env, and nothing written into .claude/. Everything else matche…" }, { "name": "blog", "type": "registry:block", "title": "AgentBlog", "description": "A complete, production-ready blog for Next.js 16 that AI search engines can actually read. Fully prerendered routes, a typed schema.org graph, sitemap and RSS …" }, { "name": "agent-kit", "type": "registry:block", "title": "AgentBlog agent kit", "description": "Seven skills that take a blog from install to published: finish the setup for your site, research what to write with real search and AI citation data, plan the…" }, { "name": "theme", "type": "registry:base", "title": "AgentBlog reading theme", "description": "A reading-optimised base for a standalone blog site: neutral base colour, a comfortable measure, and generous line height. Intended for a fresh scaffold. `agen…" } ], "component_count": 13, "components_truncated": false, "component_types": { "registry:lib": 2, "registry:block": 9, "registry:component": 1, "registry:base": 1 }, "logo": "", "preview_image": "https://agentblog.dev/opengraph-image.png?opengraph-image.071n31bihpffi.png", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [], "featured": false }, { "number": 373, "name": "@quiz-ui", "category": "Animated components", "tags": [ "animation", "forms", "loaders", "media", "navigation", "overlays" ], "tagline": "Headless, Radix-based components for building quiz funnels — shadcn-style distribution, style entirely via className.", "short_description": "", "description": "Headless, Radix-based components for building quiz funnels — shadcn-style distribution, style entirely via className.", "framework": "react", "homepage": "https://quiz-ui-phi.vercel.app", "docs": "https://quiz-ui-phi.vercel.app/docs", "github": "https://github.com/kalpovskii/quiz-ui", "components_github": "https://github.com/kalpovskii/quiz-ui/tree/main/components", "github_default_branch": "main", "github_stars": 2, "last_commit": "2026-09-06T17:56:13Z", "archived": false, "license": null, "open_issues": 1, "registry_template": "https://quiz-ui-phi.vercel.app/r/{name}.json", "registry_index": "https://quiz-ui-phi.vercel.app/r/registry.json", "components": [ "quiz-cn", "quiz-core", "quiz-root", "quiz-step", "quiz-progress", "quiz-choice", "quiz-image-choice", "quiz-slider", "quiz-rating", "quiz-text-input", "quiz-email-input", "quiz-navigation", "quiz-transition", "quiz-result", "quiz-dialog" ], "component_items": [ { "name": "quiz-cn", "type": "registry:lib", "title": "quiz-ui className helper", "description": "className composition helper (clsx + tailwind-merge) used by every quiz-ui component." }, { "name": "quiz-core", "type": "registry:hook", "title": "Quiz engine", "description": "Headless quiz engine: state machine, branching resolution, and the useQuizEngine/useQuizStep/useQuizAnswers hooks. Installed automatically as a dependency of e…" }, { "name": "quiz-root", "type": "registry:component", "title": "QuizRoot", "description": "Top-level funnel wrapper; owns the engine via QuizProvider." }, { "name": "quiz-step", "type": "registry:component", "title": "QuizStep", "description": "Renders the active step's question heading and answer input." }, { "name": "quiz-progress", "type": "registry:component", "title": "QuizProgress", "description": "Progress bar with a 'Step N of M' label, on Radix Progress." }, { "name": "quiz-choice", "type": "registry:component", "title": "QuizChoice / QuizChoiceGroup", "description": "Single- and multi-select answer cards, on Radix RadioGroup/Checkbox." }, { "name": "quiz-image-choice", "type": "registry:component", "title": "QuizImageChoice", "description": "Visual/image-based single-select answer grid." }, { "name": "quiz-slider", "type": "registry:component", "title": "QuizSlider", "description": "Single-thumb range input for numeric answers." }, { "name": "quiz-rating", "type": "registry:component", "title": "QuizRating", "description": "Star or numeric rating scale, on Radix ToggleGroup." }, { "name": "quiz-text-input", "type": "registry:component", "title": "QuizTextInput", "description": "Free-text answer input." }, { "name": "quiz-email-input", "type": "registry:component", "title": "QuizEmailInput", "description": "Email capture input with basic format validation." }, { "name": "quiz-navigation", "type": "registry:component", "title": "QuizNavigation", "description": "Back/Next controls; Next disables automatically until the step is answered." }, { "name": "quiz-transition", "type": "registry:component", "title": "QuizTransition", "description": "Fade/slide transition wrapper for step changes. Requires a Tailwind keyframe — see the component's JSDoc." }, { "name": "quiz-result", "type": "registry:component", "title": "QuizResult", "description": "Renders its children only once the funnel is complete." }, { "name": "quiz-dialog", "type": "registry:component", "title": "QuizDialog", "description": "Modal-embedded funnel wrapper, on Radix Dialog." } ], "component_count": 15, "components_truncated": false, "component_types": { "registry:lib": 1, "registry:hook": 1, "registry:component": 13 }, "logo": "", "preview_image": null, "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [], "featured": false } ], "featured_count": 99 }