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": 469, "name": "@velora", "category": "Animated components", "tags": [ "3d", "accessibility", "animation", "backgrounds", "blocks", "buttons", "cards", "dashboard", "forms", "icons", "loaders", "maps", "marketing", "media", "navigation", "overlays", "pro-available", "retro", "text-effects", "theming" ], "tagline": "100 animated React components and 31 free section blocks for Tailwind CSS 4 — accessible, reduced-motion safe and MIT licensed.", "short_description": "", "description": "100 animated React components and 31 free section blocks for Tailwind CSS 4 — accessible, reduced-motion safe and MIT licensed.", "framework": "react", "homepage": "https://velora.colorlib.com", "docs": null, "github": "https://github.com/ColorlibHQ/velora-ui", "components_github": "https://github.com/ColorlibHQ/velora-ui/tree/main/src/components", "github_default_branch": "main", "github_stars": 55, "last_commit": "2026-09-30T11:28:18Z", "archived": false, "license": "MIT", "open_issues": 0, "registry_template": "https://velora.colorlib.com/r/{name}.json", "registry_index": "https://velora.colorlib.com/r/registry.json", "components": [ "aurora-background", "background-beams", "background-boxes", "dotted-glow-background", "flickering-grid", "grid-pattern", "lamp", "light-rays", "meteors", "noise-background", "particles", "retro-grid", "ripple", "shooting-stars", "vortex", "wavy-background", "animated-gradient-text", "flip-words", "hyper-text", "morphing-text", "number-ticker", "sparkles-text", "text-highlighter", "text-hover-effect", "text-reveal", "text-shimmer", "typewriter", "word-rotate", "confetti", "magnetic-button", "moving-border", "rainbow-button", "ripple-button", "shimmer-button", "stateful-button", "theme-toggler", "animated-list", "animated-tooltip", "avatar-circles", "bento-grid", "card-hover-effect", "card-stack", "compare-slider", "direction-aware-hover", "dock", "draggable-card", "evervault-card", "expandable-card", "file-tree", "focus-cards", "glare-card", "layout-grid", "marquee", "orbiting-circles", "spotlight-card", "tilt-card", "wobble-card", "animated-sidebar", "animated-tabs", "floating-navbar", "navbar-menu", "resizable-navbar", "sticky-banner", "file-drop", "stepper", "vanish-input", "animated-modal", "loaders", "multi-step-loader", "animated-testimonials", "logo-cloud", "tweet-card", "container-scroll", "hero-parallax", "macbook-scroll", "parallax-grid", "scroll-progress", "scroll-velocity", "sticky-scroll", "timeline", "tracing-beam", "animated-beam", "blur-fade", "border-beam", "glowing-effect", "3d-card", "3d-pin", "3d-marquee", "apple-cards-carousel", "image-slider", "following-pointer", "lens", "pointer-highlight", "smooth-cursor", "globe", "world-map", "browser-mockup", "code-block", "iphone-mockup", "terminal", "hero-aurora", "hero-globe", "hero-screenshot", "hero-split-phone", "hero-waves", "hero-grid-minimal", "features-bento", "features-icon-grid", "features-tabs", "features-split-screenshot", "features-steps", "pricing-three-tiers", "pricing-single-plan", "pricing-comparison", "testimonials-marquee", "testimonials-featured", "testimonials-grid", "cta-vortex", "cta-split-image", "cta-newsletter", "logos-marquee", "logos-grid", "faq-accordion", "faq-two-column", "navbar-floating", "navbar-mega", "footer-columns", "footer-wordmark", "footer-newsletter", "auth-login-split", "auth-signup-card" ], "component_items": [ { "name": "aurora-background", "type": "registry:ui", "title": "Aurora Background", "description": "Velora's signature drifting aurora gradient backdrop." }, { "name": "background-beams", "type": "registry:ui", "title": "Background Beams", "description": "Light beams flowing along curved paths behind content." }, { "name": "background-boxes", "type": "registry:ui", "title": "Background Boxes", "description": "An isometric grid whose cells light up in brand tints under the pointer." }, { "name": "dotted-glow-background", "type": "registry:ui", "title": "Dotted Glow Background", "description": "Canvas dot grid where drifting glows brighten dots and tint them toward the brand." }, { "name": "flickering-grid", "type": "registry:ui", "title": "Flickering Grid", "description": "Grid of squares fading in and out on staggered timers." }, { "name": "grid-pattern", "type": "registry:ui", "title": "Grid & Dot Pattern", "description": "SVG grid and dot backdrops with maskable depth." }, { "name": "lamp", "type": "registry:ui", "title": "Lamp", "description": "A glowing lamp-line header that expands into view." }, { "name": "light-rays", "type": "registry:ui", "title": "Light Rays", "description": "God rays fanning down from the top of a section." }, { "name": "meteors", "type": "registry:ui", "title": "Meteors", "description": "Falling meteor streaks for dark hero and CTA sections." }, { "name": "noise-background", "type": "registry:ui", "title": "Noise Background", "description": "Drifting brand-gradient blobs under a static film-grain overlay; wraps its content." }, { "name": "particles", "type": "registry:ui", "title": "Particles", "description": "Drifting, twinkling particle field on a lightweight canvas." }, { "name": "retro-grid", "type": "registry:ui", "title": "Retro Grid", "description": "Perspective grid scrolling forever toward the horizon." }, { "name": "ripple", "type": "registry:ui", "title": "Ripple", "description": "Concentric rings pulsing outward — calm 'listening' backdrop." }, { "name": "shooting-stars", "type": "registry:ui", "title": "Shooting Stars", "description": "A twinkling star field with brand-tinted streaks shooting across at random." }, { "name": "vortex", "type": "registry:ui", "title": "Vortex", "description": "Brand-tinted particles spiralling into the centre, leaving soft fading trails." }, { "name": "wavy-background", "type": "registry:ui", "title": "Wavy Background", "description": "Blurred, translucent ribbons of brand colour flowing sideways on a canvas." }, { "name": "animated-gradient-text", "type": "registry:ui", "title": "Animated Gradient Text", "description": "Brand gradient sweeping continuously through text." }, { "name": "flip-words", "type": "registry:ui", "title": "Flip Words", "description": "Cycles words with a springy blur-flip transition." }, { "name": "hyper-text", "type": "registry:ui", "title": "Hyper Text", "description": "Scrambles through letters and resolves into the real text." }, { "name": "morphing-text", "type": "registry:ui", "title": "Morphing Text", "description": "Blurs one phrase out as the next resolves in." }, { "name": "number-ticker", "type": "registry:ui", "title": "Number Ticker", "description": "Springs a number up when it enters the viewport." }, { "name": "sparkles-text", "type": "registry:ui", "title": "Sparkles Text", "description": "Twinkling stars orbiting your headline." }, { "name": "text-highlighter", "type": "registry:ui", "title": "Text Highlighter", "description": "Marker-pen sweep that draws in when the phrase scrolls into view." }, { "name": "text-hover-effect", "type": "registry:ui", "title": "Text Hover Effect", "description": "Giant outlined word that draws in, then glows in brand colours under the pointer." }, { "name": "text-reveal", "type": "registry:ui", "title": "Text Reveal", "description": "Word-by-word blur reveal on scroll." }, { "name": "text-shimmer", "type": "registry:ui", "title": "Text Shimmer", "description": "A soft light sweep — great for AI loading states." }, { "name": "typewriter", "type": "registry:ui", "title": "Typewriter", "description": "Types, holds and deletes through a list of words." }, { "name": "word-rotate", "type": "registry:ui", "title": "Word Rotate", "description": "Swaps a single word on a quiet vertical roll." }, { "name": "confetti", "type": "registry:ui", "title": "Confetti", "description": "Dependency-free confetti burst, fired from anywhere." }, { "name": "magnetic-button", "type": "registry:ui", "title": "Magnetic Button", "description": "Leans toward the cursor and springs back on leave." }, { "name": "moving-border", "type": "registry:ui", "title": "Moving Border", "description": "A light laps the button's border via offset-path." }, { "name": "rainbow-button", "type": "registry:ui", "title": "Rainbow Button", "description": "CTA cycling the brand ramp, with a matching glow beneath." }, { "name": "ripple-button", "type": "registry:ui", "title": "Ripple Button", "description": "Expands a ripple from the exact point you pressed." }, { "name": "shimmer-button", "type": "registry:ui", "title": "Shimmer Button", "description": "CTA button with a continuous light sweep." }, { "name": "stateful-button", "type": "registry:ui", "title": "Stateful Button", "description": "Button that morphs through loading, success and error states while a Promise settles." }, { "name": "theme-toggler", "type": "registry:ui", "title": "Theme Toggler", "description": "Wipes the new theme in as a circle using View Transitions." }, { "name": "animated-list", "type": "registry:ui", "title": "Animated List", "description": "Looping feed that springs each item in, newest on top." }, { "name": "animated-tooltip", "type": "registry:ui", "title": "Animated Tooltip", "description": "Avatar row with springy name tooltips on hover." }, { "name": "avatar-circles", "type": "registry:ui", "title": "Avatar Circles", "description": "Stacked initials avatars with a +N badge — zero images." }, { "name": "bento-grid", "type": "registry:ui", "title": "Bento Grid", "description": "Feature bento with hover-reveal CTAs and rich backgrounds." }, { "name": "card-hover-effect", "type": "registry:ui", "title": "Card Hover Effect", "description": "Link-card grid with a highlight that glides to whichever card you hover or focus." }, { "name": "card-stack", "type": "registry:ui", "title": "Card Stack", "description": "Deck that shuffles the top card to the back on a timer." }, { "name": "compare-slider", "type": "registry:ui", "title": "Compare Slider", "description": "Before/after wipe with a keyboard-accessible divider." }, { "name": "direction-aware-hover", "type": "registry:ui", "title": "Direction Aware Hover", "description": "Overlay enters from the edge the cursor actually crossed." }, { "name": "dock", "type": "registry:ui", "title": "Dock", "description": "macOS-style dock with cursor magnification." }, { "name": "draggable-card", "type": "registry:ui", "title": "Draggable Card", "description": "Scattered photo cards you can fling around with inertia, tilt and bounds." }, { "name": "evervault-card", "type": "registry:ui", "title": "Evervault Card", "description": "Card that reveals shuffling brand-tinted characters through a mask following the pointer." }, { "name": "expandable-card", "type": "registry:ui", "title": "Expandable Card", "description": "Expands into a centred panel with shared-layout transitions." }, { "name": "file-tree", "type": "registry:ui", "title": "File Tree", "description": "Collapsible tree for documenting project structure." }, { "name": "focus-cards", "type": "registry:ui", "title": "Focus Cards", "description": "Image grid where the hovered card stays sharp while the others blur and step back." }, { "name": "glare-card", "type": "registry:ui", "title": "Glare Card", "description": "Sheet of light tracking the cursor, like a foil trading card." }, { "name": "layout-grid", "type": "registry:ui", "title": "Layout Grid", "description": "Bento grid of image tiles that expand in place to reveal rich content." }, { "name": "marquee", "type": "registry:ui", "title": "Marquee", "description": "Seamless scrolling loop — horizontal, vertical, hover-pause." }, { "name": "orbiting-circles", "type": "registry:ui", "title": "Orbiting Circles", "description": "Items evenly distributed on rotating orbital rings." }, { "name": "spotlight-card", "type": "registry:ui", "title": "Spotlight Card", "description": "A radial glow that follows the cursor across the card." }, { "name": "tilt-card", "type": "registry:ui", "title": "Tilt Card", "description": "3D perspective tilt that tracks the cursor." }, { "name": "wobble-card", "type": "registry:ui", "title": "Wobble Card", "description": "Colored card that drifts toward the pointer, with parallax content and grain." }, { "name": "animated-sidebar", "type": "registry:ui", "title": "Animated Sidebar", "description": "Icon rail that expands on hover or focus and turns into a drawer on narrow screens." }, { "name": "animated-tabs", "type": "registry:ui", "title": "Animated Tabs", "description": "Tabs with a gliding pill and panels stacked like cards that peek behind." }, { "name": "floating-navbar", "type": "registry:ui", "title": "Floating Navbar", "description": "Hides on scroll down, returns the moment you scroll up." }, { "name": "navbar-menu", "type": "registry:ui", "title": "Navbar Menu", "description": "Hover-driven menu whose pill and panel morph between items." }, { "name": "resizable-navbar", "type": "registry:ui", "title": "Resizable Navbar", "description": "Full-width navbar that shrinks into a floating, blurred pill once you scroll." }, { "name": "sticky-banner", "type": "registry:ui", "title": "Sticky Banner", "description": "Dismissible announcement bar pinned above the header." }, { "name": "file-drop", "type": "registry:ui", "title": "File Drop", "description": "Upload zone that lifts and glows while a file is over it." }, { "name": "stepper", "type": "registry:ui", "title": "Stepper", "description": "Progress indicator for multi-step forms and checkouts." }, { "name": "vanish-input", "type": "registry:ui", "title": "Vanish Input", "description": "Search field whose placeholder cycles while empty." }, { "name": "animated-modal", "type": "registry:ui", "title": "Animated Modal", "description": "Native dialog whose panel springs in with a tilt over a blurred backdrop." }, { "name": "loaders", "type": "registry:ui", "title": "Loaders", "description": "Five tiny CSS loading indicators — dots, pulse, orbit, bars and spinner." }, { "name": "multi-step-loader", "type": "registry:ui", "title": "Multi Step Loader", "description": "Full-screen overlay that ticks through a list of steps, keeping the active one centred." }, { "name": "animated-testimonials", "type": "registry:ui", "title": "Animated Testimonials", "description": "Crossfades portraits behind a rotating quote." }, { "name": "logo-cloud", "type": "registry:ui", "title": "Logo Cloud", "description": "Customer logos muted until hovered, so they read as texture." }, { "name": "tweet-card", "type": "registry:ui", "title": "Tweet Card", "description": "Static social-proof card — props, not an API call." }, { "name": "container-scroll", "type": "registry:ui", "title": "Container Scroll", "description": "Screenshot panel that rotates flat as it scrolls into view." }, { "name": "hero-parallax", "type": "registry:ui", "title": "Hero Parallax", "description": "Hero copy over three card rows that slide apart as a tilted block flattens." }, { "name": "macbook-scroll", "type": "registry:ui", "title": "Macbook Scroll", "description": "A CSS-drawn laptop pins in place and opens its lid as the screenshot scales up." }, { "name": "parallax-grid", "type": "registry:ui", "title": "Parallax Grid", "description": "Gallery columns drifting at different rates for depth." }, { "name": "scroll-progress", "type": "registry:ui", "title": "Scroll Progress", "description": "Gradient page-progress bar pinned to the top." }, { "name": "scroll-velocity", "type": "registry:ui", "title": "Scroll Velocity", "description": "Marquee whose speed and direction follow your scrolling." }, { "name": "sticky-scroll", "type": "registry:ui", "title": "Sticky Scroll", "description": "Copy scrolls past a pinned panel that swaps per section." }, { "name": "timeline", "type": "registry:ui", "title": "Timeline", "description": "Vertical timeline with sticky labels and a gradient beam that fills as you scroll." }, { "name": "tracing-beam", "type": "registry:ui", "title": "Tracing Beam", "description": "Gradient line that draws itself down long-form content." }, { "name": "animated-beam", "type": "registry:ui", "title": "Animated Beam", "description": "Draws an animated connection between any two elements." }, { "name": "blur-fade", "type": "registry:ui", "title": "Blur Fade", "description": "The workhorse entrance — blur, fade and drift into view." }, { "name": "border-beam", "type": "registry:ui", "title": "Border Beam", "description": "A beam of light traveling around any border." }, { "name": "glowing-effect", "type": "registry:ui", "title": "Glowing Effect", "description": "Border glow that follows the pointer around a card's edge as it comes near." }, { "name": "3d-card", "type": "registry:ui", "title": "3D Card", "description": "Perspective card that turns toward the pointer while its layers lift to different depths." }, { "name": "3d-pin", "type": "registry:ui", "title": "3D Pin", "description": "Card that tilts back as a glowing pin rises with a label chip and rippling rings." }, { "name": "3d-marquee", "type": "registry:ui", "title": "3D Marquee", "description": "A tilted 3D grid of images whose columns scroll up and down in an endless loop." }, { "name": "apple-cards-carousel", "type": "registry:ui", "title": "Apple Cards Carousel", "description": "Snap-scrolling row of tall image cards that morph into a full modal story." }, { "name": "image-slider", "type": "registry:ui", "title": "Image Slider", "description": "Full-bleed image slider with crossfade-zoom, autoplay, dots, arrows and swipe." }, { "name": "following-pointer", "type": "registry:ui", "title": "Following Pointer", "description": "Swaps the cursor for an arrow and a name tag that trail the pointer inside a region." }, { "name": "lens", "type": "registry:ui", "title": "Lens", "description": "Circular magnifier that follows the pointer or arrow keys to zoom into an image." }, { "name": "pointer-highlight", "type": "registry:ui", "title": "Pointer Highlight", "description": "Draws an outline around a phrase on scroll, then glides a pointer icon to its corner." }, { "name": "smooth-cursor", "type": "registry:ui", "title": "Smooth Cursor", "description": "Dot-and-ring custom cursor; the ring trails on a spring and grows over links and buttons." }, { "name": "globe", "type": "registry:ui", "title": "Globe", "description": "Dotted canvas globe with markers, great-circle arcs, drag and keyboard rotation." }, { "name": "world-map", "type": "registry:ui", "title": "World Map", "description": "Dotted SVG world map with markers, pulsing hubs and animated connection arcs." }, { "name": "browser-mockup", "type": "registry:ui", "title": "Browser Mockup", "description": "Browser window frame for product screenshots." }, { "name": "code-block", "type": "registry:ui", "title": "Code Block", "description": "Code panel with tabs, line numbers, highlighted lines and a copy button." }, { "name": "iphone-mockup", "type": "registry:ui", "title": "iPhone Mockup", "description": "iPhone frame with dynamic island — pure CSS." }, { "name": "terminal", "type": "registry:ui", "title": "Terminal", "description": "A terminal window that types its lines in view." }, { "name": "hero-aurora", "type": "registry:block", "title": "Aurora hero", "description": "Centered hero with a drifting aurora, dotted backdrop, announcement pill and staggered copy." }, { "name": "hero-globe", "type": "registry:block", "title": "Globe split hero", "description": "Split hero with copy, CTAs and live stats beside an interactive dotted globe with arcs." }, { "name": "hero-screenshot", "type": "registry:block", "title": "Product screenshot hero", "description": "Centered headline above a dashboard in a browser frame with a border beam and a logo row." }, { "name": "hero-split-phone", "type": "registry:block", "title": "Phone split hero", "description": "App launch hero with an email capture on the left and an app screen in an iPhone frame." }, { "name": "hero-waves", "type": "registry:block", "title": "Wavy hero", "description": "Bold centered hero over flowing waves, with a rotating headline word and avatar social proof." }, { "name": "hero-grid-minimal", "type": "registry:block", "title": "Developer tool hero", "description": "Minimal hero on a retro grid with a typed headline accent, an install terminal and two CTAs." }, { "name": "features-bento", "type": "registry:block", "title": "Bento feature grid", "description": "Five-card bento grid with live visuals: integration beams, orbiting icons, a chart, a tag marquee and a globe." }, { "name": "features-icon-grid", "type": "registry:block", "title": "Icon feature grid", "description": "Heading and six icon feature cards in a three-column grid, each border lit by a cursor-following glow." }, { "name": "features-tabs", "type": "registry:block", "title": "Tabbed product tour", "description": "Product tour with animated tabs; each tab pairs short copy and a checklist with a Tailwind-built app mock." }, { "name": "features-split-screenshot", "type": "registry:block", "title": "Alternating screenshot rows", "description": "Two alternating rows of copy with a checklist beside a browser-framed dashboard mock, sides swapped." }, { "name": "features-steps", "type": "registry:block", "title": "Numbered steps", "description": "How-it-works section with four numbered steps on a gradient connector line, each with a small UI visual." }, { "name": "pricing-three-tiers", "type": "registry:block", "title": "Three-tier pricing", "description": "Three plan cards with a monthly/yearly switch, a savings badge and a highlighted middle plan." }, { "name": "pricing-single-plan", "type": "registry:block", "title": "Single plan pricing", "description": "One all-inclusive plan card beside a benefit list and short reassurance answers." }, { "name": "pricing-comparison", "type": "registry:block", "title": "Pricing comparison table", "description": "Grouped feature comparison table with a sticky plan header, and per-plan tabs on mobile." }, { "name": "testimonials-marquee", "type": "registry:block", "title": "Testimonial marquee", "description": "Two rows of review cards scrolling in opposite directions, with faded edges and pause on hover or focus." }, { "name": "testimonials-featured", "type": "registry:block", "title": "Featured testimonial", "description": "One rotating quote with crossfading portraits, framed by a beam card over a row of counting stats." }, { "name": "testimonials-grid", "type": "registry:block", "title": "Testimonial grid", "description": "Masonry wall of social posts and quote cards, led by a wide case-study quote with a headline metric." }, { "name": "cta-vortex", "type": "registry:block", "title": "Vortex CTA band", "description": "Dark rounded call-to-action band over a brand-tinted particle vortex, with two actions and fine print." }, { "name": "cta-split-image", "type": "registry:block", "title": "Split CTA with product visual", "description": "Two-column CTA card with a benefit list and a dashboard mock-up, traced by an animated border beam." }, { "name": "cta-newsletter", "type": "registry:block", "title": "Newsletter sign-up", "description": "Newsletter card over a glowing dot grid with a labelled email field, subscriber avatars and a privacy note." }, { "name": "logos-marquee", "type": "registry:block", "title": "Logo marquee", "description": "A “Trusted by” line over a scrolling strip of grayscale logos that take their colour on hover." }, { "name": "logos-grid", "type": "registry:block", "title": "Logo grid", "description": "Bordered grid of customer logos with a cursor spotlight per cell, beside a heading and stories link." }, { "name": "faq-accordion", "type": "registry:block", "title": "Centered FAQ accordion", "description": "Centered heading over an accordion of eight questions, closed by a contact row." }, { "name": "faq-two-column", "type": "registry:block", "title": "Two-column FAQ", "description": "Sticky intro and contact card on the left, an accordion of questions on the right." }, { "name": "navbar-floating", "type": "registry:block", "title": "Floating pill navbar", "description": "Full-width navbar that shrinks into a blurred floating pill on scroll, with a CTA and mobile menu." }, { "name": "navbar-mega", "type": "registry:block", "title": "Mega menu navbar", "description": "Top bar with a keyboard-accessible Product mega menu, search, sign-in and a slide-over mobile menu." }, { "name": "footer-columns", "type": "registry:block", "title": "Link columns footer", "description": "Footer with logo, tagline and social links, four link columns and a copyright bar with legal links." }, { "name": "footer-wordmark", "type": "registry:block", "title": "Giant wordmark footer", "description": "Minimal footer that ends in an oversized outlined wordmark lighting up in brand colours under the pointer." }, { "name": "footer-newsletter", "type": "registry:block", "title": "Newsletter footer", "description": "Footer with a newsletter sign-up row, link columns and a live “All systems normal” status badge." }, { "name": "auth-login-split", "type": "registry:block", "title": "Split login page", "description": "Login form with password reveal, remember-me and social sign-in beside an aurora testimonial panel." }, { "name": "auth-signup-card", "type": "registry:block", "title": "Sign-up card", "description": "Centered sign-up card over a grid and light beams, with live password rules, terms and social sign-up." } ], "component_count": 131, "components_truncated": false, "component_types": { "registry:ui": 100, "registry:block": 31 }, "logo": "", "preview_image": "https://velora.colorlib.com/opengraph-image?8a498a5626169cbd", "pro": { "has_pro": true, "pro_url": null, "pricing_url": "https://velora.colorlib.com/pricing" }, "enrichment_errors": [ "docs_unresolved" ], "featured": false }, { "number": 470, "name": "@viberdy", "category": "Animated components", "tags": [ "3d", "ai", "animation", "audio", "auth", "backgrounds", "blocks", "buttons", "cards", "developer-tools", "forms", "glassmorphism", "icons", "loaders", "marketing", "media", "navigation", "overlays", "pro-available", "tables", "text-effects", "theming" ], "tagline": "Animated React and Tailwind components in 14 design styles, from glassmorphism and aurora to kinetic type and dither, each with an AI prompt. 161 are free with source at github.com/viberdy-dev/ui; Pro items need an API key.", "short_description": "", "description": "Animated React and Tailwind components in 14 design styles, from glassmorphism and aurora to kinetic type and dither, each with an AI prompt. 161 are free with source at github.com/viberdy-dev/ui; Pro items need an API key.", "framework": "react", "homepage": "https://viberdy.dev", "docs": "https://viberdy.dev/docs/registry", "github": "https://github.com/viberdy-dev/ui", "components_github": "https://github.com/viberdy-dev/ui/tree/main/components", "github_default_branch": "main", "github_stars": 0, "last_commit": "2026-10-24T21:00:23Z", "archived": false, "license": null, "open_issues": 0, "registry_template": "https://viberdy.dev/r/{name}.json", "registry_index": "https://viberdy.dev/r/registry.json", "components": [ "magnetic-button", "stacked-type-hero", "tilt-card", "marquee-ticker", "spotlight-grid", "grain-overlay", "scramble-text", "swipe-card-stack", "odometer-counter", "confetti-button", "toast-stack", "skeleton-shimmer", "progress-ring", "range-slider", "flip-card", "typewriter-text", "sticky-scroll-stack", "magnetic-nav-dock", "animated-checkbox", "image-comparison-slider", "ripple-click-effect", "floating-label-input", "animated-tabs-indicator", "gradient-border-beam", "morphing-hamburger-icon", "glitch-text-hover", "liquid-blob-cursor", "expandable-search-bar", "card-carousel-3d", "draggable-sortable-list", "star-rating-interactive", "rotating-word-swap", "draggable-bottom-sheet", "pricing-toggle-switch", "command-palette", "file-upload-dropzone", "segmented-control", "vertical-timeline-reveal", "copy-code-snippet", "animated-stat-grid", "audio-wave-visualizer", "kanban-drag-columns", "testimonial-carousel", "hide-on-scroll-navbar", "theme-toggle-sun-moon-morph", "scroll-linked-image-mask-reveal", "searchable-faq-accordion", "masonry-image-hover-grid", "share-button-expand", "page-loading-bar", "badge-ping-counter", "cursor-crosshair-readout", "cursor-label-follower", "cursor-lens-magnifier", "cursor-snap-target", "hover-slice-shear", "hover-link-peek", "hover-stroke-draw-button", "hover-expand-panels", "beam-sweep-backdrop", "pointer-warp-dot-field", "crt-scanline-overlay", "weight-wave-text", "extruded-type-tilt", "morphing-island-notch", "pointer-parallax-scene", "flip-grid-reorder", "scroll-card-deal", "velocity-marquee-rail", "path-follow-scroll", "drag-inertia-carousel", "fuzzy-match-input", "cursor-mask-reveal", "ascii-halftone-canvas", "scrub-timeline-player", "otp-code-input", "concrete-wall-texture", "signal-field", "marker-highlight-text", "window-light-drift", "swatch-fan-deck", "hours-poster-section", "headline-switch-hero", "liquid-glass-button", "liquid-glass-switch", "glass-etch-text", "glass-focus-field", "glass-morph-popover", "glass-tint-footer", "hairline-tile-button", "spec-numeral-tile", "bento-command-nav", "capture-loop-card", "bento-footer-grid", "widget-reorder-input", "pushed-shadow-button", "offset-shadow-card", "weight-slam-text", "black-border-form", "punch-card-field", "warning-tape-footer", "orbit-light-button", "pointer-lit-card", "slit-light-heading", "deploy-log-input", "horizon-light-footer", "beam-connector", "chrome-pill-button", "holo-ticket-card", "pour-fill-heading", "chrome-rim-input", "mercury-pour-nav", "chrome-pour-reveal", "soft-glow-button", "halo-treatment-card", "veil-resolve-heading", "aura-booking-picker", "dusk-set-footer", "breath-pacer-ring", "aurora-glow-button", "aurora-rim-card", "aurora-drift-text", "aurora-flow-nav", "aurora-ribbon-cursor", "aurora-glow-input", "axis-press-button", "axis-session-card", "axis-scrub-heading", "axis-flow-nav", "glyph-axis-stagger", "name-badge-input", "keycap-button", "extruded-spec-card", "anamorphic-heading", "curved-rail-nav", "assemble-reveal", "detent-dial-input", "bayer-fill-button", "dither-develop-card", "ascii-resolve-heading", "ascii-density-nav", "bayer-dissolve", "dither-drop-input", "weight-press-button", "light-lift-card", "sundial-shadow-heading", "hairline-morph-nav", "scrub-mask-reveal", "wake-time-wheel", "squash-press-button", "wobble-drop-card", "squish-letter-heading", "taffy-pill-nav", "squish-flip", "gummy-type-input", "offset-target-button", "z-swap-plate-card", "edge-invert-headline", "index-step-nav", "rule-handoff-flip", "hanging-label-input", "aura-dial", "density-ledger", "bell-breath-loader", "bead-button", "holo-site-footer", "asterisk-type-headline", "holo-pill-nav", "asterisk-submit-input", "ultra-pill-nav", "ultra-site-footer", "levitating-link-nav", "contrary-shadow-section", "levitating-field-input", "flight-manifest", "hold-to-ignite-button", "heat-haze-heading", "hi-vis-nav", "ardent-footer", "hazard-tape-marquee", "hot-fire-request-form" ], "component_items": [ { "name": "magnetic-button", "type": "registry:component", "title": "Magnetic Button", "description": "A button that is pulled toward the pointer across a field around it: the whole body drifts, the label trails on a softer spring, a specular light and edge glin…" }, { "name": "stacked-type-hero", "type": "registry:component", "title": "Stacked Type Hero", "description": "Oversized, tightly-stacked headline words that reveal in on mount — big type as sculpture." }, { "name": "tilt-card", "type": "registry:component", "title": "Tilt Card", "description": "A 3D card that tilts toward the pointer on hand-written springs, with a picture, badge, title and chips floating at their own depths, a lit edge and glare that…" }, { "name": "marquee-ticker", "type": "registry:component", "title": "Marquee Ticker", "description": "An endless strip of words or logos you can grab: it glides to a stop under the pointer, drags with momentum, leans into fast movement and fades out at both edg…" }, { "name": "spotlight-grid", "type": "registry:component", "title": "Spotlight Card Grid", "description": "A bento of dark cards lit by one shared light: it crosses the gaps, glows on card borders, brightens each card’s illustration and drifts on its own until you t…" }, { "name": "grain-overlay", "type": "registry:component", "title": "Grain Overlay", "description": "A subtle animated film-grain texture layered over any section via canvas." }, { "name": "scramble-text", "type": "registry:component", "title": "Scramble Text", "description": "A decoding headline: every character resolves left to right out of random glyphs inside a fixed cell, so the line never changes width. Runs on hover, focus, ta…" }, { "name": "swipe-card-stack", "type": "registry:component", "title": "Swipe Card Stack", "description": "A Tinder-style deck on hand-written springs: the top card tilts with your drag, LIKE and NOPE stamps fade in with a wash of colour, the cards behind rise as yo…" }, { "name": "odometer-counter", "type": "registry:component", "title": "Odometer Counter", "description": "A mechanical odometer: every digit is a drum that spins, blurs and glows as it rolls, then settles with a detent bounce. Counts up once in view, rolls up or do…" }, { "name": "confetti-button", "type": "registry:component", "title": "Confetti Burst Button", "description": "A red pill button with a pointer-following sheen that squashes on press and throws a real confetti burst from your click point, then morphs its label into a dr…" }, { "name": "toast-stack", "type": "registry:component", "title": "Toast Notification Stack", "description": "A Sonner-style toast system with no dependencies: toasts fold into a deck, fan out on hover, focus or tap, and pause their progress lines while open. Drag to t…" }, { "name": "skeleton-shimmer", "type": "registry:component", "title": "Skeleton Shimmer Loader", "description": "Loading-state placeholder blocks with a light sweep animating across them." }, { "name": "progress-ring", "type": "registry:component", "title": "Circular Progress Ring", "description": "A progress ring with a gradient stroke and a glowing head, tick marks that light up behind the arc, a centre value whose digits roll, and an indeterminate mode…" }, { "name": "range-slider", "type": "registry:component", "title": "Draggable Range Slider", "description": "A refined range slider, single or dual thumb: a value bubble that follows the handle and swells while dragging, tick marks with labels, a histogram behind the …" }, { "name": "flip-card", "type": "registry:component", "title": "3D Flip Card", "description": "A card with real thickness that turns on a spring: a shaded rim, a glare that sweeps the face turning toward you, a floor shadow that narrows mid-turn, and a l…" }, { "name": "typewriter-text", "type": "registry:component", "title": "Typewriter Text", "description": "A typewriter with a human hand: jittered keystrokes, beats at punctuation, a caret that rests only when it waits, accelerating backspace, a reserved width so n…" }, { "name": "sticky-scroll-stack", "type": "registry:component", "title": "Sticky Scroll Stack", "description": "Cards that pin and pile up as you scroll: each one shrinks and dims as the next slides over it, with a progress index on the side that jumps between cards. Han…" }, { "name": "magnetic-nav-dock", "type": "registry:component", "title": "Magnetic Nav Dock", "description": "A macOS-style dock where tiles swell on a smooth falloff around the pointer and push their neighbours aside. Crafted SVG app tiles, a label that glides between…" }, { "name": "animated-checkbox", "type": "registry:component", "title": "Animated Checkbox", "description": "A real checkbox with a check that draws itself in: the fill opens from the centre, the box pops, a ring and six sparks leave it, and a checked label can strike…" }, { "name": "image-comparison-slider", "type": "registry:component", "title": "Image Comparison Slider", "description": "A before/after reveal with a glass grip on a spring-driven divider: press anywhere to glide it there, drag without a jump, use the arrow keys, or turn on hover…" }, { "name": "ripple-click-effect", "type": "registry:component", "title": "Ripple Click Effect", "description": "A Material-style ripple from the exact press point that grows to the farthest corner, holds while you hold and fades on release. A button, plus a wrapper for a…" }, { "name": "floating-label-input", "type": "registry:component", "title": "Floating Label Input", "description": "A text field whose label springs from placeholder to caption, with a focus ring and an underline that grows from where you clicked, a pointer-lit hover, helper…" }, { "name": "animated-tabs-indicator", "type": "registry:component", "title": "Animated Tabs Indicator", "description": "Tabs whose indicator stretches between tabs: the leading edge leaves first and the trailing edge follows on a softer spring. Labels flip colour exactly where t…" }, { "name": "gradient-border-beam", "type": "registry:component", "title": "Animated Gradient Border Beam", "description": "A comet of light that circles a card's border at an even pace: a faded tail behind a white-hot head, glow that bleeds onto the surface and past the edge, an op…" }, { "name": "morphing-hamburger-icon", "type": "registry:component", "title": "Morphing Hamburger Icon", "description": "A menu button whose three bars morph on springs into a close X, a back arrow or a minus, with a lit pill, press squash and a live panel in the demo. Inherits c…" }, { "name": "glitch-text-hover", "type": "registry:component", "title": "Glitch Text Hover", "description": "A restrained RGB-split glitch: the word rests with a faint chromatic fringe, throws a micro-glitch every few seconds, and on hover, focus or tap shears into of…" }, { "name": "liquid-blob-cursor", "type": "registry:component", "title": "Liquid Blob Cursor Follow", "description": "A soft blurred blob that trails the cursor with spring-smoothed lag." }, { "name": "expandable-search-bar", "type": "registry:component", "title": "Expandable Search Bar", "description": "A search icon that springs open into a full field with a suggestions dropdown: recent searches, live filtering, arrow-key navigation, / and Cmd+K to open, Esca…" }, { "name": "card-carousel-3d", "type": "registry:component", "title": "3D Card Carousel", "description": "A coverflow carousel: cards on an arc, the front one facing you while its neighbours turn in, dim and blur with depth. Drag or swipe with momentum that snaps t…" }, { "name": "draggable-sortable-list", "type": "registry:component", "title": "Draggable Sortable List", "description": "A dependency-free sortable list: lift a row by its grip and the others glide out of the way on a spring, then it settles into its slot. Pointer and touch drag,…" }, { "name": "star-rating-interactive", "type": "registry:component", "title": "Interactive Star Rating", "description": "A star rating input with half-step precision: drag or tap across the stars, hover to preview, and a chosen rating pops in a wave with a burst of sparks and a c…" }, { "name": "rotating-word-swap", "type": "registry:component", "title": "Rotating Word Swap Headline", "description": "A headline whose key word swaps through a list: letters roll up and out with a blur, the next word rolls in letter by letter, the line closes smoothly around e…" }, { "name": "draggable-bottom-sheet", "type": "registry:component", "title": "Draggable Bottom Sheet Modal", "description": "An iOS-style bottom sheet with peek, half and full detents: velocity-aware snapping, rubber-banding past the ends, a scrim that dims with progress, content tha…" }, { "name": "pricing-toggle-switch", "type": "registry:component", "title": "Pricing Toggle Switch", "description": "A monthly/yearly billing switch with a springy, draggable thumb and a savings badge. Prices roll digit by digit like an odometer, and an optional plans prop tu…" }, { "name": "command-palette", "type": "registry:component", "title": "Command Palette", "description": "A single-level Cmd+K palette: a glass panel with fuzzy search and lit match letters, grouped results with a Recent section, a spring highlight that slides betw…" }, { "name": "file-upload-dropzone", "type": "registry:component", "title": "File Upload Dropzone", "description": "A real drag-and-drop file zone: the border marches and glows while files are over it, rows show thumbnails, progress from your own upload callback, retry and r…" }, { "name": "segmented-control", "type": "registry:component", "title": "Segmented Control", "description": "An iOS-style segmented control with a draggable thumb: grab it and drag across segments, it stretches with its own velocity, grows under your finger and settle…" }, { "name": "vertical-timeline-reveal", "type": "registry:component", "title": "Vertical Timeline Reveal", "description": "A scroll-triggered vertical timeline whose dots and cards reveal in sequence." }, { "name": "copy-code-snippet", "type": "registry:component", "title": "Copy Code Snippet", "description": "A dark code block for install commands: npm, pnpm, yarn and bun tabs, syntax-tinted tokens, line highlights, a copy button that really writes to the clipboard …" }, { "name": "animated-stat-grid", "type": "registry:component", "title": "Animated Stat Grid", "description": "A row of stat counters that count up together the moment they scroll into view." }, { "name": "audio-wave-visualizer", "type": "registry:component", "title": "Audio Wave Visualizer", "description": "A bouncing equalizer bar animation for audio/podcast/music UI." }, { "name": "kanban-drag-columns", "type": "registry:component", "title": "Kanban Drag Columns", "description": "A dependency-free kanban board: lift a card and a lifted copy follows your pointer while the columns light up as drop targets and the cards glide out of the wa…" }, { "name": "testimonial-carousel", "type": "registry:component", "title": "Testimonial Carousel", "description": "A testimonial carousel with a soft word-by-word quote reveal, a directional slide, an avatar picker, company wordmarks and score chips, and an autoplay hairlin…" }, { "name": "hide-on-scroll-navbar", "type": "registry:component", "title": "Hide On Scroll Navbar", "description": "A header that slips away as you scroll down and springs back the moment you scroll up. Clear at the top, frosted glass once you move, with a reading-progress l…" }, { "name": "theme-toggle-sun-moon-morph", "type": "registry:component", "title": "Theme Toggle Sun Moon Morph", "description": "A dark-mode switch whose thumb morphs from a sun into a crescent moon through a real SVG mask, while the track shifts from drifting clouds to twinkling stars. …" }, { "name": "scroll-linked-image-mask-reveal", "type": "registry:component", "title": "Scroll-Linked Image Mask Reveal", "description": "An image whose circular clip-path mask grows and shrinks in lockstep with scroll." }, { "name": "searchable-faq-accordion", "type": "registry:component", "title": "Searchable FAQ Accordion", "description": "An FAQ with live search that highlights matches, topic chips with a sliding indicator and counts, height-animated answers, a plus-to-minus icon morph, deep-lin…" }, { "name": "masonry-image-hover-grid", "type": "registry:component", "title": "Masonry Image Hover Grid", "description": "A CSS-columns masonry gallery with a scale + caption reveal on hover." }, { "name": "share-button-expand", "type": "registry:component", "title": "Share Button Expand", "description": "A share button that springs open into a row of targets: X, LinkedIn, email and a copy-link that only confirms when the clipboard write worked. A light follows …" }, { "name": "page-loading-bar", "type": "registry:component", "title": "Page Loading Bar", "description": "An nprogress-style top-of-page bar that eases toward completion, never stalling." }, { "name": "badge-ping-counter", "type": "registry:component", "title": "Badge Ping Counter", "description": "A notification badge that earns its number: the count rolls like a counter wheel, the pill pops, two rings ping outward and the bell swings on every increment.…" }, { "name": "cursor-crosshair-readout", "type": "registry:component", "title": "Crosshair Cursor Readout", "description": "A drafting-tool crosshair for any surface: hairline guides with live X/Y tags on ticked rulers, snapping to element corners, edges and centres with their dimen…" }, { "name": "cursor-label-follower", "type": "registry:component", "title": "Cursor Label Follower", "description": "A pill that springs after the pointer and morphs its text, glyph and width per target (View, Drag, Play), with press-to-reveal on touch and focus labels for ke…" }, { "name": "cursor-lens-magnifier", "type": "registry:component", "title": "Cursor Lens Magnifier", "description": "A glass lens that springs after the pointer and magnifies a live copy of the content beneath it, with a refraction rim, chromatic edge and soft shadow. Press a…" }, { "name": "cursor-snap-target", "type": "registry:component", "title": "Snapping Cursor", "description": "A cursor dot that latches onto interactive elements and takes their exact shape and corner radius, leans toward the pointer while locked, follows keyboard focu…" }, { "name": "hover-slice-shear", "type": "registry:component", "title": "Slice Shear Hover", "description": "Display type cut into horizontal bands that fan apart under the pointer." }, { "name": "hover-link-peek", "type": "registry:component", "title": "Link Peek Preview", "description": "An index list of links that floats a mini rendering of each destination beside the pointer: spring-lagged, leaning with sweep speed, shown on keyboard focus an…" }, { "name": "hover-stroke-draw-button", "type": "registry:component", "title": "Stroke Draw Button", "description": "A button whose outline draws itself around the shape: two strokes leave the top centre with a bright comet head and meet at the bottom, a soft light follows th…" }, { "name": "hover-expand-panels", "type": "registry:component", "title": "Expanding Panel Row", "description": "A row of art panels where the hovered, focused or tapped one springs open while its neighbours compress. Each title runs up the panel edge and swings to horizo…" }, { "name": "beam-sweep-backdrop", "type": "registry:component", "title": "Beam Sweep Backdrop", "description": "Slow conic light beams rotating behind content, CSS-only and compositor-friendly." }, { "name": "pointer-warp-dot-field", "type": "registry:component", "title": "Pointer Warp Dot Field", "description": "A canvas dot grid that bulges and brightens away from the cursor." }, { "name": "crt-scanline-overlay", "type": "registry:component", "title": "CRT Scanline Overlay", "description": "Scanlines, aperture grille, rolling refresh and vignette over any content." }, { "name": "weight-wave-text", "type": "registry:component", "title": "Weight Wave Text", "description": "Per-character variable font weight that swells around the pointer and drifts when idle." }, { "name": "extruded-type-tilt", "type": "registry:component", "title": "Extruded Type Tilt", "description": "Display type with a solid extrusion that swings around as the pointer moves." }, { "name": "morphing-island-notch", "type": "registry:component", "title": "Morphing Island Notch", "description": "A Dynamic-Island-style status pill with no dependencies: it measures its own content, springs to size, and fuses a stiff and a soft body through a goo filter s…" }, { "name": "pointer-parallax-scene", "type": "registry:component", "title": "Pointer Parallax Scene", "description": "A depth system where layers separate under the pointer from one shared motion source." }, { "name": "flip-grid-reorder", "type": "registry:component", "title": "FLIP Grid Reorder", "description": "A filterable, shuffleable grid of rich tiles that travel to their new positions on a hand-sampled spring: survivors glide, leavers fade out of the flow, newcom…" }, { "name": "scroll-card-deal", "type": "registry:component", "title": "Scroll Card Deal", "description": "A pile of cards that fans out symmetrically as its section crosses the viewport." }, { "name": "velocity-marquee-rail", "type": "registry:component", "title": "Velocity Marquee Rail", "description": "A marquee that accelerates with scroll speed and flips direction when you scroll back." }, { "name": "path-follow-scroll", "type": "registry:component", "title": "Path Follow Scroll", "description": "A marker that rides an SVG curve on scroll, banking through the bends." }, { "name": "drag-inertia-carousel", "type": "registry:component", "title": "Drag Inertia Carousel", "description": "A rail you can throw — it projects the momentum and settles on the nearest slide." }, { "name": "fuzzy-match-input", "type": "registry:component", "title": "Fuzzy Match Input", "description": "A fuzzy search field that scores by run length and word starts and lights up the exact letters that matched. Results slide to their new rank as you type, a spr…" }, { "name": "cursor-mask-reveal", "type": "registry:component", "title": "Cursor Mask Reveal", "description": "A feathered hole that trails the pointer through one layer to expose a different one beneath, like a finished UI over its construction drawing. Drifts at rest,…" }, { "name": "ascii-halftone-canvas", "type": "registry:component", "title": "ASCII Halftone Canvas", "description": "Turns any canvas drawing into live ASCII art, sampled one pixel per glyph." }, { "name": "scrub-timeline-player", "type": "registry:component", "title": "Scrub Timeline Player", "description": "A media scrubber with buffered range, hover timestamp and pointer-capture dragging." }, { "name": "otp-code-input", "type": "registry:component", "title": "OTP Code Input", "description": "A one-time-code field whose cells survive SMS autofill, paste and Android backspace." }, { "name": "concrete-wall-texture", "type": "registry:component", "title": "Concrete Wall Texture", "description": "A seamless procedural concrete surface drawn once to canvas and blended over anything." }, { "name": "signal-field", "type": "registry:component", "title": "Signal Field", "description": "A machined dot grid lit by slow waves of light, with a pointer lens and click ripples." }, { "name": "marker-highlight-text", "type": "registry:component", "title": "Marker Highlight Text", "description": "A felt-tip highlighter stroke with a ragged edge that draws itself behind a phrase when it scrolls into view." }, { "name": "window-light-drift", "type": "registry:component", "title": "Window Light Drift", "description": "Afternoon sun through a window, crossing a plaster wall over ninety seconds — and your pointer casts a shadow in it." }, { "name": "swatch-fan-deck", "type": "registry:component", "title": "Swatch Fan Deck", "description": "A fan deck of paint chips that spreads in your hand on hover or focus — a real radio group, with arrow keys and the colour's name, not its hex." }, { "name": "hours-poster-section", "type": "registry:component", "title": "Hours Poster Section", "description": "Opening hours set as a poster — days hanging off the edge, closed rows struck through, today banded in the one accent — with an open/closed line on the shop's …" }, { "name": "headline-switch-hero", "type": "registry:component", "title": "Headline Switch Hero", "description": "The second line of the headline is the navigation: KITCHENS / BATHROOMS / LOFTS at headline size, and choosing one swaps the treated photo plate, the copy and …" }, { "name": "liquid-glass-button", "type": "registry:component", "title": "Liquid Glass Button", "description": "A pill of liquid glass that bends what is behind it: real refraction at the rim, a rim and sheen lit by your pointer, and a gel-like press." }, { "name": "liquid-glass-switch", "type": "registry:component", "title": "Liquid Glass Switch", "description": "A toggle whose knob swells into a clear glass lens while you hold or drag it, magnifying the track beneath, then springs home solid." }, { "name": "glass-etch-text", "type": "registry:component", "title": "Glass Etch Text", "description": "Real, selectable heading text rendered as glass: a lit bevel, a graduated rim and a hairline colour fringe, raised or etched in." }, { "name": "glass-focus-field", "type": "registry:component", "title": "Glass Focus Field", "description": "A liquid-glass input whose rim notices the pointer before focus, thickens outward from where you click, ripples from the caret with every keystroke and clouds …" }, { "name": "glass-morph-popover", "type": "registry:component", "title": "Glass Morph Popover", "description": "A popover that grows out of its button as a drop of liquid glass, stretches toward its place and settles flat, then drains back the same way." }, { "name": "glass-tint-footer", "type": "registry:component", "title": "Glass Tint Footer", "description": "A liquid-glass footer slab that rises over the section above as you scroll in, its meniscus edge sloshing on fast scrolls, with a pointer light, a droplet glid…" }, { "name": "hairline-tile-button", "type": "registry:component", "title": "Hairline Tile Button", "description": "A button that behaves like a live bento grid: on hover it re-tiles into compartments along lit hairline seams, compresses toward your press, and its keycaps ar…" }, { "name": "spec-numeral-tile", "type": "registry:component", "title": "Spec Numeral Tile", "description": "A big bold numeral in a spec-sheet voice whose digits roll into place like an odometer, set in a hairline bento tile." }, { "name": "bento-command-nav", "type": "registry:component", "title": "Bento Command Nav", "description": "Site navigation as one row of bento tiles sharing 1px hairlines, with a pointer light that shows through them and menus that open as panels of tiles." }, { "name": "capture-loop-card", "type": "registry:component", "title": "Capture Loop Card", "description": "A bento tile whose picture is a tightly cropped loop of your product, still until someone hovers or presses play, with a hairline that tracks the loop." }, { "name": "bento-footer-grid", "type": "registry:component", "title": "Bento Footer Grid", "description": "A bento footer whose tiles are live: a 90-day uptime strip you can read day by day, a back-to-top ring that fills as you scroll, a newsletter that widens acros…" }, { "name": "widget-reorder-input", "type": "registry:component", "title": "Widget Reorder Input", "description": "A \"customise your dashboard\" panel: drag or keyboard reorder, show and hide switches, a live miniature of the result, and save, cancel and reset." }, { "name": "pushed-shadow-button", "type": "registry:component", "title": "Pushed Shadow Button", "description": "A neo-brutalist button on a hard 5px shadow: hover lifts it 2px, a press lands it exactly on its shadow. 3px ink everywhere, 100ms linear, no blur." }, { "name": "offset-shadow-card", "type": "registry:component", "title": "Offset Shadow Card", "description": "A neo-brutalist card on a hard shadow: it lifts 2px on hover and lands on the shadow when pressed. A flat drawn motif or a photo, a punched price tag, a sticke…" }, { "name": "weight-slam-text", "type": "registry:component", "title": "Weight Slam Text", "description": "Display type whose weight slams instead of easing: letters jump 400 → 650 → 900 in two hard steps, left to right like a row of stamps, and let go in three." }, { "name": "black-border-form", "type": "registry:component", "title": "Black Border Form", "description": "Neo-brutalist form fields in 3px ink: focus presses a field into its shadow, and errors are stamped on as tilted black tags. The browser's own validation, a po…" }, { "name": "punch-card-field", "type": "registry:component", "title": "Punch Card Field", "description": "A background of 80-column punch cards whose holes spell real text in Hollerith code. Holes are punched in column by column on arrival; point at a column to dec…" }, { "name": "warning-tape-footer", "type": "registry:component", "title": "Warning Tape Footer", "description": "A neo-brutalist footer under a strip of hazard tape you can grab and throw on its slow 48-second crawl, a sign-up that stamps the tape, and a giant wordmark wh…" }, { "name": "orbit-light-button", "type": "registry:component", "title": "Orbit Light Button", "description": "A dark pill whose border carries one light: it laps the outline slowly, glides to the nearest point of the border under the pointer and lights the surface from…" }, { "name": "pointer-lit-card", "type": "registry:component", "title": "Pointer Lit Card", "description": "A card lit from the pointer: a bright arc of light on the hairline border, a softer wash across the surface, a two-degree tilt toward the pointer and a little …" }, { "name": "slit-light-heading", "type": "registry:component", "title": "Slit Light Heading", "description": "A heading lit by a narrow slit of light that crosses it as it scrolls into view: letters under the slit burn white, letters it has passed stay lit, letters ahe…" }, { "name": "deploy-log-input", "type": "registry:component", "title": "Deploy Log Input", "description": "An email field that answers with a streaming log: on submit, short lines stream under it with spinners turning into checks while a beam of light runs along its…" }, { "name": "horizon-light-footer", "type": "registry:component", "title": "Horizon Light Footer", "description": "A footer whose giant wordmark is lit from below by a horizon that is also a signal: a latency trace lit where the pointer is, with a request pulse that runs it…" }, { "name": "beam-connector", "type": "registry:component", "title": "Beam Connector", "description": "A hairline beam between any two elements, routed with rounded right-angle elbows, that carries a pulse of light once per cycle and lands with a flash at the fa…" }, { "name": "chrome-pill-button", "type": "registry:component", "title": "Chrome Pill Button", "description": "A pill of polished chrome that reflects a lit room: its horizon, softbox glint and bezel light turn toward the pointer, and a press squashes it and drops a rin…" }, { "name": "holo-ticket-card", "type": "registry:component", "title": "Holo Ticket Card", "description": "A tour date as a notched, perforated ticket whose stub carries the date in chrome numerals on a strip of holographic foil; it tilts toward the pointer while th…" }, { "name": "pour-fill-heading", "type": "registry:component", "title": "Pour Fill Heading", "description": "A heading that starts as an empty mould and fills with liquid chrome as it scrolls into view, its surface a meniscus with a hot line of light that sloshes with…" }, { "name": "chrome-rim-input", "type": "registry:component", "title": "Chrome Rim Input", "description": "An email field in a pill with a chrome rim: each keystroke sends two ripples of light racing round the rim from the caret, a light laps it while sending, and s…" }, { "name": "mercury-pour-nav", "type": "registry:component", "title": "Mercury Pour Nav", "description": "A floating nav whose current-link indicator is a capsule of mercury on two springs: it stretches thin as it pours to the next link, snaps back round, reaches t…" }, { "name": "chrome-pour-reveal", "type": "registry:component", "title": "Chrome Pour Reveal", "description": "A reveal that casts its content in liquid chrome: molten metal pours down over the space with drips racing ahead and merging into the sheet, then cools away fr…" }, { "name": "soft-glow-button", "type": "registry:component", "title": "Soft Glow Button", "description": "A pill with a grained light inside it that follows the pointer with a slow settle, a diffused bloom that rises behind it, and a press that exhales a soft ring …" }, { "name": "halo-treatment-card", "type": "registry:component", "title": "Halo Treatment Card", "description": "A treatment card with a light well: a grained halo in the treatment's own colour rests low, then rises and blooms toward the pointer on hover or focus while th…" }, { "name": "veil-resolve-heading", "type": "registry:component", "title": "Veil Resolve Heading", "description": "A serif heading that arrives out of soft light: each word condenses from a blur into focus with an 80ms stagger while a glow blooms behind the words and fades …" }, { "name": "aura-booking-picker", "type": "registry:component", "title": "Aura Booking Picker", "description": "A booking picker in three quiet steps, treatment, day and time, where the chosen time blooms into a grained halo, and a request that needs your handler before …" }, { "name": "dusk-set-footer", "type": "registry:component", "title": "Dusk Set Footer", "description": "A footer that sets like the sun: as it scrolls in, a grained halo sinks toward a hairline horizon, warming from gold through rose to ember, behind a giant ital…" }, { "name": "breath-pacer-ring", "type": "registry:component", "title": "Breath Pacer Ring", "description": "A breathing guide in soft light: a grained halo swells as you breathe in and settles as you breathe out, a thin ring traces each phase and the seconds count do…" }, { "name": "aurora-glow-button", "type": "registry:component", "title": "Aurora Glow Button", "description": "A night-glass pill with a sliver of aurora under it, turning on a 60s clock that every button on the page shares, spreading on hover and sending a ring of ligh…" }, { "name": "aurora-rim-card", "type": "registry:component", "title": "Aurora Rim Card", "description": "A night-glass card with a slow aurora rim that turns once every 52 seconds, feathered into light, brightening near the pointer while the card tilts a hair towa…" }, { "name": "aurora-drift-text", "type": "registry:component", "title": "Aurora Drift Text", "description": "Display type filled with aurora light: three bands drift through the letters on slow loops, ray threads slide through them, and the brightest band leans toward…" }, { "name": "aurora-flow-nav", "type": "registry:component", "title": "Aurora Flow Nav", "description": "A floating night-glass nav whose active mark is a band of aurora light that takes the colour of the sky above its link and flows to the next one leading edge f…" }, { "name": "aurora-ribbon-cursor", "type": "registry:component", "title": "Aurora Ribbon Cursor", "description": "The pointer paints a small aurora: a ribbon of light coloured from the indigo fringe to rose that fades like the sky, sending short rays up from every point so…" }, { "name": "aurora-glow-input", "type": "registry:component", "title": "Aurora Glow Input", "description": "A waitlist field that lights like the sky: focus raises a two-hue bloom and lights the rim, every keystroke sends a rose ripple from the caret, and joining swe…" }, { "name": "axis-press-button", "type": "registry:component", "title": "Axis Press Button", "description": "A button whose label is the control: letters under the pointer swell heavier and wider while the rest condense, so the button never changes size, and a press c…" }, { "name": "axis-session-card", "type": "registry:component", "title": "Axis Session Card", "description": "A programme card whose title is set by what the session is: a workshop quiet and narrow, a talk set, a keynote loud and wide, so a grid reads as a legend; hove…" }, { "name": "axis-scrub-heading", "type": "registry:component", "title": "Axis Scrub Heading", "description": "A heading written by the scroll: as it rises through the view a wave runs through its letters from hairline to a loud accent peak to its set weight, and scroll…" }, { "name": "axis-flow-nav", "type": "registry:component", "title": "Axis Flow Nav", "description": "A nav whose links are one flush line: the active link is loud, the rest condensed, and choosing another makes the width flow to it letter by letter while the n…" }, { "name": "glyph-axis-stagger", "type": "registry:component", "title": "Glyph Axis Stagger", "description": "The kit's rebuild as a primitive: split any text into letters and spring each one between two settings of the face, a fixed delay apart, in the order you choos…" }, { "name": "name-badge-input", "type": "registry:component", "title": "Name Badge Input", "description": "A name field that sets your name on a pass as you type: each new letter lands loud in the accent and springs into place, a deleted one collapses to a hairline,…" }, { "name": "keycap-button", "type": "registry:component", "title": "Keycap Button", "description": "A button machined like a keycap: a press drops the cap 6px as its skirt collapses, release springs it back past rest, a specular follows the pointer and a copp…" }, { "name": "extruded-spec-card", "type": "registry:component", "title": "Extruded Spec Card", "description": "A card holding a small machined dial built in CSS 3D: the card tilts toward the pointer and the dial turns to follow it one detent at a time, its copper marker…" }, { "name": "anamorphic-heading", "type": "registry:component", "title": "Anamorphic Heading", "description": "A heading that only reads from the right angle: its letters stand at different depths, scaled so they line up from straight ahead, and the view swings round to…" }, { "name": "curved-rail-nav", "type": "registry:component", "title": "Curved Rail Nav", "description": "A nav whose links ride a shallow cylinder in real perspective: the active link stands forward and underlit in copper, and choosing another turns the rail towar…" }, { "name": "assemble-reveal", "type": "registry:component", "title": "Assemble Reveal", "description": "A reveal where parts assemble in 3D: each item starts at its own offset and turn deep in perspective and flies home on a spring with a slight overshoot, one af…" }, { "name": "detent-dial-input", "type": "registry:component", "title": "Detent Dial Input", "description": "A number set by turning a CSS-3D dial: drag round it and it steps through detents, springing onto each while its copper marker ticks; a real slider with full k…" }, { "name": "bayer-fill-button", "type": "registry:component", "title": "Bayer Fill Button", "description": "A button whose fill prints in cell by cell through the 8x8 Bayer order on hover and focus, with its label inverting exactly where each cell lands; press it and…" }, { "name": "dither-develop-card", "type": "registry:component", "title": "Dither Develop Card", "description": "A card whose image prints in cell by cell the first time it is seen, ordered-dithered with CSS alone, with a soft light that follows the pointer through the di…" }, { "name": "ascii-resolve-heading", "type": "registry:component", "title": "ASCII Resolve Heading", "description": "A heading that resolves from ASCII into type: its own letterforms redrawn in shape-matched glyphs step from coarse to fine as it comes into view, then a lens u…" }, { "name": "ascii-density-nav", "type": "registry:component", "title": "ASCII Density Nav", "description": "A nav whose active link is marked by a band of ASCII density: characters thicken through a ramp under the active link and flow to the next one on a spring, its…" }, { "name": "bayer-dissolve", "type": "registry:component", "title": "Bayer Dissolve", "description": "An ordered-dither transition: a new state prints in over the old one in 8x8 Bayer order while the screen refines from coarse cells to fine, or prints in from t…" }, { "name": "dither-drop-input", "type": "registry:component", "title": "Dither Drop Input", "description": "Drop an image and see it dithered right there, with CSS alone: choose the cell size and the ink, set the exposure, and the request URL for that output builds a…" }, { "name": "weight-press-button", "type": "registry:component", "title": "Weight Press Button", "description": "A button whose press you can see in its type: hover and the label thickens as the button lifts; press and it goes bold under your finger while the button sinks…" }, { "name": "light-lift-card", "type": "registry:component", "title": "Light Lift Card", "description": "A card that lifts toward the pointer with shadows that behave like light: a two-degree tilt, an ambient shadow that widens and drifts away from the side that r…" }, { "name": "sundial-shadow-heading", "type": "registry:component", "title": "Sundial Shadow Heading", "description": "A heading whose letters cast soft shadows that swing like a sundial as the page scrolls: the sun crosses with the scroll, the long shadows turn from right to l…" }, { "name": "hairline-morph-nav", "type": "registry:component", "title": "Hairline Morph Nav", "description": "A nav whose single hairline stretches toward the next link and settles under it: its leading edge runs ahead on a quick spring while its trailing edge follows …" }, { "name": "scrub-mask-reveal", "type": "registry:component", "title": "Scrub Mask Reveal", "description": "A plate that opens exactly with the scroll: its rounded frame widens from a fifth in on each side to full while the picture inside eases the other way so it se…" }, { "name": "wake-time-wheel", "type": "registry:component", "title": "Wake Time Wheel", "description": "Set the alarm on a pair of wheels: hours and minutes are snap-scrolling columns with momentum whose rows turn away in perspective around a lens, each a keyboar…" }, { "name": "squash-press-button", "type": "registry:component", "title": "Squash Press Button", "description": "A pill that squashes under your finger and pops back: it sinks onto its base where you press, deeper the longer you hold, keeps its area as it squashes, and sp…" }, { "name": "wobble-drop-card", "type": "registry:component", "title": "Wobble Drop Card", "description": "A release card that leans toward the pointer on a soft spring while the sticker on its corner follows through, swinging the other way and jiggling to a stop; p…" }, { "name": "squish-letter-heading", "type": "registry:component", "title": "Squish Letter Heading", "description": "A heading whose letters squash under the pointer and push their neighbours up: each letter keeps its area as it squashes, springs back with one overshoot, and …" }, { "name": "taffy-pill-nav", "type": "registry:component", "title": "Taffy Pill Nav", "description": "A floating pill nav whose bubblegum marker stretches like taffy to the link you choose: long and thin in flight, short and fat as it lands, with the labels tur…" }, { "name": "squish-flip", "type": "registry:component", "title": "Squish Flip", "description": "A list whose items squash and stretch as they move: reorder, filter or add and each item travels to its new place stretched along its path by its speed, squash…" }, { "name": "gummy-type-input", "type": "registry:component", "title": "Gummy Type Input", "description": "An email field whose letters drop in and land: each typed letter falls from a little above, stretched as it falls and squashed as it lands, while the real inpu…" }, { "name": "offset-target-button", "type": "registry:component", "title": "Offset Target Button", "description": "A button whose label plate hangs off its hairline target along the grid's axis, reaches further and lights its bracket on hover or focus, and seats into the ta…" }, { "name": "z-swap-plate-card", "type": "registry:component", "title": "Z-Swap Plate Card", "description": "A work card on the lattice: every third in a run breaks by the rule, two gutters out with the bracket, and hovering the card it overlaps lifts that card above …" }, { "name": "edge-invert-headline", "type": "registry:component", "title": "Edge Invert Headline", "description": "A caps headline that inverts exactly at the edges of the plates under it; drag a plate and the inversion follows 1:1, then snaps to a lattice cell, and on colu…" }, { "name": "index-step-nav", "type": "registry:component", "title": "Index Step Nav", "description": "A numbered nav whose third item hangs one gutter below the bar on a contrasting plate by the rule, the bar's hairline dipping under it, and a tag that steps to…" }, { "name": "rule-handoff-flip", "type": "registry:component", "title": "Rule Handoff Flip", "description": "The kit's rule for any list: items become plates on the lattice and every third breaks; filter, sort or add and everything moves from where it was in 380ms whi…" }, { "name": "hanging-label-input", "type": "registry:component", "title": "Hanging Label Input", "description": "A contact form whose numbered labels hang one gutter off the lattice and step into line in 160ms when you use the field; the third row breaks by the rule, and …" }, { "name": "aura-dial", "type": "registry:component", "title": "Aura Dial", "description": "A 40px hexagon of the viewer's own six values (contrast, warmth, light, density, motion, focus) that opens into an instrument: pull a corner and every Ultra as…" }, { "name": "density-ledger", "type": "registry:component", "title": "Density Ledger", "description": "A list you zoom like a map: pinch, ctrl+scroll, a ruler or [ and ] move rows continuously from 64px to 22px, columns arrive at thresholds, and the row under yo…" }, { "name": "bell-breath-loader", "type": "registry:component", "title": "Bell Breath Loader", "description": "A progress loader drawn as one translucent jellyfish. Progress is light: it rises through the bell from the rim, lights the ring of organs and lets the tentacl…" }, { "name": "bead-button", "type": "registry:component", "title": "Bead Button", "description": "A single bead of water on dark hydrophobic glass is the button. It magnifies the etched plate behind it and shows it upside down, the way real water does, whil…" }, { "name": "holo-site-footer", "type": "registry:component", "title": "Holo Site Footer", "description": "The close of a landing: a last call set big with a holo pill between its words and two buttons, then a footer with the mark, a one-line promise, three columns …" }, { "name": "asterisk-type-headline", "type": "registry:component", "title": "Asterisk Type Headline", "description": "A headline typed out by an asterisk: the caret spins fast while it types, opens an inline pill when it reaches one, then parks in the slot you mark with * (by …" }, { "name": "holo-pill-nav", "type": "registry:component", "title": "Holo Pill Nav", "description": "A quiet header: the mark and wordmark left, one outlined glass pill right that fills from below on hover while an asterisk turns in beside the label. A tone pr…" }, { "name": "asterisk-submit-input", "type": "registry:component", "title": "Asterisk Submit Input", "description": "An email field as a pill, an asterisk that turns one step per keystroke and spins while sending, and a black Submit pill. A real form with validation and an ho…" }, { "name": "ultra-pill-nav", "type": "registry:component", "title": "Ultra Pill Nav", "description": "A floating glass pill nav that tightens as the page scrolls, with the Aura Dial in it: press U and every Ultra part of the page retunes." }, { "name": "ultra-site-footer", "type": "registry:component", "title": "Ultra Site Footer", "description": "A footer whose huge closing line gets bolder as the reader turns contrast up, with their own six values drawn as a hexagon they can reset." }, { "name": "levitating-link-nav", "type": "registry:component", "title": "Levitating Link Nav", "description": "A dark glass nav bar whose link labels hang in the air above a lit shelf, each over its own soft shadow; the link you point at, and the one for the section in …" }, { "name": "contrary-shadow-section", "type": "registry:component", "title": "Contrary Shadow Section", "description": "Mounted letters on a lit plaster wall under a swinging lamp: every word's shadow runs from the light, except one, whose shadow runs toward it." }, { "name": "levitating-field-input", "type": "registry:component", "title": "Levitating Field Input", "description": "A real text input whose typed words hang above the field and cast a soft shadow on its lit shelf; focus lifts them higher and submitting lands them." }, { "name": "flight-manifest", "type": "registry:component", "title": "Flight Manifest", "description": "A launch table on warm black: filter it, and an orange wipe runs across each row you point at; open a flight for its window, pad and mass." }, { "name": "hold-to-ignite-button", "type": "registry:component", "title": "Hold to Ignite Button", "description": "A press-and-hold confirm: a flame-edged fill rises through the button while you hold, drains if you let go early, and lands with a burst of sparks." }, { "name": "heat-haze-heading", "type": "registry:component", "title": "Heat Haze Heading", "description": "A line of type set edge to edge and seen through rising heat: an SVG turbulence field moves up through the letters, and the pointer turns the heat up." }, { "name": "hi-vis-nav", "type": "registry:component", "title": "Hi-Vis Nav", "description": "A full-width bar that reads the ground under it, black, safety orange or bone, and swaps its ink and button to match; it tightens after the first scroll." }, { "name": "ardent-footer", "type": "registry:component", "title": "Ardent Footer", "description": "A black footer with a closing call, link columns and the brand set edge to edge across the bottom in rising heat haze." }, { "name": "hazard-tape-marquee", "type": "registry:component", "title": "Hazard Tape Marquee", "description": "Two crossed lengths of hazard tape, safety orange with chevron rails over black with a reflective stripe, pulled along in opposite directions by the page's scr…" }, { "name": "hot-fire-request-form", "type": "registry:component", "title": "Hot Fire Request Form", "description": "A booking form in hi-vis: underlined fields that light orange, chip choices that fill solid, inline errors that name the fix, and a sent state that replays the…" } ], "component_count": 181, "components_truncated": false, "component_types": { "registry:component": 181 }, "logo": "", "preview_image": "https://viberdy.dev/opengraph-image?v=2", "pro": { "has_pro": true, "pro_url": null, "pricing_url": "https://viberdy.dev/pricing" }, "enrichment_errors": [], "featured": false }, { "number": 471, "name": "@videocn", "category": "Theming/styling", "tags": [ "audio", "buttons", "media", "theming" ], "tagline": "A complete video player for shadcn/ui: HLS, DASH and live streams, quality switching, keyboard shortcuts, and your theme out of the box.", "short_description": "", "description": "A complete video player for shadcn/ui: HLS, DASH and live streams, quality switching, keyboard shortcuts, and your theme out of the box.", "framework": "react", "homepage": "https://videocn.dev", "docs": "https://videocn.dev/docs", "github": "https://github.com/romain-cll/videocn", "components_github": "https://github.com/romain-cll/videocn/tree/master/registry", "github_default_branch": "master", "github_stars": 1, "last_commit": "2026-10-14T20:29:34Z", "archived": false, "license": "MIT", "open_issues": 0, "registry_template": "https://videocn.dev/r/{name}.json", "registry_index": "https://videocn.dev/r/registry.json", "components": [ "player" ], "component_items": [ { "name": "player", "type": "registry:ui", "title": "Video Player", "description": "Le lecteur vidéo complet : socle, contrôles, chapitres et sous-titres." } ], "component_count": 1, "components_truncated": false, "component_types": { "registry:ui": 1 }, "logo": "", "preview_image": "https://videocn.dev/opengraph-image?fa974d3559d5a56c", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [], "featured": false }, { "number": 472, "name": "@visited-map", "category": "Maps", "tags": [ "developer-tools", "maps" ], "tagline": "An SVG world map that highlights the countries you've visited, lived in or want to see, with city pins, stats and optional zoom. No tiles or API keys. Works in Server Components.", "short_description": "", "description": "An SVG world map that highlights the countries you've visited, lived in or want to see, with city pins, stats and optional zoom. No tiles or API keys. Works in Server Components.", "framework": "react", "homepage": "https://visitedmap.vercel.app", "docs": "https://visitedmap.vercel.app/docs", "github": "https://github.com/crashncrow/shadcn-visited-map", "components_github": "https://github.com/crashncrow/shadcn-visited-map/tree/main/registry", "github_default_branch": "main", "github_stars": 5, "last_commit": "2026-10-12T15:25:36Z", "archived": false, "license": "MIT", "open_issues": 0, "registry_template": "https://visitedmap.vercel.app/r/{name}.json", "registry_index": "https://visitedmap.vercel.app/r/registry.json", "components": [ "visited-map" ], "component_items": [ { "name": "visited-map", "type": "registry:component", "title": "Visited Map", "description": "An SVG world map that highlights the countries you've visited, lived in or want to see, pins cities on top and counts how much of the world you've seen. No til…" } ], "component_count": 1, "components_truncated": false, "component_types": { "registry:component": 1 }, "logo": "", "preview_image": "https://visitedmap.vercel.app/opengraph-image.png?opengraph-image.0gh78qh1n-cvh.png", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [], "featured": false }, { "number": 473, "name": "@vue-bits", "category": "Animated components", "tags": [ "animation", "backgrounds", "buttons", "cards", "dashboard", "forms", "glassmorphism", "icons", "loaders", "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", "AeroShards", "AnimatedContent", "AnimatedList", "Antigravity", "ASCIIText", "Aurora", "Balatro", "Ballpit", "Beams", "BellToggle", "BlobCursor", "BlurText", "BorderGlow", "BounceCards", "BranchedMenu", "BubbleMenu", "CallChip", "CardNav", "CardSwap", "Carousel", "ChromaGrid", "CircularGallery", "CircularText", "ClickSpark", "CodeSlots", "ColorBends", "CometDial", "Counter", "CountUp", "Crosshair", "CRTWarp", "Cubes", "CursorGrid", "CurvedInput", "CurvedLoop", "DarkVeil", "DecayCard", "DecryptedText", "DepthCarousel", "DepthText", "Dither", "DitherVeil", "Dock", "DodgeField", "DomeGallery", "DotField", "DotGrid", "DriftWall", "EchoText", "ElasticMesh", "ElasticSlider", "ElectricBorder", "ElectricLogo", "EvilEye", "FadeContent", "FallingText", "FaultyTerminal", "Ferrofluid", "FlexCarousel", "FlipCard", "FloatingLines", "FlowingMenu", "FlyingPosters", "Folder", "FolderFloat", "FoldText", "FuseButton", "FuzzyText", "Galaxy", "GhostCursor", "GhostFibers", "GlareHover", "GlassIcons", "GlassSurface", "GlideSelect", "GlitchText", "GlowCursor", "GooeyNav", "GradientBlinds", "GradientText", "GradientWaves", "GradualBlur", "Grainient", "GridDistortion", "GridMotion", "GridScan", "HalftoneReveal", "HoldButton", "Hyperspeed", "ImageTrail", "InfiniteMenu", "InfiniteSpiral", "Iridescence", "JellyRadio", "LaserFlow", "LatticeLoader", "LetterGlitch", "Lightfall", "Lightning", "LightPillar", "LightRays", "LightTunnel", "LineSidebar", "LineWaves", "LiquidChrome", "LiquidEther", "LogoLoop", "MagicBento", "MagicRings", "Magnet", "MagnetLines", "MaskedHeading", "Masonry", "MetaBalls", "MetallicPaint", "MicroSlats", "ModelViewer", "MoltenMetal", "MorphSlider", "Noise", "OptionWheel", "Orb", "OrbitImages", "PaperCrumple", "Particles", "ParticleText", "PeekRating", "PillNav", "PixelBlast", "PixelCard", "PixelSwap", "PixelTrail", "PixelTransition", "Plasma", "PlasmaWave", "Prism", "PrismaticBurst", "ProfileCard", "PromptBar", "PulseHeart", "Radar", "RefineFrame", "ReflectiveCard", "Ribbons", "RippleDistortion", "RippleGrid", "RotatingText", "RubberSegment", "Scanner", "ScrambleText", "ScrollExpand", "ScrollFloat", "ScrollReveal", "ScrollStack", "ScrollVelocity", "ScrubField", "ShapeBlur", "ShapeGrid", "ShapeWaves", "ShinyText", "Shredder", "Shuffle", "SideRays", "SlideCommit", "SlingButton", "SloshGauge", "SpecularButton", "SplashCursor", "SplitFlapText", "SplitText", "SpotlightCard", "SpringCheck", "SquishSwitch", "Stack", "StaggeredMenu", "StarBorder", "StatusMark", "Stepper", "StickerPeel", "Strands", "StrokeText", "SwarmCursor", "SwipeRow", "SwipeToast", "TargetCursor", "TearTicket", "TechText", "TextCursor", "TextLoop", "TextPressure", "TextType", "ThoughtLine", "TiltedCard", "Topography", "TrueFocus", "VariableProximity", "VoicePill", "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": "AeroShards", "type": "registry:component", "title": "AeroShards", "description": "A GPU-driven wind sculpture of folded foil shards with crisp detail, content-safe placements, and responsive pointer interactions." }, { "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": "BellToggle", "type": "registry:component", "title": "BellToggle", "description": "Pill toggle that answers a press at three tempos: the bell rings on damped keyframes, the label blur-crossfades, and the pill unfurls to the longer label throu…" }, { "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": "BranchedMenu", "type": "registry:component", "title": "BranchedMenu", "description": "Collapsible menu whose sections unfold into a trunk with a curved branch to each child, and an accent line that travels down the trunk and around the curve to …" }, { "name": "BubbleMenu", "type": "registry:component", "title": "BubbleMenu", "description": "Floating circular expanding menu with staggered item reveal." }, { "name": "CallChip", "type": "registry:component", "title": "CallChip", "description": "Inline tool-call chip whose fill wipes across while a live ms counter ticks, completing with a green wash on success or stopping short and shaking red with a r…" }, { "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": "CodeSlots", "type": "registry:component", "title": "CodeSlots", "description": "One-time-code input where a hidden overlay input owns focus, paste and SMS autofill while each slot lands its digit on one spring: the fill swells from the cen…" }, { "name": "ColorBends", "type": "registry:component", "title": "ColorBends", "description": "Vibrant color bends with smooth flowing animation." }, { "name": "CometDial", "type": "registry:component", "title": "CometDial", "description": "Tick-ring dial you flick by angle: the reading launches on a spring and a velocity-driven comet streaks behind the lit head, trailing the direction of travel a…" }, { "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": "DitherVeil", "type": "registry:component", "title": "DitherVeil", "description": "A photo printed as a 1-bit dither that the cursor burns through to full colour, leaving a trail that knits back cell by cell." }, { "name": "Dock", "type": "registry:component", "title": "Dock", "description": "macOS style magnifying dock with proximity scaling of icons." }, { "name": "DodgeField", "type": "registry:component", "title": "DodgeField", "description": "Wrapper that makes any child flee the pointer inside a bounded field, dodges once per approach, then relents after a few tries and glides home." }, { "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": "ElectricLogo", "type": "registry:component", "title": "ElectricLogo", "description": "Turns any SVG or PNG into a living lightning outline, with flowing strands, arcs that leap off the edges and a charge that follows the cursor." }, { "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": "FlexCarousel", "type": "registry:component", "title": "FlexCarousel", "description": "An infinite image row that flows through invisible liquid glass at its edges, with four bend presets, five entrances, a speed squeeze and click to focus." }, { "name": "FlipCard", "type": "registry:component", "title": "FlipCard", "description": "Two-faced card that flips in 3D on a click, a drag or a flick, settling on a spring that carries your release velocity, with an optional cursor tilt, a sheen t…" }, { "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": "FolderFloat", "type": "registry:component", "title": "FolderFloat", "description": "Folder that opens on hover or press: the flap tilts toward you, a paper edge rises, and its notes spring out from behind the flap into a floating cloud to pick…" }, { "name": "FoldText", "type": "registry:component", "title": "FoldText", "description": "Lines unfold into place like creased paper opening flat." }, { "name": "FuseButton", "type": "registry:component", "title": "FuseButton", "description": "Action button whose done state carries its own undo on a burning fuse: press, the label crossfades to Undo, a hairline burns for the undo window, and Undo or E…" }, { "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": "GhostFibers", "type": "registry:component", "title": "GhostFibers", "description": "A deep-blue recursive fiber field with luminous bands, radial twisting and soft atmospheric glow." }, { "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": "GlideSelect", "type": "registry:component", "title": "GlideSelect", "description": "Select chip whose menu pops out of its own corner and whose single hover highlight glides between rows, remembering where you left it so re-entry slides from t…" }, { "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": "HoldButton", "type": "registry:component", "title": "HoldButton", "description": "Hold-to-confirm button whose liquid fill rises while pressed, snaps back on an early release and swaps its label through a blur when the hold completes." }, { "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": "InfiniteSpiral", "type": "registry:component", "title": "InfiniteSpiral", "description": "An endlessly looping 3D helix of images with customizable motion, depth, spacing and interaction." }, { "name": "Iridescence", "type": "registry:component", "title": "Iridescence", "description": "Slick iridescent shader with shifting waves." }, { "name": "JellyRadio", "type": "registry:component", "title": "JellyRadio", "description": "Radio group of labelled chips where the chosen one swells wide-then-tall on two springs and barges its neighbours outward with a travelling stagger, so a selec…" }, { "name": "LaserFlow", "type": "registry:component", "title": "LaserFlow", "description": "Dynamic laser light that flows onto a surface, customizable effect." }, { "name": "LatticeLoader", "type": "registry:component", "title": "LatticeLoader", "description": "Inline agent-status row: a 3x3 or 4x4 lattice whose cells brighten in a phase-offset wave beside a verb and a live stopwatch, resolving into a check or a cross…" }, { "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": "MicroSlats", "type": "registry:component", "title": "MicroSlats", "description": "A wall of tiny slats that becomes a rolling sea in perspective, with glinting crests, four presets, a real fluid the cursor stirs and an intro that rolls in fr…" }, { "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": "PaperCrumple", "type": "registry:component", "title": "PaperCrumple", "description": "An image that crumples into a textured 3D sheet while held and follows the grabbed point as you drag. Release it as a crumpled ball, unfold it flat, or leave t…" }, { "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": "PeekRating", "type": "registry:component", "title": "PeekRating", "description": "Star rating you can try before you commit: sweeping the row lifts a trailing wave of stars up to the pointer while a tip hops along with the label; a click com…" }, { "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": "PixelSwap", "type": "registry:component", "title": "PixelSwap", "description": "Pixel fragments assemble into a full cover, swap arbitrary content, then dissolve away with reversible colors and triggers." }, { "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": "PromptBar", "type": "registry:component", "title": "PromptBar", "description": "Chat composer with an @ sources menu, a / commands menu, a model picker, dictation and attachments, whose send tile charges to ink the moment there is somethin…" }, { "name": "PulseHeart", "type": "registry:component", "title": "PulseHeart", "description": "Like button that contracts to a dot, flips colour at its smallest frame and pulses back while the count swaps one glyph." }, { "name": "Radar", "type": "registry:component", "title": "Radar", "description": "Radar sweep effect with concentric rings, radial spokes, and a rotating beam." }, { "name": "RefineFrame", "type": "registry:component", "title": "RefineFrame", "description": "Reserved-aspect frame that walks any media through queued, generating, refining and complete without layout shift: each stage is one blur, saturate, scale and …" }, { "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": "RubberSegment", "type": "registry:component", "title": "RubberSegment", "description": "Segmented control with a rubber thumb: taps stretch it across the gap and squash it onto the target, and you can grab, drag and flick it between slots." }, { "name": "Scanner", "type": "registry:component", "title": "Scanner", "description": "Retro CRT scanner background with sweep lines, chromatic aberration, and mouse interaction." }, { "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": "ScrubField", "type": "registry:component", "title": "ScrubField", "description": "Number chip you drag to scrub: the value follows the hand, pushes past the range on a rubber band, and a click without moving opens it for typing." }, { "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": "ShapeWaves", "type": "registry:component", "title": "ShapeWaves", "description": "A WebGPU field of triangles, circles and squares that brighten and grow along rolling waves, with an optional text cutout the waves flow around." }, { "name": "ShinyText", "type": "registry:component", "title": "ShinyText", "description": "Metallic sheen sweeps across text producing a reflective highlight." }, { "name": "Shredder", "type": "registry:component", "title": "Shredder", "description": "A list with a paper shredder at the bottom. Drag a row into the slit and the rollers tug it in, pull it through and cut it into strips that curl out underneath…" }, { "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": "SlideCommit", "type": "registry:component", "title": "SlideCommit", "description": "Slide-to-confirm handle that plants with a spinner while your action runs, unfurls into a done pill on success and springs home with a squash and shake on fail…" }, { "name": "SlingButton", "type": "registry:component", "title": "SlingButton", "description": "Send button you pull back like a slingshot: the band stretches, a power arc arms it, and releasing fires the action with the flick's velocity." }, { "name": "SloshGauge", "type": "registry:component", "title": "SloshGauge", "description": "Tank gauge whose liquid chases the value with mass, tilts with its own speed and splashes against the top when it slams full; optionally a vertical slider." }, { "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": "SpringCheck", "type": "registry:component", "title": "SpringCheck", "description": "Checkbox row where a single spring fills the box, draws the tick, strikes the label and dims the words in one press." }, { "name": "SquishSwitch", "type": "registry:component", "title": "SquishSwitch", "description": "Drag-scrubbable switch whose thumb stretches by how fast it moves, flips at the midpoint and squashes against the track end on a flick." }, { "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": "StatusMark", "type": "registry:component", "title": "StatusMark", "description": "A 20px status glyph for agent task lists that morphs in place from a dashed idle ring to a spinning or real-progress arc, then draws a check or a cross, with a…" }, { "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": "SwipeRow", "type": "registry:component", "title": "SwipeRow", "description": "List row that swipes open to reveal actions, snaps by flick velocity, and deletes on a full swipe that stretches the action colour across the row." }, { "name": "SwipeToast", "type": "registry:component", "title": "SwipeToast", "description": "Single toast that rises through its bottom edge, swipes down to dismiss on a flick or a distance, and burns a thin fuse for exactly its remaining time; hover p…" }, { "name": "TargetCursor", "type": "registry:component", "title": "TargetCursor", "description": "A cursor follow animation with 4 corners that lock onto targets." }, { "name": "TearTicket", "type": "registry:component", "title": "TearTicket", "description": "Ticket whose perforated stub tears off by hand: paper bridges stretch into fibres and snap one by one from the far end, the torn edges are jagged and fit each …" }, { "name": "TechText", "type": "registry:component", "title": "TechText", "description": "A wordmark whose letters turn into dashed vector paths under the cursor. Grab any letter to drag it off the baseline and it springs back home." }, { "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": "ThoughtLine", "type": "registry:component", "title": "ThoughtLine", "description": "Reasoning-trace header: a glyph and a label breathe beside a live clock while steps appear beneath, then the line settles on one beat into \"Thought for 4.2s\" t…" }, { "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": "VoicePill", "type": "registry:component", "title": "VoicePill", "description": "Mic button that swells into a tinted capsule of level-driven equalizer bars and an elapsed clock while held or toggled, then relaxes back into the mic on relea…" }, { "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": 201, "components_truncated": false, "component_types": { "registry:component": 201 }, "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": 474, "name": "@svelte-bits", "category": "Animated components", "tags": [ "animation", "backgrounds", "buttons", "cards", "forms", "glassmorphism", "hooks", "icons", "loaders", "media", "navigation", "retro" ], "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": 390, "last_commit": "2026-09-21T11:41:57Z", "archived": false, "license": null, "open_issues": 5, "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", "cursor-grid", "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", "scroll-expand", "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", "bell-toggle", "branched-menu", "call-chip", "code-slots", "comet-dial", "dodge-field", "flip-card", "folder-float", "fuse-button", "glide-select", "hold-button", "jelly-radio", "lattice-loader", "paper-crumple", "peek-rating", "prompt-bar", "pulse-heart", "refine-frame", "rubber-segment", "scrub-field", "slide-commit", "sling-button", "slosh-gauge", "spring-check", "squish-switch", "status-mark", "swipe-row", "swipe-toast", "tear-ticket", "thought-line", "voice-pill", "wake-slider", "warm-tooltip", "ascii-text", "blur-text", "circular-text", "count-up", "curved-loop", "decrypted-text", "falling-text", "fuzzy-text", "glitch-text", "gradient-text", "masked-heading", "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": "cursor-grid", "type": "registry:component", "title": "Cursor Grid", "description": "A grid of cells that light up near the cursor and fade out." }, { "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": "scroll-expand", "type": "registry:component", "title": "Scroll Expand", "description": "A media box that grows to fullscreen as you scroll, with a fading title, hint, and overlay content." }, { "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": "bell-toggle", "type": "registry:component", "title": "Bell Toggle", "description": "Pill toggle that answers a press at three tempos: the bell rings on damped keyframes, the label blur-crossfades, and the pill unfurls to the longer label throu…" }, { "name": "branched-menu", "type": "registry:component", "title": "Branched Menu", "description": "Collapsible menu whose sections unfold into a trunk with a curved branch to each child, and an accent line that travels down the trunk and around the curve to …" }, { "name": "call-chip", "type": "registry:component", "title": "Call Chip", "description": "Inline tool-call chip whose fill wipes across while a live ms counter ticks, completing with a green wash on success or stopping short and shaking red with a r…" }, { "name": "code-slots", "type": "registry:component", "title": "Code Slots", "description": "One-time-code input where a hidden overlay input owns focus, paste and SMS autofill while each slot lands its digit on one spring: the fill swells from the cen…" }, { "name": "comet-dial", "type": "registry:component", "title": "Comet Dial", "description": "Tick-ring dial you flick by angle: the reading launches on a spring and a velocity-driven comet streaks behind the lit head, trailing the direction of travel a…" }, { "name": "dodge-field", "type": "registry:component", "title": "Dodge Field", "description": "Wrapper that makes any child flee the pointer inside a bounded field, dodges once per approach, then relents after a few tries and glides home." }, { "name": "flip-card", "type": "registry:component", "title": "Flip Card", "description": "Two-faced card that flips in 3D on a click, a drag or a flick, settling on a spring that carries your release velocity, with an optional cursor tilt, a sheen t…" }, { "name": "folder-float", "type": "registry:component", "title": "Folder Float", "description": "Folder that opens on hover or press: the flap tilts toward you, a paper edge rises, and its notes spring out from behind the flap into a floating cloud to pick…" }, { "name": "fuse-button", "type": "registry:component", "title": "Fuse Button", "description": "Action button whose done state carries its own undo on a burning fuse: press, the label crossfades to Undo, a hairline burns for the undo window, and Undo or E…" }, { "name": "glide-select", "type": "registry:component", "title": "Glide Select", "description": "Select chip whose menu pops out of its own corner and whose single hover highlight glides between rows, remembering where you left it so re-entry slides from t…" }, { "name": "hold-button", "type": "registry:component", "title": "Hold Button", "description": "Hold-to-confirm button whose liquid fill rises while pressed, snaps back on an early release and swaps its label through a blur when the hold completes." }, { "name": "jelly-radio", "type": "registry:component", "title": "Jelly Radio", "description": "Radio group of labelled chips where the chosen one swells wide-then-tall on two springs and barges its neighbours outward with a travelling stagger, so a selec…" }, { "name": "lattice-loader", "type": "registry:component", "title": "Lattice Loader", "description": "Inline agent-status row: a 3x3 or 4x4 lattice whose cells brighten in a phase-offset wave beside a verb and a live stopwatch, resolving into a check or a cross…" }, { "name": "paper-crumple", "type": "registry:component", "title": "Paper Crumple", "description": "An image that crumples into a textured 3D sheet while held and follows the grabbed point as you drag. Release it as a crumpled ball, unfold it flat, or leave t…" }, { "name": "peek-rating", "type": "registry:component", "title": "Peek Rating", "description": "Star rating you can try before you commit: sweeping the row lifts a trailing wave of stars up to the pointer while a tip hops along with the label; a click com…" }, { "name": "prompt-bar", "type": "registry:component", "title": "Prompt Bar", "description": "Chat composer with an @ sources menu, a / commands menu, a model picker, dictation and attachments, whose send tile charges to ink the moment there is somethin…" }, { "name": "pulse-heart", "type": "registry:component", "title": "Pulse Heart", "description": "Like button that contracts to a dot, flips colour at its smallest frame and pulses back while the count swaps one glyph." }, { "name": "refine-frame", "type": "registry:component", "title": "Refine Frame", "description": "Reserved-aspect frame that walks any media through queued, generating, refining and complete without layout shift: each stage is one blur, saturate, scale and …" }, { "name": "rubber-segment", "type": "registry:component", "title": "Rubber Segment", "description": "Segmented control with a rubber thumb: taps stretch it across the gap and squash it onto the target, and you can grab, drag and flick it between slots." }, { "name": "scrub-field", "type": "registry:component", "title": "Scrub Field", "description": "Number chip you drag to scrub: the value follows the hand, pushes past the range on a rubber band, and a click without moving opens it for typing." }, { "name": "slide-commit", "type": "registry:component", "title": "Slide Commit", "description": "Slide-to-confirm handle that plants with a spinner while your action runs, unfurls into a done pill on success and springs home with a squash and shake on fail…" }, { "name": "sling-button", "type": "registry:component", "title": "Sling Button", "description": "Send button you pull back like a slingshot: the band stretches, a power arc arms it, and releasing fires the action with the flick's velocity." }, { "name": "slosh-gauge", "type": "registry:component", "title": "Slosh Gauge", "description": "Tank gauge whose liquid chases the value with mass, tilts with its own speed and splashes against the top when it slams full; optionally a vertical slider." }, { "name": "spring-check", "type": "registry:component", "title": "Spring Check", "description": "Checkbox row where a single spring fills the box, draws the tick, strikes the label and dims the words in one press." }, { "name": "squish-switch", "type": "registry:component", "title": "Squish Switch", "description": "Drag-scrubbable switch whose thumb stretches by how fast it moves, flips at the midpoint and squashes against the track end on a flick." }, { "name": "status-mark", "type": "registry:component", "title": "Status Mark", "description": "A 20px status glyph for agent task lists that morphs in place from a dashed idle ring to a spinning or real-progress arc, then draws a check or a cross, with a…" }, { "name": "swipe-row", "type": "registry:component", "title": "Swipe Row", "description": "List row that swipes open to reveal actions, snaps by flick velocity, and deletes on a full swipe that stretches the action colour across the row." }, { "name": "swipe-toast", "type": "registry:component", "title": "Swipe Toast", "description": "Single toast that rises through its bottom edge, swipes down to dismiss on a flick or a distance, and burns a thin fuse for exactly its remaining time; hover p…" }, { "name": "tear-ticket", "type": "registry:component", "title": "Tear Ticket", "description": "Ticket whose perforated stub tears off by hand: paper bridges stretch into fibres and snap one by one from the far end, the torn edges are jagged and fit each …" }, { "name": "thought-line", "type": "registry:component", "title": "Thought Line", "description": "Reasoning-trace header: a glyph and a label breathe beside a live clock while steps appear beneath, then the line settles on one beat into \"Thought for 4.2s\" t…" }, { "name": "voice-pill", "type": "registry:component", "title": "Voice Pill", "description": "Mic button that swells into a tinted capsule of level-driven equalizer bars and an elapsed clock while held or toggled, then relaxes back into the mic on relea…" }, { "name": "wake-slider", "type": "registry:component", "title": "Wake Slider", "description": "Range slider drawn as thin bars with no thumb: drag speed raises a wake that trails behind the handle and flattens again at rest." }, { "name": "warm-tooltip", "type": "registry:component", "title": "Warm Tooltip", "description": "Tooltip group with one shared delay: the first label waits and pops from its trigger, then siblings open instantly while the group is warm, with an optional ve…" }, { "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": "masked-heading", "type": "registry:component", "title": "Masked Heading", "description": "Masked Heading component from svelte-bits." }, { "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": 164, "components_truncated": false, "component_types": { "registry:component": 164 }, "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": 475, "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": 110, "last_commit": "2026-10-16T17:09:19Z", "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", "fold", "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": "fold", "type": "registry:ui", "title": "Fold", "description": "useFoldFeatures() hook: iPhone Duo / Android foldable hinge state. Null-safe require of expo-hinge — returns null fields on non-fold devices and when the peer …" }, { "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": "Animated scroll-snap wheel time picker with a spring modal and haptic tick, 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": 167, "components_truncated": false, "component_types": { "registry:ui": 150, "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": 476, "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": 61, "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": 477, "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-10-17T16:20:06Z", "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", "theme-kumo", "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": "theme-kumo", "type": "registry:theme", "title": "Kumo Theme", "description": "Optional Kumo light and dark theme. Import the copied Sass entry explicitly to opt in." }, { "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": 72, "components_truncated": false, "component_types": { "registry:lib": 4, "registry:style": 1, "registry:theme": 2, "registry:hook": 3, "registry:ui": 62 }, "logo": "", "preview_image": "https://opengraph.githubassets.com/1ef87964d1a0ecbbf1d90dc12e65899c18f46140f0bd37b8f5602330729dbbd7/zmide/tile-ui", "pro": { "has_pro": true, "pro_url": null, "pricing_url": "https://github.com/enterprise/premium-support" }, "enrichment_errors": [], "featured": false }, { "number": 478, "name": "@vllnt-ui", "category": "Animated components", "tags": [ "3d", "accessibility", "ai", "animation", "blocks", "buttons", "cards", "charts", "cms", "dashboard", "design-system", "forms", "glassmorphism", "hooks", "loaders", "maps", "marketing", "media", "navigation", "overlays", "tables" ], "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": "https://ui.vllnt.com/docs", "github": "https://github.com/vllnt/ui", "components_github": null, "github_default_branch": "main", "github_stars": 9, "last_commit": "2026-10-22T23:18:32Z", "archived": false, "license": "MIT", "open_issues": 14, "registry_template": "https://ui.vllnt.com/r/{name}.json", "registry_index": "https://ui.vllnt.com/r/registry.json", "components": [ "accordion", "activity-heatmap", "activity-log", "agent-activity", "ai-artifact", "ai-chat-input", "ai-message-bubble", "ai-sidebar", "ai-source-citation", "ai-streaming-text", "ai-tool-call-display", "alert", "alert-dialog", "alert-pulse", "anchor-port", "animated-beam", "animated-grid-pattern", "animated-list", "animated-tabs", "animated-testimonials", "animated-text", "animated-tooltip", "annotation", "area-chart", "aspect-ratio", "auto-reload", "avatar", "avatar-group", "badge", "banner", "bar-chart", "bento-grid", "blog-card", "blur-reveal", "border-beam", "bottom-activity-strip", "bottom-bar", "breadcrumb", "button", "button-group", "calendar", "callout", "candlestick-chart", "canvas-shell", "canvas-view", "card", "card-flip", "carousel", "category-filter", "chain-of-thought", "chat-dock-section", "checkbox", "checkbox-group", "checklist", "choropleth-map", "chronological-timeline", "civilization-card", "code-block", "code-playground", "collapsible", "color-picker", "combobox", "command", "comment-pin", "comparison", "completion-dialog", "connector-edge", "content-intro", "context-lens", "context-menu", "contribution-graph", "conversation-thread", "cookie-consent", "copy-button", "countdown-timer", "credit-badge", "curriculum", "cursor", "data-list", "data-table", "date-field", "date-picker", "date-range-picker", "dialog", "display", "dock", "document-sibling-nav", "dot-pattern", "drawer", "dropdown-menu", "edge-label", "empty-state", "era-comparison", "exercise", "expandable-cards", "faq", "field", "fieldset", "file-upload", "filter-bar", "flashcard", "floating-action-button", "floating-navbar", "floating-toolbar", "flow-diagram", "follow-mode", "form", "gantt-chart", "gauge-chart", "geography-quiz-map", "glass-card", "glass-panel", "glass-progress", "globe-3d", "grid", "group-hull", "handoff-beacon", "heading", "heat-map-overlay", "heat-overlay", "historic-timeline", "historical-figure-card", "horizontal-scroll-row", "hover-card", "infinite-plane", "inline-input", "input", "input-group", "input-otp", "interactive-timeline", "item", "jarvis-dock", "kbd", "key-concept", "keyboard-shortcuts-help", "knowledge-check", "label", "lang-provider", "learning-objectives", "left-rail", "line-chart", "link", "liquid-glass", "list-box", "live-cursor", "live-feed", "magnetic", "magnetic-button", "map-2d", "map-timeline", "market-treemap", "marquee", "mdx-content", "menubar", "meteors", "meter", "metric-cluster", "metric-gauge", "mini-map-panel", "model-comparison", "model-selector", "multi-select", "multi-select-lasso", "native-select", "navbar-saas", "navigation-menu", "newsletter-signup", "number-input", "number-ticker", "object-card", "object-handle", "object-inspector", "order-book", "overview-board", "pagination", "panel", "parallel-timeline", "particles", "password-input", "phone-input", "pie-chart", "plan-badge", "playback-ghost", "policy-delivery-panel", "popover", "presence-stack", "presence-sync-indicator", "pricing-table", "primary-source-viewer", "pro-tip", "profile-section", "progress-bar", "progress-card", "progress-tracker", "progressive-blur", "prompt-input", "prompt-templates", "property-section", "prose", "qr-code", "quiz", "radar-chart", "radio-group", "range-calendar", "rating", "reasoning", "relationship-inspector", "resizable", "reveal-text", "right-dock", "role-badge", "route-map", "routing-assignment-panel", "run-timeline", "runtime-overview-panel", "sankey-chart", "scope-selector", "scramble-text", "scroll-area", "scroll-progress", "search-bar", "search-dialog", "search-field", "segmented-control", "select", "selection-halo", "selection-presence", "separator", "severity-badge", "share-dialog", "share-section", "sheet", "shimmer-button", "shimmer-text", "shine-border", "shiny-button", "sidebar", "sidebar-provider", "sidebar-toggle", "skeleton", "slider", "slideshow", "snap-guides", "sparkles", "sparkline-grid", "spinner", "spinning-text", "spotlight-card", "stat-card", "state-badge-overlay", "status-board", "status-indicator", "step-by-step", "step-navigation", "stepper", "sticky-metric", "story-map", "subscription-card", "switch", "table", "table-of-contents", "table-of-contents-panel", "tabs", "tag-group", "tags-input", "terminal", "text", "text-animate", "text-field", "text-reveal", "text-shimmer", "textarea", "theme-preset-provider", "theme-provider", "theme-switcher", "theme-toggle", "thinking-block", "thread-bubble", "threshold-ring", "ticker-tape", "tilt-card", "time-field", "time-picker", "timeline", "timeline-scrubber", "tldr-section", "toast", "toggle", "toggle-group", "toolbar", "tooltip", "top-bar", "tour", "transaction-list", "tree-view", "truncated-text", "tutorial-card", "tutorial-complete", "tutorial-filters", "tutorial-intro-content", "tutorial-mdx", "typewriter", "typography", "usage-breakdown", "video-embed", "view-switcher", "viewport-bookmarks", "wallet-card", "watchlist", "workspace-switcher", "world-breadcrumbs", "world-clock-bar", "zoom-hud" ], "component_items": [ { "name": "accordion", "type": "registry:component", "title": "Accordion", "description": "Collapsible content sections supporting single or multiple open items." }, { "name": "activity-heatmap", "type": "registry:component", "title": "Activity Heatmap", "description": "Contribution-style grid for visualizing operational activity over time." }, { "name": "activity-log", "type": "registry:component", "title": "Activity Log", "description": "Paginated activity feed for audit history and analytics changes." }, { "name": "agent-activity", "type": "registry:component", "title": "Agent Activity", "description": "Visual display of an AI agent's execution chain — steps, tools, decisions, progress." }, { "name": "ai-artifact", "type": "registry:component", "title": "AI Artifact", "description": "Rendered output area for AI-generated content with toolbar, copy/edit/download/fullscreen actions, and version chips." }, { "name": "ai-chat-input", "type": "registry:component", "title": "AI Chat Input", "description": "Prompt composer for conversational interfaces with helper text, toolbar actions, and submit states." }, { "name": "ai-message-bubble", "type": "registry:component", "title": "AI Message Bubble", "description": "Chat bubble for assistant, user, tool, and system messages using the current design system surfaces." }, { "name": "ai-sidebar", "type": "registry:component", "title": "AI Sidebar", "description": "Slide-out AI assistant panel with provider, header / content / footer slots, and a standalone trigger." }, { "name": "ai-source-citation", "type": "registry:component", "title": "AI Source Citation", "description": "Compact source reference card for AI answers with a title, origin label, and optional excerpt." }, { "name": "ai-streaming-text", "type": "registry:component", "title": "AI Streaming Text", "description": "Readable text block for partial assistant output with an optional live cursor while tokens stream in." }, { "name": "ai-tool-call-display", "type": "registry:component", "title": "AI Tool Call Display", "description": "Structured card for tool invocation traces, statuses, serialized input, and returned output." }, { "name": "alert", "type": "registry:component", "title": "Alert", "description": "Displays an alert message to the user." }, { "name": "alert-dialog", "type": "registry:component", "title": "Alert Dialog", "description": "Modal dialog for confirming destructive or important actions." }, { "name": "alert-pulse", "type": "registry:component", "title": "Alert Pulse", "description": "Pulsing ring overlay for alerting canvas objects, with severity tones." }, { "name": "anchor-port", "type": "registry:component", "title": "Anchor Port", "description": "Port marker for object inputs, outputs, and bidirectional links on the canvas." }, { "name": "animated-beam", "type": "registry:component", "title": "Animated Beam", "description": "Animated gradient beam that connects two elements with a flowing light path." }, { "name": "animated-grid-pattern", "type": "registry:component", "title": "Animated Grid Pattern", "description": "Decorative grid background with squares that fade in and out at random." }, { "name": "animated-list", "type": "registry:component", "title": "Animated List", "description": "List whose items animate in sequentially with a staggered entrance." }, { "name": "animated-tabs", "type": "registry:component", "title": "Animated Tabs", "description": "Tabs with a sliding indicator that animates to the active item." }, { "name": "animated-testimonials", "type": "registry:component", "title": "Animated Testimonials", "description": "Testimonial carousel with animated transitions between quotes." }, { "name": "animated-text", "type": "registry:component", "title": "Animated Text", "description": "Staggered text reveal for headings, pull quotes, and short supporting copy." }, { "name": "animated-tooltip", "type": "registry:component", "title": "Animated Tooltip", "description": "Tooltip that animates in on hover or focus with a scale-and-fade." }, { "name": "annotation", "type": "registry:component", "title": "Annotation", "description": "Inline highlight with an attached contextual note." }, { "name": "area-chart", "type": "registry:component", "title": "Area Chart", "description": "Renders an area chart for data visualization." }, { "name": "aspect-ratio", "type": "registry:component", "title": "Aspect Ratio", "description": "Constrains content to a specified aspect ratio." }, { "name": "auto-reload", "type": "registry:component", "title": "Auto Reload", "description": "Toggle + collapsible threshold/amount form for automatic credit reloading with locale-aware currency." }, { "name": "avatar", "type": "registry:component", "title": "Avatar", "description": "Displays a user avatar image with fallback initials." }, { "name": "avatar-group", "type": "registry:component", "title": "Avatar Group", "description": "Overlapping avatar stack for participants, assignees, and collaborative contexts." }, { "name": "badge", "type": "registry:component", "title": "Badge", "description": "Small status label with variant styles." }, { "name": "banner", "type": "registry:component", "title": "Banner", "description": "Full-width announcement bar with variants, dismissal, and an optional action slot." }, { "name": "bar-chart", "type": "registry:component", "title": "Bar Chart", "description": "Renders a bar chart for data visualization." }, { "name": "bento-grid", "type": "registry:component", "title": "Bento Grid", "description": "Responsive bento-style grid layout with feature cards." }, { "name": "blog-card", "type": "registry:component", "title": "Blog Card", "description": "Card layout for displaying blog post previews." }, { "name": "blur-reveal", "type": "registry:component", "title": "Blur Reveal", "description": "Reveals content with a blur-to-sharp transition when it scrolls into view." }, { "name": "border-beam", "type": "registry:component", "title": "Border Beam", "description": "Animated accent beam that travels around the border of a highlighted surface." }, { "name": "bottom-activity-strip", "type": "registry:component", "title": "Bottom Activity Strip", "description": "Slim horizontally-scrolling row of recent canvas events for low-noise live activity." }, { "name": "bottom-bar", "type": "registry:component", "title": "Bottom Bar", "description": "Slim chrome strip pinned to the bottom of a canvas shell as a calm host for activity strips, status pills, and ambient indicators." }, { "name": "breadcrumb", "type": "registry:component", "title": "Breadcrumb", "description": "Navigation breadcrumb trail showing the current page hierarchy." }, { "name": "button", "type": "registry:component", "title": "Button", "description": "Interactive button with multiple variants and sizes." }, { "name": "button-group", "type": "registry:component", "title": "Button Group", "description": "Visually connected group of buttons that share borders." }, { "name": "calendar", "type": "registry:component", "title": "Calendar", "description": "Date picker calendar for selecting dates." }, { "name": "callout", "type": "registry:component", "title": "Callout", "description": "Highlighted content block with variant styles for info, warning, danger, and more." }, { "name": "candlestick-chart", "type": "registry:component", "title": "Candlestick Chart", "description": "OHLC financial chart for session-by-session price action." }, { "name": "canvas-shell", "type": "registry:component", "title": "Canvas Shell", "description": "Layout shell for canvas workspaces with top bar, left rail, right dock, and bottom slot regions." }, { "name": "canvas-view", "type": "registry:component", "title": "Canvas View", "description": "Interactive pan-and-zoom viewport for spatial surfaces with keyboard, wheel, and overlay support." }, { "name": "card", "type": "registry:component", "title": "Card", "description": "Container with header, content, and footer sections." }, { "name": "card-flip", "type": "registry:component", "title": "Card Flip", "description": "Card that flips in 3D between a front and back face." }, { "name": "carousel", "type": "registry:component", "title": "Carousel", "description": "Scrollable content carousel with navigation controls." }, { "name": "category-filter", "type": "registry:component", "title": "Category Filter", "description": "Filterable category selection for content lists." }, { "name": "chain-of-thought", "type": "registry:component", "title": "Chain of Thought", "description": "Ordered, status-aware visualization of a model's chain of thought with per-step state." }, { "name": "chat-dock-section", "type": "registry:component", "title": "Chat Dock Section", "description": "Sidebar section that hosts a compact, scrollable chat thread alongside a spatial workspace — slotted into a dock or rail to keep an AI assistant in view." }, { "name": "checkbox", "type": "registry:component", "title": "Checkbox", "description": "Toggle control for boolean input." }, { "name": "checkbox-group", "type": "registry:component", "title": "Checkbox Group", "description": "Group of related checkboxes backed by an array of selected values." }, { "name": "checklist", "type": "registry:component", "title": "Checklist", "description": "Interactive checklist with progress tracking and toggleable items." }, { "name": "choropleth-map", "type": "registry:component", "title": "Choropleth Map", "description": "Standalone SVG choropleth — region polygons shaded by data value with tooltip, legend, and accessible data-table fallback." }, { "name": "chronological-timeline", "type": "registry:component", "title": "Chronological Timeline", "description": "Media-rich, scroll-driven chronological timeline with alternating cards, image/video/audio media, and a progress strip." }, { "name": "civilization-card", "type": "registry:component", "title": "Civilization Card", "description": "Civilization overview with hero band, BCE/CE era timeline, key stats, achievements, and notable leaders." }, { "name": "code-block", "type": "registry:component", "title": "Code Block", "description": "Syntax-highlighted code display with copy support." }, { "name": "code-playground", "type": "registry:component", "title": "Code Playground", "description": "Interactive code editor with live preview." }, { "name": "collapsible", "type": "registry:component", "title": "Collapsible", "description": "Expandable and collapsible content section." }, { "name": "color-picker", "type": "registry:component", "title": "Color Picker", "description": "Popover color picker with swatches, a hue slider, and a hex input." }, { "name": "combobox", "type": "registry:component", "title": "Combobox", "description": "Searchable select input for choosing from a list of options." }, { "name": "command", "type": "registry:component", "title": "Command", "description": "Command palette with search, groups, and keyboard navigation." }, { "name": "comment-pin", "type": "registry:component", "title": "Comment Pin", "description": "Anchored discussion pin rendered at canvas coordinates with author + unread badge." }, { "name": "comparison", "type": "registry:component", "title": "Comparison", "description": "Side-by-side comparison layout for content or features." }, { "name": "completion-dialog", "type": "registry:component", "title": "Completion Dialog", "description": "Dialog displayed upon completing a task or workflow." }, { "name": "connector-edge", "type": "registry:component", "title": "Connector Edge", "description": "Curved edge between canvas objects with optional inline label state." }, { "name": "content-intro", "type": "registry:component", "title": "Content Intro", "description": "Introductory section for content pages with title and description." }, { "name": "context-lens", "type": "registry:component", "title": "Context Lens", "description": "Vignette overlay that dims the canvas outside a circular focus region." }, { "name": "context-menu", "type": "registry:component", "title": "Context Menu", "description": "Right-click context menu with items and submenus." }, { "name": "contribution-graph", "type": "registry:component", "title": "Contribution Graph", "description": "GitHub-style heatmap of daily activity over time." }, { "name": "conversation-thread", "type": "registry:component", "title": "Conversation Thread", "description": "Compound component family for AI chat UIs that orchestrates auto-scroll, streaming indicators, empty states, and message rendering." }, { "name": "cookie-consent", "type": "registry:component", "title": "Cookie Consent", "description": "Dismissible cookie-consent banner with positional variants and accept / reject actions for privacy compliance." }, { "name": "copy-button", "type": "registry:component", "title": "Copy Button", "description": "Click-to-copy utility with confirmation feedback and a useCopyToClipboard hook." }, { "name": "countdown-timer", "type": "registry:component", "title": "Countdown Timer", "description": "Countdown and SLA timer for deadlines, escalations, and response windows." }, { "name": "credit-badge", "type": "registry:component", "title": "Credit Badge", "description": "Balance status pill for credits, wallet states, and billing health." }, { "name": "curriculum", "type": "registry:component", "title": "Curriculum", "description": "Course-layout container for a sequence of lessons or modules with title, progress, optional intro, and a stack of lesson rows." }, { "name": "cursor", "type": "registry:component", "title": "Cursor", "description": "Custom cursor follower that trails the pointer." }, { "name": "data-list", "type": "registry:component", "title": "Data List", "description": "Semantic key-value metadata layout for displaying labels with values." }, { "name": "data-table", "type": "registry:component", "title": "Data Table", "description": "Enhanced data table with sorting, filtering, selection, and pagination controls." }, { "name": "date-field", "type": "registry:component", "title": "Date Field", "description": "Native date input styled to match the design system." }, { "name": "date-picker", "type": "registry:component", "title": "Date Picker", "description": "Single-date picker built with the shared calendar and popover primitives." }, { "name": "date-range-picker", "type": "registry:component", "title": "Date Range Picker", "description": "Popover calendar for selecting a start and end date." }, { "name": "dialog", "type": "registry:component", "title": "Dialog", "description": "Modal dialog overlay for focused content and actions." }, { "name": "display", "type": "registry:component", "title": "Display", "description": "Oversized hero/display text driven by the display tokens, with an optional reduced-motion-safe reveal." }, { "name": "dock", "type": "registry:component", "title": "Dock", "description": "macOS-style dock whose icons magnify near the pointer." }, { "name": "document-sibling-nav", "type": "registry:component", "title": "Document Sibling Nav", "description": "Newer/older navigator: links to the previous and next item in an ordered series." }, { "name": "dot-pattern", "type": "registry:component", "title": "Dot Pattern", "description": "Decorative dotted background pattern built from token colors." }, { "name": "drawer", "type": "registry:component", "title": "Drawer", "description": "Slide-out panel anchored to the screen edge." }, { "name": "dropdown-menu", "type": "registry:component", "title": "Dropdown Menu", "description": "Accessible dropdown menu with items, checkboxes, radio groups, and submenus." }, { "name": "edge-label", "type": "registry:component", "title": "Edge Label", "description": "Inline edge label for relationship semantics such as streams, handoffs, or policies." }, { "name": "empty-state", "type": "registry:component", "title": "Empty State", "description": "Centered placeholder for empty lists, tables, and search results with sm/md/lg sizes." }, { "name": "era-comparison", "type": "registry:component", "title": "Era Comparison", "description": "Side-by-side comparison of historical eras with domain rows, color-themed columns, highlights, and figure chips." }, { "name": "exercise", "type": "registry:component", "title": "Exercise", "description": "Interactive exercise block for learning content." }, { "name": "expandable-cards", "type": "registry:component", "title": "Expandable Cards", "description": "Cards that expand on click to reveal additional content." }, { "name": "faq", "type": "registry:component", "title": "FAQ", "description": "Frequently asked questions section with expandable answers." }, { "name": "field", "type": "registry:component", "title": "Field", "description": "Layout wrapper pairing a label, control, description, and error message." }, { "name": "fieldset", "type": "registry:component", "title": "Fieldset", "description": "Groups related fields under a shared legend." }, { "name": "file-upload", "type": "registry:component", "title": "File Upload", "description": "Dropzone-style file picker with previews for selected files." }, { "name": "filter-bar", "type": "registry:component", "title": "Filter Bar", "description": "Horizontal bar with filter controls for content lists." }, { "name": "flashcard", "type": "registry:component", "title": "Flashcard", "description": "Study card for active recall with prompt and answer states." }, { "name": "floating-action-button", "type": "registry:component", "title": "Floating Action Button", "description": "Fixed-position action button for primary actions." }, { "name": "floating-navbar", "type": "registry:component", "title": "Floating Navbar", "description": "Floating navigation bar that hides on scroll down and reveals on scroll up." }, { "name": "floating-toolbar", "type": "registry:component", "title": "Floating Toolbar", "description": "Compact action bar that floats above a selection — primary / ghost / destructive variants." }, { "name": "flow-diagram", "type": "registry:component", "title": "Flow Diagram", "description": "Interactive flow diagram with nodes, edges, and controls." }, { "name": "follow-mode", "type": "registry:component", "title": "Follow Mode", "description": "Follow-mode chrome — outlines a region with a participant's color and surfaces a stop-following chip." }, { "name": "form", "type": "registry:component", "title": "Form", "description": "Validation wrapper for composing labels, descriptions, controls, and messages." }, { "name": "gantt-chart", "type": "registry:component", "title": "Gantt Chart", "description": "Project timeline with task bars, progress overlays, milestones, and a today indicator across day/week/month/quarter scales." }, { "name": "gauge-chart", "type": "registry:component", "title": "Gauge Chart", "description": "Semicircular gauge for a single value within a range." }, { "name": "geography-quiz-map", "type": "registry:component", "title": "Geography Quiz Map", "description": "Interactive identify-mode map quiz — click the correct region per prompt with visual feedback, score, and results panel." }, { "name": "glass-card", "type": "registry:component", "title": "Glass Card", "description": "Frosted-glass card surface with backdrop blur and a translucent background." }, { "name": "glass-panel", "type": "registry:component", "title": "Glass Panel", "description": "Frosted-glass surface for floating chrome above a canvas — dock panels, hovering toolbars, and transient overlays — with a translucent background and soft bord…" }, { "name": "glass-progress", "type": "registry:component", "title": "Glass Progress", "description": "Glass-styled progress bar with a translucent track and token-colored fill." }, { "name": "globe-3d", "type": "registry:component", "title": "Globe 3D", "description": "Standalone SVG pseudo-3D globe — orthographic projection with auto-rotation, drag interaction, lat/lng markers, and great-circle arcs." }, { "name": "grid", "type": "registry:component", "title": "Grid", "description": "Responsive CSS grid layout primitive with breakpoint column and gap props." }, { "name": "group-hull", "type": "registry:component", "title": "Group Hull", "description": "Durable boundary wrapper for related runtime objects sharing context or ownership." }, { "name": "handoff-beacon", "type": "registry:component", "title": "Handoff Beacon", "description": "Attention-routing beacon with pulsing ring and optional source / message card for live canvases." }, { "name": "heading", "type": "registry:component", "title": "Heading", "description": "Semantic heading (h1–h6) with theme-overridable font-family, weight, and size design tokens." }, { "name": "heat-map-overlay", "type": "registry:component", "title": "Heat Map Overlay", "description": "Standalone SVG geographic heat map — radial-gradient blobs with configurable radius, blur, gradient, and opacity." }, { "name": "heat-overlay", "type": "registry:component", "title": "Heat Overlay", "description": "Heatmap-style overlay drawing soft radial blobs for canvas activity samples." }, { "name": "historic-timeline", "type": "registry:component", "title": "Historic Timeline", "description": "Specialized timeline for historical events spanning centuries or millennia, with era bands, period bars, and BCE/CE point markers." }, { "name": "historical-figure-card", "type": "registry:component", "title": "Historical Figure Card", "description": "Profile card with portrait, lifespan timeline, fields, works, quote, connections, and an expandable biography section." }, { "name": "horizontal-scroll-row", "type": "registry:component", "title": "Horizontal Scroll Row", "description": "Horizontal scroll container with snap scrolling, chevron navigation, and hidden scrollbar." }, { "name": "hover-card", "type": "registry:component", "title": "Hover Card", "description": "Card that appears on hover for previewing content." }, { "name": "infinite-plane", "type": "registry:component", "title": "Infinite Plane", "description": "Tiled pannable backdrop for the canvas with dot or grid pattern that drifts with the viewport." }, { "name": "inline-input", "type": "registry:component", "title": "Inline Input", "description": "Inline text input with keyboard commit and cancel support." }, { "name": "input", "type": "registry:component", "title": "Input", "description": "Text input field for forms." }, { "name": "input-group", "type": "registry:component", "title": "Input Group", "description": "Groups an input with leading or trailing addons." }, { "name": "input-otp", "type": "registry:component", "title": "Input OTP", "description": "One-time password input with segmented fields." }, { "name": "interactive-timeline", "type": "registry:component", "title": "Interactive Timeline", "description": "Zoomable, pannable, multi-track timeline with category filter, today marker, and click-to-select events." }, { "name": "item", "type": "registry:component", "title": "Item", "description": "Flexible row layout with leading media, content, and trailing actions." }, { "name": "jarvis-dock", "type": "registry:component", "title": "Jarvis Dock", "description": "Floating bottom dock with quick-action buttons + a command-palette trigger." }, { "name": "kbd", "type": "registry:component", "title": "Kbd", "description": "Keyboard key indicator with platform-aware modifier expansion via the shortcut prop." }, { "name": "key-concept", "type": "registry:component", "title": "Key Concept", "description": "Highlighted definition block for key terms and a glossary list." }, { "name": "keyboard-shortcuts-help", "type": "registry:component", "title": "Keyboard Shortcuts Help", "description": "Displays available keyboard shortcuts to the user." }, { "name": "knowledge-check", "type": "registry:component", "title": "Knowledge Check", "description": "Inline knowledge check with multiple-choice / true-false / fill-blank questions, per-answer feedback, and a final score summary." }, { "name": "label", "type": "registry:component", "title": "Label", "description": "Accessible form label that associates descriptive text with an input control." }, { "name": "lang-provider", "type": "registry:component", "title": "Lang Provider", "description": "Context provider for language and internationalization." }, { "name": "learning-objectives", "type": "registry:component", "title": "Learning Objectives", "description": "Lists learning goals for educational content." }, { "name": "left-rail", "type": "registry:component", "title": "Left Rail", "description": "Compact vertical rail for canvas modes, tool actions, and secondary navigation controls." }, { "name": "line-chart", "type": "registry:component", "title": "Line Chart", "description": "Renders a line chart for data visualization." }, { "name": "link", "type": "registry:component", "title": "Link", "description": "Styled anchor with emphasis variants and an external-link affordance." }, { "name": "liquid-glass", "type": "registry:component", "title": "Liquid Glass", "description": "Glass surface with an animated liquid gradient sheen." }, { "name": "list-box", "type": "registry:component", "title": "List Box", "description": "Accessible single- or multi-select list of options." }, { "name": "live-cursor", "type": "registry:component", "title": "Live Cursor", "description": "Remote user's cursor rendered at canvas coordinates with name + status chip." }, { "name": "live-feed", "type": "registry:component", "title": "Live Feed", "description": "Rolling activity stream for surfacing incidents, deploys, and operational signals in real time." }, { "name": "magnetic", "type": "registry:component", "title": "Magnetic", "description": "Wrapper that pulls its content toward the pointer for a magnetic effect." }, { "name": "magnetic-button", "type": "registry:component", "title": "Magnetic Button", "description": "Button that drifts toward the pointer for a magnetic hover effect." }, { "name": "map-2d", "type": "registry:component", "title": "Map 2D", "description": "Lightweight 2D map primitive — SVG canvas with equirectangular projection, markers, popups, GeoJSON polygon layers, zoom controls, and an optional backdrop ima…" }, { "name": "map-timeline", "type": "registry:component", "title": "Map Timeline", "description": "Standalone SVG map + time slider — era polygons and year-pinned events appear as the user scrubs the timeline." }, { "name": "market-treemap", "type": "registry:component", "title": "Market Treemap", "description": "Sector-style market heatmap using weighted tiles and signed performance colors." }, { "name": "marquee", "type": "registry:component", "title": "Marquee", "description": "Continuously scrolling content lane for badges, logos, and status chips." }, { "name": "mdx-content", "type": "registry:component", "title": "MDX Content", "description": "Renders MDX content with component mapping." }, { "name": "menubar", "type": "registry:component", "title": "Menubar", "description": "Horizontal menu bar with dropdown menus." }, { "name": "meteors", "type": "registry:component", "title": "Meteors", "description": "Decorative meteor shower of streaks falling across the background." }, { "name": "meter", "type": "registry:component", "title": "Meter", "description": "Static measurement bar (role=meter) for a known range, with optional segments." }, { "name": "metric-cluster", "type": "registry:component", "title": "Metric Cluster", "description": "Compact stack of related metrics pinned to a canvas object's corner." }, { "name": "metric-gauge", "type": "registry:component", "title": "Metric Gauge", "description": "Real-time arc and dial display for monitored percentages and utilization." }, { "name": "mini-map-panel", "type": "registry:component", "title": "Mini Map Panel", "description": "Viewport overview panel showing canvas bounds, markers, and the current zoom window." }, { "name": "model-comparison", "type": "registry:component", "title": "Model Comparison", "description": "Side-by-side comparison of AI model responses with optional blind mode, metadata stats, and a vote bar." }, { "name": "model-selector", "type": "registry:component", "title": "Model Selector", "description": "Dropdown selector for choosing AI models." }, { "name": "multi-select", "type": "registry:component", "title": "Multi Select", "description": "Popover-based multi-selection input with selected-value badges and optional search." }, { "name": "multi-select-lasso", "type": "registry:component", "title": "Multi Select Lasso", "description": "Selection rectangle overlay for canvas multi-select gestures." }, { "name": "native-select", "type": "registry:component", "title": "Native Select", "description": "Styled wrapper around the native select element." }, { "name": "navbar-saas", "type": "registry:component", "title": "Navbar SaaS", "description": "SaaS-style navigation bar with branding and links." }, { "name": "navigation-menu", "type": "registry:component", "title": "Navigation Menu", "description": "Accessible navigation menu with links and sub-navigation." }, { "name": "newsletter-signup", "type": "registry:component", "title": "Newsletter Signup", "description": "Email-capture form with idle/sending/sent/error state machine, custom validators, and overridable labels." }, { "name": "number-input", "type": "registry:component", "title": "Number Input", "description": "Numeric input with increment and decrement controls." }, { "name": "number-ticker", "type": "registry:component", "title": "Number Ticker", "description": "Animated number transitions for stats, KPIs, and compact numeric callouts." }, { "name": "object-card", "type": "registry:component", "title": "Object Card", "description": "Durable object view for agents, runs, artifacts, and tasks inside the canvas." }, { "name": "object-handle", "type": "registry:component", "title": "Object Handle", "description": "Drag/reposition affordance for spatial objects that need a calm grab target." }, { "name": "object-inspector", "type": "registry:component", "title": "Object Inspector", "description": "Right-dock detail header — kind chip, status dot, title/subtitle, with property-section slots." }, { "name": "order-book", "type": "registry:component", "title": "Order Book", "description": "Level II bid/ask depth ladder with cumulative size bars and spread readout." }, { "name": "overview-board", "type": "registry:component", "title": "Overview Board", "description": "Grid of overview cards for at-a-glance dashboards — a row of headline metrics with consistent spacing and tone." }, { "name": "pagination", "type": "registry:component", "title": "Pagination", "description": "Page navigation controls with previous, next, and page links." }, { "name": "panel", "type": "registry:component", "title": "Panel", "description": "Bordered, titled content surface with header, body, and footer slots." }, { "name": "parallel-timeline", "type": "registry:component", "title": "Parallel Timeline", "description": "Multi-track timeline with shared time axis, BCE/CE event markers, and optional era bands for comparative history." }, { "name": "particles", "type": "registry:component", "title": "Particles", "description": "Floating particle field that drifts gently in the background." }, { "name": "password-input", "type": "registry:component", "title": "Password Input", "description": "Password field with a built-in visibility toggle." }, { "name": "phone-input", "type": "registry:component", "title": "Phone Input", "description": "Phone number input with a country dialing-code selector." }, { "name": "pie-chart", "type": "registry:component", "title": "Pie Chart", "description": "Proportional pie or donut chart for part-to-whole comparisons." }, { "name": "plan-badge", "type": "registry:component", "title": "Plan Badge", "description": "Subscription tier indicator for pricing, billing, and account summaries." }, { "name": "playback-ghost", "type": "registry:component", "title": "Playback Ghost", "description": "Translucent overlay marking where a canvas object was at a previous timestamp during playback." }, { "name": "policy-delivery-panel", "type": "registry:component", "title": "Policy Delivery Panel", "description": "Right-dock panel listing policies / guardrails active for the route or run." }, { "name": "popover", "type": "registry:component", "title": "Popover", "description": "Floating content panel anchored to a trigger element." }, { "name": "presence-stack", "type": "registry:component", "title": "Presence Stack", "description": "Overlapping live-presence avatars with status dots and a sane overflow chip." }, { "name": "presence-sync-indicator", "type": "registry:component", "title": "Presence Sync Indicator", "description": "Compact pill that surfaces live connection + sync health for a collaborative canvas." }, { "name": "pricing-table", "type": "registry:component", "title": "Pricing Table", "description": "Plan comparison with feature checklist, tier highlighting, CTA, and an optional monthly/annual toggle." }, { "name": "primary-source-viewer", "type": "registry:component", "title": "Primary Source Viewer", "description": "Document viewer for historical primary sources with zoom, rotate, region annotations, transcription panel, and metadata footer." }, { "name": "pro-tip", "type": "registry:component", "title": "Pro Tip", "description": "Highlighted tip block with variants for tips, best practices, gotchas, and more." }, { "name": "profile-section", "type": "registry:component", "title": "Profile Section", "description": "User profile display section with avatar and details." }, { "name": "progress-bar", "type": "registry:component", "title": "Progress Bar", "description": "Visual progress indicator with labels and completion state." }, { "name": "progress-card", "type": "registry:component", "title": "Progress Card", "description": "Card displaying progress metrics and status." }, { "name": "progress-tracker", "type": "registry:component", "title": "Progress Tracker", "description": "Curriculum-level learning dashboard for modules, lessons, exercises, streaks, and earned skills." }, { "name": "progressive-blur", "type": "registry:component", "title": "Progressive Blur", "description": "Progressive blur overlay that fades focus toward one edge." }, { "name": "prompt-input", "type": "registry:component", "title": "Prompt Input", "description": "Auto-growing prompt textarea with a submit affordance and optional toolbar slot." }, { "name": "prompt-templates", "type": "registry:component", "title": "Prompt Templates", "description": "Searchable prompt template gallery with category filter, variable fill-in form, and onSelect." }, { "name": "property-section", "type": "registry:component", "title": "Property Section", "description": "Compact key/value grid for inspector panels — labels, sublabels, optional collapse." }, { "name": "prose", "type": "registry:component", "title": "Prose", "description": "Long-form content wrapper that styles raw HTML descendants with the token-driven type scale." }, { "name": "qr-code", "type": "registry:component", "title": "QR Code", "description": "Renders a QR code from a string value as a theme-aware SVG." }, { "name": "quiz", "type": "registry:component", "title": "Quiz", "description": "Interactive multiple-choice quiz with hints, explanations, and scoring." }, { "name": "radar-chart", "type": "registry:component", "title": "Radar Chart", "description": "Spider chart comparing several metrics on shared axes." }, { "name": "radio-group", "type": "registry:component", "title": "Radio Group", "description": "Group of radio buttons for single-selection input." }, { "name": "range-calendar", "type": "registry:component", "title": "Range Calendar", "description": "Calendar that selects a start and end date as a range." }, { "name": "rating", "type": "registry:component", "title": "Rating", "description": "Inline star rating for lightweight learner feedback." }, { "name": "reasoning", "type": "registry:component", "title": "Reasoning", "description": "Collapsible AI reasoning trace with streaming support and ordered or free-form steps." }, { "name": "relationship-inspector", "type": "registry:component", "title": "Relationship Inspector", "description": "Right-dock panel listing inbound + outbound edges of the focused canvas object." }, { "name": "resizable", "type": "registry:component", "title": "Resizable", "description": "Resizable panel layout with draggable handles." }, { "name": "reveal-text", "type": "registry:component", "title": "Reveal Text", "description": "Reveals text with a directional slide-and-fade when it enters the viewport." }, { "name": "right-dock", "type": "registry:component", "title": "Right Dock", "description": "Context dock for inspectors, summaries, and secondary canvas panels." }, { "name": "role-badge", "type": "registry:component", "title": "Role Badge", "description": "Account role indicator for owners, admins, members, and billing contacts." }, { "name": "route-map", "type": "registry:component", "title": "Route Map", "description": "Standalone SVG map with animated route paths, waypoints, and progress indicator. For trade routes, voyages, migrations, delivery tracking." }, { "name": "routing-assignment-panel", "type": "registry:component", "title": "Routing Assignment Panel", "description": "Right-dock panel listing the agent slots an active route dispatches to." }, { "name": "run-timeline", "type": "registry:component", "title": "Run Timeline", "description": "Multi-lane execution timeline showing run phases over time, with optional cursor." }, { "name": "runtime-overview-panel", "type": "registry:component", "title": "Runtime Overview Panel", "description": "Top-of-dock summary tile grid for runtime health when no canvas object is selected." }, { "name": "sankey-chart", "type": "registry:component", "title": "Sankey Chart", "description": "Flow diagram showing weighted links between nodes." }, { "name": "scope-selector", "type": "registry:component", "title": "Scope Selector", "description": "Multi-level scope picker for nested environments, teams, and targets." }, { "name": "scramble-text", "type": "registry:component", "title": "Scramble Text", "description": "Scrambles characters then resolves them into the final text." }, { "name": "scroll-area", "type": "registry:component", "title": "Scroll Area", "description": "Custom scrollable area with styled scrollbars." }, { "name": "scroll-progress", "type": "registry:component", "title": "Scroll Progress", "description": "Fixed bar that tracks reading progress down the page." }, { "name": "search-bar", "type": "registry:component", "title": "Search Bar", "description": "Text search input with icon and clear functionality." }, { "name": "search-dialog", "type": "registry:component", "title": "Search Dialog", "description": "Full-screen search dialog with keyboard navigation." }, { "name": "search-field", "type": "registry:component", "title": "Search Field", "description": "Search input with a leading icon and a clear button." }, { "name": "segmented-control", "type": "registry:component", "title": "Segmented Control", "description": "Single-choice segmented selector for switching modes, views, or filters." }, { "name": "select", "type": "registry:component", "title": "Select", "description": "Dropdown select input for choosing from a list of options." }, { "name": "selection-halo", "type": "registry:component", "title": "Selection Halo", "description": "Local-user selection halo with corner handles + label slot for spatial canvases." }, { "name": "selection-presence", "type": "registry:component", "title": "Selection Presence", "description": "Dashed-border overlay marking what another user has selected on the canvas." }, { "name": "separator", "type": "registry:component", "title": "Separator", "description": "Visual divider between content sections." }, { "name": "severity-badge", "type": "registry:component", "title": "Severity Badge", "description": "Operational severity label with tone variants and optional pulse for critical incidents." }, { "name": "share-dialog", "type": "registry:component", "title": "Share Dialog", "description": "Modal dialog for sharing a page across social platforms with a copy-link action and overridable labels." }, { "name": "share-section", "type": "registry:component", "title": "Share Section", "description": "Social sharing buttons and link copy section." }, { "name": "sheet", "type": "registry:component", "title": "Sheet", "description": "Slide-over panel from the edge of the screen." }, { "name": "shimmer-button", "type": "registry:component", "title": "Shimmer Button", "description": "Button with a light sheen that sweeps across its surface." }, { "name": "shimmer-text", "type": "registry:component", "title": "Shimmer Text", "description": "Text with a bright light band that sweeps across it." }, { "name": "shine-border", "type": "registry:component", "title": "Shine Border", "description": "Wrapper that draws an animated gradient border around its content." }, { "name": "shiny-button", "type": "registry:component", "title": "Shiny Button", "description": "Button with a glossy gradient sheen that sweeps on a loop." }, { "name": "sidebar", "type": "registry:component", "title": "Sidebar", "description": "Collapsible sidebar navigation layout." }, { "name": "sidebar-provider", "type": "registry:component", "title": "Sidebar Provider", "description": "Context provider for managing sidebar open/close state." }, { "name": "sidebar-toggle", "type": "registry:component", "title": "Sidebar Toggle", "description": "Responsive toggle button for opening and closing the sidebar." }, { "name": "skeleton", "type": "registry:component", "title": "Skeleton", "description": "Placeholder loading animation for content." }, { "name": "slider", "type": "registry:component", "title": "Slider", "description": "Range slider input for selecting numeric values." }, { "name": "slideshow", "type": "registry:component", "title": "Slideshow", "description": "Step-through slideshow for presenting content sequentially." }, { "name": "snap-guides", "type": "registry:component", "title": "Snap Guides", "description": "Alignment guide overlay — dashed vertical and horizontal lines that surface during a drag." }, { "name": "sparkles", "type": "registry:component", "title": "Sparkles", "description": "Decorative twinkling sparkles scattered behind content." }, { "name": "sparkline-grid", "type": "registry:component", "title": "Sparkline Grid", "description": "KPI grid of labeled value tiles each paired with a compact sparkline trend." }, { "name": "spinner", "type": "registry:component", "title": "Spinner", "description": "Animated loading spinner indicator." }, { "name": "spinning-text", "type": "registry:component", "title": "Spinning Text", "description": "Text laid out in a circle that rotates continuously." }, { "name": "spotlight-card", "type": "registry:component", "title": "Spotlight Card", "description": "Card with a radial spotlight that follows the pointer." }, { "name": "stat-card", "type": "registry:component", "title": "Stat Card", "description": "Headline KPI card for metrics, trends, and supporting context." }, { "name": "state-badge-overlay", "type": "registry:component", "title": "State Badge Overlay", "description": "State chip pinned to a canvas object's corner — idle, queued, running, complete, failed, stopped." } ], "component_count": 313, "components_truncated": false, "component_types": { "registry:component": 313 }, "logo": "VLLNT", "preview_image": "https://ui.vllnt.com/api/og?title=VLLNT+UI+%E2%80%94+UI+components+%26+design+system+for+AI+agents&type=home&description=Open-source+React+components+for+building+AI+apps%3A+chat%2C+streaming+text%2C+tool+calls%2C+citations%2C+agent+activity%2C+and+artifacts.+313+accessible+components%2C+readable+by+AI+agents+via+llms.txt+%2B+JSON.+Install+with+the+shadcn+CLI.+v0.3.0%2C+MIT.", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [], "featured": false }, { "number": 479, "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-10-03T22:00:13Z", "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": 480, "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": 4, "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": 481, "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": 482, "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": 510, "last_commit": "2026-10-01T07:24:39Z", "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", "datatable-14", "datatable-15", "datatable-16", "datatable-17", "datatable-18", "datatable-19", "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", "ai-chat-06", "user-profile-01", "user-profile-02", "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" ], "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": "datatable-14", "type": "registry:block", "title": "Datatable 14 - Ticket Queue Table", "description": "A support ticket queue table with search, status filtering, drag-and-drop column reordering, and pagination. Useful for support inboxes, ticketing systems, and…" }, { "name": "datatable-15", "type": "registry:block", "title": "Datatable 15 - Task Manager Table", "description": "A grouped task table with collapsible status sections, drag-and-drop between groups, an add task dialog, and filters. Useful for task trackers and project mana…" }, { "name": "datatable-16", "type": "registry:block", "title": "Datatable 16 - Master Detail Table", "description": "A team directory table with live search and department tabs. Clicking a row opens a side sheet with the full profile. Useful for HR, CRM, and team dashboards." }, { "name": "datatable-17", "type": "registry:block", "title": "Datatable 17 - Column Actions Table", "description": "A customer table with a dropdown on every column title to sort, pin, and move columns, plus a Columns menu to show or hide them. Useful for admin tables users …" }, { "name": "datatable-18", "type": "registry:block", "title": "Datatable 18 - Hover Preview Appointments Table", "description": "A clinic appointments table with search, an add appointment dialog, row actions, and a cancel confirmation. Hovering a row opens a preview card with the visit …" }, { "name": "datatable-19", "type": "registry:block", "title": "Datatable 19 - Tree Table", "description": "A tree table with nested programs, courses, and classes, status and completion filters, and totals rolled up to every parent. Useful for school dashboards, org…" }, { "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": "ai-chat-06", "type": "registry:block", "title": "AI Chat 06 - Chat Console", "description": "A new-thread landing screen with a mode switcher, suggestion list, a recent-threads history popover, and a full message-thread chat view with a composer that h…" }, { "name": "user-profile-01", "type": "registry:block", "title": "User Profile 01 - Access & Security", "description": "A member profile panel with tabs for Access, Authentication, Sessions, Activity, and Danger zone, including role/team pickers, permission badges, active sessio…" }, { "name": "user-profile-02", "type": "registry:block", "title": "User Profile 02- Invitations", "description": "An invitations manager with search, status filtering, and pagination, built as grouped rows instead of a data table. Each invite shows role, inviter, sent date…" }, { "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" } ], "component_count": 649, "components_truncated": true, "component_types": { "registry:block": 209, "registry:component": 440 }, "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": 483, "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-10-08T01:05:55Z", "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": 484, "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": 43, "last_commit": "2026-10-20T23:51:11Z", "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": 485, "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": 13, "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": 486, "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": 30, "last_commit": "2026-10-11T18:56:17Z", "archived": false, "license": "MIT", "open_issues": 11, "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": 487, "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", "github": "https://github.com/ai2design/ai2-registry", "components_github": "https://github.com/ai2design/ai2-registry/tree/main/registry", "github_default_branch": "main", "github_stars": 2, "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": 488, "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": 489, "name": "@atroui", "category": "Animated components", "tags": [ "animation", "auth", "blocks", "buttons", "cards", "dashboard", "forms", "icons", "loaders", "marketing", "media", "navigation", "overlays", "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-10-25T10:55:39Z", "archived": false, "license": "MIT", "open_issues": 1, "registry_template": "https://www.atroui.com/r/{name}.json", "registry_index": "https://www.atroui.com/r/registry.json", "components": [ "utils", "motion", "brand", "project-brief", "button", "theme-toggle", "adaptive-theme", "theme-adapt", "card", "textarea", "checkbox", "checkbox-group", "radio", "accordion", "collapsible", "combobox", "autocomplete", "drawer", "form-select", "dialog", "alert-dialog", "menu", "context-menu", "navigation-menu", "menubar", "popover", "tooltip", "preview-card", "scroll-area", "separator", "field", "input", "number-field", "otp-field", "form", "fieldset", "switch", "toast", "progress", "slider", "meter", "avatar", "tabs", "toggle", "toggle-group", "toolbar", "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", "feature-bento", "testimonials-stack", "stats-band", "cta-band", "pricing-tiers", "logo-marquee", "auth-split", "saas-starter", "contextual-cta", "exit-intent-popup", "site-footer", "faq", "waitlist-form", "newsletter-form", "calendly-embed", "made-with-embed", "theme-provider", "timeline-animation", "in-view", "text-morph", "copy-button", "label-roll", "line-reveal", "word-reveal-scroll", "magnetic", "tilt", "spotlight", "animate-number", "transition-panel", "founder-avatar", "site-url", "seo", "analytics", "social-share", "ar-portfolio", "live-dashboard", "project-planner", "analytics-provider", "og-live-preview", "og-examples", "og-workspace", "thumbnail-live-preview", "thumbnail-workspace", "scope-chat", "launch-workflow", "landing-kit", "journal-content", "resources-content", "api-contact", "api-waitlist", "api-newsletter", "api-generate", "api-thumbnail", "api-scope", "ascii-rig", "ascii-donut", "ascii-rain", "ascii-wave", "ascii-spark", "ascii-bar", "ascii-boot", "ascii-wordmark", "ascii-decode" ], "component_items": [ { "name": "utils", "type": "registry:lib", "title": "Utils", "description": "cn() helper (clsx + tailwind-merge)." }, { "name": "motion", "type": "registry:lib", "title": "Motion", "description": "Shared motion tokens — hover language, presence helpers, timeline reveal (Family Values easings, no springs/blur)." }, { "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": "Soft-rect AtroUI button — hover lift ≤1px, press into surface, focus parity." }, { "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": "Soft-rect multi-line control aligned to Atro input tokens." }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "Soft-rect checkbox with Motion check path draw on Base UI." }, { "name": "checkbox-group", "type": "registry:ui", "title": "Checkbox Group", "description": "Soft-rect checkbox group — compose with Checkbox (value / parent)." }, { "name": "radio", "type": "registry:ui", "title": "Radio", "description": "Radio group with Motion fill-scale indicator on Base UI." }, { "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "Disclosure with height:auto, chevron rotate, and optional focus morph." }, { "name": "collapsible", "type": "registry:ui", "title": "Collapsible", "description": "Single disclosure with height:auto settle and chevron rotate." }, { "name": "combobox", "type": "registry:ui", "title": "Combobox", "description": "Filterable select on Base UI with Mira soft-rect, popup settle, and list stagger ≤40ms." }, { "name": "autocomplete", "type": "registry:ui", "title": "Autocomplete", "description": "Suggest-as-you-type with popup settle, layoutId highlight, and list stagger ≤40ms." }, { "name": "drawer", "type": "registry:ui", "title": "Drawer", "description": "Edge panel with panelTween slide, backdrop fade, and portal presence." }, { "name": "form-select", "type": "registry:ui", "title": "Form Select", "description": "Soft-rect select on Base UI with caret rotate, popup settle, and list stagger ≤40ms." }, { "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "Modal dialog on Base UI with Mira surfaces and short settle motion." }, { "name": "alert-dialog", "type": "registry:ui", "title": "Alert Dialog", "description": "Confirm destructive or irreversible actions with Base UI Alert Dialog." }, { "name": "menu", "type": "registry:ui", "title": "Menu", "description": "Dropdown menu on Base UI with soft-rect items and settle motion." }, { "name": "context-menu", "type": "registry:ui", "title": "Context Menu", "description": "Pointer context menu on Base UI with menu settle and row stagger." }, { "name": "navigation-menu", "type": "registry:ui", "title": "Navigation Menu", "description": "Site nav panels with peer crossfade and soft-rect Mira popup." }, { "name": "menubar", "type": "registry:ui", "title": "Menubar", "description": "Focus-roving menubar shell with Menu grammar and Motion popups." }, { "name": "popover", "type": "registry:ui", "title": "Popover", "description": "Anchored popover surface for progressive disclosure." }, { "name": "tooltip", "type": "registry:ui", "title": "Tooltip", "description": "Fast tooltip with micro appear motion and reduced-motion respect." }, { "name": "preview-card", "type": "registry:ui", "title": "Preview Card", "description": "Hover/focus link preview — soft popover settle; opt-in tilt / magnetic / spotlight for media." }, { "name": "scroll-area", "type": "registry:ui", "title": "Scroll Area", "description": "Bounded scroll region with soft-rect thumb that fades when idle." }, { "name": "separator", "type": "registry:ui", "title": "Separator", "description": "Soft-rect hairline divider — static, no decorative motion." }, { "name": "field", "type": "registry:ui", "title": "Field", "description": "Quiet Field spine — label, description, Motion error reveal, control." }, { "name": "input", "type": "registry:ui", "title": "Input", "description": "Single-line input aligned to Atro control height and soft-rect." }, { "name": "number-field", "type": "registry:ui", "title": "Number Field", "description": "Soft-rect stepper number field with careful scrub feedback on Base UI." }, { "name": "otp-field", "type": "registry:ui", "title": "OTP Field", "description": "Soft-rect OTP digit slots with whileFocus settle (~160ms easeOutExpo) on Base UI." }, { "name": "form", "type": "registry:ui", "title": "Form", "description": "Base UI form validation orchestration — pair with Field." }, { "name": "fieldset", "type": "registry:ui", "title": "Fieldset", "description": "Legend + soft-rect group chrome for related controls." }, { "name": "switch", "type": "registry:ui", "title": "Switch", "description": "Soft-rect switch — layout thumb + flex justify flip (Motion.dev Base UI)." }, { "name": "toast", "type": "registry:ui", "title": "Toast", "description": "Edge toast stack on Base UI with opacity+y enter/exit and careful CSS-var stacking." }, { "name": "progress", "type": "registry:ui", "title": "Progress", "description": "Task progress bar with soft-rect fill width tween on Base UI Progress." }, { "name": "slider", "type": "registry:ui", "title": "Slider", "description": "Range slider with thumb press micro-motion; track fill stays 1:1 while dragging." }, { "name": "meter", "type": "registry:ui", "title": "Meter", "description": "Read-only meter gauge with soft-rect value fill tween on Base UI Meter." }, { "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "Soft-rect avatar with image fade-in and fallback crossfade on Base UI Avatar." }, { "name": "tabs", "type": "registry:ui", "title": "Tabs", "description": "Tabs with layoutId pill morph + panel layout height (Motion.dev layout)." }, { "name": "toggle", "type": "registry:ui", "title": "Toggle", "description": "Soft-rect two-state button with pressed fill morph on Base UI." }, { "name": "toggle-group", "type": "registry:ui", "title": "Toggle Group", "description": "Toggle peers with layoutId highlight morph — Motion.dev Base UI pattern." }, { "name": "toolbar", "type": "registry:ui", "title": "Toolbar", "description": "Dense soft-rect toolbar chrome with Motion press feedback." }, { "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": "The scroll reveal — opacity + rise. One primitive; use fadeInSection for landing triggers." }, { "name": "stagger", "type": "registry:ui", "title": "Stagger", "description": "Stagger children on scroll with StaggerChild (clamped ≤50ms)." }, { "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": "feature-bento", "type": "registry:block", "title": "Feature Bento", "description": "Bento feature grid with editable CONTENT and FEATURES. Soft-rect panels." }, { "name": "testimonials-stack", "type": "registry:block", "title": "Testimonials Stack", "description": "Layered testimonial cards with prev/next. Editable CONTENT and TESTIMONIALS." }, { "name": "stats-band", "type": "registry:block", "title": "Stats Band", "description": "Metric strip with editable CONTENT and STATS." }, { "name": "cta-band", "type": "registry:block", "title": "CTA Band", "description": "Headline + primary/ghost CTAs over a quiet brand wash. Editable CONTENT." }, { "name": "pricing-tiers", "type": "registry:block", "title": "Pricing Tiers", "description": "Toggleable pricing tiers with editable CONTENT and TIERS." }, { "name": "logo-marquee", "type": "registry:block", "title": "Logo Marquee", "description": "CSS logo/name marquee with editable CONTENT and LOGOS. Respects reduced motion." }, { "name": "auth-split", "type": "registry:block", "title": "Auth Split", "description": "Split login/signup shell with editable CONTENT. No auth backend." }, { "name": "saas-starter", "type": "registry:block", "title": "SaaS Starter", "description": "One-file SaaS landing composition. Editable CONTENT — compose sections after install." }, { "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": "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": "timeline-animation", "type": "registry:ui", "title": "Timeline Animation", "description": "Sequential in-view reveal for heroes — opacity + y only (no blur)." }, { "name": "in-view", "type": "registry:ui", "title": "In View", "description": "Deprecated alias of Fade In with landing defaults. Prefer @atroui/fade-in." }, { "name": "text-morph", "type": "registry:ui", "title": "Text Morph", "description": "Shared-letter morph between label strings. Opt-in for state swaps." }, { "name": "copy-button", "type": "registry:ui", "title": "Copy Button", "description": "Copy → check Button recipe with TextMorph + icon swap. Rare-path delight — not default on every Button." }, { "name": "label-roll", "type": "registry:ui", "title": "Label Roll", "description": "Letter-staggered label swap on hover/focus for links and secondary CTAs." }, { "name": "line-reveal", "type": "registry:ui", "title": "Line Reveal", "description": "Word/line stagger enter — opacity + y + clip. Marketing default." }, { "name": "word-reveal-scroll", "type": "registry:ui", "title": "Word Reveal Scroll", "description": "Progress-driven word opacity via scroll — opacity only, no blur. Pull lines." }, { "name": "magnetic", "type": "registry:ui", "title": "Magnetic", "description": "Mild pointer pull for media cards — intensity ≤0.35, range ≤80px. Never chrome." }, { "name": "tilt", "type": "registry:ui", "title": "Tilt", "description": "Mild 3D media tilt toward the pointer — rotationFactor ≤6–8°. Opt-in only." }, { "name": "spotlight", "type": "registry:ui", "title": "Spotlight", "description": "Low-opacity cursor wash for dark Mira media cards. Reduced motion skips." }, { "name": "animate-number", "type": "registry:ui", "title": "Animate Number", "description": "Pricing/stats counter — digits tween as numbers with easeOutSoft. Reduced motion jumps to final." }, { "name": "transition-panel", "type": "registry:ui", "title": "Transition Panel", "description": "Wait-mode content swaps for feature tabs and docs panels — opacity + small y." }, { "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": "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": "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": "launch-workflow", "type": "registry:block", "title": "Launch Workflow", "description": "Scope → Planner → OG in one room. Shared ProjectBrief. Preview without keys; AI Host APIs are BYOK." }, { "name": "landing-kit", "type": "registry:block", "title": "Landing Kit", "description": "Vibrant soft-rect marketing stack in one add: header, hero, logos, bento, stats, testimonials, pricing, FAQ, CTA, footer." }, { "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": "ascii-rig", "type": "registry:lib", "title": "ASCII Rig", "description": "Shared ASCII kit — luminance ramps, offscreen/reduced-motion aware tick loop, canvas character-cell metrics." }, { "name": "ascii-donut", "type": "registry:ui", "title": "ASCII Donut", "description": "The spinning torus — 3D points z-buffered per character cell, shaded by luminance ramp." }, { "name": "ascii-rain", "type": "registry:ui", "title": "ASCII Rain", "description": "Falling streams of glyphs whose color fades along each tail." }, { "name": "ascii-wave", "type": "registry:ui", "title": "ASCII Wave", "description": "Function field f(x,y,t) mapped through a luminance ramp — one text node per frame." }, { "name": "ascii-spark", "type": "registry:ui", "title": "ASCII Spark", "description": "Block-element bars (░–█); a copyable plain-text sparkline." }, { "name": "ascii-bar", "type": "registry:ui", "title": "ASCII Bar", "description": "Pseudo-graphics progress (▰▱) filling in plottable steps." }, { "name": "ascii-boot", "type": "registry:ui", "title": "ASCII Boot", "description": "VT100-style init log typed character by character, cursor pulsing." }, { "name": "ascii-wordmark", "type": "registry:ui", "title": "ASCII Wordmark", "description": "FIGlet-style big text from a built-in 3×5 pixel font." }, { "name": "ascii-decode", "type": "registry:ui", "title": "ASCII Decode", "description": "Cipher glyphs locking into the message left to right." } ], "component_count": 126, "components_truncated": false, "component_types": { "registry:lib": 9, "registry:ui": 68, "registry:component": 1, "registry:block": 42, "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": 490, "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": 491, "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": 492, "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": 73, "last_commit": "2026-10-26T20:41:25Z", "archived": false, "license": "MIT", "open_issues": 6, "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", "ae-motion", "bezier-path", "curve-fit", "shape-ops", "ae-import", "text-selectors", "glyph-layout", "mograph", "shape-layer", "text-animator", "effector-field", "rig", "pen-plot", "follow", "slit-geometry", "slit-scan", "ik-rig", "track-matte", "follow-through" ], "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" }, { "name": "ae-motion", "type": "registry:lib", "title": null, "description": "After Effects mechanics as pure functions: graph-editor keyframe easing, loopIn/loopOut, deterministic wiggle and noise, repeater powers and parented transforms" }, { "name": "bezier-path", "type": "registry:lib", "title": null, "description": "Paths as cubic segments: parse any SVG d, measure, slice by arc length, resample and rebuild" }, { "name": "curve-fit", "type": "registry:lib", "title": null, "description": "Fit cubic béziers through a polyline (Schneider) with corner detection, so dense-point operators emit real curves" }, { "name": "shape-ops", "type": "registry:lib", "title": null, "description": "AE shape-layer operators — trim, repeater, offset, wiggle, zig-zag, pucker & bloat — run as an ordered stack" }, { "name": "ae-import", "type": "registry:lib", "title": null, "description": "Runtime for `remotion-ui import-ae`: After Effects shape, solid, null and precomp layers with parenting, time remap and lottie-web's stacking rules, drawn as S…" }, { "name": "text-selectors", "type": "registry:lib", "title": null, "description": "AE text range and wiggly selectors: per-unit selection with shapes, ease high/low, random order and combine modes" }, { "name": "glyph-layout", "type": "registry:lib", "title": null, "description": "Measured per-glyph layout with kerning-preserving prefixes, word-safe wrapping and fit-to-width" }, { "name": "mograph", "type": "registry:lib", "title": null, "description": "Cinema 4D MoGraph maths: cloner layouts, spherical/linear/noise falloff fields and stacked effectors" }, { "name": "shape-layer", "type": "registry:ui", "title": null, "description": "After Effects shape layer with an ordered operator stack — trim paths, repeater, offset paths, wiggle paths, zig-zag and pucker & bloat — evaluated per frame a…" }, { "name": "text-animator", "type": "registry:ui", "title": null, "description": "After Effects text animator: range and wiggly selectors drive per-character, per-word or per-line position, scale, rotation, opacity, blur, tracking and fill o…" }, { "name": "effector-field", "type": "registry:ui", "title": null, "description": "Cinema 4D MoGraph cloner and effectors: clone any element into a grid, radial or linear arrangement and let animatable spherical, linear or noise falloff field…" }, { "name": "rig", "type": "registry:lib", "title": null, "description": "Rig maths: law-of-cosines two-bone IK with bend, stretch and soft IK (no knee pop at full reach), and constant-length rubber-hose arcs" }, { "name": "pen-plot", "type": "registry:lib", "title": null, "description": "Pen-plotter motion planning: SVG strokes to a pen position per frame, with cosine-ramped speed, full stops in cusps, lifts, and anticipating pen-up moves" }, { "name": "follow", "type": "registry:lib", "title": null, "description": "Overlapping action: a chain of damped springs following a leader track, simulated deterministically from frame 0 and memoised" }, { "name": "slit-geometry", "type": "registry:lib", "title": null, "description": "Slit-scan strips (bands at any angle or radial rings) with per-strip delays grouped into a bounded number of child renders" } ], "component_count": 254, "components_truncated": false, "component_types": { "registry:lib": 36, "registry:hook": 1, "registry:ui": 131, "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": 493, "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": 494, "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": 2, "last_commit": "2026-10-19T05:42:08Z", "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": 495, "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": 10, "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": 496, "name": "@agent-ui-kit", "category": "AI/chat UI", "tags": [ "accessibility", "ai", "cards", "hooks" ], "tagline": "Accessible React components for agent runs: tool call timeline, human-in-the-loop approvals, per-hunk diff review and run telemetry, typed against AI SDK message parts.", "short_description": "", "description": "Accessible React components for agent runs: tool call timeline, human-in-the-loop approvals, per-hunk diff review and run telemetry, typed against AI SDK message parts.", "framework": "react", "homepage": "https://agent-ui-kit-demo.vercel.app", "docs": "https://agent-ui-kit-demo.vercel.app/docs", "github": "https://github.com/dgesteves/signoff-ui", "components_github": null, "github_default_branch": "main", "github_stars": 31, "last_commit": "2026-10-25T21:21:08Z", "archived": false, "license": "MIT", "open_issues": 29, "registry_template": "https://agent-ui-kit-demo.vercel.app/r/{name}.json", "registry_index": "https://agent-ui-kit-demo.vercel.app/r/registry.json", "components": [ "diff-review", "use-diff-review", "approval-card", "use-approval-policy", "agent-message", "tool-call-timeline", "run-meter", "agent-status", "sources", "markdown", "reasoning", "ag-ui", "assistant-ui" ], "component_items": [ { "name": "diff-review", "type": "registry:component", "title": "Diff Review", "description": "Review agent edits across files: accept or reject hunks or whole files, comment on lines, mark files viewed, from the keyboard; returns the applied files, reje…" }, { "name": "use-diff-review", "type": "registry:component", "title": "useDiffReview", "description": "DiffReview without its markup: parsing (in a worker for large files), decisions, line comments, viewed files, context and the keyboard, for your own design sys…" }, { "name": "approval-card", "type": "registry:component", "title": "Approval Card", "description": "Approve or deny a tool call once, for the session or always, by tool and argument pattern: an args preview, editable arguments, risk levels, a denial reason, a…" }, { "name": "use-approval-policy", "type": "registry:component", "title": "useApprovalPolicy", "description": "Approval rules without markup: once, session or always, by tool and argument glob, deny winning; pluggable storage, an audit trail, and the same rules as AI SD…" }, { "name": "agent-message", "type": "registry:component", "title": "Agent Message", "description": "Renders an assistant UIMessage: markdown, reasoning, grouped tool calls, inline approvals and sources." }, { "name": "tool-call-timeline", "type": "registry:component", "title": "Tool Call Timeline", "description": "Vertical timeline of AI SDK tool calls with live states, durations, a waterfall and expandable input/output." }, { "name": "run-meter", "type": "registry:component", "title": "Run Meter", "description": "Tokens, estimated cost and latency (TTFT, total) for an agent run, compact or expanded." }, { "name": "agent-status", "type": "registry:component", "title": "Agent Status", "description": "Run state pill (thinking, working, waiting for approval, done, stopped, error) announced through an aria-live region." }, { "name": "sources", "type": "registry:component", "title": "Sources", "description": "Citation chips and cards for AI SDK source-url and source-document parts." }, { "name": "markdown", "type": "registry:component", "title": "Markdown", "description": "Streaming-safe GFM markdown with linked [n] citations and a typing caret." }, { "name": "reasoning", "type": "registry:component", "title": "Reasoning", "description": "Collapsible model reasoning that opens while streaming and summarizes its duration." }, { "name": "ag-ui", "type": "registry:component", "title": "AG-UI Adapter", "description": "useAgUiAgent: renders any AG-UI agent (LangGraph, CrewAI, Mastra, Pydantic AI) with these components, interrupts as approvals." }, { "name": "assistant-ui", "type": "registry:component", "title": "assistant-ui Tool UIs", "description": "signoffTools for MessagePrimitive.Parts: DiffReview for assistant-ui tool calls that propose files, its result sent back with addResult, and the approval card …" } ], "component_count": 13, "components_truncated": false, "component_types": { "registry:component": 13 }, "logo": "", "preview_image": "https://signoff-ui.vercel.app/opengraph-image-12gd74?f895357e2ad44a1e", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [], "featured": false }, { "number": 497, "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": 11, "last_commit": "2026-10-26T07:13:24Z", "archived": false, "license": "MIT", "open_issues": 11, "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": 498, "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-25T14:56:56Z", "archived": false, "license": null, "open_issues": 0, "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 }, { "number": 499, "name": "@corsair-ui", "category": "Animated components", "tags": [ "animation", "auth", "backgrounds", "blocks", "buttons", "cards", "charts", "dashboard", "forms", "hooks", "loaders", "media", "mobile", "navigation", "overlays", "tables", "text-effects", "theming" ], "tagline": "Copy-and-own React components for Tailwind CSS 3 and 4: forms, overlays, site chrome, motion, animated text and backgrounds.", "short_description": "", "description": "Copy-and-own React components for Tailwind CSS 3 and 4: forms, overlays, site chrome, motion, animated text and backgrounds.", "framework": "react", "homepage": "https://corsairui.vercel.app", "docs": "https://corsairui.vercel.app/docs", "github": "https://github.com/KevinGirelli/corsair-ui", "components_github": "https://github.com/KevinGirelli/corsair-ui/tree/main/registry", "github_default_branch": "main", "github_stars": 5, "last_commit": "2026-10-26T04:47:39Z", "archived": false, "license": "MIT", "open_issues": 3, "registry_template": "https://kevingirelli.github.io/corsair-ui/r/{name}.json", "registry_index": "https://kevingirelli.github.io/corsair-ui/r/registry.json", "components": [ "theme", "theme-blue", "theme-violet", "theme-rose", "theme-emerald", "theme-amber", "utils", "spotify-track", "story-export", "use-media-query", "use-in-view", "use-entrance", "use-scroll-spy", "button", "spinner", "badge", "label", "input", "textarea", "input-group", "field", "form", "checkbox", "radio-group", "switch", "select", "separator", "card", "flip-card", "stamp", "alert", "skeleton", "popover", "command", "calendar", "date-picker", "combobox", "input-otp", "slider", "toggle", "toggle-group", "segmented-control", "number-input", "password-input", "tooltip", "reveal", "text-reveal", "magnetic", "parallax", "tilt-scroll", "spotlight", "animated-border", "aurora", "signature", "path-beam", "copy-button", "dash-button", "color-swatches", "bars-spinner", "shimmer-text", "blur-text", "slide-text", "flip-text", "split-flap", "dissolve-text", "highlight-text", "scramble-text", "wave-text", "text-signature", "marquee", "line-chart", "qr-code", "tweet-card", "spotify-card", "light-rays", "warp-gradient", "dialog", "alert-dialog", "sheet", "toast", "nav-link", "site-header", "dock", "tabs", "avatar", "rating", "wave-rating", "stat", "number-ticker", "code-block", "corner-frame", "phone-frame", "browser-frame", "youtube-embed", "carousel", "preloader", "custom-cursor", "scroll-progress", "scroll-background", "scroll-scene", "wipe-transition", "smooth-scroll", "grain", "hover-reveal", "particles", "topography", "roll-text", "dropdown-menu", "context-menu", "navigation-menu", "hover-card", "accordion", "collapsible", "progress", "scroll-area", "breadcrumb", "pagination", "table", "sidebar", "drawer", "data-table", "dropzone", "kbd", "empty-state", "stepper", "timeline", "resizable", "bar-chart", "area-chart", "donut-chart", "story-frame", "story", "hero", "feature-grid", "stats", "logo-cloud", "cta", "pricing", "faq", "testimonials", "contact-form", "newsletter", "site-footer", "login-form", "signup-form", "not-found", "dashboard", "settings" ], "component_items": [ { "name": "theme", "type": "registry:theme", "title": "Theme", "description": "Corsair colour, radius and base styles for light and dark mode. Every component relies on these variables; override --primary, --primary-foreground and --ring …" }, { "name": "theme-blue", "type": "registry:theme", "title": "Theme: Blue", "description": "The Corsair theme on a slate base with a blue primary. Installs the theme first, then sets its colours and radius; every text pair meets WCAG AA." }, { "name": "theme-violet", "type": "registry:theme", "title": "Theme: Violet", "description": "The Corsair theme on a zinc base with a violet primary. Installs the theme first, then sets its colours and radius; every text pair meets WCAG AA." }, { "name": "theme-rose", "type": "registry:theme", "title": "Theme: Rose", "description": "The Corsair theme on a stone base with a rose primary. Installs the theme first, then sets its colours and radius; every text pair meets WCAG AA." }, { "name": "theme-emerald", "type": "registry:theme", "title": "Theme: Emerald", "description": "The Corsair theme on a zinc base with an emerald primary. Installs the theme first, then sets its colours and radius; every text pair meets WCAG AA." }, { "name": "theme-amber", "type": "registry:theme", "title": "Theme: Amber", "description": "The Corsair theme on a stone base with an amber primary and square corners. Installs the theme first, then sets its colours and radius; every text pair meets W…" }, { "name": "utils", "type": "registry:lib", "title": "Utils", "description": "The cn() helper: merges class names and resolves conflicting Tailwind utilities." }, { "name": "spotify-track", "type": "registry:lib", "title": "getSpotifyTrack", "description": "Title, artist, cover and preview clip for a Spotify link, read on the server from the public embed page." }, { "name": "story-export", "type": "registry:lib", "title": "Story Export", "description": "Turns stories into images for Instagram, WhatsApp and TikTok: renderStoryPng() draws JSX to a 1080 × 1920 PNG in the browser with Satori, shareStory() opens th…" }, { "name": "use-media-query", "type": "registry:hook", "title": "useMediaQuery", "description": "Subscribes to a CSS media query. SSR-safe: renders a fallback on the server and hydrates without a mismatch." }, { "name": "use-in-view", "type": "registry:hook", "title": "useInView", "description": "Whether an element is in the viewport, from IntersectionObserver, with once, margin and amount options." }, { "name": "use-entrance", "type": "registry:hook", "title": "useEntrance", "description": "When a one-shot entrance runs: on first paint, or once in view, without hiding server-rendered content that is already on screen." }, { "name": "use-scroll-spy", "type": "registry:hook", "title": "useScrollSpy", "description": "The id of the section on screen, for a table of contents, from one IntersectionObserver. SSR-safe, keeps the last section between two." }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "Triggers an action. Variants default, secondary, outline, ghost, destructive and link; sizes sm, default, lg and three square icon sizes. Supports asChild and …" }, { "name": "spinner", "type": "registry:ui", "title": "Spinner", "description": "Animated status indicator for work in progress, announced as Loading." }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "Short status or metadata label. Solid, secondary and outline styles, plus success, warning and destructive statuses shown as a coloured dot." }, { "name": "label", "type": "registry:ui", "title": "Label", "description": "Accessible name for a form control." }, { "name": "input", "type": "registry:ui", "title": "Input", "description": "Single-line text control. Its error state comes from aria-invalid, so any form library can drive it." }, { "name": "textarea", "type": "registry:ui", "title": "Textarea", "description": "Multi-line text control with the same states as Input." }, { "name": "input-group", "type": "registry:ui", "title": "Input Group", "description": "An input with icons, text or buttons attached on either side." }, { "name": "field", "type": "registry:ui", "title": "Field", "description": "Layout for a control with its label, description and error, plus fieldset and group helpers. Independent of any form library." }, { "name": "form", "type": "registry:ui", "title": "Form Field (react-hook-form)", "description": "FormField: a react-hook-form Controller laid out with Field, with the id, label and ARIA wiring done for you." }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "Checkbox with checked, unchecked and indeterminate states." }, { "name": "radio-group", "type": "registry:ui", "title": "Radio Group", "description": "A set of options where exactly one can be selected." }, { "name": "switch", "type": "registry:ui", "title": "Switch", "description": "On/off control for settings that apply immediately." }, { "name": "select", "type": "registry:ui", "title": "Select", "description": "Pick one option from a list, with groups, labels and separators." }, { "name": "separator", "type": "registry:ui", "title": "Separator", "description": "Horizontal or vertical divider." }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "Container with header, title, description, action, content and footer parts." }, { "name": "flip-card", "type": "registry:ui", "title": "Flip Card", "description": "A card with two faces that turns over in 3D on hover, from a trigger, or from a prop." }, { "name": "stamp", "type": "registry:ui", "title": "Stamp", "description": "A rubber stamp that slams onto the page: it starts large and transparent and lands rotated with a small overshoot." }, { "name": "alert", "type": "registry:ui", "title": "Alert", "description": "Callout for important messages on a neutral surface; default, success, warning and destructive tones colour the icon." }, { "name": "skeleton", "type": "registry:ui", "title": "Skeleton", "description": "Placeholder shape shown while content loads." }, { "name": "popover", "type": "registry:ui", "title": "Popover", "description": "Floating panel anchored to a trigger, with header, title and description parts." }, { "name": "command", "type": "registry:ui", "title": "Command", "description": "Searchable list navigated with the arrow keys; the base for comboboxes and command menus." }, { "name": "calendar", "type": "registry:ui", "title": "Calendar", "description": "Month grid for picking a date, several dates or a range, with dropdown captions and week numbers. Built on DayPicker." }, { "name": "date-picker", "type": "registry:ui", "title": "Date Picker", "description": "DatePicker and DateRangePicker: a calendar in a popover behind a button that shows the chosen date or range." }, { "name": "combobox", "type": "registry:ui", "title": "Combobox", "description": "A select with a search box, for long lists of options." }, { "name": "input-otp", "type": "registry:ui", "title": "Input OTP", "description": "One-time code input drawn as separate slots, with paste and autofill support." }, { "name": "slider", "type": "registry:ui", "title": "Slider", "description": "Pick a number or a range by dragging or with the arrow keys, horizontal or vertical." }, { "name": "toggle", "type": "registry:ui", "title": "Toggle", "description": "A button that stays pressed, in default and outline variants and three sizes." }, { "name": "toggle-group", "type": "registry:ui", "title": "Toggle Group", "description": "A set of toggles with single or multiple selection, joined or spaced apart." }, { "name": "segmented-control", "type": "registry:ui", "title": "Segmented Control", "description": "A switch between two or more options with one thumb that slides to the active one, in three sizes. Never empty." }, { "name": "number-input", "type": "registry:ui", "title": "Number Input", "description": "Number field with decrement and increment buttons, min, max and step, following the spinbutton keyboard pattern." }, { "name": "password-input", "type": "registry:ui", "title": "Password Input", "description": "Password field with a button that shows what was typed." }, { "name": "tooltip", "type": "registry:ui", "title": "Tooltip", "description": "A short label shown on hover and keyboard focus." }, { "name": "reveal", "type": "registry:ui", "title": "Reveal", "description": "Fades and moves content into place when it scrolls into view, alone or staggered in a group. Visible without JavaScript." }, { "name": "text-reveal", "type": "registry:ui", "title": "Text Reveal", "description": "Reveals text word by word, when it comes into view or tied to the scroll position." }, { "name": "magnetic", "type": "registry:ui", "title": "Magnetic", "description": "Pulls its content toward the mouse while hovered and springs it back on leave." }, { "name": "parallax", "type": "registry:ui", "title": "Parallax", "description": "Drifts content at a different speed from the page as it scrolls past, with CSS scroll-driven animations and no JavaScript." }, { "name": "tilt-scroll", "type": "registry:ui", "title": "Tilt Scroll", "description": "Content that starts tilted back in perspective and straightens as you scroll, with CSS scroll-driven animations and no JavaScript." }, { "name": "spotlight", "type": "registry:ui", "title": "Spotlight", "description": "A soft light that follows the pointer across a surface and along its edge." }, { "name": "animated-border", "type": "registry:ui", "title": "Animated Border", "description": "A border with a light travelling around it, paused off screen." }, { "name": "aurora", "type": "registry:ui", "title": "Aurora", "description": "Slow, soft light drifting behind its content, from three radial gradients." }, { "name": "signature", "type": "registry:ui", "title": "Signature", "description": "Draws SVG strokes as if by hand, with optional ink filling in behind the pen, on view or with the scroll." }, { "name": "path-beam", "type": "registry:ui", "title": "Path Beam", "description": "A beam of light travelling along the paths of a flow diagram, one after another, on view, with the scroll or from your own progress." }, { "name": "copy-button", "type": "registry:ui", "title": "Copy Button", "description": "An icon button that copies a value and swaps to a check mark, announcing it to screen readers." }, { "name": "dash-button", "type": "registry:ui", "title": "Dash Button", "description": "A pill button whose fill gives way to a dashed outline that marches on hover." }, { "name": "color-swatches", "type": "registry:ui", "title": "Color Swatches", "description": "Pick one colour from a row of swatches: a radio group with arrow keys and form support." }, { "name": "bars-spinner", "type": "registry:ui", "title": "Bars Spinner", "description": "Twelve bars around a hub fading in turn, announced as Loading. No JavaScript." }, { "name": "shimmer-text", "type": "registry:ui", "title": "Shimmer Text", "description": "A band of light sweeping across text now and then, paused off screen." }, { "name": "blur-text", "type": "registry:ui", "title": "Blur Text", "description": "Text that comes into focus one character at a time, and can blur back out." }, { "name": "slide-text", "type": "registry:ui", "title": "Slide Text", "description": "Words, characters or lines rising into place from below their own baseline." }, { "name": "flip-text", "type": "registry:ui", "title": "Flip Text", "description": "Kinetic type in 3D: characters or words turning into place around their horizontal axis, one after another." }, { "name": "split-flap", "type": "registry:ui", "title": "Split Flap", "description": "A split-flap board: when the value changes, only the characters that changed flip, like a departure board." }, { "name": "dissolve-text", "type": "registry:ui", "title": "Dissolve Text", "description": "Words or characters surfacing at scattered moments, the same on server and client." }, { "name": "highlight-text", "type": "registry:ui", "title": "Highlight Text", "description": "A marker that slides in behind a phrase, or a hand-drawn line drawn under it." }, { "name": "scramble-text", "type": "registry:ui", "title": "Scramble Text", "description": "Text that decodes itself: noise sweeps across, then each character locks in." }, { "name": "wave-text", "type": "registry:ui", "title": "Wave Text", "description": "Bands of colour washing through text like a swell, on one CSS animation." }, { "name": "text-signature", "type": "registry:ui", "title": "Text Signature", "description": "Writes any text in any font as a signature: outlines drawn by the pen, then inked." }, { "name": "marquee", "type": "registry:ui", "title": "Marquee", "description": "Content scrolling in a seamless loop, pausing on focus and off screen, and draggable by the pointer." }, { "name": "line-chart", "type": "registry:ui", "title": "Line Chart", "description": "One series as a line, with a cursor that snaps to points; a slider for keyboards and screen readers." }, { "name": "qr-code", "type": "registry:ui", "title": "QR Code", "description": "A crisp SVG QR code in dots, rounded or square modules. Renders on the server, and can draw itself in." }, { "name": "tweet-card", "type": "registry:ui", "title": "Tweet Card", "description": "A post from X in your theme, with no embed script: a card, a server component that fetches by id, and a client one." }, { "name": "spotify-card", "type": "registry:ui", "title": "Spotify Card", "description": "A track card with cover art, a link to Spotify and a preview clip that spins a record while it plays." }, { "name": "light-rays", "type": "registry:ui", "title": "Light Rays", "description": "Soft beams of light falling from above, from a small WebGL2 shader." }, { "name": "warp-gradient", "type": "registry:ui", "title": "Warp Gradient", "description": "A liquid field of colour carried along by layered noise, from one WebGL2 shader." }, { "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "Modal window centred over the page, with a focus trap, overlay, close button, header, footer, title and description parts." }, { "name": "alert-dialog", "type": "registry:ui", "title": "Alert Dialog", "description": "Modal that asks the user to confirm or cancel before an action, with action and cancel buttons." }, { "name": "sheet", "type": "registry:ui", "title": "Sheet", "description": "Dialog that slides in from any edge of the screen, for menus, filters and side panels." }, { "name": "toast", "type": "registry:ui", "title": "Toast", "description": "Brief notifications shown with a toast() call and a Toaster mounted once, with variants, an optional action, swipe to dismiss and screen reader announcements." }, { "name": "nav-link", "type": "registry:ui", "title": "Nav Link", "description": "A navigation link that marks the current page with aria-current and data-active. Supports asChild for router links." }, { "name": "site-header", "type": "registry:ui", "title": "Site Header", "description": "A sticky page header with brand, navigation, actions and a sheet menu for small screens, flagging data-scrolled once the page scrolls." }, { "name": "dock", "type": "registry:ui", "title": "Dock", "description": "A floating bar of icon links pinned to the bottom or top of the viewport, with tooltips and an optional reveal after scrolling." }, { "name": "tabs", "type": "registry:ui", "title": "Tabs", "description": "Sections of content shown one at a time, with a segmented or underlined tab list, horizontal or vertical." }, { "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "A round picture of a person with a fallback while it loads or when it fails, in three sizes, plus an overlapping group." }, { "name": "rating", "type": "registry:ui", "title": "Rating", "description": "Stars for giving a score as a radio group, or for showing one read-only with fractional fills." }, { "name": "wave-rating", "type": "registry:ui", "title": "Wave Rating", "description": "The rating, animated: sweeping a finger, pen or mouse across the stars lifts them in a wave that crests under the pointer, a tip shows the score, and letting g…" }, { "name": "stat", "type": "registry:ui", "title": "Stat", "description": "Key figures as a description list: label, value and a caption with an optional trend arrow." }, { "name": "number-ticker", "type": "registry:ui", "title": "Number Ticker", "description": "A number that counts up to its value when it comes into view, formatted for the locale." }, { "name": "code-block", "type": "registry:ui", "title": "Code Block", "description": "A block of code with an optional caption, a language label and a copy button." }, { "name": "corner-frame", "type": "registry:ui", "title": "Corner Frame", "description": "A box with bracket marks on its corners, in any size, thickness, colour and inset." }, { "name": "phone-frame", "type": "registry:ui", "title": "Phone Frame", "description": "A generic phone drawn in CSS around a screenshot or any content, with an island, a notch or no cut-out, that scales with its width." }, { "name": "browser-frame", "type": "registry:ui", "title": "Browser Frame", "description": "A browser window drawn in CSS around a page or a screenshot, with window dots, an address field and optional actions." }, { "name": "youtube-embed", "type": "registry:ui", "title": "YouTube Embed", "description": "A YouTube video that costs one poster image until it is played, with player controls through its ref." }, { "name": "carousel", "type": "registry:ui", "title": "Carousel", "description": "Slides on a native scroll-snap track, with keyboard steps, previous and next buttons, dots and an optional coverflow look." }, { "name": "preloader", "type": "registry:ui", "title": "Preloader", "description": "A full-screen cover that counts to 100 on first load, waits for your content to be ready, then fades out." }, { "name": "custom-cursor", "type": "registry:ui", "title": "Custom Cursor", "description": "A dot and a trailing ring that follow a mouse pointer, growing over interactive elements and showing labels." }, { "name": "scroll-progress", "type": "registry:ui", "title": "Scroll Progress", "description": "A reading progress bar that fills as the page scrolls, with CSS scroll-driven animations and no JavaScript." }, { "name": "scroll-background", "type": "registry:ui", "title": "Scroll Background", "description": "A background that blends from one colour to the next as you scroll, with CSS scroll-driven animations and no JavaScript." }, { "name": "scroll-scene", "type": "registry:ui", "title": "Scroll Scene", "description": "A scrollytelling scene: a stage pinned beside steps, crossfading to the slide of the step on screen, with a 0 to 1 scroll progress variable for scrubbing." }, { "name": "wipe-transition", "type": "registry:ui", "title": "Wipe Transition", "description": "Switches content behind a band that sweeps across it, swapping while covered, with a crossfade for phones and reduced motion." }, { "name": "smooth-scroll", "type": "registry:ui", "title": "Smooth Scroll", "description": "Smooth wheel and trackpad scrolling for the page, off with reduced motion, with a scrollTo hook that works either way." }, { "name": "grain", "type": "registry:ui", "title": "Grain", "description": "Film grain over a surface, from a tile of SVG noise, with an optional stepped jitter." }, { "name": "hover-reveal", "type": "registry:ui", "title": "Hover Reveal", "description": "A second layer seen through a soft circle that follows the pointer." }, { "name": "particles", "type": "registry:ui", "title": "Particles", "description": "Dots drifting slowly across a surface, laid out from a seed and moved with CSS alone." }, { "name": "topography", "type": "registry:ui", "title": "Topography", "description": "Contour lines like a topographic map over slowly shifting terrain, from one WebGL2 shader." }, { "name": "roll-text", "type": "registry:ui", "title": "Roll Text", "description": "Characters that roll up to a copy of themselves on hover or keyboard focus." }, { "name": "dropdown-menu", "type": "registry:ui", "title": "Dropdown Menu", "description": "A menu of actions and options that opens from a button, with checkbox and radio items, labels, shortcuts and submenus." }, { "name": "context-menu", "type": "registry:ui", "title": "Context Menu", "description": "A menu of actions for an area of the page that opens on right click or long press, with checkbox and radio items, labels, shortcuts and submenus." }, { "name": "navigation-menu", "type": "registry:ui", "title": "Navigation Menu", "description": "Site navigation with links and triggers that open panels of links in a shared, animated viewport." }, { "name": "hover-card", "type": "registry:ui", "title": "Hover Card", "description": "A preview card that appears while a link is hovered or focused, for supplementary content." }, { "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "Stacked sections that open and close under their headings, one or several at a time, with a height animation." }, { "name": "collapsible", "type": "registry:ui", "title": "Collapsible", "description": "A region that a trigger button shows and hides, with a height animation." }, { "name": "progress", "type": "registry:ui", "title": "Progress", "description": "A progress bar for tasks with a known amount, or an indeterminate one when the amount is unknown." }, { "name": "scroll-area", "type": "registry:ui", "title": "Scroll Area", "description": "A scrolling box with thin themed scrollbars that keeps native scrolling." }, { "name": "breadcrumb", "type": "registry:ui", "title": "Breadcrumb", "description": "The trail of links from the top of a site to the current page, with separators and an ellipsis." }, { "name": "pagination", "type": "registry:ui", "title": "Pagination", "description": "Page links with previous and next, an ellipsis, and a helper that works out which page numbers to show." }, { "name": "table", "type": "registry:ui", "title": "Table", "description": "A data table on native table elements, with a scroll container, selected rows and sortable column headers." }, { "name": "sidebar", "type": "registry:ui", "title": "Sidebar", "description": "An application sidebar that collapses to icons or off canvas on desktop and opens as a sheet on mobile, with a keyboard shortcut." }, { "name": "drawer", "type": "registry:ui", "title": "Drawer", "description": "A bottom sheet dialog for phones that can also be dragged down to close." }, { "name": "data-table", "type": "registry:ui", "title": "Data Table", "description": "A table with sortable headers, a text filter, pagination and row selection, built on TanStack Table v9." }, { "name": "dropzone", "type": "registry:ui", "title": "Dropzone", "description": "A file drop area on a native file input that checks type, size and count, and lists the chosen files." }, { "name": "kbd", "type": "registry:ui", "title": "Kbd", "description": "A key or key combination shown as a small keycap, alone or in a group." }, { "name": "empty-state", "type": "registry:ui", "title": "Empty State", "description": "What a list, table or page shows when it has nothing in it yet, with an icon, title, description and actions." }, { "name": "stepper", "type": "registry:ui", "title": "Stepper", "description": "The steps of a multi-step flow with complete, current and upcoming states, horizontal or vertical." }, { "name": "timeline", "type": "registry:ui", "title": "Timeline", "description": "A vertical list of events with a coloured dot for each status and a line joining them." }, { "name": "resizable", "type": "registry:ui", "title": "Resizable", "description": "Panels resized by dragging or with the keyboard, side by side or stacked." }, { "name": "bar-chart", "type": "registry:ui", "title": "Bar Chart", "description": "One series as vertical or horizontal bars that grow in on first view, with a keyboard slider over the bars." }, { "name": "area-chart", "type": "registry:ui", "title": "Area Chart", "description": "One or more series as gradient-filled areas, stacked or overlapping, with a legend and a keyboard slider over the points." }, { "name": "donut-chart", "type": "registry:ui", "title": "Donut Chart", "description": "Parts of a whole as a ring with the total in the middle and a keyboard-navigable legend of values and shares." }, { "name": "story-frame", "type": "registry:ui", "title": "Story Frame", "description": "A 9:16 story preview that is the exported PNG itself, with Share (the phone's share sheet, Instagram included), Download and Copy link, and the safe area the a…" }, { "name": "story", "type": "registry:ui", "title": "Story", "description": "A 1080 × 1920 story put together from parts (header, eyebrow, title, grid of tiles, list of rows, highlight, image, call to action), laid out inside the safe a…" }, { "name": "hero", "type": "registry:block", "title": "Hero", "description": "The opening section of a landing page with an eyebrow, a title, a description, actions and an optional media slot." }, { "name": "feature-grid", "type": "registry:block", "title": "Feature Grid", "description": "A grid of features with an icon, a title and a description under a centred section header." }, { "name": "stats", "type": "registry:block", "title": "Stats", "description": "A row of key figures that count up when they scroll into view, under a centred section header." }, { "name": "logo-cloud", "type": "registry:block", "title": "Logo Cloud", "description": "Customer or partner logos in a grid or a scrolling marquee under a small title." }, { "name": "cta", "type": "registry:block", "title": "Call to Action", "description": "A closing band with a title, a description and one or two actions." }, { "name": "pricing", "type": "registry:block", "title": "Pricing", "description": "A pricing section with plan cards, a featured plan and an optional monthly or yearly billing switch." }, { "name": "faq", "type": "registry:block", "title": "FAQ", "description": "A frequently asked questions section with a header and the answers in an accordion, split or stacked." }, { "name": "testimonials", "type": "registry:block", "title": "Testimonials", "description": "A section of customer quotes with names, roles and avatars, in a masonry or grid layout." }, { "name": "contact-form", "type": "registry:block", "title": "Contact Form", "description": "A contact section with a header, contact details and a validated message form that reports pending, success and error states." }, { "name": "newsletter", "type": "registry:block", "title": "Newsletter", "description": "A compact sign-up band with an inline email form that reports pending, success and error states." }, { "name": "site-footer", "type": "registry:block", "title": "Site Footer", "description": "A page footer with a brand, link columns in a navigation landmark, a copyright line and optional social icon links." }, { "name": "login-form", "type": "registry:block", "title": "Login Form", "description": "A centred sign-in card with email and password fields, a remember-me checkbox, optional sign-in providers and pending, success and error states." }, { "name": "signup-form", "type": "registry:block", "title": "Signup Form", "description": "A centred sign-up card with name, email and password fields, a required terms checkbox, optional sign-up providers and pending, success and error states." }, { "name": "not-found", "type": "registry:block", "title": "Not Found", "description": "A 404 page section with a large decorative error code, a page heading, a description, an optional search slot and actions." }, { "name": "dashboard", "type": "registry:block", "title": "Dashboard", "description": "An application page with a collapsible sidebar, a header, stat cards, a line chart and a recent-activity table." }, { "name": "settings", "type": "registry:block", "title": "Settings", "description": "An account settings page with tabs for a profile form, a password change and delete-account dialog, and notification switches." } ], "component_count": 148, "components_truncated": false, "component_types": { "registry:theme": 6, "registry:lib": 3, "registry:hook": 4, "registry:ui": 119, "registry:block": 16 }, "logo": "", "preview_image": "https://corsairui.vercel.app/og-image.jpg", "pro": { "has_pro": false, "pro_url": null, "pricing_url": null }, "enrichment_errors": [], "featured": false } ], "featured_count": 99 }