{"$schema":"https://ui.shadcn.com/schema/registry.json","name":"netter-ui","homepage":"https://netter-ui-app-la9g10-924acb-161-153-45-177.sslip.io","items":[{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"fluid-morph-bg","type":"registry:component","title":"Fluid Morph Background","description":"A container that renders children over three slowly morphing blurred shapes in a warm ember palette. Static under reduced motion.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/fluid-morph-bg.tsx","type":"registry:component","target":"components/netter/fluid-morph-bg.tsx"}],"docs":"Wrap hero copy, an auth panel, or an empty state in FluidMorphBg; children render above the shapes. Pass color1-3 and baseColor to change the palette. Shapes morph with the Web Animations API and stay still when the OS requests reduced motion or reducedMotion is true."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"kinetic-button","type":"registry:component","title":"Kinetic Button","description":"A high-contrast CTA button with accessible focus and restrained motion.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/kinetic-button.tsx","type":"registry:component","target":"components/netter/kinetic-button.tsx"}],"docs":"Drop KineticButton into primary CTAs. It renders a native button (type=\"button\" unless you pass another type), visible focus, disabled styles, and no external dependencies. Pass reducedMotion to force the static variant; the OS preference is honored automatically."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"signal-card","type":"registry:component","title":"Signal Card","description":"A dense metric card with trend copy and an accessible progressbar computed from value and max.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/signal-card.tsx","type":"registry:component","target":"components/netter/signal-card.tsx"}],"docs":"Pass a numeric value and max to compute the progress rail, for example value={18420} max={25000}. String values are still accepted for display; the rail is hidden when progress cannot be computed."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"command-navbar","type":"registry:block","title":"Command Navbar","description":"A compact SaaS navbar with a command-search slot and crisp action hierarchy.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/command-navbar.tsx","type":"registry:block","target":"components/netter/command-navbar.tsx"}],"docs":"CommandNavbar is a static responsive block. Pass brand, links, searchLabel, and shortcut to adapt the copy, and connect onSearch to your own search dialog or command palette."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"launch-hero","type":"registry:block","title":"Launch Hero","description":"A product hero with title, description, primary and secondary actions, and a media slot. Defaults show a month-end close summary.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/launch-hero.tsx","type":"registry:block","target":"components/netter/launch-hero.tsx"}],"docs":"Pass title, description, primaryAction and secondaryAction as { label, href }, and media. Set an action to null to hide it. Light and dark styles use Tailwind dark: variants."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"field-grid-input","type":"registry:component","title":"Field Grid Input","description":"A form field pattern with label, helper text, prefix slot, and visible focus.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/field-grid-input.tsx","type":"registry:component","target":"components/netter/field-grid-input.tsx"}],"docs":"FieldGridInput uses a real label wired with htmlFor and a stable useId-based id (pass id to override). helper and error are linked through aria-describedby, and error also sets aria-invalid. Keep helper copy specific and short."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"confirm-dialog","type":"registry:block","title":"Confirm Dialog","description":"An accessible confirmation dialog with controlled or uncontrolled state, async confirm, and a destructive variant.","dependencies":["motion","@radix-ui/react-dialog"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/confirm-dialog.tsx","type":"registry:block","target":"components/netter/confirm-dialog.tsx"}],"docs":"ConfirmDialog is built on Radix Dialog (focus trap, Escape, scroll lock) and works with zero props. Use open/onOpenChange for controlled state or defaultOpen for uncontrolled, and customize trigger, title, description, confirmLabel, cancelLabel, and variant (\"destructive\" by default, or \"default\"). onConfirm may return a Promise: the confirm button shows a pending state and the dialog closes when it resolves, or stays open if it rejects so the user can retry."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pulse-command-bar","type":"registry:block","title":"Pulse Command Bar","description":"A working command bar: type to filter a commands prop, move with arrow keys, select with Enter, and close with Escape.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/pulse-command-bar.tsx","type":"registry:block","target":"components/netter/pulse-command-bar.tsx"}],"docs":"PulseCommandBar filters the commands prop by label, hint, and keywords. Arrow keys move the active option, Enter calls onSelect, and Escape closes the list or clears the query. Set busy only while real work is pending; the pulse stops under the OS reduced-motion setting or when reducedMotion is true."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"bento-command-grid","type":"registry:block","title":"Bento Command Grid","description":"A responsive bento section with a lead command panel and an items array of metric panels.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/bento-command-grid.tsx","type":"registry:block","target":"components/netter/bento-command-grid.tsx"}],"docs":"Pass items as { label, value, detail } objects; title, description, eyebrow, and command are optional props. Use it as a feature section for developer products, launch pages, or internal tooling dashboards."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"glassmorph-pricing-card","type":"registry:component","title":"Glassmorph Pricing Card","description":"A translucent pricing card with check-icon feature lists, one clear action, and an optional plans array for side-by-side tiers.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/glassmorph-pricing-card.tsx","type":"registry:component","target":"components/netter/glassmorph-pricing-card.tsx"}],"docs":"Use the single-plan props (plan, price, period, description, features, badge, ctaLabel) or pass a plans array to render tiers side by side. onSelect receives the chosen plan. Feature checks are decorative inline SVGs hidden from assistive technology."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"liquid-chrome-button","type":"registry:component","title":"Liquid Chrome Button","description":"A reflective button with chrome bands, liquid highlights, and native button semantics.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/liquid-chrome-button.tsx","type":"registry:component","target":"components/netter/liquid-chrome-button.tsx"}],"docs":"Use LiquidChromeButton for high-value CTAs that need a tactile metallic feel. The reflective sweep runs once on hover or keyboard focus (never as an idle loop), and motion/react adds a small lift and press. Reduced motion removes the sweep and transforms; pass reducedMotion to force it."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"choco-drip-button","type":"registry:component","title":"Choco Drip Button","description":"A playful button with chocolate layers and dripping hover details.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/choco-drip-button.tsx","type":"registry:component","target":"components/netter/choco-drip-button.tsx"}],"docs":"ChocoDripButton is intentionally playful. The drips rest in place and only stretch on hover or focus, with a small press on tap; there is no idle loop. Reduced motion keeps the drips static; pass reducedMotion to force it."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"encrypted-reveal-text","type":"registry:component","title":"Encrypted Reveal Text","description":"A scramble reveal driven by requestAnimationFrame. Screen readers get only the final text, and reduced motion shows it immediately.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/encrypted-reveal-text.tsx","type":"registry:component","target":"components/netter/encrypted-reveal-text.tsx"}],"docs":"Change text or remount to replay. glyphs sets the scramble pool and duration sets the reveal length in milliseconds. The animated layer is aria-hidden and an sr-only copy holds the final text. The older encrypted prop is still accepted and used as the glyph pool."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"water-drop-title","type":"registry:component","title":"Water Drop Title","description":"A bold headline treatment with liquid droplets, highlights, and dark-mode support.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/water-drop-title.tsx","type":"registry:component","target":"components/netter/water-drop-title.tsx"}],"docs":"WaterDropTitle is a display-only text treatment. Keep the copy short so the droplets stay intentional."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"video-mask-wordmark","type":"registry:block","title":"Video Mask Wordmark","description":"A wordmark mask: an SVG mask cuts the word out of the surface so a muted video shows through the letters. No autoplay under reduced motion, plus a pause control.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/video-mask-wordmark.tsx","type":"registry:block","target":"components/netter/video-mask-wordmark.tsx"}],"docs":"Pass word, videoSrc, and poster. Without videoSrc a slow gradient, or the poster, fills the letters. Under reduced motion the video does not autoplay and shows its poster; the pause button toggles motion for everyone. The word is exposed once as an sr-only heading."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"geometric-type-grid","type":"registry:block","title":"Geometric Type Grid","description":"A typographic display grid that spells a word across geometric tiles for launch pages, portfolios, and section intros.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/geometric-type-grid.tsx","type":"registry:block","target":"components/netter/geometric-type-grid.tsx"}],"docs":"Set text to the word to spell and columns to control the grid. The tiles are aria-hidden and the full word is available to screen readers."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"aurora-mesh-background","type":"registry:component","title":"Aurora Mesh Background","description":"A container that renders children over slowly drifting aurora curtains in green, lime, and a faint pink edge. Static under reduced motion.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/aurora-mesh-background.tsx","type":"registry:component","target":"components/netter/aurora-mesh-background.tsx"}],"docs":"Wrap a hero or sign-in panel in AuroraMeshBackground. Pass colors (three curtain colors) and baseColor to change the palette, speed to change the drift, and reducedMotion to force the static layout."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"halftone-cursor-field","type":"registry:component","title":"Halftone Cursor Field","description":"A pointer-aware halftone surface that writes CSS variables in a single animation frame and cleans up on idle and unmount.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/halftone-cursor-field.tsx","type":"registry:component","target":"components/netter/halftone-cursor-field.tsx"}],"docs":"HalftoneCursorField coalesces pointer moves into one requestAnimationFrame write of CSS variables, so React never re-renders on movement. Pending frames are cancelled on pointer leave and unmount, and listeners are removed. Touch, the OS reduced-motion setting, and reducedMotion keep the field static."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"spotlight-bento-card","type":"registry:component","title":"Spotlight Bento Card","description":"A compact bento card whose spotlight follows the pointer through CSS variables written once per animation frame.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/spotlight-bento-card.tsx","type":"registry:component","target":"components/netter/spotlight-bento-card.tsx"}],"docs":"SpotlightBentoCard stores the pointer in a ref and writes --x and --y once per animation frame, so moving the pointer never re-renders React. Content stays readable without pointer interaction, and the spotlight stays static under reduced motion or when reducedMotion is true."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"magnetic-action-dock","type":"registry:block","title":"Magnetic Action Dock","description":"A compact view dock with native buttons, a persistent selected state, and a magnetic hover lift.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/magnetic-action-dock.tsx","type":"registry:block","target":"components/netter/magnetic-action-dock.tsx"}],"docs":"MagneticActionDock keeps all items as native buttons. Clicking selects an item (marked with aria-current); hover and focus only add a magnetic lift and highlight, so pointing at an item never changes the selection. Use active/onActiveChange for controlled state or defaultActive for uncontrolled. The dock wraps on narrow screens and respects reduced motion (pass reducedMotion to force it)."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"isometric-tech-stack","type":"registry:block","title":"Isometric Tech Stack","description":"An isometric stack of 2.5D cubes with visible side faces, a ReactNode icon slot per layer, and a tactile press-to-sink toggle.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/isometric-tech-stack.tsx","type":"registry:block","target":"components/netter/isometric-tech-stack.tsx"}],"docs":"Pass items as { name, icon } where icon is any ReactNode (your SVG or image logo). The legacy mark string is still accepted when no icon is given. Each cube is a native toggle button: click once to sink a tile, click again to restore it. Reduced motion, from the OS or the reducedMotion prop, removes the press animation."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"skeuo-icon-tile-row","type":"registry:component","title":"Skeuo Icon Tile Row","description":"A row of tactile icon buttons with layered bevels, a ReactNode icon slot, and native keyboard support.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/skeuo-icon-tile-row.tsx","type":"registry:component","target":"components/netter/skeuo-icon-tile-row.tsx"}],"docs":"Pass tiles as { label, icon } where icon is any ReactNode; label becomes the accessible name. The legacy mark string still renders when no icon is provided. onTileClick receives the pressed tile. Reduced motion, from the OS or the reducedMotion prop, removes the lift and press animation."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"clay-pop-button","type":"registry:component","title":"Clay Pop Button","description":"A friendly claymorphism CTA with light depth, a compressing press, and accessible focus styles.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/clay-pop-button.tsx","type":"registry:component","target":"components/netter/clay-pop-button.tsx"}],"docs":"ClayPopButton works for friendly product moments and creator tools. It uses a light clay depth with a subtle press that compresses the shadow. It is a native button (type=\"button\" by default) and respects reduced motion; pass reducedMotion to force it."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"brutalist-slam-button","type":"registry:component","title":"Brutalist Slam Button","description":"A sharp brutalist action button with heavy offset shadow and Motion tap response.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/brutalist-slam-button.tsx","type":"registry:component","target":"components/netter/brutalist-slam-button.tsx"}],"docs":"BrutalistSlamButton is for loud CTAs and editorial product moments. It is a toggle (aria-pressed) whose shadow collapses when pressed; under reduced motion the shadow still communicates state without the slam. Pass reducedMotion to force it. Use it sparingly because it is visually intense."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"liquid-blob-button","type":"registry:component","title":"Liquid Blob Button","description":"A rounded liquid CTA with a hover-driven blob fill, soft highlight, and Motion feedback.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/liquid-blob-button.tsx","type":"registry:component","target":"components/netter/liquid-blob-button.tsx"}],"docs":"LiquidBlobButton uses motion/react for the internal blob and button feedback. The blob rests at the edge and flows across only on hover or focus; there is no idle loop. Reduced motion keeps it static; pass reducedMotion to force it. Keep the label short so the liquid shape remains visible."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"anime-scramble-headline","type":"registry:component","title":"Anime Scramble Headline","description":"A click, hover, and focus scramble headline using Anime.js scoped animation. Reduced motion shows the final text with no animation.","dependencies":["animejs"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/anime-scramble-headline.tsx","type":"registry:component","target":"components/netter/anime-scramble-headline.tsx"}],"docs":"AnimeScrambleHeadline reverts its Anime.js scope on cleanup. The button is labelled with the final text and the animated letters are aria-hidden. Pass reducedMotion to force the static text."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"anime-stagger-wordmark","type":"registry:component","title":"Anime Stagger Wordmark","description":"A tiled wordmark animated with Anime.js stagger timing, a scoped replay method, and a static reduced-motion state.","dependencies":["animejs"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/anime-stagger-wordmark.tsx","type":"registry:component","target":"components/netter/anime-stagger-wordmark.tsx"}],"docs":"Replay runs through an Anime.js scope method, so every animation stays inside the component and is reverted on unmount. Screen readers read the word once from an sr-only element; the tiles are aria-hidden. Under reduced motion the word renders static and the replay button is hidden."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"haikei-blob-scene-bg","type":"registry:component","title":"Blob Scene Background","description":"A container with layered SVG blobs that breathe through a scoped Anime.js loop. Static under reduced motion.","dependencies":["animejs"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/haikei-blob-scene-bg.tsx","type":"registry:component","target":"components/netter/haikei-blob-scene-bg.tsx"}],"docs":"Children render above the scene. The SVG is decorative (aria-hidden, focusable false) and the animation reverts on unmount. Pass reducedMotion to force the static scene."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"layered-wave-hero-bg","type":"registry:component","title":"Layered Wave Hero Background","description":"A dark layered wave surface for hero sections, auth pages, and launch screens. Renders children above the waves.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/layered-wave-hero-bg.tsx","type":"registry:component","target":"components/netter/layered-wave-hero-bg.tsx"}],"docs":"Children render above the waves. The drift uses motion/react and stops under the OS reduced-motion setting or when reducedMotion is true."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"low-poly-grid-bg","type":"registry:component","title":"Low Poly Grid Background","description":"A low-poly SVG grid with a scoped Anime.js shimmer for dashboard and hero surfaces. Renders children above the grid.","dependencies":["animejs"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/low-poly-grid-bg.tsx","type":"registry:component","target":"components/netter/low-poly-grid-bg.tsx"}],"docs":"Children render above the grid. The SVG is decorative and the Anime.js scope reverts on unmount. The shimmer stops under reduced motion or when reducedMotion is true."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"typewriter-tooltip-card","type":"registry:component","title":"Typewriter Tooltip Card","description":"A compact card that types its message when opened and shows a tooltip on hover and keyboard focus, with the full text always available to screen readers.","dependencies":["motion","@radix-ui/react-tooltip"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/typewriter-tooltip-card.tsx","type":"registry:component","target":"components/netter/typewriter-tooltip-card.tsx"}],"docs":"TypewriterTooltipCard types its message only while the tooltip is open; the full text is always exposed to screen readers. The tooltip sits on z-50 in a portal and opens on hover and keyboard focus. Reduced motion, from the OS or the reducedMotion prop, shows the text instantly."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"floating-signal-cards","type":"registry:block","title":"Floating Signal Cards","description":"A props-driven stack of metric cards with a single staggered entrance and no looping motion.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/floating-signal-cards.tsx","type":"registry:block","target":"components/netter/floating-signal-cards.tsx"}],"docs":"Pass cards as { label, value, detail, tone } objects. Cards rise into place once with a short stagger and then stay still, so there is no looping motion to pause. Reduced motion, from the OS or the reducedMotion prop, renders them in place."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"rising-image-grid","type":"registry:block","title":"Rising Image Grid","description":"A props-driven image grid with alternating columns that settle into place in a single entrance, then stay still.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/rising-image-grid.tsx","type":"registry:block","target":"components/netter/rising-image-grid.tsx"}],"docs":"Pass images as { src, alt } objects; use an empty alt for purely decorative photos. Columns rise into place once with alternating direction and then stay still, so nothing loops. Without images, dashed placeholders with decorative, aria-hidden icons are shown. Reduced motion, from the OS or the reducedMotion prop, renders the grid in place."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"infinite-brand-marquee","type":"registry:block","title":"Infinite Brand Marquee","description":"A continuous logo strip with ReactNode or { name, logo } slots, a pause toggle, pause on hover and focus, and a hidden duplicate for screen readers.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/infinite-brand-marquee.tsx","type":"registry:block","target":"components/netter/infinite-brand-marquee.tsx"}],"docs":"Pass items as ReactNode entries or { name, logo } objects; the name stays available to screen readers when a logo is shown. The strip pauses on hover, on keyboard focus inside it, and with the pause toggle (aria-pressed), meeting WCAG 2.2.2. The duplicated list that makes the loop seamless is aria-hidden. Reduced motion, from the OS or the reducedMotion prop, renders a single static list."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"motion-snap-carousel","type":"registry:block","title":"Motion Snap Carousel","description":"A compact image carousel with direction-aware enter and exit transitions, previous and next buttons, and slide picker buttons.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/motion-snap-carousel.tsx","type":"registry:block","target":"components/netter/motion-snap-carousel.tsx"}],"docs":"Pass slides as { src, alt, title, caption } objects. Slides enter and exit through AnimatePresence in the direction of travel. The section uses aria-roledescription=\"carousel\", each slide is a labelled group with aria-roledescription=\"slide\", and the dots are buttons named \"Go to slide N\" with aria-current on the active one. Reduced motion, from the OS or the reducedMotion prop, swaps slides with a fade only."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"flip-reveal-image-card","type":"registry:component","title":"Flip Reveal Image Card","description":"A click-to-flip card with a real image on the front and metadata on the back, built as a native toggle button.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/flip-reveal-image-card.tsx","type":"registry:component","target":"components/netter/flip-reveal-image-card.tsx"}],"docs":"Pass image={{ src, alt }} (or the src and alt shorthands) for the front face; title, eyebrow, backTitle, and details fill the faces. The card is a native toggle button with aria-pressed, and the hidden face is removed from the accessibility tree. Reduced motion, from the OS or the reducedMotion prop, swaps faces without rotating."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"codepen-tilt-card","type":"registry:component","title":"Code Tilt Card","description":"A pointer-reactive 3D card for code snippets, driven by spring motion values without React re-renders.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/codepen-tilt-card.tsx","type":"registry:component","target":"components/netter/codepen-tilt-card.tsx"}],"docs":"CodepenTiltCard renders a figure with a filename caption, status text, and a code block. Tilt follows a mouse pointer through spring motion values, so React never re-renders on movement, and resets when the pointer leaves. The card is not focusable because it has no action; wrap it in a link or button if it should navigate. Touch, the OS reduced-motion setting, or reducedMotion keep it flat."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"before-after-split-button","type":"registry:component","title":"Before After Split Button","description":"A layered CTA button with before and after panels that slide on hover and focus.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/before-after-split-button.tsx","type":"registry:component","target":"components/netter/before-after-split-button.tsx"}],"docs":"BeforeAfterSplitButton uses CSS transform layers for hover and focus. Under reduced motion the panels swap instantly; pass reducedMotion to force it. Keep labels short for the split reveal."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"arrow-trail-button","type":"registry:component","title":"Arrow Trail Button","description":"A compact CTA with a trailing SVG arrow that moves on hover and focus, plus tap feedback.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/arrow-trail-button.tsx","type":"registry:component","target":"components/netter/arrow-trail-button.tsx"}],"docs":"ArrowTrailButton uses an inline SVG arrow marked aria-hidden: on hover or focus the arrow slides out and a trailing copy slides in. It is a native button (type=\"button\" by default). Reduced motion shows a static arrow; pass reducedMotion to force it."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"typography-rhythm-cards","type":"registry:block","title":"Typography Rhythm Cards","description":"A grid of typographic cards driven by an items array of mark, title, and body.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/typography-rhythm-cards.tsx","type":"registry:block","target":"components/netter/typography-rhythm-cards.tsx"}],"docs":"Pass items as { mark, title, body }. The hover lift uses motion/react and is disabled under reduced motion or when reducedMotion is true."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"editor-command-toolbar","type":"registry:block","title":"Editor Command Toolbar","description":"A compact editor toolbar for product builders, command surfaces, and creative apps.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/editor-command-toolbar.tsx","type":"registry:block","target":"components/netter/editor-command-toolbar.tsx"}],"docs":"EditorCommandToolbar uses role='toolbar' and native toggle buttons (aria-pressed). Pass tools, defaultTool, and onToolChange to wire it to your editor; the active indicator snaps instantly under reduced motion (pass reducedMotion to force it). Replace text labels with icons if your design system provides them."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"glass-sidebar-nav","type":"registry:block","title":"Glass Sidebar Nav","description":"A compact sidebar navigation with glass styling, active state, and badge slots.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/glass-sidebar-nav.tsx","type":"registry:block","target":"components/netter/glass-sidebar-nav.tsx"}],"docs":"GlassSidebarNav is a small navigation shell. Pass title, subtitle, links, defaultActive, and onActiveChange to adapt it. It uses native buttons for demo state; replace them with links for production routing. The active rail snaps instantly under reduced motion (pass reducedMotion to force it)."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"floating-pill-navbar","type":"registry:block","title":"Floating Pill Navbar","description":"A rounded navigation bar with animated active pill and compact product actions.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/floating-pill-navbar.tsx","type":"registry:block","target":"components/netter/floating-pill-navbar.tsx"}],"docs":"FloatingPillNavbar uses buttons for local demo state. Pass brand, items, defaultActive, onActiveChange, ctaLabel, and onCtaClick to adapt it, and convert each item to Link when connecting to real routes. The active pill snaps instantly under reduced motion (pass reducedMotion to force it)."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"aurora-ledger-card","type":"registry:component","title":"Aurora Ledger Card","description":"A restrained account card with a configurable accent wash and masked account data.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/aurora-ledger-card.tsx","type":"registry:component","target":"components/netter/aurora-ledger-card.tsx"}],"docs":"Use for account summaries or membership credentials. The default account number is masked; keep it masked when it is sensitive. The accent prop tints the wash and top rule."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"editorial-article-stack","type":"registry:component","title":"Editorial Article Stack","description":"A keyboard-accessible article list with WAI-ARIA tabs and controlled or uncontrolled selection.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/editorial-article-stack.tsx","type":"registry:component","target":"components/netter/editorial-article-stack.tsx"}],"docs":"Provide stable item IDs. Arrow keys, Home, and End move focus and selection with a roving tabindex. Add href to an article to render a link in its panel. Pass reducedMotion to force reduced motion."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"service-index-card","type":"registry:component","title":"Service Index Card","description":"A compact service directory with semantic links and decisive hover states.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/service-index-card.tsx","type":"registry:component","target":"components/netter/service-index-card.tsx"}],"docs":"Pass real destinations for production. The eyebrow and icons are optional; icons are decorative."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"course-progress-card","type":"registry:component","title":"Course Progress Card","description":"A tactile course card with accessible lesson progress and optional next-lesson context.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/course-progress-card.tsx","type":"registry:component","target":"components/netter/course-progress-card.tsx"}],"docs":"Completed and total values are clamped to a valid range, drive the bar width, and are announced textually. nextLesson renders only when provided."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"project-phase-card","type":"registry:component","title":"Project Phase Card","description":"A project phase selector with written status and WAI-ARIA tab keyboard support.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/project-phase-card.tsx","type":"registry:component","target":"components/netter/project-phase-card.tsx"}],"docs":"Use stable IDs for phases. ArrowLeft, ArrowRight, Home, and End move focus and selection. Controlled mode never mutates the provided activeId."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"aperture-reveal-card","type":"registry:component","title":"Aperture Reveal Card","description":"A focus-accessible image card whose detail layer opens through a circular aperture.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/aperture-reveal-card.tsx","type":"registry:component","target":"components/netter/aperture-reveal-card.tsx"}],"docs":"Image dimensions and alt text are required. The description stays in the accessibility tree at all times, so the reveal is visual only and nothing is announced on hover."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"expense-orbit-card","type":"registry:component","title":"Expense Orbit Card","description":"A semantic expense breakdown rendered as a compact conic ring and text list.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/expense-orbit-card.tsx","type":"registry:component","target":"components/netter/expense-orbit-card.tsx"}],"docs":"Provide CSS-compatible colors. Segments are computed from item values and include an accessible text summary. periodLabel renders only when provided."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"editorial-book-slider","type":"registry:component","title":"Editorial Book Slider","description":"A perspective book queue with native controls and controlled selection.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/editorial-book-slider.tsx","type":"registry:component","target":"components/netter/editorial-book-slider.tsx"}],"docs":"Previous and next buttons wrap through the list. Only the active book is exposed to assistive technology."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"analytics-bento-card","type":"registry:component","title":"Analytics Bento Card","description":"An asymmetric analytics card with selectable metrics and shared selection motion.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/analytics-bento-card.tsx","type":"registry:component","target":"components/netter/analytics-bento-card.tsx"}],"docs":"Metrics use real buttons with aria-pressed. Your className is merged with the base styles and your aria-label replaces the default name."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"tech-stack-matrix-card","type":"registry:component","title":"Tech Stack Matrix Card","description":"A semantic technology matrix with optional icon nodes and direct links.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/tech-stack-matrix-card.tsx","type":"registry:component","target":"components/netter/tech-stack-matrix-card.tsx"}],"docs":"Pass meaningful destinations. Text remains the accessible name; icons are optional and decorative."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"glare-tracking-card","type":"registry:component","title":"Glare Tracking Card","description":"A bounded GSAP glare surface with fine-pointer tilt and safe cleanup.","dependencies":["gsap","@gsap/react"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/glare-tracking-card.tsx","type":"registry:component","target":"components/netter/glare-tracking-card.tsx"}],"docs":"The surface is presentational and not focusable; put links or buttons inside it when it needs an action. Pointer tracking uses gsap.quickTo, is disabled for touch and reduced motion (or reducedMotion), and all tweens are scoped and killed."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"quick-links-card","type":"registry:component","title":"Quick Links Card","description":"A compact navigation card with strong keyboard and hover parity.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/quick-links-card.tsx","type":"registry:component","target":"components/netter/quick-links-card.tsx"}],"docs":"Use real href values. The entire component is a labelled navigation landmark. Icons are optional."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"timeline-fold-card","type":"registry:component","title":"Timeline Fold Card","description":"An expandable project timeline with native buttons and measured disclosure motion.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/timeline-fold-card.tsx","type":"registry:component","target":"components/netter/timeline-fold-card.tsx"}],"docs":"Each event uses aria-expanded and aria-controls. Reduced motion removes height animation."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"animated-chart-card","type":"registry:component","title":"Animated Chart Card","description":"A GSAP line chart with an accessible textual series and scoped entrance sequence.","dependencies":["gsap","@gsap/react"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/animated-chart-card.tsx","type":"registry:component","target":"components/netter/animated-chart-card.tsx"}],"docs":"The SVG exposes every label and value. The line renders fully drawn without JavaScript, under reduced motion, and during hydration; client mounts set the start state before paint. GSAP reverts on update or unmount."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"rate-limit-status-card","type":"registry:component","title":"Rate Limit Status Card","description":"An accessible request-budget meter with remaining capacity and reset context.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/rate-limit-status-card.tsx","type":"registry:component","target":"components/netter/rate-limit-status-card.tsx"}],"docs":"Used and limit values are clamped and drive the meter width. The meter includes a textual aria-valuetext."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"live-dashboard-card","type":"registry:component","title":"Metric Dashboard Card","description":"A tabbed metrics dashboard with data-driven bar series and an optional freshness label.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/live-dashboard-card.tsx","type":"registry:component","target":"components/netter/live-dashboard-card.tsx"}],"docs":"Pass series per metric for real bar data; without it a trend is derived from the metric. updatedAt renders only when provided. Tabs follow the WAI-ARIA pattern with arrow, Home, and End keys."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"scanner-stream-card","type":"registry:component","title":"Scanner Stream Card","description":"A pauseable GSAP check list with a measured scan line and a reduced-motion fallback.","dependencies":["gsap","@gsap/react"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/scanner-stream-card.tsx","type":"registry:component","target":"components/netter/scanner-stream-card.tsx"}],"docs":"Use paused/onPausedChange for controlled state. The scan distance is measured in pixels and rebuilt on resize. Set tone per item for warning or error states. Reduced motion (or reducedMotion) hides the scan line."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"payment-method-card","type":"registry:component","title":"Payment Method Card","description":"A portable payment field group with native labels and browser autocomplete hints.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/payment-method-card.tsx","type":"registry:component","target":"components/netter/payment-method-card.tsx"}],"docs":"Connect validation in the parent form. Each field accepts native input props and uses the appropriate autocomplete token."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"market-pulse-card","type":"registry:component","title":"Market Pulse Card","description":"A GSAP portfolio list with concise values, change direction, and flash-free entry motion.","dependencies":["gsap","@gsap/react"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/market-pulse-card.tsx","type":"registry:component","target":"components/netter/market-pulse-card.tsx"}],"docs":"Currency formatting is configurable. Positive and negative movement use both signs and color. Rows stay visible without JavaScript and under reduced motion. updatedAt renders only when provided."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"contribution-heatmap-card","type":"registry:component","title":"Contribution Heatmap Card","description":"A responsive activity heatmap with a named value for every calendar cell.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/contribution-heatmap-card.tsx","type":"registry:component","target":"components/netter/contribution-heatmap-card.tsx"}],"docs":"Provide chronological days with level values from zero through four. Every day includes an accessible label."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"profile-presence-card","type":"registry:component","title":"Profile Presence Card","description":"A controlled team availability list with explicit status text and shared selection motion.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/profile-presence-card.tsx","type":"registry:component","target":"components/netter/profile-presence-card.tsx"}],"docs":"Status is always written as text. Controlled selection reports changes without mutating activeId."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ripple-grid-bg","type":"registry:component","title":"Ripple Grid Background","description":"An interactive dot grid that sends a staggered ripple out from the pointer.","dependencies":["animejs"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/ripple-grid-bg.tsx","type":"registry:component","target":"components/netter/ripple-grid-bg.tsx"}],"docs":"Move a pointer across the grid or press a dot to send a ripple from the nearest cell. One delegated, frame-throttled handler drives the whole grid, the running ripple is reverted on unmount, and reduced motion (OS setting or the reducedMotion prop) keeps the grid static."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"async-state-button","type":"registry:component","title":"Async State Button","description":"A state-driven action button with clear loading, success, and error feedback.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/async-state-button.tsx","type":"registry:component","target":"components/netter/async-state-button.tsx"}],"docs":"Control the state from your async workflow. The button announces non-idle states and disables itself while loading."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"magnetic-fill-button","type":"registry:component","title":"Magnetic Fill Button","description":"A precise proximity button with a directional fill and coarse-pointer fallback.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/magnetic-fill-button.tsx","type":"registry:component","target":"components/netter/magnetic-fill-button.tsx"}],"docs":"Use for a single high-value action. Magnetic movement only runs for fine pointers and is removed for reduced motion."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"sliding-breadcrumbs","type":"registry:component","title":"Sliding Breadcrumbs","description":"Semantic breadcrumbs with a shared current-page indicator.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/sliding-breadcrumbs.tsx","type":"registry:component","target":"components/netter/sliding-breadcrumbs.tsx"}],"docs":"Pass an ordered items array and mark one item current. Links remain native anchors for portability."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"overflow-breadcrumbs","type":"registry:component","title":"Overflow Breadcrumbs","description":"Responsive breadcrumbs that move middle items into an accessible menu.","dependencies":["motion","@radix-ui/react-dropdown-menu"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/overflow-breadcrumbs.tsx","type":"registry:component","target":"components/netter/overflow-breadcrumbs.tsx"}],"docs":"Set maxItems to control when middle segments collapse. The first and current path segments remain visible. Collapsed segments with an href become menu links; segments without one are listed as plain text rather than focusable items."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"intent-tooltip","type":"registry:component","title":"Intent Tooltip","description":"A focus and hover tooltip with restrained entrance motion.","dependencies":["motion","@radix-ui/react-tooltip"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/intent-tooltip.tsx","type":"registry:component","target":"components/netter/intent-tooltip.tsx"}],"docs":"Wrap a single interactive trigger and keep content concise. The component includes its own TooltipProvider."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"command-tooltip","type":"registry:component","title":"Command Tooltip","description":"A richer command hint with description and keyboard shortcut keys.","dependencies":["motion","@radix-ui/react-tooltip"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/command-tooltip.tsx","type":"registry:component","target":"components/netter/command-tooltip.tsx"}],"docs":"Use for controls whose shortcut or consequence benefits from a second line of context."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"focus-dialog","type":"registry:component","title":"Focus Dialog","description":"An accessible animated dialog with focus trapping and restoration.","dependencies":["motion","@radix-ui/react-dialog"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/focus-dialog.tsx","type":"registry:component","target":"components/netter/focus-dialog.tsx"}],"docs":"Title and description are required. Radix handles focus trapping, Escape, inert content, and trigger focus restoration."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"morphing-media-dialog","type":"registry:component","title":"Morphing Media Dialog","description":"A thumbnail that expands into an accessible media dialog using shared layout motion.","dependencies":["motion","@radix-ui/react-dialog"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/morphing-media-dialog.tsx","type":"registry:component","target":"components/netter/morphing-media-dialog.tsx"}],"docs":"Provide explicit image dimensions, meaningful alt text, title, and description. Reduced motion falls back to a crossfade."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"kinetic-image-reveal","type":"registry:component","title":"Kinetic Image Reveal","description":"A GSAP editorial image mask with mount, in-view, and scrubbed parallax modes.","dependencies":["gsap","@gsap/react"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/kinetic-image-reveal.tsx","type":"registry:component","target":"components/netter/kinetic-image-reveal.tsx"}],"docs":"Choose mount, in-view, or scroll. Direction controls the mask origin and parallax adds up to 20 yPercent of travel. Reduced motion (OS setting or the reducedMotion prop) renders the final frame without creating a ScrollTrigger. The pre-reveal mask is applied in markup only when motion is allowed, so server-rendered pages never flash the image, and a noscript rule keeps it visible without JavaScript."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"image-comparison-lens","type":"registry:component","title":"Image Comparison Lens","description":"An accessible before-and-after image comparison controlled by a native range input.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/image-comparison-lens.tsx","type":"registry:component","target":"components/netter/image-comparison-lens.tsx"}],"docs":"Provide equivalent before and after images with useful alt text. Arrow keys adjust the native range control."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"morphing-icon-button","type":"registry:component","title":"Morphing Icon Button","description":"A controlled or uncontrolled icon toggle with clear pressed semantics.","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/morphing-icon-button.tsx","type":"registry:component","target":"components/netter/morphing-icon-button.tsx"}],"docs":"Always provide a concise label. Use pressed and onPressedChange when the parent owns the state."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"hold-confirm-icon-button","type":"registry:component","title":"Hold Confirm Icon Button","description":"A GSAP hold-to-confirm control for deliberate destructive actions.","dependencies":["gsap","@gsap/react"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/hold-confirm-icon-button.tsx","type":"registry:component","target":"components/netter/hold-confirm-icon-button.tsx"}],"docs":"Use only when a deliberate hold reduces accidental activation. Pointer and Space/Enter holds can both confirm. Reduced motion (OS setting or the reducedMotion prop) still requires the full hold; it only swaps the progress animation for a static indicator."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"context-cursor-label","type":"registry:component","title":"Context Cursor Label","description":"A scoped GSAP cursor label that follows fine pointers without affecting touch.","dependencies":["gsap","@gsap/react"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/context-cursor-label.tsx","type":"registry:component","target":"components/netter/context-cursor-label.tsx"}],"docs":"Keep the native cursor by default. The follower disables itself for coarse pointers and reduced motion."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"focus-lens-cursor","type":"registry:component","title":"Focus Lens Cursor","description":"A lazy WebGL glass lens with a production CSS fallback for bounded media.","dependencies":["three","@react-three/fiber"],"devDependencies":["@types/three"],"registryDependencies":[],"files":[{"path":"registry/default/focus-lens-cursor.tsx","type":"registry:component","target":"components/netter/focus-lens-cursor.tsx"}],"docs":"The Canvas is created only after fine-pointer intent. Touch and reduced-motion users receive untouched content; unsupported or lost WebGL contexts use the fallback. Use forceFallback to exercise that branch in documentation."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"split-line-reveal","type":"registry:component","title":"Split Line Reveal","description":"An anime.js word reveal that preserves a complete accessible text label.","dependencies":["animejs"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/split-line-reveal.tsx","type":"registry:component","target":"components/netter/split-line-reveal.tsx"}],"docs":"Use for one high-value heading rather than every section. The original text remains the accessible name."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"kinetic-word-rotator","type":"registry:component","title":"Kinetic Word Rotator","description":"An anime.js word loop with masked transitions and a stable accessible phrase.","dependencies":["animejs"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/kinetic-word-rotator.tsx","type":"registry:component","target":"components/netter/kinetic-word-rotator.tsx"}],"docs":"Provide two or more short words. A built-in pause control (aria-pressed) stops the loop, or own it with paused and onPausedChange. Screen readers receive one stable sentence (override with accessibleText) while the moving words stay hidden from them. Reduced motion, from the OS or the reducedMotion prop, stops the loop."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"magnetic-snap-cursor","type":"registry:component","title":"Magnetic Snap Cursor","description":"A ring cursor that wraps and resizes around marked targets inside one bounded surface.","dependencies":["gsap","@gsap/react"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/magnetic-snap-cursor.tsx","type":"registry:component","target":"components/netter/magnetic-snap-cursor.tsx"}],"docs":"Mark elements with data-cursor-target (or pass targetSelector). GSAP quickTo drives the ring. It stays off for touch, coarse pointers, and reduced motion, and the native cursor is only hidden while the ring is active."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"crosshair-coordinate-cursor","type":"registry:component","title":"Crosshair Coordinate Cursor","description":"Hairline crosshair with a live x and y readout, scoped to one measured area.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/crosshair-coordinate-cursor.tsx","type":"registry:component","target":"components/netter/crosshair-coordinate-cursor.tsx"}],"docs":"Pointer moves are batched with requestAnimationFrame. The area is focusable: arrow keys move the crosshair (Shift for ten times the step) and announce the reading. On touch, a tap places the crosshair and keeps it visible."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"drag-hint-cursor","type":"registry:component","title":"Drag Hint Cursor","description":"A small pill that reads Drag, View, or any hint from the element under the pointer.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/drag-hint-cursor.tsx","type":"registry:component","target":"components/netter/drag-hint-cursor.tsx"}],"docs":"Add data-cursor-hint=\"Drag\" to any descendant. The pill is decorative, so keep accessible names on the elements themselves. Fine pointers only; reduced motion removes the trailing ease."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dot-matrix-field","type":"registry:component","title":"Dot Matrix Field","description":"A crisp SVG dot grid with an optional slow highlight sweep that pauses offscreen.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/dot-matrix-field.tsx","type":"registry:component","target":"components/netter/dot-matrix-field.tsx"}],"docs":"The sweep is a CSS mask animation on a second SVG layer. An IntersectionObserver pauses it offscreen, and reduced motion removes it entirely."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"topographic-lines-bg","type":"registry:component","title":"Topographic Lines Background","description":"Seeded contour lines generated with marching squares, identical on server and client.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/topographic-lines-bg.tsx","type":"registry:component","target":"components/netter/topographic-lines-bg.tsx"}],"docs":"Change seed for a different terrain; the same seed always renders the same paths, so there is no hydration mismatch. Lines use non-scaling strokes to stay sharp at any size."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"paper-grain-surface","type":"registry:component","title":"Paper Grain Surface","description":"A CSS-only grain and vignette surface for editorial sections.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/paper-grain-surface.tsx","type":"registry:component","target":"components/netter/paper-grain-surface.tsx"}],"docs":"Grain is an inline SVG turbulence tile, so there are no network requests. Tune grain and vignette between 0 and 1."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"blueprint-grid-bg","type":"registry:component","title":"Blueprint Grid Background","description":"Major and minor grid lines with rulers measured to the container.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/blueprint-grid-bg.tsx","type":"registry:component","target":"components/netter/blueprint-grid-bg.tsx"}],"docs":"The grid uses SVG patterns and renders on the server. Rulers appear after the first measurement and follow a ResizeObserver, which is disconnected on unmount."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"split-action-button","type":"registry:component","title":"Split Action Button","description":"A primary action with a Radix menu of related actions.","dependencies":["@radix-ui/react-dropdown-menu"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/split-action-button.tsx","type":"registry:component","target":"components/netter/split-action-button.tsx"}],"docs":"The main button calls onAction; menu items call their own onSelect and onActionSelect with the item id. Radix provides keyboard navigation, typeahead, and focus return. open and onOpenChange make the menu controllable."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"copy-command-button","type":"registry:component","title":"Copy Command Button","description":"A shell command with a copy button, a polite live region, and a clipboard fallback.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/copy-command-button.tsx","type":"registry:component","target":"components/netter/copy-command-button.tsx"}],"docs":"Uses the async Clipboard API and falls back to a hidden textarea selection. Success and failure are announced. The prompt is not copied."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"confirm-inline-button","type":"registry:component","title":"Confirm Inline Button","description":"A destructive button that asks for a second press within three seconds.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/confirm-inline-button.tsx","type":"registry:component","target":"components/netter/confirm-inline-button.tsx"}],"docs":"The first press arms the button; a second press within timeout calls onConfirm. Escape, blur, or the timeout disarm it and call onCancel. Use armed and onArmedChange to control it."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"segmented-control","type":"registry:component","title":"Segmented Control","description":"A radio group with a sliding indicator and arrow-key navigation.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/segmented-control.tsx","type":"registry:component","target":"components/netter/segmented-control.tsx"}],"docs":"Implements the radio group pattern with roving tabindex. Arrow keys, Home, and End move selection. Controlled with value and onValueChange, or uncontrolled with defaultValue."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"toggle-switch","type":"registry:component","title":"Toggle Switch","description":"A labelled switch with an optional description in two sizes.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/toggle-switch.tsx","type":"registry:component","target":"components/netter/toggle-switch.tsx"}],"docs":"Renders role=switch with aria-checked, labelled and described by its text. Clicking the label toggles it. Extra props go to the switch; rowClassName styles the row."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"product-screenshot-hero","type":"registry:component","title":"Product Screenshot Hero","description":"Copy on the left, a framed product screenshot in browser chrome on the right.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/product-screenshot-hero.tsx","type":"registry:component","target":"components/netter/product-screenshot-hero.tsx"}],"docs":"Pass image with src, alt, width, and height. Without it, a drawn SVG placeholder keeps the layout honest during design. headingLevel switches between h1 and h2."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"split-statement-hero","type":"registry:component","title":"Split Statement Hero","description":"A large serif statement balanced by body copy, actions, and two facts.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/split-statement-hero.tsx","type":"registry:component","target":"components/netter/split-statement-hero.tsx"}],"docs":"Keep the statement under fifteen words. Facts render as a description list; omit them by passing an empty array."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"feature-row-section","type":"registry:component","title":"Feature Row Section","description":"Alternating media and text rows with optional checklists and links.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/feature-row-section.tsx","type":"registry:component","target":"components/netter/feature-row-section.tsx"}],"docs":"Each feature takes title, body, optional points, link, and media. Rows alternate on large screens and stack text first on small screens."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"cta-band","type":"registry:component","title":"CTA Band","description":"A full-width call to action with a copyable install command and a secondary link.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/cta-band.tsx","type":"registry:component","target":"components/netter/cta-band.tsx"}],"docs":"Copying uses the Clipboard API with a textarea fallback and announces the result. onCopy receives the command."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"announcement-bar","type":"registry:component","title":"Announcement Bar","description":"A dismissible site-wide announcement with one link.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/announcement-bar.tsx","type":"registry:component","target":"components/netter/announcement-bar.tsx"}],"docs":"Renders a named region. onDismiss fires when the close button is pressed; pass open and onOpenChange to persist dismissal yourself."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"testimonial-quote-card","type":"registry:component","title":"Testimonial Quote Card","description":"A single customer quote with name, title, company, and optional mark.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/testimonial-quote-card.tsx","type":"registry:component","target":"components/netter/testimonial-quote-card.tsx"}],"docs":"Uses figure, blockquote, and figcaption. Without avatarSrc, initials are shown. The logo slot is decorative; the company is always written out."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"testimonial-wall","type":"registry:component","title":"Testimonial Wall","description":"A masonry wall of quotes filterable by role.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/testimonial-wall.tsx","type":"registry:component","target":"components/netter/testimonial-wall.tsx"}],"docs":"Filter buttons use aria-pressed and the visible count is announced. Control the filter with filter and onFilterChange; the all option uses the value __all__."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"changelog-entry-card","type":"registry:component","title":"Changelog Entry Card","description":"A release note card with version, date, and Added, Changed, and Fixed groups.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/changelog-entry-card.tsx","type":"registry:component","target":"components/netter/changelog-entry-card.tsx"}],"docs":"Dates are ISO strings formatted in UTC, so server and client agree. Lists longer than visibleCount collapse behind a button with aria-expanded; expanded and onExpandedChange control it."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"team-member-card","type":"registry:component","title":"Team Member Card","description":"A person card with role, location, short bio, and links.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/team-member-card.tsx","type":"registry:component","target":"components/netter/team-member-card.tsx"}],"docs":"Without avatarSrc, initials sit on a fine grid tile. Links include the person's name for screen readers. headingLevel adjusts to the page outline."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"logo-wall","type":"registry:component","title":"Logo Wall","description":"A ruled grid of customer logos normalized to one height.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/logo-wall.tsx","type":"registry:component","target":"components/netter/logo-wall.tsx"}],"docs":"Pass logos with name and an SVG mark using currentColor. Each slot keeps the company name for screen readers; marks are hidden from assistive technology."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pausable-logo-marquee","type":"registry:component","title":"Pausable Logo Marquee","description":"A CSS logo marquee with a visible pause button that also pauses on hover and focus.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/pausable-logo-marquee.tsx","type":"registry:component","target":"components/netter/pausable-logo-marquee.tsx"}],"docs":"The duplicated track is aria-hidden and inert. Pausing is controllable with paused and onPausedChange. Reduced motion renders a static wrapped row without the button."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"sample-logo-marks","type":"registry:component","title":"Sample Logo Marks","description":"Eight invented companies with original geometric marks for demos and mockups.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/sample-logo-marks.tsx","type":"registry:component","target":"components/netter/sample-logo-marks.tsx"}],"docs":"Use sampleLogos with Logo Wall or Pausable Logo Marquee while real customer marks are pending. Every mark is a 24 by 24 currentColor SVG."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"otp-input","type":"registry:component","title":"OTP Input","description":"A one-time code field with paste, autofill, arrow keys and Backspace handled per slot.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/otp-input.tsx","type":"registry:component","target":"components/netter/otp-input.tsx"}],"docs":"Set length (default 6) and name to submit the joined code through a hidden input. The first slot uses autocomplete=\"one-time-code\" so SMS autofill fills every slot. Use value with onValueChange for controlled mode and onComplete to verify as soon as the last slot is filled. Pass error to mark every slot invalid; the message is announced politely."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"combobox-select","type":"registry:component","title":"Combobox Select","description":"A searchable select built on cmdk with grouped options, typeahead and native form submission.","dependencies":["cmdk","lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/combobox-select.tsx","type":"registry:component","target":"components/netter/combobox-select.tsx"}],"docs":"Pass options with value, label and optional group, description, keywords or disabled. Typing on the closed trigger opens the list with that letter searched; Escape closes and returns focus to the trigger. The panel is an in-house anchored popover, so no popover dependency is required. name submits the selected value through a hidden input."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"tag-input","type":"registry:component","title":"Tag Input","description":"A tag field where Enter or comma adds, Backspace removes, with limits and specific validation messages.","dependencies":["lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/tag-input.tsx","type":"registry:component","target":"components/netter/tag-input.tsx"}],"docs":"Enter or comma adds the typed tag, Backspace on an empty field removes the last one, and pasting a comma-separated list adds several. Duplicates, the max count and maxTagLength each produce a specific message; validateTag lets you add your own rule. Each tag is submitted as its own hidden input named after name."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"file-dropzone","type":"registry:component","title":"File Dropzone","description":"Drag-and-drop or picker uploads with accept and size validation, a file list, progress and error slots.","dependencies":["lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/file-dropzone.tsx","type":"registry:component","target":"components/netter/file-dropzone.tsx"}],"docs":"accept uses native accept syntax and maxSize is in bytes; rejected files get a specific reason. Upload yourself in onFilesAdded and write progress (0 to 100) or error back through the controlled files prop. renderFileStatus replaces the default status line. Accepted files are mirrored into the native input named after name so a regular form post includes dropped files where the browser allows it."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"password-field","type":"registry:component","title":"Password Field","description":"A password input with a show and hide toggle and a requirement checklist announced as you type.","dependencies":["lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/password-field.tsx","type":"registry:component","target":"components/netter/password-field.tsx"}],"docs":"Pass rules (id, label, test) or use the exported defaultPasswordRules. Progress is announced in a polite live region after announceDelay; the checklist is linked to the input with aria-describedby. Native input props such as name and required pass through to the input; className styles the wrapper."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"range-slider-dual","type":"registry:component","title":"Range Slider Dual","description":"A minimum and maximum range built from two native range inputs with Intl formatting.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/range-slider-dual.tsx","type":"registry:component","target":"components/netter/range-slider-dual.tsx"}],"docs":"Two native range inputs keep keyboard, touch and screen reader support. format takes Intl.NumberFormat options (for example currency COP) and is used for the visible range and aria-valuetext. minGap keeps the handles apart; nameMin and nameMax submit both values."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"date-range-field","type":"registry:component","title":"Date Range Field","description":"Start and end date inputs with an in-house calendar popover, Intl labels and full keyboard grid navigation.","dependencies":["lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/date-range-field.tsx","type":"registry:component","target":"components/netter/date-range-field.tsx"}],"docs":"Values are YYYY-MM-DD strings so server and client render the same output; pass today from the server to mark the current day. In the calendar, arrow keys move by day and week, Home and End jump within the week, PageUp and PageDown change month (with Shift, year), and Enter picks the start and then the end. Escape closes and returns focus. durationLabel words the summary, for example in nights."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"textarea-autosize","type":"registry:component","title":"Textarea Autosize","description":"A textarea that grows with its content between row limits, with a linked character counter.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/textarea-autosize.tsx","type":"registry:component","target":"components/netter/textarea-autosize.tsx"}],"docs":"minRows and maxRows bound the height; beyond maxRows the field scrolls. maxLength is enforced natively and the counter, linked through aria-describedby, starts announcing when warnAt characters are left. Native textarea props pass through to the textarea; className styles the wrapper."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"contact-form-section","type":"registry:component","title":"Contact Form Section","description":"A complete contact section with inline validation, async submit states and a focused success panel.","dependencies":["lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/contact-form-section.tsx","type":"registry:component","target":"components/netter/contact-form-section.tsx"}],"docs":"onSubmit receives the trimmed values and must return a Promise: resolve to show the success panel (its heading receives focus), reject to keep the form and show a retry alert. Fields validate on blur and again on submit, where focus moves to the first invalid field. Every field carries a name for FormData. aside renders contact details beside the form."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"newsletter-inline-form","type":"registry:component","title":"Newsletter Inline Form","description":"A single-field signup with a honeypot, specific validation and success and error states.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/newsletter-inline-form.tsx","type":"registry:component","target":"components/netter/newsletter-inline-form.tsx"}],"docs":"onSubscribe receives the trimmed email and returns a Promise; reject with an Error to show its message. The honeypot field (honeypotName) is hidden from people and assistive technology; when it is filled the form reports success without calling onSubscribe."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"location-card","type":"registry:component","title":"Location Card","description":"Address, opening hours with an open-now line, map links and an illustrated mini-map fallback.","dependencies":["lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/location-card.tsx","type":"registry:component","target":"components/netter/location-card.tsx"}],"docs":"This is a server-safe component. The open-now line is computed from the now prop in the location timeZone, so pass the current time from your server or a client effect; without now it is omitted. Google Maps, Apple Maps and OpenStreetMap links are built from coordinates when given, otherwise from the address. mapSlot replaces the SVG illustration with your own map; no tiles are loaded."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pricing-table","type":"registry:component","title":"Pricing Table","description":"Two to four plans with a monthly or yearly switch, a feature comparison table and Intl currency.","dependencies":["lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/pricing-table.tsx","type":"registry:component","target":"components/netter/pricing-table.tsx"}],"docs":"Each plan has price.monthly (per month) and price.yearly (charged once a year); yearly cards show the monthly equivalent and the saving. The billing switch is a native radio group. rows compare features with true, false or short text, and icons carry screen reader text. highlightedPlanId draws a heavier border, not a glow. Pass href for links or handle onSelectPlan."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"usage-pricing-calculator","type":"registry:component","title":"Usage Pricing Calculator","description":"A seat or usage slider with graduated tiers, a line-by-line breakdown and a live total.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/usage-pricing-calculator.tsx","type":"registry:component","target":"components/netter/usage-pricing-calculator.tsx"}],"docs":"tiers are graduated: each unit is billed at the price of the tier it falls into, and upTo null means unlimited. The number input and the range stay in sync; the total is announced after announceDelay. The exported priceUsage helper returns the same breakdown for your server."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"mega-menu-navbar","type":"registry:component","title":"Mega Menu Navbar","description":"A product navbar with grouped Radix navigation menus that becomes an accessible sheet on narrow containers.","dependencies":["@radix-ui/react-navigation-menu","@radix-ui/react-dialog"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/mega-menu-navbar.tsx","type":"registry:component","target":"components/netter/mega-menu-navbar.tsx"}],"docs":"Pass groups of links with optional one-line descriptions. Radix NavigationMenu handles hover intent, arrow keys, and Escape. Below the @3xl container width the menu becomes a modal sheet with disclosure groups. currentHref marks the current link with aria-current. mobileOpen/onMobileOpenChange control the sheet."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"mobile-tab-bar","type":"registry:component","title":"Mobile Tab Bar","description":"A bottom navigation bar with safe-area insets, aria-current, and accessible badges.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/mobile-tab-bar.tsx","type":"registry:component","target":"components/netter/mobile-tab-bar.tsx"}],"docs":"Items are real links. Use value/onValueChange to sync with your router, or onNavigate to call event.preventDefault() for client-side routing. Padding respects env(safe-area-inset-*); add viewport-fit=cover to your viewport meta for it to apply on iOS."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"docs-sidebar-tree","type":"registry:component","title":"Docs Sidebar Tree","description":"A collapsible documentation tree with roving focus, tree semantics, and an active path.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/docs-sidebar-tree.tsx","type":"registry:component","target":"components/netter/docs-sidebar-tree.tsx"}],"docs":"Implements the WAI-ARIA tree pattern: one tab stop, Up/Down to move, Right/Left to expand, collapse, or go to the parent, Home/End, and first-letter type-ahead. Section nodes toggle; leaf nodes are links. Ancestors of activeHref open by default; use expanded/onExpandedChange to control."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"table-of-contents-rail","type":"registry:component","title":"Table of Contents Rail","description":"An on-this-page rail that tracks the current heading with IntersectionObserver.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/table-of-contents-rail.tsx","type":"registry:component","target":"components/netter/table-of-contents-rail.tsx"}],"docs":"Pass the ids and titles of headings already on the page. The first intersecting heading becomes current and gets aria-current=location. Clicking moves focus to the heading and updates the hash; scrolling is smooth only when motion is allowed. rootMargin tunes when a heading counts as current."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pagination","type":"registry:component","title":"Pagination","description":"Page navigation with ellipses, previous and next, a compact mobile mode, and aria-current.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/pagination.tsx","type":"registry:component","target":"components/netter/pagination.tsx"}],"docs":"Use page/onPageChange or defaultPage. Pass getHref to render real links for crawlable pages. getPaginationRange is exported for custom layouts. Below the @md container width only previous, next, and a page counter remain; compact forces that mode everywhere."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"sitemap-footer","type":"registry:component","title":"Sitemap Footer","description":"A four-column sitemap footer with a legal row that turns into disclosures on small screens.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/sitemap-footer.tsx","type":"registry:component","target":"components/netter/sitemap-footer.tsx"}],"docs":"Pass groups of links, a holder, and the year as a prop so server and client render the same markup. Below the @3xl container width each group becomes a button with aria-expanded. External links get an icon and a screen reader hint."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"minimal-footer","type":"registry:component","title":"Minimal Footer","description":"A one-line footer with a wordmark, three links, and a copyright year passed as a prop.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/minimal-footer.tsx","type":"registry:component","target":"components/netter/minimal-footer.tsx"}],"docs":"A server-safe footer with no client JavaScript. Pass year explicitly rather than computing it during render."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"faq-accordion","type":"registry:component","title":"FAQ Accordion","description":"A Radix accordion for FAQs with deep-linkable answers and single or multiple open items.","dependencies":["@radix-ui/react-accordion"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/faq-accordion.tsx","type":"registry:component","target":"components/netter/faq-accordion.tsx"}],"docs":"Each item id becomes its anchor. When deepLink is on, a matching location hash opens and scrolls to that item, and opening an item updates the hash with replaceState. type=single keeps one answer open; value is always a string array."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"setup-steps","type":"registry:component","title":"Setup Steps","description":"A numbered setup guide with code snippets and an announced copy action.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/setup-steps.tsx","type":"registry:component","target":"components/netter/setup-steps.tsx"}],"docs":"Steps render as a real ordered list. Code blocks copy with navigator.clipboard and announce the result in a polite live region, including a manual fallback when copying is blocked."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"stat-strip","type":"registry:component","title":"Stat Strip","description":"Three or four KPIs with a period, a delta, and screen reader summaries, with optional count-up.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/stat-strip.tsx","type":"registry:component","target":"components/netter/stat-strip.tsx"}],"docs":"Values are numbers formatted with Intl.NumberFormat in the given locale. delta is a fraction (0.124 is 12.4%); goodDirection decides whether up is good. Each delta has a full sentence for screen readers. countUp animates once on first view and is skipped under reduced motion."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"sparkline-metric","type":"registry:component","title":"Sparkline Metric","description":"A metric with an inline SVG sparkline, low and high markers, and a visually hidden data table.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/sparkline-metric.tsx","type":"registry:component","target":"components/netter/sparkline-metric.tsx"}],"docs":"The SVG is decorative; the same points are exposed as a screen reader table with the low and high rows labeled. Server-safe and dependency-free."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"comparison-table","type":"registry:component","title":"Comparison Table","description":"A plan comparison table with a sticky header and first column, grouped rows, and scroll edge shadows.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/comparison-table.tsx","type":"registry:component","target":"components/netter/comparison-table.tsx"}],"docs":"Uses a real table with caption, column headers, and row headers. The scroll region is focusable and labelled so keyboard users can scroll it. Boolean values render as icons with Included/Not included text. Set maxHeight to make the header stick vertically."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"vertical-timeline","type":"registry:component","title":"Vertical Timeline","description":"A dated milestone timeline built on an ordered list with a now marker from a prop.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/vertical-timeline.tsx","type":"registry:component","target":"components/netter/vertical-timeline.tsx"}],"docs":"Dates are ISO strings formatted in UTC for stable server rendering. Pass now explicitly; milestones after it are labeled as planned and the marker sits between past and future."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"masonry-gallery-lightbox","type":"registry:component","title":"Masonry Gallery Lightbox","description":"A CSS columns gallery with a keyboard-navigable Radix Dialog lightbox.","dependencies":["@radix-ui/react-dialog"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/masonry-gallery-lightbox.tsx","type":"registry:component","target":"components/netter/masonry-gallery-lightbox.tsx"}],"docs":"alt, width, and height are required for every image. In the viewer, Left/Right/Home/End navigate, swipes work on touch, the position is announced, and closing returns focus to the thumbnail of the image last shown."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"toast-stack","type":"registry:component","title":"Toast Stack","description":"An imperative toast API with stacking, swipe to dismiss, pause on hover, and severity-aware live regions.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/toast-stack.tsx","type":"registry:component","target":"components/netter/toast-stack.tsx"}],"docs":"Wrap your app in ToastProvider, then call toast() from anywhere or useToast() inside components. Info and success use a polite status region; warning and error use an assertive alert region. Timers pause on hover, focus, and hidden tabs. Escape dismisses the focused toast."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"command-palette-dialog","type":"registry:component","title":"Command Palette Dialog","description":"A cmdk command palette in a Radix Dialog with groups, recent items, and a Cmd/Ctrl+K hotkey.","dependencies":["cmdk","@radix-ui/react-dialog"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/command-palette-dialog.tsx","type":"registry:component","target":"components/netter/command-palette-dialog.tsx"}],"docs":"useHotkey is exported for reuse; set hotkey to null if your app already binds Cmd/Ctrl+K. Recent ids are tracked automatically or controlled with recentIds/onRecentChange. Items with href navigate when no onSelect is provided."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"drawer-sheet","type":"registry:component","title":"Drawer Sheet","description":"A side or bottom drawer with focus trapping, focus return, and drag to close on touch.","dependencies":["@radix-ui/react-dialog"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/drawer-sheet.tsx","type":"registry:component","target":"components/netter/drawer-sheet.tsx"}],"docs":"Built on Radix Dialog, so focus is trapped and returned to the trigger. Touch users can drag the panel toward its edge; mouse users drag the header or bottom handle. Enter and exit keyframes are injected once through a React 19 hoisted style tag and disabled under reduced motion."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"hover-preview-card","type":"registry:component","title":"Hover Preview Card","description":"A Radix HoverCard link preview that also opens on keyboard focus.","dependencies":["@radix-ui/react-hover-card"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/hover-preview-card.tsx","type":"registry:component","target":"components/netter/hover-preview-card.tsx"}],"docs":"The preview supplements a link that already makes sense on its own. It opens on hover and focus, closes on blur and Escape, and is referenced with aria-describedby while open."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"underline-tabs","type":"registry:component","title":"Underline Tabs","description":"Radix tabs with a sliding underline, counts, and overflow scroll buttons.","dependencies":["@radix-ui/react-tabs"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/underline-tabs.tsx","type":"registry:component","target":"components/netter/underline-tabs.tsx"}],"docs":"Radix provides tablist semantics and arrow-key navigation. When tabs overflow, edge buttons scroll for pointer users while keyboard focus scrolls the active tab into view. The underline stops moving under reduced motion."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"empty-state","type":"registry:component","title":"Empty State","description":"An empty state with a quiet line illustration, a direct message, and up to two actions.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/empty-state.tsx","type":"registry:component","target":"components/netter/empty-state.tsx"}],"docs":"Write the title as a fact and the description as the next step. Pass your own icon or keep the default route illustration. Server-safe."},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"skeleton-set","type":"registry:component","title":"Skeleton Set","description":"Skeleton primitives and card, list, table, and article presets with an announced loading label.","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"path":"registry/default/skeleton-set.tsx","type":"registry:component","target":"components/netter/skeleton-set.tsx"}],"docs":"SkeletonSet renders a polite status with aria-busy and a visually hidden label; individual Skeleton shapes are hidden from assistive technology. The pulse stops under reduced motion or when reducedMotion is set."}]}