{ "schemaVersion": "1.0", "name": "NudaUI", "tagline": "Animations without the baggage", "description": "Copy-paste CSS & JS animations that work everywhere. Zero dependencies.", "homepage": "https://nudaui.dev", "repository": "https://github.com/sgomez-dev/nudaui", "license": "MIT", "generatedAt": "2026-10-12T22:25:52.445Z", "totals": { "components": 1503, "categories": 81 }, "categories": [ { "id": "loaders", "label": "Loaders", "description": "Loading state animations — pulse dots, orbits, ripples, bars, waves. Used while async work is in flight to signal progress without committing to a percentage.", "url": "https://nudaui.dev/components#section-loaders", "componentCount": 23, "components": [ { "id": "pulse-dots", "name": "Pulse Dots", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pulse-dots" }, { "id": "wave-bars", "name": "Wave Bars", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#wave-bars" }, { "id": "morph-blob", "name": "Morph Blob", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#morph-blob" }, { "id": "bouncing-balls", "name": "Bouncing Balls", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bouncing-balls" }, { "id": "rotating-squares", "name": "Rotating Squares", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#rotating-squares" }, { "id": "dna-helix", "name": "DNA Helix", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dna-helix" }, { "id": "clock-sweep", "name": "Clock Sweep", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#clock-sweep" }, { "id": "infinity-loop", "name": "Infinity Loop", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#infinity-loop" }, { "id": "cube-flip", "name": "Cube Flip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cube-flip" }, { "id": "dots-grid", "name": "Dots Grid", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dots-grid" }, { "id": "line-bounce", "name": "Line Bounce", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#line-bounce" }, { "id": "atom-orbit", "name": "Atom Orbit", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#atom-orbit" }, { "id": "heartbeat", "name": "Heartbeat", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#heartbeat" }, { "id": "hourglass", "name": "Hourglass", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#hourglass" }, { "id": "newton-cradle", "name": "Newton Cradle", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#newton-cradle" }, { "id": "orbit-dots", "name": "Orbit Dots", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#orbit-dots" }, { "id": "bouncing-ball", "name": "Bouncing Ball", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bouncing-ball" }, { "id": "morphing-square", "name": "Morphing Square", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#morphing-square" }, { "id": "ripple-rings", "name": "Ripple Rings", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ripple-rings" }, { "id": "gradient-spinner-bar", "name": "Gradient Spinner Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-spinner-bar" }, { "id": "dna-helix-loader", "name": "DNA Helix", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dna-helix-loader" }, { "id": "pendulum-loader", "name": "Pendulum", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pendulum-loader" }, { "id": "comet-trail-loader", "name": "Comet Trail", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#comet-trail-loader" } ] }, { "id": "spinners", "label": "Spinners", "description": "Pure-CSS spinner variants — ring, dual ring, conic, segmented, gradient. Lightweight indeterminate progress for buttons, dialogs, and inline contexts.", "url": "https://nudaui.dev/components#section-spinners", "componentCount": 22, "components": [ { "id": "ring-spinner", "name": "Ring Spinner", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ring-spinner" }, { "id": "gradient-spinner", "name": "Gradient Spinner", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-spinner" }, { "id": "dotted-ring", "name": "Dotted Ring", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dotted-ring" }, { "id": "gear-spinner", "name": "Gear Spinner", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gear-spinner" }, { "id": "square-spinner", "name": "Square Spinner", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#square-spinner" }, { "id": "triple-ring", "name": "Triple Ring", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#triple-ring" }, { "id": "arc-spinner", "name": "Arc Spinner", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#arc-spinner" }, { "id": "flower-spinner", "name": "Flower Spinner", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#flower-spinner" }, { "id": "cube-fold", "name": "Cube Fold", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cube-fold" }, { "id": "orbit-eclipse", "name": "Orbit Eclipse", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#orbit-eclipse" }, { "id": "dna-helix-spinner", "name": "DNA Helix", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dna-helix-spinner" }, { "id": "pixel-loader", "name": "Pixel Loader", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pixel-loader" }, { "id": "atom-spinner", "name": "Atom Spinner", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#atom-spinner" }, { "id": "hourglass-spinner", "name": "Hourglass", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#hourglass-spinner" }, { "id": "dual-ring-glow", "name": "Dual Ring Glow", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dual-ring-glow" }, { "id": "segment-spinner", "name": "Segment Spinner", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#segment-spinner" }, { "id": "conic-spin-loader", "name": "Conic Spin", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#conic-spin-loader" }, { "id": "dots-circle-spin", "name": "Dots Circle", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dots-circle-spin" }, { "id": "square-flip-spin", "name": "Square Flip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#square-flip-spin" }, { "id": "arc-pulse-spin", "name": "Arc Pulse", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#arc-pulse-spin" }, { "id": "pinwheel-spin", "name": "Pinwheel", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pinwheel-spin" }, { "id": "gooey-spin", "name": "Gooey Spinner", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gooey-spin" } ] }, { "id": "progress", "label": "Progress", "description": "Determinate progress indicators — linear, radial, segmented, striped, gradient fill. Use when you can express completion as a percentage.", "url": "https://nudaui.dev/components#section-progress", "componentCount": 18, "components": [ { "id": "stripe-progress", "name": "Stripe Progress", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#stripe-progress" }, { "id": "gradient-progress", "name": "Gradient Progress", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-progress" }, { "id": "segmented-progress", "name": "Segmented Progress", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#segmented-progress" }, { "id": "circular-progress", "name": "Circular Progress", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#circular-progress" }, { "id": "liquid-fill", "name": "Liquid Fill", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#liquid-fill" }, { "id": "step-progress", "name": "Step Progress", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#step-progress" }, { "id": "striped-flow", "name": "Striped Flow", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#striped-flow" }, { "id": "segmented-steps", "name": "Segmented Steps", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#segmented-steps" }, { "id": "indeterminate-sweep", "name": "Indeterminate Sweep", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#indeterminate-sweep" }, { "id": "circular-percent", "name": "Circular Percent", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#circular-percent" }, { "id": "gradient-shimmer-bar", "name": "Gradient Shimmer Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-shimmer-bar" }, { "id": "liquid-fill-progress", "name": "Liquid Fill", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#liquid-fill-progress" }, { "id": "dotted-progress", "name": "Dotted Progress", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dotted-progress" }, { "id": "growth-progress-1", "name": "Buffer Track", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-progress-1" }, { "id": "growth-progress-2", "name": "Goal Marker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-progress-2" }, { "id": "growth-progress-3", "name": "Step Pulse", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-progress-3" }, { "id": "growth-progress-4", "name": "Queued Work", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-progress-4" }, { "id": "growth-progress-5", "name": "Completion Band", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-progress-5" } ] }, { "id": "skeletons", "label": "Skeletons", "description": "Skeleton placeholders and shimmer loaders — generic blocks plus domain-specific shapes (message, card, list row, table, comment, feed, article, dashboard). Reserve layout while data loads to kill layout shift and avoid empty white screens.", "url": "https://nudaui.dev/components#section-skeletons", "componentCount": 24, "components": [ { "id": "skeleton-shimmer", "name": "Skeleton Shimmer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#skeleton-shimmer" }, { "id": "card-skeleton", "name": "Card Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#card-skeleton" }, { "id": "image-skeleton", "name": "Image Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#image-skeleton" }, { "id": "table-skeleton", "name": "Table Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#table-skeleton" }, { "id": "profile-skeleton", "name": "Profile Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#profile-skeleton" }, { "id": "skeleton-message", "name": "Message Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#skeleton-message" }, { "id": "skeleton-card", "name": "Card Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#skeleton-card" }, { "id": "skeleton-list", "name": "List Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#skeleton-list" }, { "id": "skeleton-table", "name": "Table Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#skeleton-table" }, { "id": "skeleton-comment", "name": "Comment Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#skeleton-comment" }, { "id": "skeleton-stat", "name": "Stat Card Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#skeleton-stat" }, { "id": "skeleton-feed", "name": "Feed Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#skeleton-feed" }, { "id": "skeleton-video", "name": "Video Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#skeleton-video" }, { "id": "skeleton-article", "name": "Article Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#skeleton-article" }, { "id": "skeleton-avatar-stack", "name": "Avatar Stack Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#skeleton-avatar-stack" }, { "id": "skeleton-dashboard", "name": "Dashboard Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#skeleton-dashboard" }, { "id": "skeleton-progressive", "name": "Progressive Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#skeleton-progressive" }, { "id": "shimmer-card-skeleton", "name": "Shimmer Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#shimmer-card-skeleton" }, { "id": "avatar-line-skeleton", "name": "Avatar + Lines", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#avatar-line-skeleton" }, { "id": "table-skeleton-sk", "name": "Table Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#table-skeleton-sk" }, { "id": "chart-skeleton", "name": "Chart Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#chart-skeleton" }, { "id": "image-skeleton-sk", "name": "Image Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#image-skeleton-sk" }, { "id": "wave-skeleton", "name": "Wave Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#wave-skeleton" }, { "id": "pulse-grid-skeleton", "name": "Pulse Grid", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pulse-grid-skeleton" } ] }, { "id": "text-effects", "label": "Text Effects", "description": "Typography-driven animations — scramble, typewriter, letter reveal, gradient sweep, glitch. Hero headlines, on-scroll reveals, marketing copy.", "url": "https://nudaui.dev/components#section-text-effects", "componentCount": 18, "components": [ { "id": "typewriter", "name": "Typewriter", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#typewriter" }, { "id": "glitch-text", "name": "Glitch Text", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glitch-text" }, { "id": "gradient-slide", "name": "Gradient Slide", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-slide" }, { "id": "blur-reveal", "name": "Blur Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#blur-reveal" }, { "id": "letter-spacing-wave", "name": "Letter Spacing Wave", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#letter-spacing-wave" }, { "id": "neon-glow", "name": "Neon Glow", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#neon-glow" }, { "id": "scramble-text", "name": "Scramble Text", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#scramble-text" }, { "id": "stroke-fill", "name": "Stroke Fill", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#stroke-fill" }, { "id": "bouncy-letters", "name": "Bouncy Letters", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bouncy-letters" }, { "id": "fade-up-words", "name": "Fade Up Words", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#fade-up-words" }, { "id": "scramble-decode", "name": "Scramble Decode", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#scramble-decode" }, { "id": "gradient-wave-text", "name": "Gradient Wave", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-wave-text" }, { "id": "typewriter-caret", "name": "Typewriter Caret", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#typewriter-caret" }, { "id": "char-stagger-rise", "name": "Char Stagger Rise", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#char-stagger-rise" }, { "id": "glitch-hover-text", "name": "Glitch Hover Text", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glitch-hover-text" }, { "id": "neon-flicker-text", "name": "Neon Flicker Text", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#neon-flicker-text" }, { "id": "blur-in-text", "name": "Blur In", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#blur-in-text" }, { "id": "underline-grow-text", "name": "Underline Grow", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#underline-grow-text" } ] }, { "id": "buttons", "label": "Buttons", "description": "Animated button states — magnetic hover, liquid morph, border beam, ripple, shine. Conversion-focused micro-interactions for CTAs.", "url": "https://nudaui.dev/components#section-buttons", "componentCount": 23, "components": [ { "id": "shine-sweep", "name": "Shine Sweep", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#shine-sweep" }, { "id": "border-draw", "name": "Border Draw", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#border-draw" }, { "id": "ripple-click", "name": "Ripple Click", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#ripple-click" }, { "id": "magnetic-hover", "name": "Magnetic Hover", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#magnetic-hover" }, { "id": "fill-slide", "name": "Fill Slide", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#fill-slide" }, { "id": "glow-pulse", "name": "Glow Pulse", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glow-pulse" }, { "id": "scale-bounce", "name": "Scale Bounce", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scale-bounce" }, { "id": "underline-slide", "name": "Underline Slide", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#underline-slide" }, { "id": "arrow-slide", "name": "Arrow Slide", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#arrow-slide" }, { "id": "ghost-outline", "name": "Ghost Outline", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ghost-outline" }, { "id": "holographic-button", "name": "Holographic Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#holographic-button" }, { "id": "glitch-button", "name": "Glitch Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glitch-button" }, { "id": "neumorphic-button", "name": "Neumorphic Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#neumorphic-button" }, { "id": "swipe-confirm", "name": "Swipe to Confirm", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#swipe-confirm" }, { "id": "hold-confirm", "name": "Hold to Confirm", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#hold-confirm" }, { "id": "btn-magnetic-pull", "name": "Magnetic Pull", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#btn-magnetic-pull" }, { "id": "btn-liquid-fill", "name": "Liquid Fill Hover", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#btn-liquid-fill" }, { "id": "btn-border-draw", "name": "Border Draw", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#btn-border-draw" }, { "id": "btn-icon-slide", "name": "Icon Slide", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#btn-icon-slide" }, { "id": "btn-gradient-sweep", "name": "Gradient Sweep", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#btn-gradient-sweep" }, { "id": "btn-press-3d", "name": "3D Press", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#btn-press-3d" }, { "id": "btn-shine-sweep", "name": "Shine Sweep", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#btn-shine-sweep" }, { "id": "btn-ripple-ink", "name": "Ink Ripple", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#btn-ripple-ink" } ] }, { "id": "toggles-inputs", "label": "Toggles & Inputs", "description": "Switches, checkboxes, radios, OTP fields. Stateful form controls with morphing transitions between on/off and indeterminate states.", "url": "https://nudaui.dev/components#section-toggles-inputs", "componentCount": 18, "components": [ { "id": "smooth-toggle", "name": "Smooth Toggle", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#smooth-toggle" }, { "id": "checkbox-bounce", "name": "Checkbox Bounce", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#checkbox-bounce" }, { "id": "focus-ring", "name": "Focus Ring", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#focus-ring" }, { "id": "float-label-field", "name": "Float Label", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#float-label-field" }, { "id": "search-expand-field", "name": "Search Expand", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#search-expand-field" }, { "id": "radio-pulse", "name": "Radio Pulse", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#radio-pulse" }, { "id": "ios-switch-glow", "name": "iOS Switch Glow", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ios-switch-glow" }, { "id": "segmented-toggle", "name": "Segmented Toggle", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#segmented-toggle" }, { "id": "floating-label-input", "name": "Floating Label", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#floating-label-input" }, { "id": "focus-underline-input", "name": "Focus Underline", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#focus-underline-input" }, { "id": "checkbox-draw", "name": "Checkbox Draw", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#checkbox-draw" }, { "id": "radio-pop", "name": "Radio Pop", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#radio-pop" }, { "id": "otp-inputs", "name": "OTP Inputs", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#otp-inputs" }, { "id": "password-meter", "name": "Password Meter", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#password-meter" }, { "id": "growth-input-1", "name": "Preference Row", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-input-1" }, { "id": "growth-input-2", "name": "Choice Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-input-2" }, { "id": "growth-input-3", "name": "Inline Switch", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-input-3" }, { "id": "growth-input-4", "name": "Option Signal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-input-4" } ] }, { "id": "cards-hover", "label": "Cards & Hover", "description": "Card hover behaviors — 3D tilt, glow, lift, flip, traced borders. Drop-in patterns for product grids, feature cards, link cards.", "url": "https://nudaui.dev/components#section-cards-hover", "componentCount": 18, "components": [ { "id": "tilt-card", "name": "Tilt Card", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#tilt-card" }, { "id": "border-glow", "name": "Border Glow", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#border-glow" }, { "id": "reveal-card", "name": "Reveal Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#reveal-card" }, { "id": "glass-card", "name": "Glass Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glass-card" }, { "id": "spotlight-card", "name": "Spotlight Card", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#spotlight-card" }, { "id": "flip-card", "name": "Flip Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#flip-card" }, { "id": "lift-card", "name": "Lift Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#lift-card" }, { "id": "gradient-border-card", "name": "Gradient Border Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-border-card" }, { "id": "spotlight-follow-card", "name": "Spotlight Follow", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#spotlight-follow-card" }, { "id": "tilt-3d-card", "name": "Tilt 3D", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#tilt-3d-card" }, { "id": "border-gradient-rotate-card", "name": "Rotating Gradient Border", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#border-gradient-rotate-card" }, { "id": "lift-shadow-card", "name": "Lift Shadow", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#lift-shadow-card" }, { "id": "image-zoom-mask-card", "name": "Image Zoom Mask", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#image-zoom-mask-card" }, { "id": "flip-card-3d", "name": "Flip Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#flip-card-3d" }, { "id": "reveal-content-card", "name": "Reveal Content", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#reveal-content-card" }, { "id": "shine-sweep-card", "name": "Shine Sweep", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#shine-sweep-card" }, { "id": "growth-card-1", "name": "Focus Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-card-1" }, { "id": "growth-card-2", "name": "Lift State", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-card-2" } ] }, { "id": "indicators", "label": "Indicators", "description": "Status, presence, and signal indicators — pulse dots, live badges, status rings, signal bars. For uptime, online state, real-time data.", "url": "https://nudaui.dev/components#section-indicators", "componentCount": 18, "components": [ { "id": "typing-indicator", "name": "Typing Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#typing-indicator" }, { "id": "status-dot", "name": "Status Dot", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#status-dot" }, { "id": "notification-badge", "name": "Notification Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#notification-badge" }, { "id": "live-pulse", "name": "Live Pulse", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#live-pulse" }, { "id": "signal-bars", "name": "Signal Bars", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#signal-bars" }, { "id": "recording-dot", "name": "Recording Dot", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#recording-dot" }, { "id": "sync-spinner", "name": "Sync Spinner", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sync-spinner" }, { "id": "signal-strength", "name": "Signal Strength", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#signal-strength" }, { "id": "typing-presence", "name": "Typing Presence", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#typing-presence" }, { "id": "battery-indicator", "name": "Battery Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#battery-indicator" }, { "id": "online-cluster", "name": "Online Cluster", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#online-cluster" }, { "id": "in2-sync-cycle", "name": "Sync State Cycle", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#in2-sync-cycle" }, { "id": "in2-rec-timer", "name": "Recording Timer", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#in2-rec-timer" }, { "id": "in2-health-trio", "name": "Health Status Trio", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#in2-health-trio" }, { "id": "in2-queue-depth", "name": "Queue Depth Meter", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#in2-queue-depth" }, { "id": "in2-conn-quality", "name": "Connection Quality", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#in2-conn-quality" }, { "id": "in2-unsaved-dot", "name": "Unsaved Changes Dot", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#in2-unsaved-dot" }, { "id": "in2-ci-status", "name": "CI Build Status Chip", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#in2-ci-status" } ] }, { "id": "micro-interactions", "label": "Micro-interactions", "description": "Tiny, purposeful animations — like burst, copy-check, pulse badge, shake on error. The small details that make an interface feel responsive.", "url": "https://nudaui.dev/components#section-micro-interactions", "componentCount": 18, "components": [ { "id": "like-heart", "name": "Like Heart", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#like-heart" }, { "id": "copy-button-tap", "name": "Copy Button", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#copy-button-tap" }, { "id": "bookmark-toggle", "name": "Bookmark Toggle", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#bookmark-toggle" }, { "id": "star-rating", "name": "Star Rating", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#star-rating" }, { "id": "share-pop", "name": "Share Pop", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#share-pop" }, { "id": "download-arrow", "name": "Download Arrow", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#download-arrow" }, { "id": "send-button", "name": "Send Button", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#send-button" }, { "id": "menu-morph", "name": "Menu Morph", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#menu-morph" }, { "id": "spotlight-card-mi", "name": "Spotlight Card", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#spotlight-card-mi" }, { "id": "tilt-card-mi", "name": "Tilt Card", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#tilt-card-mi" }, { "id": "click-spark", "name": "Click Spark", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#click-spark" }, { "id": "checkbox-pop", "name": "Checkbox Pop", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#checkbox-pop" }, { "id": "switch-bounce", "name": "Switch Bounce", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#switch-bounce" }, { "id": "copy-feedback", "name": "Copy Feedback", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#copy-feedback" }, { "id": "save-heartbeat", "name": "Save Heartbeat", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#save-heartbeat" }, { "id": "thumbs-react", "name": "Thumbs React", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#thumbs-react" }, { "id": "growth-micro-1", "name": "Confirm Pulse", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-micro-1" }, { "id": "growth-micro-2", "name": "Action Echo", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-micro-2" } ] }, { "id": "backgrounds", "label": "Backgrounds", "description": "Animated background fills — aurora, mesh gradients, grid pulse, noise grain, gradient flow. Hero backdrops without WebGL or video tags.", "url": "https://nudaui.dev/components#section-backgrounds", "componentCount": 18, "components": [ { "id": "gradient-mesh", "name": "Gradient Mesh", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-mesh" }, { "id": "dot-grid", "name": "Dot Grid", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dot-grid" }, { "id": "noise-grain", "name": "Noise Grain", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#noise-grain" }, { "id": "aurora", "name": "Aurora", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#aurora" }, { "id": "grid-fade", "name": "Grid Fade", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#grid-fade" }, { "id": "particle-float", "name": "Particle Float", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#particle-float" }, { "id": "plasma-blob", "name": "Plasma Blob", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#plasma-blob" }, { "id": "scanlines-bg", "name": "Scanlines", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scanlines-bg" }, { "id": "starfield-bg", "name": "Starfield", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#starfield-bg" }, { "id": "depth-grid", "name": "Depth Grid", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#depth-grid" }, { "id": "blueprint-bg", "name": "Blueprint Grid", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#blueprint-bg" }, { "id": "animated-grid-bg", "name": "Animated Grid", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#animated-grid-bg" }, { "id": "floating-orbs-bg", "name": "Floating Orbs", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#floating-orbs-bg" }, { "id": "dot-drift-bg", "name": "Dot Drift", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dot-drift-bg" }, { "id": "gradient-wave-bg", "name": "Gradient Wave", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-wave-bg" }, { "id": "noise-field-bg", "name": "Noise Field", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#noise-field-bg" }, { "id": "beam-sweep-bg", "name": "Beam Sweep", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#beam-sweep-bg" }, { "id": "growth-background-1", "name": "Ambient Grid", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-background-1" } ] }, { "id": "borders-outlines", "label": "Borders & Outlines", "description": "Animated borders and outlines — traced borders, dashed flow, glow rings, gradient beams. Highlight CTAs, focus states, premium tiers.", "url": "https://nudaui.dev/components#section-borders-outlines", "componentCount": 18, "components": [ { "id": "gradient-border", "name": "Gradient Border", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-border" }, { "id": "dashed-march", "name": "Dashed March", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dashed-march" }, { "id": "glow-border", "name": "Glow Border", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glow-border" }, { "id": "drawing-border", "name": "Drawing Border", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#drawing-border" }, { "id": "rainbow-border", "name": "Rainbow Border", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#rainbow-border" }, { "id": "bdx-rotating-gradient", "name": "Rotating Gradient Border", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bdx-rotating-gradient" }, { "id": "bdx-marching-ants", "name": "Marching Ants", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bdx-marching-ants" }, { "id": "bdx-glow-pulse", "name": "Glow Pulse Outline", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bdx-glow-pulse" }, { "id": "bdx-corner-brackets", "name": "Corner Brackets", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bdx-corner-brackets" }, { "id": "bdx-double-border", "name": "Double Border", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bdx-double-border" }, { "id": "bdx-underline-grow", "name": "Animated Underline Grow", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bdx-underline-grow" }, { "id": "bdx-conic-spin", "name": "Conic Spinning Border", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bdx-conic-spin" }, { "id": "rotating-gradient-border", "name": "Rotating Gradient Border", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#rotating-gradient-border" }, { "id": "dashed-march-border", "name": "Marching Ants", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dashed-march-border" }, { "id": "glow-trace-border", "name": "Glow Trace", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glow-trace-border" }, { "id": "corner-draw-border", "name": "Corner Draw", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#corner-draw-border" }, { "id": "double-pulse-border", "name": "Double Pulse", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#double-pulse-border" }, { "id": "neon-frame-border", "name": "Neon Frame", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#neon-frame-border" } ] }, { "id": "avatars", "label": "Avatars", "description": "User avatar treatments — status rings, presence dots, stacked groups, shimmer placeholders. Inline user identity at any size.", "url": "https://nudaui.dev/components#section-avatars", "componentCount": 20, "components": [ { "id": "status-avatar", "name": "Status Avatar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#status-avatar" }, { "id": "stack-avatars", "name": "Stack Avatars", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#stack-avatars" }, { "id": "pulse-avatar", "name": "Pulse Avatar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pulse-avatar" }, { "id": "initials-avatar", "name": "Initials Avatar", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#initials-avatar" }, { "id": "avatar-group", "name": "Avatar Group", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#avatar-group" }, { "id": "avatar-tooltip", "name": "Avatar with Tooltip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#avatar-tooltip" }, { "id": "presence-ring", "name": "Presence Ring", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#presence-ring" }, { "id": "avatar-initials", "name": "Avatar Initials", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#avatar-initials" }, { "id": "verified-avatar", "name": "Verified Avatar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#verified-avatar" }, { "id": "av2-voice", "name": "Voice Activity Ring", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#av2-voice" }, { "id": "av2-story", "name": "Story Ring Avatar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#av2-story" }, { "id": "av2-squircle", "name": "Squircle Avatar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#av2-squircle" }, { "id": "av2-hex", "name": "Hexagon Avatar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#av2-hex" }, { "id": "av2-crown", "name": "Crown Badge Avatar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#av2-crown" }, { "id": "av2-upload", "name": "Upload Progress Ring", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#av2-upload" }, { "id": "av2-live", "name": "Live Streaming Avatar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#av2-live" }, { "id": "av2-focus", "name": "Focus Status Avatar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#av2-focus" }, { "id": "av2-fan", "name": "Fan Stack Avatars", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#av2-fan" }, { "id": "av2-typing", "name": "Typing Avatar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#av2-typing" }, { "id": "av2-notify", "name": "Notification Bubble Avatar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#av2-notify" } ] }, { "id": "badges-tags", "label": "Badges & Tags", "description": "Display-only pill labels and status tags — New, Beta, count, gradient, animated pulse. Read-only chips for versioning, feature flags, and taxonomy. For a text input that lets users add/remove their own tags, see Tags & Chips Input.", "url": "https://nudaui.dev/components#section-badges-tags", "componentCount": 18, "components": [ { "id": "pill-badge", "name": "Pill Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pill-badge" }, { "id": "count-badge", "name": "Count Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#count-badge" }, { "id": "tag-slide", "name": "Tag Slide", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#tag-slide" }, { "id": "shimmer-badge", "name": "Shimmer Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#shimmer-badge" }, { "id": "dot-badge", "name": "Dot Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dot-badge" }, { "id": "icon-count-badge", "name": "Count Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#icon-count-badge" }, { "id": "ribbon-badge", "name": "Ribbon Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ribbon-badge" }, { "id": "glow-badge", "name": "Glow Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glow-badge" }, { "id": "trending-tag", "name": "Trending Tag", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#trending-tag" }, { "id": "pulse-live-badge", "name": "Live Pulse", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pulse-live-badge" }, { "id": "gradient-shine-badge", "name": "Gradient Shine", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-shine-badge" }, { "id": "count-pop-badge", "name": "Count Pop", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#count-pop-badge" }, { "id": "status-breathing-badge", "name": "Status Breathing", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#status-breathing-badge" }, { "id": "growth-badge-1", "name": "Priority Flag", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-badge-1" }, { "id": "growth-badge-2", "name": "Fresh Signal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-badge-2" }, { "id": "growth-badge-3", "name": "Filtered Tag", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-badge-3" }, { "id": "growth-badge-4", "name": "Review Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-badge-4" }, { "id": "growth-badge-5", "name": "Release Marker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-badge-5" } ] }, { "id": "navigation", "label": "Navigation", "description": "Top-nav and inline nav patterns — underline slide, pill indicator, animated tabs, dropdown reveal. Pointer-driven navigation primitives.", "url": "https://nudaui.dev/components#section-navigation", "componentCount": 21, "components": [ { "id": "underline-nav", "name": "Underline Nav", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#underline-nav" }, { "id": "pill-nav", "name": "Pill Nav", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pill-nav" }, { "id": "tab-slide", "name": "Tab Slide", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#tab-slide" }, { "id": "breadcrumb-fade", "name": "Breadcrumb Fade", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#breadcrumb-fade" }, { "id": "nav-sidebar-toggle", "name": "Sidebar Collapse", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#nav-sidebar-toggle" }, { "id": "navx-pill-tab-bar", "name": "Pill Tab Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#navx-pill-tab-bar" }, { "id": "navx-underline-thick", "name": "Thick Underline Nav", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#navx-underline-thick" }, { "id": "navx-segmented-control", "name": "Segmented Control", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#navx-segmented-control" }, { "id": "navx-vertical-rail", "name": "Vertical Nav Rail", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#navx-vertical-rail" }, { "id": "navx-topbar-minimal", "name": "Minimal Topbar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#navx-topbar-minimal" }, { "id": "navx-scrollspy-dots", "name": "Scrollspy Dots", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#navx-scrollspy-dots" }, { "id": "navx-float-bottom", "name": "Floating Bottom Nav", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#navx-float-bottom" }, { "id": "growth-navigation-1", "name": "Route Pulse", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-navigation-1" }, { "id": "growth-navigation-2", "name": "Section Compass", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-navigation-2" }, { "id": "growth-navigation-3", "name": "Floating Trail", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-navigation-3" }, { "id": "growth-navigation-4", "name": "Page Switcher", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-navigation-4" }, { "id": "growth-navigation-5", "name": "Context Rail", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-navigation-5" }, { "id": "growth-navigation-6", "name": "Quick Return", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-navigation-6" }, { "id": "growth-navigation-7", "name": "Breadcrumb Echo", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-navigation-7" }, { "id": "growth-navigation-8", "name": "Workspace Switch", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-navigation-8" }, { "id": "growth-navigation-9", "name": "Anchor Signal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-navigation-9" } ] }, { "id": "dropdowns-menus", "label": "Dropdowns & Menus", "description": "Dropdown and menu UI — fade/scale/slide menus, context menu, profile menu, split button, mega menu, nested submenu, styled select, checkbox menu, searchable and action menus. Accessible, framework-agnostic open/close patterns.", "url": "https://nudaui.dev/components#section-dropdowns-menus", "componentCount": 18, "components": [ { "id": "dropdown-fade", "name": "Fade Dropdown", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dropdown-fade" }, { "id": "dropdown-scale", "name": "Scale Dropdown", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dropdown-scale" }, { "id": "context-menu", "name": "Context Menu", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#context-menu" }, { "id": "profile-menu", "name": "Profile Menu", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#profile-menu" }, { "id": "split-button", "name": "Split Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#split-button" }, { "id": "checkbox-menu", "name": "Checkbox Menu", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#checkbox-menu" }, { "id": "dropdown-search", "name": "Search Dropdown", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dropdown-search" }, { "id": "nested-submenu", "name": "Nested Submenu", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#nested-submenu" }, { "id": "mega-menu", "name": "Mega Menu", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mega-menu" }, { "id": "select-dropdown", "name": "Styled Select", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#select-dropdown" }, { "id": "action-menu", "name": "Action Menu", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#action-menu" }, { "id": "dropdown-slide", "name": "Slide Dropdown", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dropdown-slide" }, { "id": "dm2-destructive", "name": "Destructive Action Menu", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dm2-destructive" }, { "id": "dm2-shortcuts", "name": "Shortcut Menu", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dm2-shortcuts" }, { "id": "dm2-radio", "name": "Radio Group Menu", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dm2-radio" }, { "id": "dm2-icongrid", "name": "Icon Grid Menu", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dm2-icongrid" }, { "id": "dm2-stickyfooter", "name": "Sticky Footer Menu", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dm2-stickyfooter" }, { "id": "dm2-overflow", "name": "Toolbar Overflow Menu", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dm2-overflow" } ] }, { "id": "breadcrumbs", "label": "Breadcrumbs", "description": "Breadcrumb trails — chevron, slash, pill, arrow, collapsed, icon, gradient, numbered-step, underline, and glass styles. Hierarchical navigation that orients users and feeds breadcrumb rich results.", "url": "https://nudaui.dev/components#section-breadcrumbs", "componentCount": 18, "components": [ { "id": "breadcrumb-chevron", "name": "Chevron Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#breadcrumb-chevron" }, { "id": "breadcrumb-slash", "name": "Slash Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#breadcrumb-slash" }, { "id": "breadcrumb-pill", "name": "Pill Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#breadcrumb-pill" }, { "id": "breadcrumb-arrow", "name": "Arrow Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#breadcrumb-arrow" }, { "id": "breadcrumb-collapse", "name": "Collapsed Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#breadcrumb-collapse" }, { "id": "breadcrumb-icon", "name": "Icon Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#breadcrumb-icon" }, { "id": "breadcrumb-gradient", "name": "Gradient Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#breadcrumb-gradient" }, { "id": "breadcrumb-step", "name": "Numbered Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#breadcrumb-step" }, { "id": "breadcrumb-underline", "name": "Underline Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#breadcrumb-underline" }, { "id": "breadcrumb-glass", "name": "Glass Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#breadcrumb-glass" }, { "id": "bc2-slide", "name": "Sliding Highlight Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bc2-slide" }, { "id": "bc2-path", "name": "Copyable Path Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bc2-path" }, { "id": "bc2-scroll", "name": "Scroll Fade Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bc2-scroll" }, { "id": "bc2-dropdown", "name": "Dropdown Truncation Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bc2-dropdown" }, { "id": "bc2-progress", "name": "Progress Glow Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bc2-progress" }, { "id": "bc2-badge", "name": "Live Count Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bc2-badge" }, { "id": "bc2-folder", "name": "Folder Morph Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bc2-folder" }, { "id": "bc2-stack", "name": "Stacked Trail Breadcrumb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bc2-stack" } ] }, { "id": "pagination", "label": "Pagination", "description": "Pagination controls — classic numbered, rounded, minimal pager, dots, load-more, compact with ellipsis, jump-to-page, progress, arrows, and underline. For paging lists, tables, search results, and carousels.", "url": "https://nudaui.dev/components#section-pagination", "componentCount": 18, "components": [ { "id": "pagination-classic", "name": "Classic Pagination", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pagination-classic" }, { "id": "pagination-rounded", "name": "Rounded Pagination", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pagination-rounded" }, { "id": "pagination-minimal", "name": "Minimal Pager", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pagination-minimal" }, { "id": "pagination-dots", "name": "Dot Pagination", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pagination-dots" }, { "id": "pagination-load-more", "name": "Load More", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pagination-load-more" }, { "id": "pagination-compact", "name": "Compact Pagination", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pagination-compact" }, { "id": "pagination-input", "name": "Jump To Page", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pagination-input" }, { "id": "pagination-progress", "name": "Progress Pagination", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pagination-progress" }, { "id": "pagination-arrows", "name": "Arrow Pager", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pagination-arrows" }, { "id": "pagination-numbered-bar", "name": "Underline Pagination", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pagination-numbered-bar" }, { "id": "pg2-infinite-scroll", "name": "Infinite Scroll Sentinel", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pg2-infinite-scroll" }, { "id": "pg2-cursor", "name": "Cursor Pager", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pg2-cursor" }, { "id": "pg2-range", "name": "Range Pagination", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pg2-range" }, { "id": "pg2-segmented", "name": "Segmented Page Groups", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pg2-segmented" }, { "id": "pg2-keyboard-hint", "name": "Keyboard Hint Pager", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pg2-keyboard-hint" }, { "id": "pg2-sliding-pill", "name": "Sliding Window Pill", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pg2-sliding-pill" }, { "id": "pg2-vertical-rail", "name": "Vertical Pagination Rail", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pg2-vertical-rail" }, { "id": "pg2-table-footer", "name": "Table Footer Pagination", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pg2-table-footer" } ] }, { "id": "notifications", "label": "Toasts & Alerts", "description": "Toasts, banners, snackbars, and inline alerts — transient, auto-dismissing system messages that slide in and out. For a persistent inbox of past notifications, see Notification Center.", "url": "https://nudaui.dev/components#section-notifications", "componentCount": 20, "components": [ { "id": "toast-slide", "name": "Toast Slide", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#toast-slide" }, { "id": "alert-shake", "name": "Alert Shake", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#alert-shake" }, { "id": "success-check", "name": "Success Check", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#success-check" }, { "id": "banner-slide", "name": "Banner Slide", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#banner-slide" }, { "id": "snackbar", "name": "Snackbar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#snackbar" }, { "id": "achievement-unlock", "name": "Achievement Unlock", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#achievement-unlock" }, { "id": "undo-toast", "name": "Undo Toast", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#undo-toast" }, { "id": "level-up", "name": "Level Up", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#level-up" }, { "id": "system-alert", "name": "System Alert", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#system-alert" }, { "id": "ta2-timer-ring", "name": "Timer Ring Toast", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ta2-timer-ring" }, { "id": "ta2-swipe-dismiss", "name": "Swipe To Dismiss Toast", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ta2-swipe-dismiss" }, { "id": "ta2-promise", "name": "Promise Toast", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ta2-promise" }, { "id": "ta2-action-toast", "name": "Action Toast", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ta2-action-toast" }, { "id": "ta2-mention", "name": "Mention Toast", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ta2-mention" }, { "id": "ta2-stack", "name": "Stacked Toast Group", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ta2-stack" }, { "id": "ta2-upload", "name": "Upload Progress Toast", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ta2-upload" }, { "id": "ta2-destructive-confirm", "name": "Destructive Confirm Alert", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ta2-destructive-confirm" }, { "id": "ta2-semantic-set", "name": "Semantic Alert Set", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ta2-semantic-set" }, { "id": "ta2-field-error", "name": "Field Error Alert", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ta2-field-error" }, { "id": "ta2-migration-banner", "name": "Migration Progress Banner", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ta2-migration-banner" } ] }, { "id": "tooltips", "label": "Tooltips", "description": "Hover and focus tooltips — arrow, fade, slide, glass effect. Contextual help that appears on demand and disappears cleanly.", "url": "https://nudaui.dev/components#section-tooltips", "componentCount": 18, "components": [ { "id": "fade-tooltip", "name": "Fade Tooltip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#fade-tooltip" }, { "id": "scale-tooltip", "name": "Scale Tooltip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scale-tooltip" }, { "id": "arrow-tooltip", "name": "Arrow Tooltip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#arrow-tooltip" }, { "id": "glow-tooltip", "name": "Glow Tooltip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glow-tooltip" }, { "id": "rich-tooltip", "name": "Rich Tooltip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#rich-tooltip" }, { "id": "coachmark-tooltip", "name": "Coachmark Tooltip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#coachmark-tooltip" }, { "id": "kbd-tooltip", "name": "Keyboard Shortcut Tooltip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#kbd-tooltip" }, { "id": "photo-tooltip", "name": "Photo Preview Tooltip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#photo-tooltip" }, { "id": "glow-edge-tooltip", "name": "Glow Tooltip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glow-edge-tooltip" }, { "id": "slide-arrow-tip", "name": "Slide Arrow Tip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#slide-arrow-tip" }, { "id": "follow-cursor-tip", "name": "Follow Cursor Tip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#follow-cursor-tip" }, { "id": "typewriter-tip", "name": "Typewriter Tip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#typewriter-tip" }, { "id": "glass-tip", "name": "Glass Tooltip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glass-tip" }, { "id": "step-coachmark-tip", "name": "Coachmark", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#step-coachmark-tip" }, { "id": "growth-tooltip-1", "name": "Context Hint", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-tooltip-1" }, { "id": "growth-tooltip-2", "name": "Shortcut Label", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-tooltip-2" }, { "id": "growth-tooltip-3", "name": "Guidance Note", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-tooltip-3" }, { "id": "growth-tooltip-4", "name": "Feature Nudge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-tooltip-4" } ] }, { "id": "dividers", "label": "Dividers", "description": "Animated separators — gradient lines, pulsing dots, drawn waves and zigzags, sparkle. Section breaks with personality.", "url": "https://nudaui.dev/components#section-dividers", "componentCount": 18, "components": [ { "id": "gradient-divider", "name": "Gradient Divider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-divider" }, { "id": "animated-dots", "name": "Animated Dots", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#animated-dots" }, { "id": "wave-divider", "name": "Wave Divider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#wave-divider" }, { "id": "zigzag-divider", "name": "Zigzag Divider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#zigzag-divider" }, { "id": "sparkle-divider", "name": "Sparkle Divider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sparkle-divider" }, { "id": "text-divider", "name": "Text Divider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#text-divider" }, { "id": "animated-rule", "name": "Animated Rule", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#animated-rule" }, { "id": "blob-divider", "name": "Blob Divider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#blob-divider" }, { "id": "double-stripe", "name": "Double Stripe", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#double-stripe" }, { "id": "animated-dash-divider", "name": "Animated Dash", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#animated-dash-divider" }, { "id": "gradient-flow-divider", "name": "Gradient Flow Line", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-flow-divider" }, { "id": "animated-wave-divider", "name": "Wave Divider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#animated-wave-divider" }, { "id": "sparkle-line-divider", "name": "Sparkle Line", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sparkle-line-divider" }, { "id": "growth-divider-1", "name": "Milestone Break", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-divider-1" }, { "id": "growth-divider-2", "name": "Section Pulse", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-divider-2" }, { "id": "growth-divider-3", "name": "Status Separator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-divider-3" }, { "id": "growth-divider-4", "name": "Labelled Rule", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-divider-4" }, { "id": "growth-divider-5", "name": "Gradient Marker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-divider-5" } ] }, { "id": "cursors", "label": "Cursors", "description": "Custom cursor effects — dot follower, magnetic snap, trail, mix-blend. Pointer-driven enhancements for marketing sites and portfolios.", "url": "https://nudaui.dev/components#section-cursors", "componentCount": 20, "components": [ { "id": "cursor-trail", "name": "Cursor Trail", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#cursor-trail" }, { "id": "cursor-glow", "name": "Cursor Glow", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#cursor-glow" }, { "id": "cursor-magnet", "name": "Cursor Magnet", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#cursor-magnet" }, { "id": "cursor-spotlight", "name": "Cursor Spotlight", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#cursor-spotlight" }, { "id": "ring-follower", "name": "Ring Follower", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#ring-follower" }, { "id": "magnify-lens", "name": "Magnify Lens", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#magnify-lens" }, { "id": "snap-cursor", "name": "Snap-to-Link Cursor", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#snap-cursor" }, { "id": "blob-cursor", "name": "Blob Blend Cursor", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#blob-cursor" }, { "id": "cur2-crosshair", "name": "Crosshair Reticle", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cur2-crosshair" }, { "id": "cur2-text-select", "name": "Read Cursor", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cur2-text-select" }, { "id": "cur2-grab-hand", "name": "Grab Handle", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cur2-grab-hand" }, { "id": "cur2-resize-handles", "name": "Resize Handles", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cur2-resize-handles" }, { "id": "cur2-hover-scale", "name": "Hover-Scale Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cur2-hover-scale" }, { "id": "cur2-grid-snap", "name": "Magnetic Grid Snap", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cur2-grid-snap" }, { "id": "cur2-paint-trail", "name": "Paint Trail", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#cur2-paint-trail" }, { "id": "cur2-ripple-spark", "name": "Ripple Click Spark", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#cur2-ripple-spark" }, { "id": "cur2-comet-tail", "name": "Comet Tail", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#cur2-comet-tail" }, { "id": "cur2-view-bubble", "name": "View Bubble", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#cur2-view-bubble" }, { "id": "cur2-elastic-band", "name": "Elastic Band Follower", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#cur2-elastic-band" }, { "id": "cur2-parallax-layers", "name": "Pointer Parallax Layers", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#cur2-parallax-layers" } ] }, { "id": "countdowns", "label": "Countdowns", "description": "Time-bound counters — flip cards, digit roll, rings, segmented displays. For launches, deadlines, sales, and scheduled events.", "url": "https://nudaui.dev/components#section-countdowns", "componentCount": 18, "components": [ { "id": "flip-clock", "name": "Flip Clock", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#flip-clock" }, { "id": "circle-timer", "name": "Circle Timer", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#circle-timer" }, { "id": "bar-timer", "name": "Bar Timer", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#bar-timer" }, { "id": "number-roll", "name": "Number Roll", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#number-roll" }, { "id": "cd2-circular-ring", "name": "Circular Ring Countdown", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cd2-circular-ring" }, { "id": "cd2-digit-flip-mini", "name": "Digit Flip Mini", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cd2-digit-flip-mini" }, { "id": "cd2-dot-progress", "name": "Dot Progress Countdown", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cd2-dot-progress" }, { "id": "cd2-segmented-bar", "name": "Segmented Bar Countdown", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cd2-segmented-bar" }, { "id": "cd2-neon-glow", "name": "Neon Glow Timer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cd2-neon-glow" }, { "id": "cd2-dhms-boxes", "name": "DHMS Boxes", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cd2-dhms-boxes" }, { "id": "cd2-urgency-pulse", "name": "Urgency Pulse Timer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cd2-urgency-pulse" }, { "id": "cd2-gradient-sweep", "name": "Gradient Sweep Ring", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cd2-gradient-sweep" }, { "id": "growth-countdown-1", "name": "Launch Marker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-countdown-1" }, { "id": "growth-countdown-2", "name": "Deadline Dot", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-countdown-2" }, { "id": "growth-countdown-3", "name": "Sprint Clock", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-countdown-3" }, { "id": "growth-countdown-4", "name": "Event Interval", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-countdown-4" }, { "id": "growth-countdown-5", "name": "Expiry Ring", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-countdown-5" }, { "id": "growth-countdown-6", "name": "Quiet Countdown", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-countdown-6" } ] }, { "id": "scroll-effects", "label": "Scroll Effects", "description": "Scroll-driven animations — fade in, parallax layers, reveal on intersect, top-of-page progress bar. Built on IntersectionObserver and CSS scroll-timeline.", "url": "https://nudaui.dev/components#section-scroll-effects", "componentCount": 18, "components": [ { "id": "scroll-reveal", "name": "Scroll Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scroll-reveal" }, { "id": "parallax-layer", "name": "Parallax Layer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#parallax-layer" }, { "id": "scroll-progress", "name": "Scroll Progress", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#scroll-progress" }, { "id": "fade-section", "name": "Fade Section", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#fade-section" }, { "id": "scx-reveal-up-card", "name": "Reveal-Up Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scx-reveal-up-card" }, { "id": "scx-scale-in", "name": "Scale-In on Scroll", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scx-scale-in" }, { "id": "scx-sticky-stack", "name": "Sticky Stack Hint", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scx-sticky-stack" }, { "id": "scx-hscroll-snap", "name": "Horizontal Scroll Snap", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scx-hscroll-snap" }, { "id": "scx-progress-dots", "name": "Scroll Progress Dots", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scx-progress-dots" }, { "id": "scx-blur-reveal", "name": "Blur-to-Clear Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scx-blur-reveal" }, { "id": "scx-stagger-list", "name": "Staggered List Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scx-stagger-list" }, { "id": "scx-pinned-caption", "name": "Pinned Caption", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scx-pinned-caption" }, { "id": "growth-scroll-1", "name": "Reading Marker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-scroll-1" }, { "id": "growth-scroll-2", "name": "Section Arrival", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-scroll-2" }, { "id": "growth-scroll-3", "name": "Depth Cue", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-scroll-3" }, { "id": "growth-scroll-4", "name": "Chapter Rail", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-scroll-4" }, { "id": "growth-scroll-5", "name": "Viewport Beacon", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-scroll-5" }, { "id": "growth-scroll-6", "name": "Scroll Milestone", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-scroll-6" } ] }, { "id": "three-d", "label": "3D Effects", "description": "3D transforms in pure CSS — card flip, perspective hover, depth layering, cube. No WebGL, no Three.js — just transform-style: preserve-3d.", "url": "https://nudaui.dev/components#section-three-d", "componentCount": 8, "components": [ { "id": "3d-card-flip", "name": "3D Card Flip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#3d-card-flip" }, { "id": "rotating-cube", "name": "Rotating Cube", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#rotating-cube" }, { "id": "spinning-globe", "name": "Spinning Globe", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#spinning-globe" }, { "id": "perspective-tilt", "name": "Perspective Tilt", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#perspective-tilt" }, { "id": "3d-button", "name": "3D Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#3d-button" }, { "id": "3d-ring", "name": "3D Ring", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#3d-ring" }, { "id": "3d-pyramid", "name": "3D Pyramid", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#3d-pyramid" }, { "id": "3d-float-card", "name": "3D Float Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#3d-float-card" } ] }, { "id": "modals-overlays", "label": "Modals & Overlays", "description": "Modal dialogs, overlays, and drawers — scale in, slide, backdrop blur, side drawer. Focus-trapping shells with motion that telegraphs intent.", "url": "https://nudaui.dev/components#section-modals-overlays", "componentCount": 18, "components": [ { "id": "fade-modal", "name": "Fade Modal", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#fade-modal" }, { "id": "slide-drawer", "name": "Slide Drawer", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#slide-drawer" }, { "id": "dropdown-menu", "name": "Dropdown Menu", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#dropdown-menu" }, { "id": "bottom-sheet-modal", "name": "Bottom Sheet", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#bottom-sheet-modal" }, { "id": "popover", "name": "Popover", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#popover" }, { "id": "mdx-confirm-dialog", "name": "Confirm Dialog", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mdx-confirm-dialog" }, { "id": "mdx-fullscreen-overlay", "name": "Full-Screen Overlay", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mdx-fullscreen-overlay" }, { "id": "mdx-side-sheet-right", "name": "Side Sheet Right", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mdx-side-sheet-right" }, { "id": "mdx-bottom-action-sheet", "name": "Bottom Action Sheet", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mdx-bottom-action-sheet" }, { "id": "mdx-image-lightbox", "name": "Image Lightbox Frame", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mdx-image-lightbox" }, { "id": "mdx-alert-dialog-danger", "name": "Alert Dialog Danger", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mdx-alert-dialog-danger" }, { "id": "mdx-loading-overlay", "name": "Loading Overlay", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mdx-loading-overlay" }, { "id": "growth-overlay-1", "name": "Action Sheet Hint", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-overlay-1" }, { "id": "growth-overlay-2", "name": "Focus Frame", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-overlay-2" }, { "id": "growth-overlay-3", "name": "Overlay Status", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-overlay-3" }, { "id": "growth-overlay-4", "name": "Dismiss Rail", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-overlay-4" }, { "id": "growth-overlay-5", "name": "Confirm Layer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-overlay-5" }, { "id": "growth-overlay-6", "name": "Dialog Queue", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-overlay-6" } ] }, { "id": "accordions-tabs", "label": "Accordions & Tabs", "description": "Disclosure widgets — chevron rotate, plus-minus morph, animated tab transitions, stacked accordion. Progressive disclosure done right.", "url": "https://nudaui.dev/components#section-accordions-tabs", "componentCount": 18, "components": [ { "id": "accordion", "name": "Accordion", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#accordion" }, { "id": "animated-tabs", "name": "Animated Tabs", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#animated-tabs" }, { "id": "collapsible-card", "name": "Collapsible Card", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#collapsible-card" }, { "id": "vertical-tabs", "name": "Vertical Tabs", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vertical-tabs" }, { "id": "segmented-control", "name": "Segmented Control", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#segmented-control" }, { "id": "accx-plus-minus", "name": "Plus-Minus Accordion", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#accx-plus-minus" }, { "id": "accx-faq", "name": "FAQ Accordion", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#accx-faq" }, { "id": "accx-pill-tabs", "name": "Pill Tabs", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#accx-pill-tabs" }, { "id": "accx-vertical-tabs", "name": "Vertical Tabs", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#accx-vertical-tabs" }, { "id": "accx-underline-tabs", "name": "Underline Tabs", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#accx-underline-tabs" }, { "id": "accx-bordered-tab-card", "name": "Bordered Tab Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#accx-bordered-tab-card" }, { "id": "accx-icon-tabs", "name": "Icon Tabs", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#accx-icon-tabs" }, { "id": "growth-tabs-1", "name": "Segment State", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-tabs-1" }, { "id": "growth-tabs-2", "name": "Disclosure Marker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-tabs-2" }, { "id": "growth-tabs-3", "name": "Tab Progress", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-tabs-3" }, { "id": "growth-tabs-4", "name": "Compact Switcher", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-tabs-4" }, { "id": "growth-tabs-5", "name": "Nested Panel", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-tabs-5" }, { "id": "growth-tabs-6", "name": "Selection Rail", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-tabs-6" } ] }, { "id": "marquees", "label": "Marquees & Tickers", "description": "Infinite scrolling tickers — linear, pause-on-hover, vertical, gradient-masked edges. Logo clouds, news bars, social proof reels.", "url": "https://nudaui.dev/components#section-marquees", "componentCount": 20, "components": [ { "id": "text-marquee", "name": "Text Marquee", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#text-marquee" }, { "id": "logo-ticker", "name": "Logo Ticker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#logo-ticker" }, { "id": "reverse-marquee", "name": "Reverse Marquee", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#reverse-marquee" }, { "id": "vertical-ticker", "name": "Vertical Ticker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#vertical-ticker" }, { "id": "tilted-marquee", "name": "Tilted Marquee", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#tilted-marquee" }, { "id": "logo-cloud", "name": "Logo Cloud", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#logo-cloud" }, { "id": "bidirectional-marquee", "name": "Bidirectional Marquee", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bidirectional-marquee" }, { "id": "3d-marquee", "name": "3D Perspective Marquee", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#3d-marquee" }, { "id": "mq2-stock-ticker", "name": "Stock Ticker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mq2-stock-ticker" }, { "id": "mq2-news-crawl", "name": "News Headline Crawl", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mq2-news-crawl" }, { "id": "mq2-breaking-news", "name": "Breaking News Band", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mq2-breaking-news" }, { "id": "mq2-scoreboard", "name": "Sports Scoreboard Strip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mq2-scoreboard" }, { "id": "mq2-quote-ticker", "name": "Testimonial Quote Ticker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mq2-quote-ticker" }, { "id": "mq2-avatar-proof", "name": "Avatar Social-Proof Marquee", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mq2-avatar-proof" }, { "id": "mq2-skill-belt", "name": "Skill Badge Belt", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mq2-skill-belt" }, { "id": "mq2-hard-edge", "name": "Hard Edge-Fade Marquee", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mq2-hard-edge" }, { "id": "mq2-dual-speed", "name": "Dual-Speed Layered Marquee", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mq2-dual-speed" }, { "id": "mq2-vertical-pair", "name": "Vertical Pair Ticker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mq2-vertical-pair" }, { "id": "mq2-now-playing", "name": "Now Playing Ticker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mq2-now-playing" }, { "id": "mq2-step-ticker", "name": "Step-Scrolling Changelog Ticker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mq2-step-ticker" } ] }, { "id": "empty-states", "label": "Empty States", "description": "Empty state illustrations — empty box, inbox, search, ghost, pulse. The screens users see before there's anything to see, designed to delight.", "url": "https://nudaui.dev/components#section-empty-states", "componentCount": 18, "components": [ { "id": "empty-box", "name": "Empty Box", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#empty-box" }, { "id": "empty-inbox", "name": "Empty Inbox", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#empty-inbox" }, { "id": "empty-search", "name": "Empty Search", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#empty-search" }, { "id": "empty-folder", "name": "Empty Folder", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#empty-folder" }, { "id": "empty-ghost", "name": "Empty Ghost", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#empty-ghost" }, { "id": "no-data-pulse", "name": "No Data Pulse", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#no-data-pulse" }, { "id": "empty-notifications", "name": "No Notifications", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#empty-notifications" }, { "id": "empty-messages", "name": "No Messages", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#empty-messages" }, { "id": "empty-cart", "name": "Empty Cart", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#empty-cart" }, { "id": "empty-bookmarks", "name": "No Bookmarks", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#empty-bookmarks" }, { "id": "es2-team", "name": "No Team Members", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#es2-team" }, { "id": "es2-filtered", "name": "No Matching Results", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#es2-filtered" }, { "id": "es2-first-project", "name": "Create Your First Project", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#es2-first-project" }, { "id": "es2-payment", "name": "No Payment Method", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#es2-payment" }, { "id": "es2-antenna", "name": "Awaiting First Event", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#es2-antenna" }, { "id": "es2-kanban", "name": "Empty Kanban Column", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#es2-kanban" }, { "id": "es2-offline", "name": "You're Offline", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#es2-offline" }, { "id": "es2-chart", "name": "No Analytics Yet", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#es2-chart" } ] }, { "id": "charts", "label": "Charts", "description": "Lightweight CSS-driven charts — bar, line, donut, sparkline, gauge, heatmap, area, pie, KPI. For dashboards that don't justify a charting library.", "url": "https://nudaui.dev/components#section-charts", "componentCount": 23, "components": [ { "id": "bar-chart-grow", "name": "Bar Chart Grow", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bar-chart-grow" }, { "id": "line-chart-draw", "name": "Line Chart Draw", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#line-chart-draw" }, { "id": "donut-sweep", "name": "Donut Sweep", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#donut-sweep" }, { "id": "sparkline", "name": "Sparkline", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sparkline" }, { "id": "radial-gauge", "name": "Radial Gauge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#radial-gauge" }, { "id": "heatmap", "name": "Heatmap", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#heatmap" }, { "id": "area-chart", "name": "Area Chart", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#area-chart" }, { "id": "stacked-bars", "name": "Stacked Bars", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#stacked-bars" }, { "id": "pie-slices", "name": "Pie Slices", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pie-slices" }, { "id": "kpi-card", "name": "KPI Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#kpi-card" }, { "id": "growth-chart-1", "name": "Threshold Band", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-chart-1" }, { "id": "growth-chart-2", "name": "Comparison Needle", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-chart-2" }, { "id": "growth-chart-3", "name": "Variance Dot Plot", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-chart-3" }, { "id": "growth-chart-4", "name": "Forecast Ribbon", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-chart-4" }, { "id": "growth-chart-5", "name": "Rank Change", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-chart-5" }, { "id": "growth-chart-6", "name": "Milestone Line", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-chart-6" }, { "id": "growth-chart-7", "name": "Distribution Rail", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-chart-7" }, { "id": "growth-chart-8", "name": "Waterfall Step", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-chart-8" }, { "id": "growth-chart-9", "name": "Target Halo", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-chart-9" }, { "id": "growth-chart-10", "name": "Rolling Window", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-chart-10" }, { "id": "growth-chart-11", "name": "Outlier Marker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-chart-11" }, { "id": "growth-chart-12", "name": "Median Band", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-chart-12" }, { "id": "growth-chart-13", "name": "Volume Signal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-chart-13" } ] }, { "id": "glassmorphism", "label": "Glassmorphism", "description": "Copy-paste UI animations and components.", "url": "https://nudaui.dev/components#section-glassmorphism", "componentCount": 21, "components": [ { "id": "glass-frost-card", "name": "Glass Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glass-frost-card" }, { "id": "glass-nav", "name": "Glass Navbar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glass-nav" }, { "id": "glass-toggle", "name": "Glass Toggle", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#glass-toggle" }, { "id": "glass-modal", "name": "Glass Modal", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#glass-modal" }, { "id": "glass-pricing", "name": "Glass Pricing Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glass-pricing" }, { "id": "glass-notification", "name": "Glass Toast", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glass-notification" }, { "id": "glass-tabs", "name": "Glass Tabs", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#glass-tabs" }, { "id": "glass-search", "name": "Glass Search Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glass-search" }, { "id": "glass-badge", "name": "Glass Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glass-badge" }, { "id": "glass-blur-reveal", "name": "Blur Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glass-blur-reveal" }, { "id": "glass-dock", "name": "Glass Dock", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glass-dock" }, { "id": "glass-stat", "name": "Glass Stat Tile", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glass-stat" }, { "id": "growth-glass-1", "name": "Frosted Status", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-glass-1" }, { "id": "growth-glass-2", "name": "Prism Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-glass-2" }, { "id": "growth-glass-3", "name": "Blurred Counter", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-glass-3" }, { "id": "growth-glass-4", "name": "Glass Action Rail", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-glass-4" }, { "id": "growth-glass-5", "name": "Iridescent Chip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-glass-5" }, { "id": "growth-glass-6", "name": "Layered Panel", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-glass-6" }, { "id": "growth-glass-7", "name": "Refraction Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-glass-7" }, { "id": "growth-glass-8", "name": "Crystal Divider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-glass-8" }, { "id": "growth-glass-9", "name": "Luminous Dock", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-glass-9" } ] }, { "id": "particles", "label": "Particles & Effects", "description": "Decorative particle systems — confetti, sparkles, fireflies, snow, rain, fireworks, bubbles, stars, comet. Celebratory and ambient effects.", "url": "https://nudaui.dev/components#section-particles", "componentCount": 18, "components": [ { "id": "confetti-burst", "name": "Confetti Burst", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#confetti-burst" }, { "id": "sparkles", "name": "Sparkles", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sparkles" }, { "id": "fireflies", "name": "Fireflies", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#fireflies" }, { "id": "snowfall", "name": "Snowfall", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#snowfall" }, { "id": "rain", "name": "Rain", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#rain" }, { "id": "fireworks", "name": "Fireworks", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#fireworks" }, { "id": "bubbles", "name": "Bubbles", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bubbles" }, { "id": "stars-field", "name": "Stars Field", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#stars-field" }, { "id": "falling-petals", "name": "Falling Petals", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#falling-petals" }, { "id": "comet-trail", "name": "Comet Trail", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#comet-trail" }, { "id": "pt2-ember-rise", "name": "Ember Rise", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pt2-ember-rise" }, { "id": "pt2-dust-shaft", "name": "Dust Motes in Light Shaft", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pt2-dust-shaft" }, { "id": "pt2-magnetic-orbit", "name": "Magnetic Orbit Field", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pt2-magnetic-orbit" }, { "id": "pt2-constellation", "name": "Constellation Network", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pt2-constellation" }, { "id": "pt2-falling-ash", "name": "Falling Ash", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pt2-falling-ash" }, { "id": "pt2-pollen-drift", "name": "Pollen Drift", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pt2-pollen-drift" }, { "id": "pt2-plasma-orbs", "name": "Plasma Orbs", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pt2-plasma-orbs" }, { "id": "pt2-particle-vortex", "name": "Particle Vortex", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pt2-particle-vortex" } ] }, { "id": "gradient-animations", "label": "Animated Gradients", "description": "Copy-paste UI animations and components.", "url": "https://nudaui.dev/components#section-gradient-animations", "componentCount": 18, "components": [ { "id": "gradient-aurora", "name": "Aurora", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-aurora" }, { "id": "gradient-mesh-blobs", "name": "Mesh Gradient", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-mesh-blobs" }, { "id": "gradient-conic", "name": "Conic Spin", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-conic" }, { "id": "gradient-border-flow", "name": "Flowing Border", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-border-flow" }, { "id": "gradient-text-shimmer", "name": "Text Shimmer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-text-shimmer" }, { "id": "gradient-blob", "name": "Gradient Blob", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-blob" }, { "id": "gradient-hue", "name": "Hue Cycle", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-hue" }, { "id": "gradient-button", "name": "Gradient Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-button" }, { "id": "gradient-duotone", "name": "Duotone Shift", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-duotone" }, { "id": "gradient-progress-fill", "name": "Gradient Progress", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-progress-fill" }, { "id": "gradient-noise-mesh", "name": "Mesh + Grain", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-noise-mesh" }, { "id": "gradient-spotlight", "name": "Spotlight Gradient", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#gradient-spotlight" }, { "id": "ga2-conic-glow", "name": "Conic Glow Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ga2-conic-glow" }, { "id": "ga2-svg-stroke", "name": "Gradient Stroke Path", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ga2-svg-stroke" }, { "id": "ga2-property-stops", "name": "Interpolated Colour Stops", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ga2-property-stops" }, { "id": "ga2-breathing-spotlight", "name": "Breathing Spotlight", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ga2-breathing-spotlight" }, { "id": "ga2-holo-foil", "name": "Holographic Foil", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ga2-holo-foil" }, { "id": "ga2-wipe", "name": "Gradient Wipe", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ga2-wipe" } ] }, { "id": "noise-grain", "label": "Noise & Grain", "description": "Copy-paste UI animations and components.", "url": "https://nudaui.dev/components#section-noise-grain", "componentCount": 20, "components": [ { "id": "grain-overlay", "name": "Film Grain", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#grain-overlay" }, { "id": "grain-card", "name": "Grainy Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#grain-card" }, { "id": "grain-tv-static", "name": "TV Static", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#grain-tv-static" }, { "id": "grain-scanlines", "name": "Scanlines", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#grain-scanlines" }, { "id": "grain-dither", "name": "Dither Fade", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#grain-dither" }, { "id": "grain-paper", "name": "Paper Texture", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#grain-paper" }, { "id": "grain-reveal", "name": "Grain Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#grain-reveal" }, { "id": "grain-vignette", "name": "Grain Vignette", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#grain-vignette" }, { "id": "ng2-vhs-band", "name": "VHS Tape Band", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ng2-vhs-band" }, { "id": "ng2-crt-combo", "name": "CRT Grain Combo", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ng2-crt-combo" }, { "id": "ng2-halftone", "name": "Halftone Dots", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ng2-halftone" }, { "id": "ng2-crosshatch", "name": "Crosshatch Dither", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ng2-crosshatch" }, { "id": "ng2-bayer-gradient", "name": "Bayer Dither Gradient", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ng2-bayer-gradient" }, { "id": "ng2-static-burst", "name": "Static Burst", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ng2-static-burst" }, { "id": "ng2-duotone-poster", "name": "Duotone Grain Poster", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ng2-duotone-poster" }, { "id": "ng2-mesh-grain", "name": "Grainy Gradient Mesh", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ng2-mesh-grain" }, { "id": "ng2-sandstorm", "name": "Sandstorm Drift", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ng2-sandstorm" }, { "id": "ng2-hover-photo", "name": "Grain-On-Hover Photo", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ng2-hover-photo" }, { "id": "ng2-chromatic-speckle", "name": "Chromatic Grain Speckle", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ng2-chromatic-speckle" }, { "id": "ng2-riso-misreg", "name": "Risograph Misregistration", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ng2-riso-misreg" } ] }, { "id": "scroll-driven", "label": "Scroll-Driven", "description": "Copy-paste UI animations and components.", "url": "https://nudaui.dev/components#section-scroll-driven", "componentCount": 18, "components": [ { "id": "scroll-progress-bar", "name": "Reading Progress", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scroll-progress-bar" }, { "id": "scroll-reveal-view", "name": "Reveal on View", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scroll-reveal-view" }, { "id": "scroll-parallax-layer", "name": "Parallax Layer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scroll-parallax-layer" }, { "id": "scroll-sticky-stack", "name": "Sticky Stack", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scroll-sticky-stack" }, { "id": "scroll-image-wipe", "name": "Image Wipe Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scroll-image-wipe" }, { "id": "scroll-counter-bar", "name": "Scroll Counter Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scroll-counter-bar" }, { "id": "scroll-color-shift", "name": "Scroll Color Shift", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scroll-color-shift" }, { "id": "scroll-rotate", "name": "Scroll Rotate", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scroll-rotate" }, { "id": "scroll-scale-in", "name": "Scale In on View", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scroll-scale-in" }, { "id": "scroll-snap-row", "name": "Horizontal Snap", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scroll-snap-row" }, { "id": "sd2-toc-highlight", "name": "TOC Active Highlight", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sd2-toc-highlight" }, { "id": "sd2-zoom-view", "name": "View Zoom Image", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sd2-zoom-view" }, { "id": "sd2-sticky-shrink", "name": "Shrinking Sticky Header", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sd2-sticky-shrink" }, { "id": "sd2-hscroll-drive", "name": "Vertical-to-Horizontal Drive", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sd2-hscroll-drive" }, { "id": "sd2-stagger-entry", "name": "Staggered Entry List", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sd2-stagger-entry" }, { "id": "sd2-odometer", "name": "Scroll Odometer Counter", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sd2-odometer" }, { "id": "sd2-progress-ring", "name": "Sticky Progress Ring", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sd2-progress-ring" }, { "id": "sd2-destack", "name": "Card De-Stack", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sd2-destack" } ] }, { "id": "view-transitions", "label": "View Transitions", "description": "Copy-paste UI animations and components.", "url": "https://nudaui.dev/components#section-view-transitions", "componentCount": 20, "components": [ { "id": "vt-crossfade", "name": "Cross Fade", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt-crossfade" }, { "id": "vt-shared-element", "name": "Shared Element", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt-shared-element" }, { "id": "vt-slide-page", "name": "Slide Page", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt-slide-page" }, { "id": "vt-expand-card", "name": "Expand Card", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt-expand-card" }, { "id": "vt-tab-morph", "name": "Tab Morph", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt-tab-morph" }, { "id": "vt-list-reorder", "name": "List Reorder", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt-list-reorder" }, { "id": "vt-theme-swipe", "name": "Theme Swipe", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt-theme-swipe" }, { "id": "vt-image-grid", "name": "Grid to Detail", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt-image-grid" }, { "id": "vt2-radial-wipe", "name": "Radial Wipe", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt2-radial-wipe" }, { "id": "vt2-curtain-wipe", "name": "Curtain Wipe", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt2-curtain-wipe" }, { "id": "vt2-iris-transition", "name": "Iris Transition", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt2-iris-transition" }, { "id": "vt2-flip-board", "name": "Flip Board", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt2-flip-board" }, { "id": "vt2-card-stack", "name": "Card Stack Push", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt2-card-stack" }, { "id": "vt2-blur-scale", "name": "Blur Scale Swap", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt2-blur-scale" }, { "id": "vt2-directional-nav", "name": "Directional Nav", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt2-directional-nav" }, { "id": "vt2-lightbox-zoom", "name": "Lightbox Zoom", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt2-lightbox-zoom" }, { "id": "vt2-lime-edge-wipe", "name": "Lime Edge Wipe", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#vt2-lime-edge-wipe" }, { "id": "vt2-skeleton-morph", "name": "Skeleton Morph", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt2-skeleton-morph" }, { "id": "vt2-cube-rotate", "name": "Cube Rotate", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt2-cube-rotate" }, { "id": "vt2-accordion-fold", "name": "Accordion Fold", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#vt2-accordion-fold" } ] }, { "id": "css-only-interactions", "label": "CSS-Only Interactions", "description": "Copy-paste UI animations and components.", "url": "https://nudaui.dev/components#section-css-only-interactions", "componentCount": 18, "components": [ { "id": "css-accordion", "name": "Pure CSS Accordion", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#css-accordion" }, { "id": "css-tabs", "name": "Pure CSS Tabs", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#css-tabs" }, { "id": "css-modal", "name": "Pure CSS Modal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#css-modal" }, { "id": "css-dropdown", "name": "Pure CSS Dropdown", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#css-dropdown" }, { "id": "css-tooltip", "name": "Pure CSS Tooltip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#css-tooltip" }, { "id": "css-carousel", "name": "Pure CSS Carousel", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#css-carousel" }, { "id": "css-rating", "name": "Pure CSS Star Rating", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#css-rating" }, { "id": "css-stepper", "name": "Pure CSS Stepper", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#css-stepper" }, { "id": "css-expand-card", "name": "Expandable Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#css-expand-card" }, { "id": "css-filter-chips", "name": "Filter Chips", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#css-filter-chips" }, { "id": "co2-validation-summary", "name": "Live Validation Summary", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#co2-validation-summary" }, { "id": "co2-compare-slider", "name": "Image Comparison Slider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#co2-compare-slider" }, { "id": "co2-tag-filter", "name": "Multi-Tag Filter", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#co2-tag-filter" }, { "id": "co2-clamp-toggle", "name": "Read More Clamp Toggle", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#co2-clamp-toggle" }, { "id": "co2-sort-headers", "name": "Sortable List Header", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#co2-sort-headers" }, { "id": "co2-qty-stepper", "name": "Quantity Stepper", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#co2-qty-stepper" }, { "id": "co2-scheme-picker", "name": "Colour Scheme Picker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#co2-scheme-picker" }, { "id": "co2-anchor-popover", "name": "Anchor-Positioned Popover", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#co2-anchor-popover" } ] }, { "id": "glitch-distortion", "label": "Glitch & Distortion", "description": "Copy-paste UI animations and components.", "url": "https://nudaui.dev/components#section-glitch-distortion", "componentCount": 18, "components": [ { "id": "glitch-rgb-text", "name": "RGB Split Text", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glitch-rgb-text" }, { "id": "glitch-slice-hover", "name": "Glitch on Hover", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glitch-slice-hover" }, { "id": "glitch-datamosh", "name": "Datamosh", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glitch-datamosh" }, { "id": "glitch-scanline", "name": "Scanline Glitch", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glitch-scanline" }, { "id": "glitch-distort-hover", "name": "Distort Hover", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glitch-distort-hover" }, { "id": "glitch-jitter", "name": "Jitter", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glitch-jitter" }, { "id": "glitch-vhs", "name": "VHS", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glitch-vhs" }, { "id": "glitch-pixel-streak", "name": "Pixel Streak", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glitch-pixel-streak" }, { "id": "glitch-text-corrupt", "name": "Corrupt Text", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#glitch-text-corrupt" }, { "id": "glitch-cta-button", "name": "Glitch Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glitch-cta-button" }, { "id": "gd2-wave-warp", "name": "Wave Ripple Warp", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gd2-wave-warp" }, { "id": "gd2-lens-distort", "name": "Lens Distortion", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gd2-lens-distort" }, { "id": "gd2-jpeg-corrupt", "name": "Corrupted JPEG", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gd2-jpeg-corrupt" }, { "id": "gd2-signal-loss", "name": "Signal Loss", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gd2-signal-loss" }, { "id": "gd2-melt-drip", "name": "Melting Text", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gd2-melt-drip" }, { "id": "gd2-kaleidoscope", "name": "Kaleidoscope", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gd2-kaleidoscope" }, { "id": "gd2-hologram", "name": "Hologram", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gd2-hologram" }, { "id": "gd2-no-signal", "name": "No Signal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gd2-no-signal" } ] }, { "id": "neon-glow", "label": "Neon & Glow", "description": "Copy-paste UI animations and components.", "url": "https://nudaui.dev/components#section-neon-glow", "componentCount": 18, "components": [ { "id": "neon-sign", "name": "Neon Sign", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#neon-sign" }, { "id": "neon-button", "name": "Neon Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#neon-button" }, { "id": "neon-border", "name": "Neon Border", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#neon-border" }, { "id": "neon-text", "name": "Glow Text", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#neon-text" }, { "id": "neon-loader", "name": "Neon Loader", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#neon-loader" }, { "id": "neon-card", "name": "Glow Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#neon-card" }, { "id": "neon-toggle", "name": "Neon Toggle", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#neon-toggle" }, { "id": "neon-tube", "name": "Tube Light", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#neon-tube" }, { "id": "neon-pulse-dot", "name": "Pulse Beacon", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#neon-pulse-dot" }, { "id": "neon-grid", "name": "Neon Grid", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#neon-grid" }, { "id": "ne2-dying-tube", "name": "Dying Neon Tube", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ne2-dying-tube" }, { "id": "ne2-script", "name": "Neon Script", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ne2-script" }, { "id": "ne2-marquee", "name": "Arcade Marquee", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ne2-marquee" }, { "id": "ne2-scanline", "name": "Laser Scan Line", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ne2-scanline" }, { "id": "ne2-orb", "name": "Bioluminescent Orb", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ne2-orb" }, { "id": "ne2-dotmatrix", "name": "LED Dot Matrix", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ne2-dotmatrix" }, { "id": "ne2-halo", "name": "Icon Halo", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ne2-halo" }, { "id": "ne2-nav", "name": "Glow Nav", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ne2-nav" } ] }, { "id": "morphing-shapes", "label": "Morphing Shapes", "description": "Copy-paste UI animations and components.", "url": "https://nudaui.dev/components#section-morphing-shapes", "componentCount": 18, "components": [ { "id": "morph-blob-shape", "name": "Blob Morph", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#morph-blob-shape" }, { "id": "morph-clip", "name": "Clip-Path Morph", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#morph-clip" }, { "id": "morph-svg-path", "name": "SVG Path Morph", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#morph-svg-path" }, { "id": "morph-liquid-button", "name": "Liquid Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#morph-liquid-button" }, { "id": "morph-loader", "name": "Shape Shifter", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#morph-loader" }, { "id": "morph-menu-icon", "name": "Morph Menu Icon", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#morph-menu-icon" }, { "id": "morph-blob-bg", "name": "Blob Background", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#morph-blob-bg" }, { "id": "morph-card-expand", "name": "Card Morph", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#morph-card-expand" }, { "id": "morph-wave", "name": "Wave Morph", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#morph-wave" }, { "id": "morph-toggle-shape", "name": "Shape Toggle", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#morph-toggle-shape" }, { "id": "ms2-squash-ball", "name": "Squash & Stretch Ball", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ms2-squash-ball" }, { "id": "ms2-metaball-merge", "name": "Metaball Merge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ms2-metaball-merge" }, { "id": "ms2-polygon-cycle", "name": "Polygon Cycle", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ms2-polygon-cycle" }, { "id": "ms2-play-pause", "name": "Play/Pause/Stop Morph", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ms2-play-pause" }, { "id": "ms2-plus-check", "name": "Plus / Check Morph", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ms2-plus-check" }, { "id": "ms2-arrow-bend", "name": "Arrow Bend", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ms2-arrow-bend" }, { "id": "ms2-origami-fold", "name": "Origami Fold", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ms2-origami-fold" }, { "id": "ms2-squircle-breathe", "name": "Squircle Breathe", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ms2-squircle-breathe" } ] }, { "id": "confetti-celebration", "label": "Confetti & Celebration", "description": "Copy-paste UI animations and components.", "url": "https://nudaui.dev/components#section-confetti-celebration", "componentCount": 18, "components": [ { "id": "confetti-pop-burst", "name": "Confetti Burst", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#confetti-pop-burst" }, { "id": "confetti-checkmark", "name": "Success Check", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#confetti-checkmark" }, { "id": "confetti-fireworks", "name": "Fireworks", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#confetti-fireworks" }, { "id": "confetti-sparkle-trail", "name": "Sparkle Trail", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#confetti-sparkle-trail" }, { "id": "confetti-party-popper", "name": "Party Popper", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#confetti-party-popper" }, { "id": "confetti-emoji-rain", "name": "Emoji Rain", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#confetti-emoji-rain" }, { "id": "confetti-coin-shower", "name": "Coin Shower", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#confetti-coin-shower" }, { "id": "confetti-ribbon", "name": "Ribbon Drop", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#confetti-ribbon" }, { "id": "confetti-badge-unlock", "name": "Badge Unlock", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#confetti-badge-unlock" }, { "id": "confetti-clap", "name": "Applause Burst", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#confetti-clap" }, { "id": "cc2-streamer-unfurl", "name": "Streamer Unfurl", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cc2-streamer-unfurl" }, { "id": "cc2-balloon-release", "name": "Balloon Release", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cc2-balloon-release" }, { "id": "cc2-trophy-reveal", "name": "Trophy Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cc2-trophy-reveal" }, { "id": "cc2-medal-shockwave", "name": "Medal Shockwave", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cc2-medal-shockwave" }, { "id": "cc2-goal-burst", "name": "Goal Burst", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cc2-goal-burst" }, { "id": "cc2-star-rating", "name": "Star Rating Pop", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cc2-star-rating" }, { "id": "cc2-champagne-bubbles", "name": "Champagne Bubbles", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cc2-champagne-bubbles" }, { "id": "cc2-sparkler-fountain", "name": "Sparkler Fountain", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cc2-sparkler-fountain" } ] }, { "id": "animated-icons", "label": "Animated Icons", "description": "Copy-paste UI animations and components.", "url": "https://nudaui.dev/components#section-animated-icons", "componentCount": 18, "components": [ { "id": "icon-hamburger-x", "name": "Menu to Close", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#icon-hamburger-x" }, { "id": "icon-play-pause", "name": "Play to Pause", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#icon-play-pause" }, { "id": "icon-plus-close", "name": "Plus to Close", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#icon-plus-close" }, { "id": "icon-search-back", "name": "Search to Back", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#icon-search-back" }, { "id": "icon-heart-fill", "name": "Heart Fill", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#icon-heart-fill" }, { "id": "icon-bell-ring", "name": "Bell Ring", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#icon-bell-ring" }, { "id": "icon-copy-check", "name": "Copy to Check", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#icon-copy-check" }, { "id": "icon-sun-moon", "name": "Sun to Moon", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#icon-sun-moon" }, { "id": "icon-arrow-morph", "name": "Arrow Morph", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#icon-arrow-morph" }, { "id": "icon-download-done", "name": "Download to Done", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#icon-download-done" }, { "id": "ai2-trash-lift", "name": "Trash Lid Lift", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#ai2-trash-lift" }, { "id": "ai2-cloud-launch", "name": "Cloud Upload Launch", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#ai2-cloud-launch" }, { "id": "ai2-lock-shackle", "name": "Lock Shackle Lift", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#ai2-lock-shackle" }, { "id": "ai2-eye-blink", "name": "Eye Blink Toggle", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#ai2-eye-blink" }, { "id": "ai2-gear-mesh", "name": "Gear Mesh Loop", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ai2-gear-mesh" }, { "id": "ai2-wifi-connect", "name": "Wifi Connect Loop", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ai2-wifi-connect" }, { "id": "ai2-battery-charge", "name": "Battery Charging Loop", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ai2-battery-charge" }, { "id": "ai2-refresh-spin", "name": "Refresh Spin", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#ai2-refresh-spin" } ] }, { "id": "weather-ambient", "label": "Weather & Ambient", "description": "Copy-paste UI animations and components.", "url": "https://nudaui.dev/components#section-weather-ambient", "componentCount": 20, "components": [ { "id": "weather-rain", "name": "Rain", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#weather-rain" }, { "id": "weather-snow", "name": "Snow", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#weather-snow" }, { "id": "weather-sun-rays", "name": "Sun Rays", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#weather-sun-rays" }, { "id": "weather-clouds", "name": "Drifting Clouds", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#weather-clouds" }, { "id": "weather-lightning", "name": "Lightning", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#weather-lightning" }, { "id": "weather-fog", "name": "Fog", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#weather-fog" }, { "id": "weather-stars", "name": "Starfield", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#weather-stars" }, { "id": "weather-aurora-sky", "name": "Aurora Sky", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#weather-aurora-sky" }, { "id": "wa2-thunderstorm", "name": "Thunderstorm Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#wa2-thunderstorm" }, { "id": "wa2-heat-haze", "name": "Heat Haze Shimmer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#wa2-heat-haze" }, { "id": "wa2-hail", "name": "Hail Shower", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#wa2-hail" }, { "id": "wa2-tornado", "name": "Tornado Funnel", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#wa2-tornado" }, { "id": "wa2-rainbow", "name": "Rainbow After Rain", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#wa2-rainbow" }, { "id": "wa2-moon-phase", "name": "Moon Phase Night Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#wa2-moon-phase" }, { "id": "wa2-sunset-sweep", "name": "Sunrise Sunset Sweep", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#wa2-sunset-sweep" }, { "id": "wa2-wind-gust", "name": "Wind Gust With Swaying Tree", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#wa2-wind-gust" }, { "id": "wa2-condensation", "name": "Condensation On Glass", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#wa2-condensation" }, { "id": "wa2-uv-dial", "name": "UV Index Dial", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#wa2-uv-dial" }, { "id": "wa2-barometer", "name": "Barometer Gauge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#wa2-barometer" }, { "id": "wa2-forecast-strip", "name": "5-Day Forecast Strip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#wa2-forecast-strip" } ] }, { "id": "stats-counters", "label": "Stats & Counters", "description": "Stat blocks and counters — count up, trend cards, score rings, streak displays, achievement unlocks. Numbers worth animating.", "url": "https://nudaui.dev/components#section-stats-counters", "componentCount": 18, "components": [ { "id": "count-up", "name": "Count Up", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#count-up" }, { "id": "trend-card", "name": "Trend Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#trend-card" }, { "id": "score-ring", "name": "Score Ring", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#score-ring" }, { "id": "streak-flame", "name": "Streak Flame", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#streak-flame" }, { "id": "live-counter", "name": "Live Counter", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#live-counter" }, { "id": "comparison-bar", "name": "Comparison Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#comparison-bar" }, { "id": "battery-meter", "name": "Battery Meter", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#battery-meter" }, { "id": "goal-progress", "name": "Goal Progress", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#goal-progress" }, { "id": "achievement-badge", "name": "Achievement Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#achievement-badge" }, { "id": "stat-reveal", "name": "Stat Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#stat-reveal" }, { "id": "sc2-odometer", "name": "Odometer Digits", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sc2-odometer" }, { "id": "sc2-ringcount", "name": "Percentage Ring Count", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sc2-ringcount" }, { "id": "sc2-splitflap", "name": "Split-Flap Counter", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sc2-splitflap" }, { "id": "sc2-deltapair", "name": "Delta Pair", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sc2-deltapair" }, { "id": "sc2-fraction", "name": "Animated Fraction", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sc2-fraction" }, { "id": "sc2-abbrexpand", "name": "Abbreviated Expand", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sc2-abbrexpand" }, { "id": "sc2-tally", "name": "Tally Marks", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sc2-tally" }, { "id": "sc2-milestone", "name": "Milestone Flash", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sc2-milestone" } ] }, { "id": "form-states", "label": "Form States", "description": "Form interaction states — float labels, expanding search, password strength, OTP, validation, shake, range, step indicator, async submit.", "url": "https://nudaui.dev/components#section-form-states", "componentCount": 18, "components": [ { "id": "float-label", "name": "Float Label", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#float-label" }, { "id": "search-expand", "name": "Search Expand", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#search-expand" }, { "id": "password-strength", "name": "Password Strength", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#password-strength" }, { "id": "otp-cells", "name": "OTP Cells", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#otp-cells" }, { "id": "validation-check", "name": "Validation Check", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#validation-check" }, { "id": "error-shake", "name": "Error Shake", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#error-shake" }, { "id": "toggle-group", "name": "Toggle Group", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#toggle-group" }, { "id": "range-bubble", "name": "Range Bubble", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#range-bubble" }, { "id": "step-indicator", "name": "Step Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#step-indicator" }, { "id": "async-submit", "name": "Async Submit", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#async-submit" }, { "id": "fs2-username-check", "name": "Username Availability Check", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#fs2-username-check" }, { "id": "fs2-char-ring", "name": "Character Count Ring", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#fs2-char-ring" }, { "id": "fs2-autogrow-textarea", "name": "Auto-Growing Textarea", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#fs2-autogrow-textarea" }, { "id": "fs2-has-summary", "name": "Live Validation Summary", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#fs2-has-summary" }, { "id": "fs2-autosave", "name": "Autosave Indicator", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#fs2-autosave" }, { "id": "fs2-copy-field", "name": "Copy-to-Clipboard Field", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#fs2-copy-field" }, { "id": "fs2-confirm-match", "name": "Confirm Password Match", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#fs2-confirm-match" }, { "id": "fs2-submit-morph", "name": "Submit-to-Success Morph", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#fs2-submit-morph" } ] }, { "id": "image-effects", "label": "Image Effects", "description": "Image-level animations — hover zoom, Ken Burns, blur to focus, color drain, mask reveal, tilt, scan line, glitch, lightbox, frame reveal.", "url": "https://nudaui.dev/components#section-image-effects", "componentCount": 18, "components": [ { "id": "hover-zoom", "name": "Hover Zoom", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#hover-zoom" }, { "id": "ken-burns", "name": "Ken Burns", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ken-burns" }, { "id": "blur-to-focus", "name": "Blur to Focus", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#blur-to-focus" }, { "id": "color-drain", "name": "Color Drain", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#color-drain" }, { "id": "mask-reveal", "name": "Mask Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mask-reveal" }, { "id": "parallax-tilt", "name": "Parallax Tilt", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#parallax-tilt" }, { "id": "scan-line", "name": "Scan Line", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scan-line" }, { "id": "glitch-hover", "name": "Glitch Hover", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glitch-hover" }, { "id": "lightbox-grow", "name": "Lightbox Grow", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#lightbox-grow" }, { "id": "frame-reveal", "name": "Frame Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#frame-reveal" }, { "id": "ie2-compare", "name": "Before/After Wipe", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ie2-compare" }, { "id": "ie2-spotlight", "name": "Spotlight Reveal", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#ie2-spotlight" }, { "id": "ie2-blinds", "name": "Shutter Blinds Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ie2-blinds" }, { "id": "ie2-iris", "name": "Iris Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ie2-iris" }, { "id": "ie2-duotone", "name": "Duotone Hover", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ie2-duotone" }, { "id": "ie2-polaroid", "name": "Polaroid Develop", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ie2-polaroid" }, { "id": "ie2-peel", "name": "Corner Peel", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ie2-peel" }, { "id": "ie2-halftone", "name": "Halftone Hover", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ie2-halftone" } ] }, { "id": "ai-chat", "label": "AI / Chat UI", "description": "AI and chat UI primitives — streaming dots, streaming text, chat bubbles, thinking shimmer, prompt composer, citations, token counter, model selector.", "url": "https://nudaui.dev/components#section-ai-chat", "componentCount": 20, "components": [ { "id": "streaming-dots", "name": "Streaming Dots", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#streaming-dots" }, { "id": "streaming-text", "name": "Streaming Text", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#streaming-text" }, { "id": "chat-bubble", "name": "Chat Bubble", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#chat-bubble" }, { "id": "thinking-shimmer", "name": "Thinking Shimmer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#thinking-shimmer" }, { "id": "prompt-composer", "name": "Prompt Composer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#prompt-composer" }, { "id": "citation-chip", "name": "Citation Chip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#citation-chip" }, { "id": "token-counter", "name": "Token Counter", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#token-counter" }, { "id": "model-selector", "name": "Model Selector", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#model-selector" }, { "id": "stop-generating", "name": "Stop Generating", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#stop-generating" }, { "id": "message-actions", "name": "Message Actions", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#message-actions" }, { "id": "ac2-tool-call-card", "name": "Tool Call Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ac2-tool-call-card" }, { "id": "ac2-agent-steps", "name": "Agent Step Trace", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ac2-agent-steps" }, { "id": "ac2-reasoning-accordion", "name": "Reasoning Accordion", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ac2-reasoning-accordion" }, { "id": "ac2-code-block-msg", "name": "Code Block Message", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ac2-code-block-msg" }, { "id": "ac2-streaming-table", "name": "Streaming Markdown Table", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ac2-streaming-table" }, { "id": "ac2-attachment-chips", "name": "Attachment Chip Composer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ac2-attachment-chips" }, { "id": "ac2-voice-waveform", "name": "Voice Input Waveform", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ac2-voice-waveform" }, { "id": "ac2-prompt-grid", "name": "Suggested Prompt Grid", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ac2-prompt-grid" }, { "id": "ac2-variant-switcher", "name": "Response Variant Switcher", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ac2-variant-switcher" }, { "id": "ac2-context-usage", "name": "Context Window Usage Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ac2-context-usage" } ] }, { "id": "drag-drop", "label": "Drag & Drop", "description": "Drag and drop interactions — drop zones, file cards, sortable lists, drop indicators, trash zones, drag previews, multi-file uploads, reorder grids.", "url": "https://nudaui.dev/components#section-drag-drop", "componentCount": 18, "components": [ { "id": "drop-zone", "name": "Drop Zone", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#drop-zone" }, { "id": "file-card", "name": "File Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#file-card" }, { "id": "sortable-list", "name": "Sortable List", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sortable-list" }, { "id": "drop-indicator", "name": "Drop Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#drop-indicator" }, { "id": "trash-zone", "name": "Trash Zone", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#trash-zone" }, { "id": "drag-preview", "name": "Drag Preview", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#drag-preview" }, { "id": "drop-validation", "name": "Drop Validation", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#drop-validation" }, { "id": "multi-file-selector", "name": "Multi-File Selector", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#multi-file-selector" }, { "id": "upload-success", "name": "Upload Success", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#upload-success" }, { "id": "reorder-grid", "name": "Reorder Grid", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#reorder-grid" }, { "id": "dd2-kanban-lift", "name": "Kanban Column Lift", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dd2-kanban-lift" }, { "id": "dd2-swap-tiles", "name": "Swap-on-Drop Tiles", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dd2-swap-tiles" }, { "id": "dd2-grip-handle", "name": "Grip Handle Lift", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dd2-grip-handle" }, { "id": "dd2-indent-guide", "name": "Nested Indent Guide", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dd2-indent-guide" }, { "id": "dd2-cross-transfer", "name": "Cross-Container Transfer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dd2-cross-transfer" }, { "id": "dd2-split-resize", "name": "Drag-to-Resize Split Pane", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dd2-split-resize" }, { "id": "dd2-table-rows", "name": "Drag-to-Reorder Rows", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dd2-table-rows" }, { "id": "dd2-snap-grid", "name": "Snap-to-Grid Placement", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dd2-snap-grid" } ] }, { "id": "command-palette", "label": "Command Palette", "description": "Command palette UIs — Cmd-K trigger, spotlight, result items, group headers, no-results state, recent items, footer hints, match highlight.", "url": "https://nudaui.dev/components#section-command-palette", "componentCount": 18, "components": [ { "id": "cmdk-trigger", "name": "Cmd-K Trigger", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cmdk-trigger" }, { "id": "spotlight-overlay", "name": "Spotlight Overlay", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#spotlight-overlay" }, { "id": "result-item", "name": "Result Item", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#result-item" }, { "id": "group-header", "name": "Group Header", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#group-header" }, { "id": "cmdk-no-results", "name": "No Results", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cmdk-no-results" }, { "id": "cmdk-searching", "name": "Searching State", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cmdk-searching" }, { "id": "recent-items", "name": "Recent Items", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#recent-items" }, { "id": "footer-hints", "name": "Footer Hints", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#footer-hints" }, { "id": "match-highlight", "name": "Match Highlight", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#match-highlight" }, { "id": "quick-action", "name": "Quick Action", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#quick-action" }, { "id": "cp2-breadcrumb", "name": "Breadcrumb Drill-Down", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cp2-breadcrumb" }, { "id": "cp2-mode-prefix", "name": "Mode-Prefix Palette", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#cp2-mode-prefix" }, { "id": "cp2-preview-pane", "name": "Inline Preview Pane", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cp2-preview-pane" }, { "id": "cp2-ask-ai", "name": "AI Ask Mode", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cp2-ask-ai" }, { "id": "cp2-multiselect", "name": "Multi-Select Checklist", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#cp2-multiselect" }, { "id": "cp2-travel-highlight", "name": "Traveling Highlight Row", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cp2-travel-highlight" }, { "id": "cp2-sticky-groups", "name": "Sticky Group Headers", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cp2-sticky-groups" }, { "id": "cp2-quick-answer", "name": "Quick Answer Row", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cp2-quick-answer" } ] }, { "id": "theme-toggle", "label": "Theme Toggle", "description": "Light/dark theme switchers — sun-moon morph, switch, circle reveal, three-state, color schemes, dropdown, system indicator.", "url": "https://nudaui.dev/components#section-theme-toggle", "componentCount": 18, "components": [ { "id": "sun-moon-morph", "name": "Sun/Moon Morph", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#sun-moon-morph" }, { "id": "theme-switch", "name": "Theme Switch", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#theme-switch" }, { "id": "circle-reveal", "name": "Circle Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#circle-reveal" }, { "id": "three-state-toggle", "name": "Three-State Toggle", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#three-state-toggle" }, { "id": "color-schemes", "name": "Color Schemes", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#color-schemes" }, { "id": "theme-icon-btn", "name": "Icon Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#theme-icon-btn" }, { "id": "theme-dropdown", "name": "Theme Dropdown", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#theme-dropdown" }, { "id": "bg-swap", "name": "Animated BG Swap", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bg-swap" }, { "id": "system-indicator", "name": "System Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#system-indicator" }, { "id": "theme-slider", "name": "Slider Track", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#theme-slider" }, { "id": "tt2-daynight", "name": "Day/Night Scene", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#tt2-daynight" }, { "id": "tt2-eclipse", "name": "Eclipse Slide", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#tt2-eclipse" }, { "id": "tt2-pullcord", "name": "Pull Cord Switch", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#tt2-pullcord" }, { "id": "tt2-lamp", "name": "Desk Lamp Glow", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#tt2-lamp" }, { "id": "tt2-contrast", "name": "Contrast Stepper", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#tt2-contrast" }, { "id": "tt2-density", "name": "Density Toggle", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#tt2-density" }, { "id": "tt2-hasswap", "name": "Radio Theme Swap", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#tt2-hasswap" }, { "id": "tt2-coinflip", "name": "Coin Flip Toggle", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#tt2-coinflip" } ] }, { "id": "hero-sections", "label": "Hero Sections", "description": "Above-the-fold hero patterns — centered, split, mesh gradient, word reveal, stat row, avatar stack, floating cards, newsletter, scroll indicator.", "url": "https://nudaui.dev/components#section-hero-sections", "componentCount": 18, "components": [ { "id": "hero-centered", "name": "Centered Hero", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#hero-centered" }, { "id": "hero-split", "name": "Split Hero", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#hero-split" }, { "id": "mesh-hero", "name": "Mesh Gradient Hero", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mesh-hero" }, { "id": "word-reveal", "name": "Word Reveal Hero", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#word-reveal" }, { "id": "stat-row-hero", "name": "Stat Row Hero", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#stat-row-hero" }, { "id": "avatar-stack-hero", "name": "Avatar Stack Hero", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#avatar-stack-hero" }, { "id": "floating-card-hero", "name": "Floating Card Hero", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#floating-card-hero" }, { "id": "newsletter-hero", "name": "Newsletter Hero", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#newsletter-hero" }, { "id": "scroll-indicator", "name": "Scroll Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scroll-indicator" }, { "id": "logo-cloud-hero", "name": "Logo Cloud Hero", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#logo-cloud-hero" }, { "id": "aurora-hero", "name": "Aurora Hero", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#aurora-hero" }, { "id": "grain-gradient-hero", "name": "Grain Gradient Hero", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#grain-gradient-hero" }, { "id": "spotlight-hero", "name": "Spotlight Hero", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#spotlight-hero" }, { "id": "marquee-hero", "name": "Marquee Hero", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#marquee-hero" }, { "id": "split-reveal-hero", "name": "Split Reveal Hero", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#split-reveal-hero" }, { "id": "glass-hero", "name": "Glass Hero", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glass-hero" }, { "id": "growth-hero-1", "name": "Trust Signal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-hero-1" }, { "id": "growth-hero-2", "name": "Launch Marker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-hero-2" } ] }, { "id": "pricing", "label": "Pricing Tables", "description": "Pricing table animations — card hover, popular tier highlight, billing toggle, price morph, feature list, savings badge, comparison rows, discount countdowns.", "url": "https://nudaui.dev/components#section-pricing", "componentCount": 18, "components": [ { "id": "pricing-card", "name": "Pricing Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pricing-card" }, { "id": "popular-tier", "name": "Popular Tier", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#popular-tier" }, { "id": "billing-toggle", "name": "Billing Toggle", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#billing-toggle" }, { "id": "price-morph", "name": "Price Morph", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#price-morph" }, { "id": "feature-list", "name": "Feature List", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#feature-list" }, { "id": "savings-badge", "name": "Savings Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#savings-badge" }, { "id": "compare-row", "name": "Compare Row", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#compare-row" }, { "id": "currency-selector", "name": "Currency Selector", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#currency-selector" }, { "id": "discount-countdown", "name": "Discount Countdown", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#discount-countdown" }, { "id": "best-value", "name": "Best Value", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#best-value" }, { "id": "pr2-usage-slider", "name": "Usage Slider Pricing", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#pr2-usage-slider" }, { "id": "pr2-metered-calc", "name": "Metered Usage Calculator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pr2-metered-calc" }, { "id": "pr2-beam-tier", "name": "Gradient Beam Tier", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pr2-beam-tier" }, { "id": "pr2-enterprise", "name": "Enterprise Contact Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pr2-enterprise" }, { "id": "pr2-trial-progress", "name": "Trial Progress Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pr2-trial-progress" }, { "id": "pr2-addon-total", "name": "Add-on Checklist Total", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#pr2-addon-total" }, { "id": "pr2-credit-packs", "name": "Credit Pack Grid", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#pr2-credit-packs" }, { "id": "pr2-count-up", "name": "Count-Up Price Reveal", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#pr2-count-up" } ] }, { "id": "video-player", "label": "Video Player UI", "description": "Custom video player UI — play-pause morph, scrubber, volume, buffer indicator, big play button, controls reveal, speed selector, captions toggle.", "url": "https://nudaui.dev/components#section-video-player", "componentCount": 18, "components": [ { "id": "play-pause-morph-video", "name": "Play/Pause Morph", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#play-pause-morph-video" }, { "id": "scrubber", "name": "Scrubber", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#scrubber" }, { "id": "volume-slider", "name": "Volume Slider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#volume-slider" }, { "id": "buffer-indicator", "name": "Buffer Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#buffer-indicator" }, { "id": "big-play", "name": "Big Play Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#big-play" }, { "id": "controls-reveal", "name": "Controls Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#controls-reveal" }, { "id": "speed-selector", "name": "Speed Selector", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#speed-selector" }, { "id": "captions-toggle", "name": "Captions Toggle", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#captions-toggle" }, { "id": "fullscreen-morph", "name": "Fullscreen Morph", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#fullscreen-morph" }, { "id": "live-indicator", "name": "Live Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#live-indicator" }, { "id": "vp2-chapter-scrub", "name": "Chapter Scrub Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#vp2-chapter-scrub" }, { "id": "vp2-thumb-preview", "name": "Scrub Thumbnail Preview", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#vp2-thumb-preview" }, { "id": "vp2-live-edge", "name": "Live Edge Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#vp2-live-edge" }, { "id": "vp2-pip", "name": "Picture-in-Picture Mini Player", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#vp2-pip" }, { "id": "vp2-quality", "name": "Quality Selector", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#vp2-quality" }, { "id": "vp2-subtitles", "name": "Subtitle Track Menu", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#vp2-subtitles" }, { "id": "vp2-seek-ripple", "name": "Double-Tap Seek Ripple", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#vp2-seek-ripple" }, { "id": "vp2-next-ep", "name": "Next Episode Countdown", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#vp2-next-ep" } ] }, { "id": "onboarding", "label": "Onboarding & Coachmarks", "description": "Onboarding and coachmark patterns — spotlight, tour tooltip, step counter, welcome modal, feature pulse, coach arrow, skip button, confetti finale, checklist.", "url": "https://nudaui.dev/components#section-onboarding", "componentCount": 18, "components": [ { "id": "spotlight-cutout", "name": "Spotlight Cutout", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#spotlight-cutout" }, { "id": "tour-tooltip", "name": "Tour Tooltip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#tour-tooltip" }, { "id": "tour-counter", "name": "Step Counter", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#tour-counter" }, { "id": "welcome-modal", "name": "Welcome Modal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#welcome-modal" }, { "id": "feature-pulse", "name": "Feature Pulse", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#feature-pulse" }, { "id": "coach-arrow", "name": "Coach Arrow", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#coach-arrow" }, { "id": "tour-skip", "name": "Tour Skip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#tour-skip" }, { "id": "confetti-finale", "name": "Confetti Finale", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#confetti-finale" }, { "id": "new-badge", "name": "New Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#new-badge" }, { "id": "checklist-card", "name": "Checklist Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#checklist-card" }, { "id": "ob2-arrow-tooltip", "name": "Repositioning Arrow Tooltip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ob2-arrow-tooltip" }, { "id": "ob2-ring-checklist", "name": "Ring Checklist", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ob2-ring-checklist" }, { "id": "ob2-changelog-popover", "name": "Changelog Popover", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ob2-changelog-popover" }, { "id": "ob2-guided-setup", "name": "Guided Setup Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ob2-guided-setup" }, { "id": "ob2-hint-chip", "name": "Self-Dismissing Hint Chip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ob2-hint-chip" }, { "id": "ob2-progressive-steps", "name": "Progressive Disclosure Steps", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ob2-progressive-steps" }, { "id": "ob2-shortcut-toast", "name": "Shortcut Teaching Toast", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ob2-shortcut-toast" }, { "id": "ob2-invite-team", "name": "Invite Team Step", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ob2-invite-team" } ] }, { "id": "code-terminal", "label": "Code & Terminal", "description": "Code and terminal UI — terminal cursor, typing code, copy button, file tree, tab bar, syntax reveal, error squiggle, run button, command output, diff highlight.", "url": "https://nudaui.dev/components#section-code-terminal", "componentCount": 18, "components": [ { "id": "terminal-cursor", "name": "Terminal Cursor", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#terminal-cursor" }, { "id": "typing-code", "name": "Typing Code", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#typing-code" }, { "id": "copy-button", "name": "Copy Button", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#copy-button" }, { "id": "file-tree", "name": "File Tree", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#file-tree" }, { "id": "tab-bar", "name": "Tab Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#tab-bar" }, { "id": "syntax-reveal", "name": "Syntax Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#syntax-reveal" }, { "id": "error-squiggle", "name": "Error Squiggle", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#error-squiggle" }, { "id": "run-button", "name": "Run Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#run-button" }, { "id": "command-output", "name": "Command Output", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#command-output" }, { "id": "diff-highlight", "name": "Diff Highlight", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#diff-highlight" }, { "id": "ct2-git-diff", "name": "Git Diff Panel", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ct2-git-diff" }, { "id": "ct2-file-copy", "name": "File Tab Copy Block", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#ct2-file-copy" }, { "id": "ct2-pkg-tabs", "name": "Package Manager Tabs", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ct2-pkg-tabs" }, { "id": "ct2-test-tally", "name": "Test Result Tally", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ct2-test-tally" }, { "id": "ct2-build-steps", "name": "Build Step List", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ct2-build-steps" }, { "id": "ct2-ssh-login", "name": "SSH Login Sequence", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ct2-ssh-login" }, { "id": "ct2-repl", "name": "REPL Session", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ct2-repl" }, { "id": "ct2-stack-trace", "name": "Stack Trace Panel", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ct2-stack-trace" } ] }, { "id": "footers", "label": "Footers", "description": "Site footer patterns — minimal, newsletter signup, mega grid, aurora glow, status pill, sticky cookie bar, marquee, big brand mark, social stack, back-to-top.", "url": "https://nudaui.dev/components#section-footers", "componentCount": 18, "components": [ { "id": "minimal-footer", "name": "Minimal Footer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#minimal-footer" }, { "id": "newsletter-footer", "name": "Newsletter Footer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#newsletter-footer" }, { "id": "mega-footer-grid", "name": "Mega Footer Grid", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mega-footer-grid" }, { "id": "aurora-glow-footer", "name": "Aurora Glow Footer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#aurora-glow-footer" }, { "id": "status-footer", "name": "Status Footer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#status-footer" }, { "id": "sticky-footer-bar", "name": "Sticky Bottom Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sticky-footer-bar" }, { "id": "marquee-footer", "name": "Marquee Footer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#marquee-footer" }, { "id": "big-brand-footer", "name": "Big Brand Footer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#big-brand-footer" }, { "id": "social-stack-footer", "name": "Social Stack Footer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#social-stack-footer" }, { "id": "back-to-top-footer", "name": "Back to Top Footer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#back-to-top-footer" }, { "id": "ft2-mega-columns", "name": "Newsletter Mega Footer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ft2-mega-columns" }, { "id": "ft2-locale-select", "name": "Language & Region Footer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ft2-locale-select" }, { "id": "ft2-appstore-badges", "name": "App Store Badge Footer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ft2-appstore-badges" }, { "id": "ft2-sitemap-accordion", "name": "Sitemap Accordion Footer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ft2-sitemap-accordion" }, { "id": "ft2-compliance-badges", "name": "Compliance Badge Row Footer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ft2-compliance-badges" }, { "id": "ft2-live-clock", "name": "Live Clock Footer", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#ft2-live-clock" }, { "id": "ft2-changelog-chip", "name": "Changelog & Version Chip Footer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ft2-changelog-chip" }, { "id": "ft2-wave-edge", "name": "Animated Wave Edge Footer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ft2-wave-edge" } ] }, { "id": "auth", "label": "Login & Auth", "description": "Login, sign-up, and auth-flow components — sign-in card with float labels, OAuth buttons, OTP input, password reveal, magic link, strength meter, biometric prompt, verify email, loading button.", "url": "https://nudaui.dev/components#section-auth", "componentCount": 18, "components": [ { "id": "signin-card", "name": "Sign-in Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#signin-card" }, { "id": "oauth-buttons", "name": "OAuth Buttons", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#oauth-buttons" }, { "id": "otp-auth-input", "name": "OTP Code Input", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#otp-auth-input" }, { "id": "password-reveal", "name": "Password Reveal", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#password-reveal" }, { "id": "magic-link", "name": "Magic Link", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#magic-link" }, { "id": "auth-strength", "name": "Password Strength Meter", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#auth-strength" }, { "id": "auth-tabs", "name": "Sign in / Sign up Tabs", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#auth-tabs" }, { "id": "biometric-prompt", "name": "Biometric Prompt", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#biometric-prompt" }, { "id": "verify-email", "name": "Verify Email", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#verify-email" }, { "id": "auth-loading-button", "name": "Auth Loading Button", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#auth-loading-button" }, { "id": "au2-totp-ring", "name": "TOTP Ring Timer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#au2-totp-ring" }, { "id": "au2-sms-cooldown", "name": "SMS Resend Cooldown", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#au2-sms-cooldown" }, { "id": "au2-device-sessions", "name": "Device Session List", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#au2-device-sessions" }, { "id": "au2-sso-domain", "name": "SSO Domain Lookup", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#au2-sso-domain" }, { "id": "au2-password-policy", "name": "Password Policy Checklist", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#au2-password-policy" }, { "id": "au2-reauth-modal", "name": "Re-auth Modal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#au2-reauth-modal" }, { "id": "au2-workspace-picker", "name": "Workspace Picker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#au2-workspace-picker" }, { "id": "au2-lockout-card", "name": "Lockout Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#au2-lockout-card" } ] }, { "id": "calendars", "label": "Calendars & Date Pickers", "description": "Calendar and date-picker primitives — mini calendar, date range, popover trigger, time wheel, activity heatmap, month switcher, event pill, day timeline, countdown pill, schedule card.", "url": "https://nudaui.dev/components#section-calendars", "componentCount": 21, "components": [ { "id": "mini-calendar", "name": "Mini Calendar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mini-calendar" }, { "id": "date-range", "name": "Date Range Selector", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#date-range" }, { "id": "date-input-pop", "name": "Date Input Popover", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#date-input-pop" }, { "id": "time-wheel", "name": "Time Picker Wheel", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#time-wheel" }, { "id": "heatmap-calendar", "name": "Activity Heatmap", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#heatmap-calendar" }, { "id": "month-slide", "name": "Month Switcher Slide", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#month-slide" }, { "id": "event-pill", "name": "Calendar Event Pill", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#event-pill" }, { "id": "day-timeline", "name": "Day Timeline", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#day-timeline" }, { "id": "countdown-pill", "name": "Countdown Pill", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#countdown-pill" }, { "id": "schedule-card", "name": "Schedule Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#schedule-card" }, { "id": "growth-calendar-1", "name": "Week Number Rail", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-calendar-1" }, { "id": "growth-calendar-2", "name": "Date Range Bridge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-calendar-2" }, { "id": "growth-calendar-3", "name": "Agenda Density", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-calendar-3" }, { "id": "growth-calendar-4", "name": "Time Slot Ladder", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-calendar-4" }, { "id": "growth-calendar-5", "name": "Month Jump", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-calendar-5" }, { "id": "growth-calendar-6", "name": "Event Overflow", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-calendar-6" }, { "id": "growth-calendar-7", "name": "Availability Heatmap", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-calendar-7" }, { "id": "growth-calendar-8", "name": "Timezone Strip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-calendar-8" }, { "id": "growth-calendar-9", "name": "Holiday Marker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-calendar-9" }, { "id": "growth-calendar-10", "name": "Schedule Window", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-calendar-10" }, { "id": "growth-calendar-11", "name": "Recurring Event", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-calendar-11" } ] }, { "id": "sidebars", "label": "Sidebars & Docks", "description": "Sidebars, rails, and docks — collapsible sidebar, macOS-style dock, drawer slide, FAB action menu, vertical rail, workspace switcher, file tree, mobile bottom nav, hover-reveal, glass floating.", "url": "https://nudaui.dev/components#section-sidebars", "componentCount": 18, "components": [ { "id": "sidebar-collapse", "name": "Sidebar Collapse", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#sidebar-collapse" }, { "id": "mac-dock", "name": "macOS Dock", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mac-dock" }, { "id": "drawer-slide", "name": "Drawer Slide", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#drawer-slide" }, { "id": "fab-dock", "name": "Floating Action Dock", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#fab-dock" }, { "id": "vertical-rail", "name": "Vertical Rail", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#vertical-rail" }, { "id": "workspace-switcher", "name": "Workspace Switcher", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#workspace-switcher" }, { "id": "section-tree", "name": "Sidebar Tree", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#section-tree" }, { "id": "bottom-nav", "name": "Mobile Bottom Nav", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bottom-nav" }, { "id": "hover-sidebar", "name": "Hover-reveal Sidebar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#hover-sidebar" }, { "id": "glass-sidebar", "name": "Glass Floating Sidebar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#glass-sidebar" }, { "id": "sb2-hover-rail", "name": "Hover-Expand Rail", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sb2-hover-rail" }, { "id": "sb2-active-glide", "name": "Active Indicator Glide", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#sb2-active-glide" }, { "id": "sb2-nested-tree", "name": "Nested Collapsible Tree", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#sb2-nested-tree" }, { "id": "sb2-cursor-dock", "name": "Cursor Magnify Dock", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#sb2-cursor-dock" }, { "id": "sb2-tooltip-toolbar", "name": "Tooltip Toolbar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sb2-tooltip-toolbar" }, { "id": "sb2-badge-nav", "name": "Notification Badge Nav", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sb2-badge-nav" }, { "id": "sb2-user-menu", "name": "User Card Upward Menu", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#sb2-user-menu" }, { "id": "sb2-search-nav", "name": "Search Filtered Nav", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#sb2-search-nav" } ] }, { "id": "steppers", "label": "Steppers & Wizards", "description": "Multi-step flows and wizards — linear stepper, vertical stepper, progress wizard, numbered, onboarding carousel, wizard tabs, SVG trace connector, card slide, done step, step pill indicator.", "url": "https://nudaui.dev/components#section-steppers", "componentCount": 18, "components": [ { "id": "linear-stepper", "name": "Linear Stepper", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#linear-stepper" }, { "id": "vertical-stepper", "name": "Vertical Stepper", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#vertical-stepper" }, { "id": "progress-wizard", "name": "Progress Wizard", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#progress-wizard" }, { "id": "numbered-steps", "name": "Numbered Steps", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#numbered-steps" }, { "id": "onboarding-carousel", "name": "Onboarding Carousel", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#onboarding-carousel" }, { "id": "stripe-tabs", "name": "Wizard Tabs", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#stripe-tabs" }, { "id": "step-trace", "name": "Trace Stepper", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#step-trace" }, { "id": "wizard-slide", "name": "Wizard Card Slide", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#wizard-slide" }, { "id": "done-step", "name": "Done Step", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#done-step" }, { "id": "step-pill", "name": "Step Pill Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#step-pill" }, { "id": "st2-expand-panels", "name": "Expanding Step Panels", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#st2-expand-panels" }, { "id": "st2-blocked-step", "name": "Blocked Step State", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#st2-blocked-step" }, { "id": "st2-ring-count", "name": "Circular Progress Stepper", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#st2-ring-count" }, { "id": "st2-branch-path", "name": "Branching Stepper", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#st2-branch-path" }, { "id": "st2-checkout-rail", "name": "Checkout Stepper Summary Rail", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#st2-checkout-rail" }, { "id": "st2-skip-optional", "name": "Skippable Optional Steps", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#st2-skip-optional" }, { "id": "st2-line-draw", "name": "Self-Drawing Connector Stepper", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#st2-line-draw" }, { "id": "st2-footer-gate", "name": "Wizard Footer Gated Next", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#st2-footer-gate" } ] }, { "id": "search-autocomplete", "label": "Search & Autocomplete", "description": "Search inputs and autocomplete primitives — expanding search, autocomplete dropdown, match highlight, recent searches, voice search, search loading, no-results state, Cmd-K trigger, clearable input, filter chips, type-ahead, async shimmer, spotlight modal, sticky search header, staggered results, search history pills.", "url": "https://nudaui.dev/components#section-search-autocomplete", "componentCount": 18, "components": [ { "id": "expanding-search", "name": "Expanding Search", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#expanding-search" }, { "id": "autocomplete-dropdown", "name": "Autocomplete Dropdown", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#autocomplete-dropdown" }, { "id": "match-highlight-result", "name": "Match Highlight", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#match-highlight-result" }, { "id": "recent-searches", "name": "Recent Searches", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#recent-searches" }, { "id": "voice-search", "name": "Voice Search Mic", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#voice-search" }, { "id": "search-loading-dots", "name": "Search Loading", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#search-loading-dots" }, { "id": "search-no-results", "name": "No Results State", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#search-no-results" }, { "id": "cmdk-mini", "name": "Cmd+K Trigger", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cmdk-mini" }, { "id": "search-with-clear", "name": "Search with Clear", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#search-with-clear" }, { "id": "search-filter-chips", "name": "Filter Chips", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#search-filter-chips" }, { "id": "typeahead-reveal", "name": "Type-ahead Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#typeahead-reveal" }, { "id": "search-shimmer-rows", "name": "Async Shimmer Rows", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#search-shimmer-rows" }, { "id": "spotlight-modal", "name": "Spotlight Modal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#spotlight-modal" }, { "id": "sticky-search-header", "name": "Sticky Search Header", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#sticky-search-header" }, { "id": "results-stagger", "name": "Results Stagger In", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#results-stagger" }, { "id": "search-history-pills", "name": "History Pills", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#search-history-pills" }, { "id": "growth-search-1", "name": "Query State", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-search-1" }, { "id": "growth-search-2", "name": "Result Signal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-search-2" } ] }, { "id": "sliders-ranges", "label": "Sliders & Ranges", "description": "Slider and range controls — single-value, dual-handle range, value bubble, vertical, stepped with ticks, animated gradient fill, histogram range, snap-to-step, hue picker, rotary knob, brightness slider, price range, slider + number input, drag-active thumb halo, curve preview, frequency bars.", "url": "https://nudaui.dev/components#section-sliders-ranges", "componentCount": 18, "components": [ { "id": "basic-slider", "name": "Basic Slider", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#basic-slider" }, { "id": "range-slider", "name": "Dual Range Slider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#range-slider" }, { "id": "slider-bubble", "name": "Slider Value Bubble", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#slider-bubble" }, { "id": "vertical-slider", "name": "Vertical Slider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#vertical-slider" }, { "id": "stepped-slider", "name": "Stepped Slider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#stepped-slider" }, { "id": "gradient-slider", "name": "Gradient Fill Slider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-slider" }, { "id": "range-histogram", "name": "Range with Histogram", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#range-histogram" }, { "id": "snap-slider", "name": "Snap-to-tick Slider", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#snap-slider" }, { "id": "hue-slider", "name": "Hue Slider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#hue-slider" }, { "id": "rotary-knob", "name": "Rotary Knob", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#rotary-knob" }, { "id": "brightness-slider", "name": "Brightness Slider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#brightness-slider" }, { "id": "price-range", "name": "Price Range", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#price-range" }, { "id": "slider-input", "name": "Slider + Number Input", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#slider-input" }, { "id": "active-thumb", "name": "Drag-Active Thumb", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#active-thumb" }, { "id": "curve-slider", "name": "Curve Slider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#curve-slider" }, { "id": "frequency-slider", "name": "Frequency Slider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#frequency-slider" }, { "id": "growth-slider-1", "name": "Range Marker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-slider-1" }, { "id": "growth-slider-2", "name": "Value Signal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-slider-2" } ] }, { "id": "audio-waveforms", "label": "Audio & Waveforms", "description": "Audio player UI and waveform visualizers — equalizer bars, voice activity meter, soundwave pulse, waveform scrubber, vinyl record spin, mic recording, circular visualizer, now-playing card, amplitude rings, play/pause morph, mute toggle, loop indicator, spectrum analyzer, track progress with waveform, audio buffering.", "url": "https://nudaui.dev/components#section-audio-waveforms", "componentCount": 18, "components": [ { "id": "equalizer-bars", "name": "Equalizer Bars", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#equalizer-bars" }, { "id": "voice-meter", "name": "Voice Activity Meter", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#voice-meter" }, { "id": "soundwave-pulse", "name": "Soundwave Pulse", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#soundwave-pulse" }, { "id": "waveform-scrubber", "name": "Waveform Scrubber", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#waveform-scrubber" }, { "id": "vinyl-spin", "name": "Vinyl Spin", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#vinyl-spin" }, { "id": "mic-recording", "name": "Mic Recording", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mic-recording" }, { "id": "circular-visualizer", "name": "Circular Visualizer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#circular-visualizer" }, { "id": "now-playing", "name": "Now Playing Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#now-playing" }, { "id": "amplitude-rings", "name": "Amplitude Rings", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#amplitude-rings" }, { "id": "play-pause-morph", "name": "Play/Pause Morph", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#play-pause-morph" }, { "id": "mute-toggle", "name": "Mute Toggle", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#mute-toggle" }, { "id": "loop-indicator", "name": "Loop Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#loop-indicator" }, { "id": "spectrum-analyzer", "name": "Spectrum Analyzer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#spectrum-analyzer" }, { "id": "track-progress-wave", "name": "Track Progress", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#track-progress-wave" }, { "id": "audio-loading", "name": "Audio Loading", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#audio-loading" }, { "id": "growth-audio-1", "name": "Volume Marker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-audio-1" }, { "id": "growth-audio-2", "name": "Track Signal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-audio-2" }, { "id": "growth-audio-3", "name": "Listening State", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-audio-3" } ] }, { "id": "color-pickers", "label": "Color Pickers", "description": "Color selection primitives for design tools, theme builders and dashboards — swatch grid, gradient picker, hue ring, eye-dropper trigger, hex input, palette generator, recents, contrast pair with AA/AAA badges, color chip with copy, saturation/lightness sliders.", "url": "https://nudaui.dev/components#section-color-pickers", "componentCount": 18, "components": [ { "id": "swatch-grid", "name": "Swatch Grid", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#swatch-grid" }, { "id": "gradient-picker", "name": "Gradient Picker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-picker" }, { "id": "hue-ring", "name": "Hue Ring", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#hue-ring" }, { "id": "eye-dropper", "name": "Eye Dropper", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#eye-dropper" }, { "id": "hex-input", "name": "Hex Input", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#hex-input" }, { "id": "palette-gen", "name": "Palette Generator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#palette-gen" }, { "id": "recent-colors", "name": "Recent Colors", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#recent-colors" }, { "id": "contrast-pair", "name": "Contrast Pair", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#contrast-pair" }, { "id": "color-chip-copy", "name": "Color Chip Copy", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#color-chip-copy" }, { "id": "sat-light-slider", "name": "Saturation Slider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sat-light-slider" }, { "id": "cpk2-sv-square", "name": "Saturation Value Pad", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cpk2-sv-square" }, { "id": "cpk2-alpha-slider", "name": "Alpha Channel Slider", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cpk2-alpha-slider" }, { "id": "cpk2-format-switcher", "name": "Format Switcher", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cpk2-format-switcher" }, { "id": "cpk2-harmony-row", "name": "Harmony Row", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cpk2-harmony-row" }, { "id": "cpk2-gradient-stops", "name": "Gradient Stop Editor", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cpk2-gradient-stops" }, { "id": "cpk2-shade-ramp", "name": "Shade Ramp", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cpk2-shade-ramp" }, { "id": "cpk2-cvd-preview", "name": "Colour Blindness Preview", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cpk2-cvd-preview" }, { "id": "cpk2-oklch-pad", "name": "OKLCH Pad", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cpk2-oklch-pad" } ] }, { "id": "galleries-carousels", "label": "Galleries & Carousels", "description": "Image gallery and carousel patterns — horizontal carousel with dots, swipe indicator, lightbox open, thumbnail strip, masonry hover lift, 3D image fan, before/after comparison slider, polaroid stack, hover zoom with caption reveal, filter morph tabs.", "url": "https://nudaui.dev/components#section-galleries-carousels", "componentCount": 18, "components": [ { "id": "horizontal-carousel", "name": "Horizontal Carousel", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#horizontal-carousel" }, { "id": "swipe-dots", "name": "Swipe Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#swipe-dots" }, { "id": "lightbox-open", "name": "Lightbox Open", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#lightbox-open" }, { "id": "thumbnail-strip", "name": "Thumbnail Strip", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#thumbnail-strip" }, { "id": "masonry-lift", "name": "Masonry Hover Lift", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#masonry-lift" }, { "id": "image-fan-3d", "name": "3D Image Fan", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#image-fan-3d" }, { "id": "before-after", "name": "Before / After", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#before-after" }, { "id": "polaroid-stack", "name": "Polaroid Stack", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#polaroid-stack" }, { "id": "gallery-zoom", "name": "Gallery Hover Zoom", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gallery-zoom" }, { "id": "gallery-filter-morph", "name": "Gallery Filter Morph", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gallery-filter-morph" }, { "id": "gc2-snap-thumbs", "name": "Scroll-Snap Thumbnail Strip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gc2-snap-thumbs" }, { "id": "gc2-coverflow", "name": "Coverflow 3D Carousel", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#gc2-coverflow" }, { "id": "gc2-swipe-deck", "name": "Stacked Swipe Deck", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gc2-swipe-deck" }, { "id": "gc2-filmstrip-counter", "name": "Filmstrip Lightbox Counter", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gc2-filmstrip-counter" }, { "id": "gc2-autoplay-loop", "name": "Infinite Autoplay Loop", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gc2-autoplay-loop" }, { "id": "gc2-peek-next", "name": "Peek-Next Carousel", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#gc2-peek-next" }, { "id": "gc2-reel-vertical", "name": "Vertical Reel Scroller", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gc2-reel-vertical" }, { "id": "gc2-story-progress", "name": "Story Tap-Through Progress", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#gc2-story-progress" } ] }, { "id": "maps-locations", "label": "Maps & Locations", "description": "Map and location UI — pin drop bounce, marker pulse, route trace, distance line with chip, geo-locating spinner, cluster expand, popup card, location search with use-my-location, compass needle, mini-map with viewport.", "url": "https://nudaui.dev/components#section-maps-locations", "componentCount": 18, "components": [ { "id": "pin-drop", "name": "Pin Drop", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pin-drop" }, { "id": "marker-pulse", "name": "Marker Pulse", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#marker-pulse" }, { "id": "route-trace", "name": "Route Trace", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#route-trace" }, { "id": "distance-line", "name": "Distance Line", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#distance-line" }, { "id": "geo-locating", "name": "Geo Locating", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#geo-locating" }, { "id": "cluster-expand", "name": "Cluster Expand", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#cluster-expand" }, { "id": "map-popup", "name": "Map Popup", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#map-popup" }, { "id": "location-search", "name": "Location Search", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#location-search" }, { "id": "compass", "name": "Compass", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#compass" }, { "id": "mini-map", "name": "Mini Map", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mini-map" }, { "id": "ml2-delivery", "name": "Delivery Tracker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ml2-delivery" }, { "id": "ml2-geofence", "name": "Geofence Ring", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ml2-geofence" }, { "id": "ml2-storelist", "name": "Store Locator List", "languages": [ "html", "javascript", "css" ], "hasJS": true, "anchor": "https://nudaui.dev/components#ml2-storelist" }, { "id": "ml2-eta", "name": "ETA Progress Path", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ml2-eta" }, { "id": "ml2-transit", "name": "Transit Line", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ml2-transit" }, { "id": "ml2-heatmap", "name": "Heat Map Density", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ml2-heatmap" }, { "id": "ml2-worldmap", "name": "World Office Pulse", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ml2-worldmap" }, { "id": "ml2-scalebar", "name": "Distance Scale Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ml2-scalebar" } ] }, { "id": "watch-faces", "label": "Watch Faces & Clocks", "description": "Clock and watch face designs — analog clock, digital readout, flip clock, pomodoro ring, stopwatch, world clock card, alarm bells, countdown ring, Swiss railway, military 24h, weather clock, day/night, sand hourglass, word clock, pulse heart, binary clock, sundial.", "url": "https://nudaui.dev/components#section-watch-faces", "componentCount": 18, "components": [ { "id": "analog-clock", "name": "Analog Clock", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#analog-clock" }, { "id": "digital-clock", "name": "Digital Clock", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#digital-clock" }, { "id": "flip-clock-face", "name": "Flip Clock", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#flip-clock-face" }, { "id": "pomodoro-timer", "name": "Pomodoro Timer Ring", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pomodoro-timer" }, { "id": "stopwatch", "name": "Stopwatch", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#stopwatch" }, { "id": "world-clock", "name": "World Clock Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#world-clock" }, { "id": "alarm-clock", "name": "Alarm Clock", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#alarm-clock" }, { "id": "countdown-ring", "name": "Countdown Ring", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#countdown-ring" }, { "id": "tick-marks-face", "name": "Tick Marks Face", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#tick-marks-face" }, { "id": "swiss-railway-clock", "name": "Swiss Railway Clock", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#swiss-railway-clock" }, { "id": "military-24h-clock", "name": "24-Hour Military Clock", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#military-24h-clock" }, { "id": "weather-clock", "name": "Weather Clock", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#weather-clock" }, { "id": "day-night-indicator", "name": "Day/Night Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#day-night-indicator" }, { "id": "sand-hourglass", "name": "Sand Hourglass", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sand-hourglass" }, { "id": "word-clock", "name": "Word Clock", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#word-clock" }, { "id": "pulse-heart-clock", "name": "Pulse Heart Clock", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pulse-heart-clock" }, { "id": "binary-clock", "name": "Binary Clock", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#binary-clock" }, { "id": "sundial", "name": "Sundial", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sundial" } ] }, { "id": "quotes-testimonials", "label": "Quotes & Testimonials", "description": "Customer testimonial and pull-quote patterns — pull quote, testimonial card, star rating card, signature reveal, logo + quote strip, video testimonial, rating distribution, marquee testimonials, carousel, before/after, gradient border quote, animated stars, verified customer, masonry grid, spotlight quote, stat quote, floating card, inline quote link.", "url": "https://nudaui.dev/components#section-quotes-testimonials", "componentCount": 18, "components": [ { "id": "pull-quote", "name": "Pull Quote", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pull-quote" }, { "id": "testimonial-card", "name": "Testimonial Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#testimonial-card" }, { "id": "five-star-rating-card", "name": "Five-star Rating Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#five-star-rating-card" }, { "id": "signature-reveal", "name": "Author Signature Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#signature-reveal" }, { "id": "logo-quote-strip", "name": "Customer Logo Quote Strip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#logo-quote-strip" }, { "id": "video-testimonial", "name": "Video Testimonial Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#video-testimonial" }, { "id": "rating-distribution", "name": "Rating Distribution Bars", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#rating-distribution" }, { "id": "quote-marquee", "name": "Quote Marquee", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#quote-marquee" }, { "id": "quote-carousel", "name": "Quote Carousel", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#quote-carousel" }, { "id": "before-after-testimonial", "name": "Before / After Testimonial", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#before-after-testimonial" }, { "id": "gradient-border-quote", "name": "Quote with Gradient Border", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#gradient-border-quote" }, { "id": "animated-star-fill", "name": "Animated Star Fill", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#animated-star-fill" }, { "id": "verified-customer-badge", "name": "Verified Customer Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#verified-customer-badge" }, { "id": "testimonial-masonry", "name": "Testimonial Grid Masonry", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#testimonial-masonry" }, { "id": "spotlight-quote", "name": "Quote with Spotlight", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#spotlight-quote" }, { "id": "stat-quote", "name": "Numbered Stat Quote", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#stat-quote" }, { "id": "floating-quote-card", "name": "Floating Quote Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#floating-quote-card" }, { "id": "inline-quote-link", "name": "Inline Quote with Link", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#inline-quote-link" } ] }, { "id": "comments-reactions", "label": "Comments & Reactions", "description": "Comment thread and reaction UI — comment thread, nested reply, emoji picker, emoji burst, like button heart, dislike thumb, share, reply input expand, mentions chip, reaction count badge, reaction bar, comment skeleton, pinned comment, highlighted reply, reaction stack, thumbs up counter, quote reply, emoji hover preview.", "url": "https://nudaui.dev/components#section-comments-reactions", "componentCount": 18, "components": [ { "id": "comment-thread", "name": "Comment Thread", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#comment-thread" }, { "id": "reply-nested", "name": "Reply Nested", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#reply-nested" }, { "id": "emoji-reaction-picker", "name": "Emoji Reaction Picker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#emoji-reaction-picker" }, { "id": "emoji-burst", "name": "Emoji Burst", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#emoji-burst" }, { "id": "like-button", "name": "Like Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#like-button" }, { "id": "dislike-button", "name": "Dislike Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#dislike-button" }, { "id": "share-button", "name": "Share Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#share-button" }, { "id": "reply-input-expand", "name": "Reply Input Expand", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#reply-input-expand" }, { "id": "mentions-chip", "name": "Mentions Chip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mentions-chip" }, { "id": "reaction-count-badge", "name": "Reaction Count Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#reaction-count-badge" }, { "id": "reaction-bar", "name": "Reaction Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#reaction-bar" }, { "id": "comment-loading-skeleton", "name": "Comment Loading Skeleton", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#comment-loading-skeleton" }, { "id": "pinned-comment", "name": "Pinned Comment", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pinned-comment" }, { "id": "highlighted-reply", "name": "Highlighted Reply", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#highlighted-reply" }, { "id": "reaction-stack", "name": "Reaction Stack", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#reaction-stack" }, { "id": "thumbs-up-counter", "name": "Thumbs Up Counter", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#thumbs-up-counter" }, { "id": "quote-reply", "name": "Quote Reply", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#quote-reply" }, { "id": "emoji-hover-preview-tooltip", "name": "Emoji Hover Preview Tooltip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#emoji-hover-preview-tooltip" } ] }, { "id": "profile-headers", "label": "Profile Headers", "description": "User profile header patterns — bio card, banner + avatar, stat row, social links bar, edit profile button, level XP ring, verified checkmark, status presence, follow button toggle, follower count tick-up, pronouns pill, compact profile pill, skeleton loader, hero profile, member since badge, achievements strip, hover card, bio reveal.", "url": "https://nudaui.dev/components#section-profile-headers", "componentCount": 18, "components": [ { "id": "bio-card", "name": "Bio Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bio-card" }, { "id": "banner-avatar", "name": "Banner + Avatar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#banner-avatar" }, { "id": "stat-row", "name": "Stat Row", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#stat-row" }, { "id": "social-links-bar", "name": "Social Links Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#social-links-bar" }, { "id": "edit-profile-button", "name": "Edit Profile Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#edit-profile-button" }, { "id": "level-xp-profile", "name": "Level XP Profile", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#level-xp-profile" }, { "id": "verified-checkmark", "name": "Verified Checkmark Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#verified-checkmark" }, { "id": "status-presence", "name": "Status Presence Dot", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#status-presence" }, { "id": "follow-button", "name": "Follow Button", "languages": [ "html", "css", "javascript" ], "hasJS": true, "anchor": "https://nudaui.dev/components#follow-button" }, { "id": "follower-count-tick", "name": "Follower Count Tick-Up", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#follower-count-tick" }, { "id": "pronouns-pill", "name": "Pronouns Pill", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pronouns-pill" }, { "id": "compact-profile-pill", "name": "Compact Profile Pill", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#compact-profile-pill" }, { "id": "profile-skeleton-card", "name": "Profile Skeleton Loader", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#profile-skeleton-card" }, { "id": "hero-profile", "name": "Hero Profile", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#hero-profile" }, { "id": "member-since", "name": "Member Since Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#member-since" }, { "id": "achievements-strip", "name": "Achievements Strip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#achievements-strip" }, { "id": "profile-hover-card", "name": "Profile Hover Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#profile-hover-card" }, { "id": "bio-reveal", "name": "Bio Reveal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bio-reveal" } ] }, { "id": "settings-preferences", "label": "Settings & Preferences", "description": "Settings and preferences UI — preference row toggle, settings card group, theme selector, notification preferences, account section, danger zone, save indicator, search settings input, two-column setting, accessibility section, connected apps, plan tier card, email verification, language picker, time zone picker, privacy row, sound preferences, reset to defaults.", "url": "https://nudaui.dev/components#section-settings-preferences", "componentCount": 18, "components": [ { "id": "preference-row", "name": "Preference Row", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#preference-row" }, { "id": "settings-card-group", "name": "Settings Card Group", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#settings-card-group" }, { "id": "theme-selector", "name": "Theme Selector", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#theme-selector" }, { "id": "notification-preference-block", "name": "Notification Preference Block", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#notification-preference-block" }, { "id": "account-section", "name": "Account Section", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#account-section" }, { "id": "danger-zone", "name": "Danger Zone", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#danger-zone" }, { "id": "save-indicator", "name": "Save Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#save-indicator" }, { "id": "search-settings-input", "name": "Search Settings Input", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#search-settings-input" }, { "id": "two-column-setting", "name": "Two-column Setting", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#two-column-setting" }, { "id": "accessibility-section", "name": "Accessibility Section", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#accessibility-section" }, { "id": "connected-apps-row", "name": "Connected Apps Row", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#connected-apps-row" }, { "id": "plan-tier-card", "name": "Plan Tier Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#plan-tier-card" }, { "id": "email-verification-status", "name": "Email Verification Status", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#email-verification-status" }, { "id": "language-picker", "name": "Language Picker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#language-picker" }, { "id": "time-zone-picker", "name": "Time Zone Picker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#time-zone-picker" }, { "id": "privacy-setting-row", "name": "Privacy Setting Row", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#privacy-setting-row" }, { "id": "sound-preferences", "name": "Sound Preferences", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#sound-preferences" }, { "id": "reset-to-defaults", "name": "Reset to Defaults Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#reset-to-defaults" } ] }, { "id": "file-upload", "label": "File Upload", "description": "File upload lifecycle UI — drop zone idle and active states, file list item, upload progress bar, file type icons, image thumbnail preview, error state, multi-file count pill, file size pill, success checkmark, cancel upload, total progress, validation error, click-to-browse, paste hint, upload queue, file replaced, empty state.", "url": "https://nudaui.dev/components#section-file-upload", "componentCount": 18, "components": [ { "id": "drop-zone-upload", "name": "Drop Zone", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#drop-zone-upload" }, { "id": "drop-zone-active", "name": "Drop Zone Active", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#drop-zone-active" }, { "id": "file-list-item", "name": "File List Item", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#file-list-item" }, { "id": "upload-progress-bar", "name": "Upload Progress Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#upload-progress-bar" }, { "id": "file-type-icons", "name": "File Type Icons Grid", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#file-type-icons" }, { "id": "image-thumbnail-preview", "name": "Image Thumbnail Preview", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#image-thumbnail-preview" }, { "id": "upload-error-state", "name": "Upload Error State", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#upload-error-state" }, { "id": "multi-file-count-pill", "name": "Multi-file Count Pill", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#multi-file-count-pill" }, { "id": "file-size-pill", "name": "File Size Pill", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#file-size-pill" }, { "id": "upload-success-check", "name": "Upload Success Checkmark", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#upload-success-check" }, { "id": "cancel-upload-button", "name": "Cancel Upload Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cancel-upload-button" }, { "id": "total-progress", "name": "Total Progress", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#total-progress" }, { "id": "file-validation-error", "name": "File Validation Error", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#file-validation-error" }, { "id": "click-to-browse-button", "name": "Click-to-browse Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#click-to-browse-button" }, { "id": "paste-clipboard-hint", "name": "Paste from Clipboard Hint", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#paste-clipboard-hint" }, { "id": "upload-queue-indicator", "name": "Upload Queue Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#upload-queue-indicator" }, { "id": "file-replaced-notification", "name": "File Replaced Notification", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#file-replaced-notification" }, { "id": "empty-state", "name": "Empty State No Files", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#empty-state" } ] }, { "id": "multi-chips", "label": "Tags & Chips Input", "description": "Interactive tag/chip INPUT — users type to add chips and click to remove them: chip input add, remove animation, autocomplete dropdown, max-count, multi-select combobox, removable filter chips, drag reorder, validation. For read-only display badges, see Badges & Tags.", "url": "https://nudaui.dev/components#section-multi-chips", "componentCount": 18, "components": [ { "id": "chip-input-add", "name": "Chip Input Add", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#chip-input-add" }, { "id": "chip-remove-animation", "name": "Chip Remove Animation", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#chip-remove-animation" }, { "id": "chip-autocomplete-dropdown", "name": "Chip Autocomplete Dropdown", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#chip-autocomplete-dropdown" }, { "id": "chip-group", "name": "Chip Group", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#chip-group" }, { "id": "chip-max-count", "name": "Max Count Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#chip-max-count" }, { "id": "chip-color-variants", "name": "Chip Color Variants", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#chip-color-variants" }, { "id": "chip-with-icon", "name": "Chip With Icon", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#chip-with-icon" }, { "id": "chip-drag-reorder", "name": "Chip Drag Reorder", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#chip-drag-reorder" }, { "id": "suggested-tags-strip", "name": "Suggested Tags Strip", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#suggested-tags-strip" }, { "id": "chip-overflow-more", "name": "Chip Overflow More", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#chip-overflow-more" }, { "id": "multi-select-combobox", "name": "Multi-select Combobox", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#multi-select-combobox" }, { "id": "removable-filter-chips-bar", "name": "Removable Filter Chips Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#removable-filter-chips-bar" }, { "id": "chip-with-avatar", "name": "Chip With Avatar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#chip-with-avatar" }, { "id": "animated-chip-pop-in", "name": "Animated Chip Pop-in", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#animated-chip-pop-in" }, { "id": "chip-validation-error", "name": "Chip Validation Error", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#chip-validation-error" }, { "id": "chip-group-toggle", "name": "Chip Group Toggle", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#chip-group-toggle" }, { "id": "saved-filters-pills", "name": "Saved Filters Pills", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#saved-filters-pills" }, { "id": "chip-counter-badge", "name": "Chip Counter Badge", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#chip-counter-badge" } ] }, { "id": "mobile-patterns", "label": "Mobile Patterns", "description": "Mobile-first interaction patterns — bottom sheet, pull-to-refresh, swipe-to-delete, action sheet, segmented control, mobile tab bar, FAB, ripple touch, momentum scroll, swipe card, status bar, top toast, long-press menu, drawer hamburger, pull-down search, mobile modal, onboarding dots, pinch-to-zoom hint.", "url": "https://nudaui.dev/components#section-mobile-patterns", "componentCount": 23, "components": [ { "id": "bottom-sheet", "name": "Bottom Sheet", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bottom-sheet" }, { "id": "pull-to-refresh", "name": "Pull to Refresh", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pull-to-refresh" }, { "id": "swipe-to-delete", "name": "Swipe to Delete", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#swipe-to-delete" }, { "id": "action-sheet", "name": "Action Sheet", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#action-sheet" }, { "id": "segmented-control-mobile", "name": "Segmented Control", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#segmented-control-mobile" }, { "id": "mobile-tab-bar", "name": "Mobile Tab Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mobile-tab-bar" }, { "id": "fab-action-button", "name": "FAB Action Button", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#fab-action-button" }, { "id": "ripple-touch", "name": "Ripple Touch Feedback", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ripple-touch" }, { "id": "momentum-scroll-indicator", "name": "Momentum Scroll Indicator", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#momentum-scroll-indicator" }, { "id": "swipe-card", "name": "Swipe Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#swipe-card" }, { "id": "status-bar-mock", "name": "Status Bar Mock", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#status-bar-mock" }, { "id": "top-toast", "name": "Top Toast Banner", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#top-toast" }, { "id": "long-press-menu", "name": "Long-press Radial Menu", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#long-press-menu" }, { "id": "drawer-hamburger", "name": "Drawer Hamburger", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#drawer-hamburger" }, { "id": "pull-down-search", "name": "Pull-down Search", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pull-down-search" }, { "id": "mobile-modal", "name": "Mobile Modal Sheet", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mobile-modal" }, { "id": "onboarding-dots", "name": "Onboarding Dots", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#onboarding-dots" }, { "id": "pinch-zoom-hint", "name": "Pinch-to-Zoom Hint", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#pinch-zoom-hint" }, { "id": "growth-mobile-1", "name": "Touch Target", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-mobile-1" }, { "id": "growth-mobile-2", "name": "Mobile Status", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-mobile-2" }, { "id": "growth-mobile-3", "name": "Gesture Hint", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-mobile-3" }, { "id": "growth-mobile-4", "name": "Safe Area Cue", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-mobile-4" }, { "id": "growth-mobile-5", "name": "Thumb Zone", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-mobile-5" } ] }, { "id": "notification-center", "label": "Notification Center", "description": "Persistent notification inbox — the panel of past notifications behind a bell icon: notification item, inbox header with count, time-group separator, filter tabs, swipe-to-dismiss, inbox-zero empty state, bulk actions, mention, bell with badge. For transient pop-up toasts, see Toasts & Alerts.", "url": "https://nudaui.dev/components#section-notification-center", "componentCount": 18, "components": [ { "id": "notif-item", "name": "Notification Item", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#notif-item" }, { "id": "inbox-header", "name": "Inbox Header", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#inbox-header" }, { "id": "notif-time-group", "name": "Time Group", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#notif-time-group" }, { "id": "notif-filter-tabs", "name": "Filter Tabs", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#notif-filter-tabs" }, { "id": "notif-swipe-dismiss", "name": "Swipe to Dismiss", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#notif-swipe-dismiss" }, { "id": "inbox-empty", "name": "Inbox Zero", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#inbox-empty" }, { "id": "bulk-action-bar", "name": "Bulk Action Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#bulk-action-bar" }, { "id": "notif-settings-row", "name": "Notification Setting Row", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#notif-settings-row" }, { "id": "mention-notif", "name": "Mention Notification", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#mention-notif" }, { "id": "notif-search", "name": "Inbox Search", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#notif-search" }, { "id": "build-notif", "name": "Build Status", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#build-notif" }, { "id": "notif-bell", "name": "Notification Bell", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#notif-bell" }, { "id": "nc2-inbox-tabs", "name": "Unread/All Inbox", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#nc2-inbox-tabs" }, { "id": "nc2-day-sticky", "name": "Sticky Day Groups", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#nc2-day-sticky" }, { "id": "nc2-approve-decline", "name": "Approve/Decline Request", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#nc2-approve-decline" }, { "id": "nc2-quick-reply", "name": "Reply with Quick Reply", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#nc2-quick-reply" }, { "id": "nc2-digest", "name": "Digest Summary Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#nc2-digest" }, { "id": "nc2-mark-read-undo", "name": "Mark All Read with Undo", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#nc2-mark-read-undo" } ] }, { "id": "tables-data-grids", "label": "Tables & Data Grids", "description": "Tables and data grids — striped, sortable and sticky headers, selectable and expandable rows, status pills, dense layouts, inline-edit cells, toolbars, footer totals, empty and loading states. Pure CSS, framework-agnostic.", "url": "https://nudaui.dev/components#section-tables-data-grids", "componentCount": 18, "components": [ { "id": "table-striped-rows", "name": "Striped Rows", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#table-striped-rows" }, { "id": "table-sortable-header", "name": "Sortable Header", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#table-sortable-header" }, { "id": "table-sticky-header", "name": "Sticky Header", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#table-sticky-header" }, { "id": "table-selectable-rows", "name": "Selectable Rows", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#table-selectable-rows" }, { "id": "table-expandable-row", "name": "Expandable Row", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#table-expandable-row" }, { "id": "table-status-pills", "name": "Status Pills", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#table-status-pills" }, { "id": "table-compact-dense", "name": "Compact Dense Table", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#table-compact-dense" }, { "id": "table-hover-highlight", "name": "Hover Highlight Row", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#table-hover-highlight" }, { "id": "table-mini-grid-toolbar", "name": "Mini Grid with Toolbar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#table-mini-grid-toolbar" }, { "id": "table-pagination-footer", "name": "Pagination Footer", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#table-pagination-footer" }, { "id": "table-inline-edit-cell", "name": "Inline Edit Cell", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#table-inline-edit-cell" }, { "id": "table-empty-state", "name": "Empty Table State", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#table-empty-state" }, { "id": "table-skeleton-rows", "name": "Loading Skeleton Rows", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#table-skeleton-rows" }, { "id": "table-totals-footer", "name": "Totals Footer Row", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#table-totals-footer" }, { "id": "growth-table-1", "name": "Row State", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-table-1" }, { "id": "growth-table-2", "name": "Column Signal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-table-2" }, { "id": "growth-table-3", "name": "Sort Hint", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-table-3" }, { "id": "growth-table-4", "name": "Cell Delta", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-table-4" } ] }, { "id": "kpi-widgets", "label": "KPI & Dashboard Widgets", "description": "KPI and dashboard widgets — stat cards with trend deltas, sparklines, progress rings, big-number tiles, goal bars, donut and gauge metrics, live counters, uptime tiles. Drop-in dashboard building blocks.", "url": "https://nudaui.dev/components#section-kpi-widgets", "componentCount": 18, "components": [ { "id": "kpi-stat-card-trend", "name": "Stat Card with Trend Arrow", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#kpi-stat-card-trend" }, { "id": "kpi-sparkline-card", "name": "Sparkline Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#kpi-sparkline-card" }, { "id": "kpi-progress-ring", "name": "Progress Ring Metric", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#kpi-progress-ring" }, { "id": "kpi-big-number-tile", "name": "Big Number Tile", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#kpi-big-number-tile" }, { "id": "kpi-delta-week", "name": "Delta vs Last Week", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#kpi-delta-week" }, { "id": "kpi-goal-progress-bar", "name": "Goal Progress Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#kpi-goal-progress-bar" }, { "id": "kpi-mini-bar-chart", "name": "Mini Bar Chart Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#kpi-mini-bar-chart" }, { "id": "kpi-donut-metric", "name": "Donut Metric", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#kpi-donut-metric" }, { "id": "kpi-dual-stat", "name": "Comparison Dual Stat", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#kpi-dual-stat" }, { "id": "kpi-live-counter", "name": "Live Counter Tile", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#kpi-live-counter" }, { "id": "kpi-gauge-widget", "name": "Gauge Widget", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#kpi-gauge-widget" }, { "id": "kpi-uptime-status", "name": "Status Uptime Tile", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#kpi-uptime-status" }, { "id": "kpi-revenue-currency", "name": "Revenue Card with Currency", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#kpi-revenue-currency" }, { "id": "kpi-conversion-funnel", "name": "Conversion Funnel Mini", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#kpi-conversion-funnel" }, { "id": "growth-kpi-1", "name": "Trend Marker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-kpi-1" }, { "id": "growth-kpi-2", "name": "Target Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-kpi-2" }, { "id": "growth-kpi-3", "name": "Live Metric", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-kpi-3" }, { "id": "growth-kpi-4", "name": "Health Signal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-kpi-4" } ] }, { "id": "timelines", "label": "Timelines", "description": "Timelines — vertical, horizontal, alternating, activity feeds, roadmaps, git-commit style, numbered milestones, animated draw-in lines. For histories, changelogs, processes, and event sequences.", "url": "https://nudaui.dev/components#section-timelines", "componentCount": 18, "components": [ { "id": "timeline-vertical", "name": "Vertical Timeline", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#timeline-vertical" }, { "id": "timeline-horizontal", "name": "Horizontal Timeline", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#timeline-horizontal" }, { "id": "timeline-alternating", "name": "Alternating Sides", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#timeline-alternating" }, { "id": "timeline-activity-feed", "name": "Activity Feed", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#timeline-activity-feed" }, { "id": "timeline-gradient-line", "name": "Gradient Line", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#timeline-gradient-line" }, { "id": "timeline-icon-nodes", "name": "Icon Nodes", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#timeline-icon-nodes" }, { "id": "timeline-draw-in", "name": "Animated Draw-In", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#timeline-draw-in" }, { "id": "timeline-roadmap", "name": "Roadmap", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#timeline-roadmap" }, { "id": "timeline-git-commit", "name": "Git Commit Style", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#timeline-git-commit" }, { "id": "timeline-numbered-milestones", "name": "Numbered Milestones", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#timeline-numbered-milestones" }, { "id": "timeline-compact-log", "name": "Compact Log", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#timeline-compact-log" }, { "id": "timeline-now-marker", "name": "Now Marker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#timeline-now-marker" }, { "id": "timeline-year-separators", "name": "Year Separators", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#timeline-year-separators" }, { "id": "timeline-striped-rows", "name": "Striped Rows", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#timeline-striped-rows" }, { "id": "growth-timeline-1", "name": "Phase Marker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-timeline-1" }, { "id": "growth-timeline-2", "name": "Activity Node", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-timeline-2" }, { "id": "growth-timeline-3", "name": "Release Point", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-timeline-3" }, { "id": "growth-timeline-4", "name": "History Signal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-timeline-4" } ] }, { "id": "cookie-consent", "label": "Cookie & Consent", "description": "Cookie and consent UI — bottom bars, corner cards, centered modals, slide-up banners, granular toggle panels, accept/reject and GDPR settings. Privacy notices that don't wreck the page.", "url": "https://nudaui.dev/components#section-cookie-consent", "componentCount": 18, "components": [ { "id": "cookie-bottom-bar", "name": "Bottom Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cookie-bottom-bar" }, { "id": "cookie-corner-card", "name": "Corner Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cookie-corner-card" }, { "id": "cookie-centered-modal", "name": "Centered Modal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cookie-centered-modal" }, { "id": "cookie-slide-up-banner", "name": "Slide-Up Banner", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cookie-slide-up-banner" }, { "id": "cookie-minimal-pill", "name": "Minimal Pill", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cookie-minimal-pill" }, { "id": "cookie-granular-toggles", "name": "Granular Toggles Panel", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cookie-granular-toggles" }, { "id": "cookie-dark-glass-banner", "name": "Dark Glass Banner", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cookie-dark-glass-banner" }, { "id": "cookie-two-button", "name": "Two-Button Accept/Reject", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cookie-two-button" }, { "id": "cookie-gdpr-settings-list", "name": "GDPR Settings List", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cookie-gdpr-settings-list" }, { "id": "cookie-floating-card", "name": "Floating Bottom-Left Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#cookie-floating-card" }, { "id": "ck2-reopen-pill", "name": "Reopen Consent Pill", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ck2-reopen-pill" }, { "id": "ck2-age-gate", "name": "Age Verification Gate", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ck2-age-gate" }, { "id": "ck2-scroll-gate", "name": "Terms Scroll Gate", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ck2-scroll-gate" }, { "id": "ck2-data-rights", "name": "Data Rights Request Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ck2-data-rights" }, { "id": "ck2-why-tracking", "name": "Tracking Transparency Prompt", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ck2-why-tracking" }, { "id": "ck2-receipt", "name": "Consent Receipt Summary", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ck2-receipt" }, { "id": "ck2-ccpa", "name": "CCPA Do Not Sell Notice", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ck2-ccpa" }, { "id": "ck2-renewal", "name": "Consent Renewal Notice", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ck2-renewal" } ] }, { "id": "error-pages", "label": "Error & 404 Pages", "description": "Error and 404 pages — centered 404, 500 server error, glitch text, maintenance mode, offline state, empty-search, access-denied 403, retry cards. Friendly dead-ends that keep users oriented.", "url": "https://nudaui.dev/components#section-error-pages", "componentCount": 18, "components": [ { "id": "error-404-centered", "name": "404 Centered", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#error-404-centered" }, { "id": "error-500-server", "name": "500 Server Error", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#error-500-server" }, { "id": "error-glitch-404", "name": "Glitch 404", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#error-glitch-404" }, { "id": "error-astronaut-lost", "name": "Astronaut Lost", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#error-astronaut-lost" }, { "id": "error-maintenance-mode", "name": "Maintenance Mode", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#error-maintenance-mode" }, { "id": "error-offline-state", "name": "Offline State", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#error-offline-state" }, { "id": "error-empty-search-404", "name": "Empty Search Results", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#error-empty-search-404" }, { "id": "error-broken-link", "name": "Broken Link Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#error-broken-link" }, { "id": "error-access-denied-403", "name": "Access Denied 403", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#error-access-denied-403" }, { "id": "error-retry-card", "name": "Retry Error Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#error-retry-card" }, { "id": "ep2-rate-limited", "name": "Rate Limited Cooldown", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ep2-rate-limited" }, { "id": "ep2-session-expired", "name": "Session Expired Re-auth", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ep2-session-expired" }, { "id": "ep2-gone", "name": "Gone Archived Notice", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ep2-gone" }, { "id": "ep2-payment-required", "name": "Payment Required Notice", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ep2-payment-required" }, { "id": "ep2-browser-unsupported", "name": "Browser Unsupported Notice", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ep2-browser-unsupported" }, { "id": "ep2-deploy-progress", "name": "Deploy In Progress", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ep2-deploy-progress" }, { "id": "ep2-error-id", "name": "Error With Copyable Id", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ep2-error-id" }, { "id": "ep2-crash-boundary", "name": "Crash Boundary Fallback", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#ep2-crash-boundary" } ] }, { "id": "social-share", "label": "Social Share", "description": "Social share UI — horizontal rows, floating bars, copy-link pills, share counts, popover menus, native-style sheets, QR cards, like/share/bookmark bars. Inline-SVG glyphs, no external scripts.", "url": "https://nudaui.dev/components#section-social-share", "componentCount": 18, "components": [ { "id": "share-horizontal-row", "name": "Horizontal Share Row", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#share-horizontal-row" }, { "id": "share-floating-vertical", "name": "Floating Vertical Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#share-floating-vertical" }, { "id": "share-copy-link-pill", "name": "Copy-Link Pill", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#share-copy-link-pill" }, { "id": "share-count-buttons", "name": "Share Count Buttons", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#share-count-buttons" }, { "id": "share-circular-icons", "name": "Circular Icon Buttons", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#share-circular-icons" }, { "id": "share-popover-menu", "name": "Popover Share Menu", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#share-popover-menu" }, { "id": "share-gradient-buttons", "name": "Gradient Share Buttons", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#share-gradient-buttons" }, { "id": "share-like-bookmark-bar", "name": "Like + Share + Bookmark Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#share-like-bookmark-bar" }, { "id": "share-qr-card", "name": "QR Share Card", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#share-qr-card" }, { "id": "share-segmented-toggle", "name": "Segmented Share Toggle", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#share-segmented-toggle" }, { "id": "share-minimal-text-links", "name": "Minimal Text Links", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#share-minimal-text-links" }, { "id": "share-sticky-bottom-bar", "name": "Sticky Bottom Share Bar", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#share-sticky-bottom-bar" }, { "id": "share-native-sheet", "name": "Native-Style Sheet", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#share-native-sheet" }, { "id": "share-expand-fab", "name": "Expand-on-Hover FAB", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#share-expand-fab" }, { "id": "growth-share-1", "name": "Share Intent", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-share-1" }, { "id": "growth-share-2", "name": "Copy Signal", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-share-2" }, { "id": "growth-share-3", "name": "Link State", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-share-3" }, { "id": "growth-share-4", "name": "Audience Marker", "languages": [ "html", "css" ], "hasJS": false, "anchor": "https://nudaui.dev/components#growth-share-4" } ] } ], "links": { "gallery": "https://nudaui.dev/components", "registry": "https://nudaui.dev/api/registry.json", "catalogFull": "https://nudaui.dev/api/catalog-full.json", "component": "https://nudaui.dev/api/components/{id}.json", "sitemap": "https://nudaui.dev/sitemap.xml", "llms": "https://nudaui.dev/llms.txt", "llmsFull": "https://nudaui.dev/llms-full.txt", "ai": "https://nudaui.dev/.well-known/ai.txt", "changelog": "https://nudaui.dev/changelog" } }