# Space UI

> An open component distribution built with Tailwind CSS v4, Motion, and Base UI.

## Documentation Index

- [Accessibility](/docs/accessibility): How is accessibility with Space UI?
- [AI Agents](/docs/agents): Build faster and cleaner interfaces with autonomous AI coding agents, specialized skills, and MCP tools.
- [Changelog](/docs/changelog): Latest updates and announcements.
- [Colors](/docs/fundamentals/colors): Color palette, semantic tokens, alpha translucent borders, and contrast standards.
- [Iconography](/docs/fundamentals/iconography): Icon standards for Space UI using Tabler Icons for components and Lucide Icons for primitives.
- [Typography](/docs/fundamentals/typography): Responsive type scale, font variables, heading hierarchy, optical line-heights, and interactive typography specs.
- [Introduction](/docs): An open-source design library built for humans and AI to create expressive, polished, and high-quality interfaces.
- [Installation](/docs/installation): How to install dependencies, configure registries, and add Space UI components to your project.
- [Lovable, Bolt & AI Builders](/docs/installation/lovable): Build faster with Space UI in Lovable, Bolt.new, v0, Cursor, Windsurf, and Claude Code.
- [Manual Installation](/docs/installation/manual): Step-by-step manual setup, components.json configuration, and custom registry reference.
- [Next.js](/docs/installation/nextjs): Complete step-by-step integration for Next.js 15/16 App Router, React 19, and Tailwind CSS v4.
- [Vite + React](/docs/installation/vite): Setup Space UI in a modern Vite React SPA with Tailwind CSS v4 and TypeScript path aliases.
- [LLMs & AI Context](/docs/llms): Access full LLM context, global documentation dumps, and per-component markdown endpoints.
- [Model Context Protocol (MCP)](/docs/mcp): Connect Claude Code, Cursor, VS Code, and Windsurf to Space UI's component registry using MCP.
- [Registry](/docs/registry): Learn how to use the Space UI Registry with shadcn/ui.
- [Roadmap](/docs/roadmap): Roadmap for Space UI.
- [Skills](/docs/skills): Agent skills that teach your AI assistant how Space UI builds, animates and ships interfaces.

## Library (Primitives & Components)

- [Card Info](/blocks/card-info): Responsive feature and philosophy cards with gradient icons, clean typography, and layered container aesthetics.
- [Community Wall](/blocks/community-wall): An interactive 2D draggable infinite canvas community board featuring radial bloom distribution, tilt controls, card pattern styles, and real-time note pinning.
- [Dither Carousel](/blocks/dither-carousel): A 3D cylindrical spiral column of cards in WebGL2 with curved perspective, directional blur, and matrix dither grain.
- [Eleven Labs Landing](/blocks/eleven-labs): ElevenLabs-inspired landing page block with a live Smooth Orb hero, product families, audio player, and voice cards.
- [Blocks](/blocks): Complete UI sections and page blocks ready to drop into a product.
- [Interactive Fun Facts](/blocks/interactive-fun-facts): Interactive 3D stacked quiz game block with True/False feedback, live score counter, progression indicators, and flip-to-reveal grid.
- [Interactive Grid Hero](/blocks/interactive-grid-hero): Interactive proximity-reactive square cell grid canvas that softly rounds and insets cells within a focused radius around the cursor.
- [Lens Carousel](/blocks/lens-carousel): Vertical WebGL lens gallery from the Immersive Lens template. Scroll-linked planes, not a horizontal card strip.
- [Liquid Gooey Carousel](/blocks/liquid-gooey-carousel): A WebGL2 signed distance field carousel where cards behave like drops of liquid held on glass, fusing together and stretching organic strands.
- [Prism Carousel](/blocks/prism-carousel): A looping image strip viewed through a thick optical glass element with radial zoom, refraction, and chromatic RGB aberration.
- [Showcase Gallery](/blocks/showcase-gallery): Justified gallery of stills and looping videos. Point at a piece, tap it or tab to it and it steps forward on a spring while the rest makes room.
- [Sign In Page](/blocks/sign-in): A complete sign in page block using our space components and primitives.
- [Stats](/blocks/stats): Comprehensive portfolio statistics and analytics blocks featuring KPI cards, GitHub activity heatmap, publication analytics, Lighthouse benchmarks, and reader engagement.
- [Velocity Hover Preview](/blocks/velocity-hover-preview): Interactive kinetic list and hover carousel projecting a floating WebGL preview with inertial momentum mesh-warping and pixel block entry/exit wave crossfading.
- [Adaptive Density Grid](/components/adaptive-density-grid): A fluid polymorphic grid featuring velocity-driven spring pill tabs, staggered layout reflow animations, and built-in memory optimization.
- [Textmoji Animated](/components/animoji): Renders every Unicode emoji in a string as an animated image sized to the surrounding text.
- [Aurora Glow Button](/components/aurora-glow-button): A button with a hover-reactive radial aurora gradient, an animated conic-gradient border, and a rotating shine sweep.
- [Autoscale Input](/components/autoscale-input): Input that binary-searches a font size so the value always fills the available width, with locale number formats.
- [Avatar Extended](/components/avatar-extended): Extended Avatar components with rings, status badges, indicators, icons, and a built-in procedural fallback powered by the SpaceUI Avatars API.
- [Avatar Group](/components/avatar-group): A component for rendering a group of avatars, supporting different stacking directions and action buttons.
- [Badge Squircle](/components/badge-squircle): Tactile squircle badge components featuring dynamic curvature morphing on hover with polymorphic Base UI render support.
- [Bloop Orb](/components/bloop): Compact assistant orb with listen, think, and speak states, voice palettes, and audio input.
- [Blur Reveal Text](/components/blur-reveal-text): A progressive word, character, or line-by-line blur reveal animation with customizable motion vectors and viewport triggers.
- [Bouncy Accordion](/components/bouncy-accordion): Spring accordion that splits rounded rows when a panel opens.
- [Bubble Background](/components/bubble): Renders floating animated bubbles across the background that smoothly move and drift away when users move their mouse.
- [Button Squircle](/components/button-squircle): Tactile squircle button components featuring dynamic curvature morphing on hover with polymorphic Base UI render support.
- [Chroma Palette](/components/chroma-palette): Perceptually uniform color generator and interactive swatch palette with organic gooey fluid morph and one-click copy.
- [Cloud](/components/cloud): Volumetric cloud material. Color the sky, sun, and shadows, then fly the camera with mouse or touch.
- [Data Grid](/components/data-grid): Displays large datasets in an interactive table where users can sort, filter, paginate, and resize columns to analyze data efficiently.
- [Date Selector](/components/date-selector): Allows users to quickly choose single dates or time ranges using interactive timeline scrubbers and preset shortcut buttons.
- [Detachable Accordion](/components/detachable-accordion): An interactive accordion with spring motion where the expanded item physically detaches with animated gaps and rounded corners.
- [Dirt Carousel](/components/dirt-carousel): 3D ring of video worlds. Drag, wheel, or snap. Open the gear panel to change radius, tilt, and auto-rotate.
- [Doodle Callout](/components/doodle-callout): A hand-drawn arrow that draws itself next to a handwritten label, replaying on a loop.
- [Event Calendar](/components/event-calendar): Displays scheduled events across day, week, and month views, making it easy for users to create and manage appointments.
- [Filters](/components/filters): Provides a filter bar with badges and active tags, allowing users to narrow down search results by multiple criteria simultaneously.
- [Flip Text](/components/flip-text): Per-character 3D flip animation with a sine-eased stagger wave across the text.
- [Fluid Countdown](/components/fluid-countdown): A countdown timer with fluid rolling digits, play/pause and reset controls, and auto-loop built with NumberFlow and Motion.
- [Fluid Crossfade](/components/fluid-crossfade): Dual-pass WebGL fluid simulation with chromatic wave refraction and Bayer 4x4 matrix ordered dither crossfading.
- [Fluid Distortion Image](/components/fluid-distortion-image): An interactive WebGL image component with cover UV mapping and dynamic cursor fluid-distortion ripples using data textures.
- [Fluid Dither Crossfade](/components/fluid-dither-crossfade): A dual-pass WebGL shader component featuring real-time Navier-Stokes fluid pressure simulation and Bayer 4x4 matrix ordered dithering crossfade.
- [Frost Blurred](/components/frost-blurred): Stacked, masked backdrop-filter layers that frost content along an edge.
- [GitHub Activity](/components/github-activity): An interactive GitHub ecosystem showcase featuring pure 52-week contribution heatmap matrix content with live fetch for users and repositories.
- [Glass Button](/components/glass-button): A glassmorphic extension of Button Squircle — backdrop blur, layered highlights and a hover shine sweep.
- [Gooey Experiments](/components/gooey-experiments): A gallery of drag-to-merge and hover-morph gooey micro-interactions built with SVG filters.
- [Gooey Text Reveal](/components/gooey-text-reveal): Line-by-line blur reveal with a gooey SVG edge filter, driven by GSAP SplitText — plays immediately, on scroll, or scrubbed to scroll position.
- [Gradient File Upload](/components/gradient-file-upload): A refined upload surface with an animated glowing beam border, dynamic radial feedback, file extension badges, and multi-state progress indicators.
- [Gradient Background](/components/gradient): Creates a smoothly animating multi-color gradient background that shifts colors gently behind your page content.
- [Handle Reel](/components/handle-reel): Kinetic tumbler reel that spins a vertical reel of names past a prefix, highlighting the centered handle as it decelerates and settles with momentum.
- [Heat Shade](/components/heat-shade): WebGPU heat field or climbing licks. Logo cyan on a navy ember.
- [Icon Stack](/components/icon-stack): Displays an overlapping cluster of icons or avatars that expands smoothly when hovered to reveal every individual item.
- [Image Dark](/components/image-dark): An adaptive image component that dynamically switches between light and dark mode sources using standard HTML img elements with zero layout shift and no hydration mismatch.
- [Components](/components): Composed Space UI components styled with Tailwind CSS.
- [Interactive Checklist](/components/interactive-checklist): Tactile checklist with spring checkmarks, animated strike-through lines, and completion progress.
- [Interest Picker](/components/interest-picker): A draggable row-packed interest picker with an emoji burst on select and a shake-to-explode clear action.
- [Kanban](/components/kanban): Displays tasks across draggable columns, allowing users to organize projects, track progress stages, and reorder cards intuitively.
- [Like Button](/components/like-button): A like button with burst particles, a ripple ring, a spring-animated heart, and a smooth NumberFlow count transition.
- [Liquid Mask Crossfade](/components/liquid-mask-crossfade): A WebGL shader component featuring interactive liquid cursor mask crossfade with dynamic trail, refraction, and parallax effects.
- [Liquid Mesh Blur](/components/liquid-mesh-blur): Organic liquid mesh gradient shader background blending orbiting particle clusters through a high-radius Gaussian blur diffusion filter.
- [Liquid Metal Border](/components/liquid-metal-border): Liquid metal shader as a border wrap. Put any registry component inside.
- [Liquid Sortable List](/components/liquid-sortable-list): Smooth drag-and-drop sortable team list with generative avatars and spring reordering.
- [Liquid Switch](/components/liquid-switch): Elastic toggle switch with velocity-based organic stretch and spring return physics.
- [Loading Orb](/components/loading): Matrix pixel grid loader with Tailwind color support, spring motion presets, and assistant status cards.
- [Member Selector](/components/member-selector): An interactive participant and member avatar selector with dynamic row layout, animated selection badges, quick-add button, and searchable popover.
- [Mesh Gradient](/components/mesh-gradient): Dynamic WebGL mesh gradient shader background featuring fluid swirls, configurable color stops, distortion turbulence, and film grain overlay.
- [Morph Icon](/components/morph-icon): Transforms one vector icon smoothly into another with fluid shape morphing animations when state changes.
- [Morphing Area](/components/morphing-area): Adaptive aspect ratio surface with constant-area morphing for any child element, card, or media.
- [Morphing Command Bar](/components/morphing-command-bar): Elastic command bar that expands seamlessly from passive state to active input with action trigger.
- [Morphing Search Pill](/components/morphing-search-pill): Adaptive search pill that expands smoothly from a compact button into a full input field.
- [Morphing Text](/components/morphing-text): Seamless character-level FLIP morphing animation between words or phrases with pause-on-hover capability.
- [Notification List](/components/notification-list): Displays an interactive feed of incoming notifications with unread indicators, timestamps, and swipe-to-dismiss actions.
- [Paper Shader](/components/paper-shader): Paper Shaders WebGL2 canvas. Pass a fragment shader and uniforms; the mount compiles, resizes, and ticks time.
- [Phone Input](/components/phone-input): Allows users to enter international phone numbers with automatic country flag detection, dial codes, and formatted digits.
- [Pin List](/components/pin-list): Provides a quick-access bar where users can pin, organize, and reorder favorite items, documents, or shortcuts.
- [Pixel Fill Button](/components/pixel-fill-button): An interactive button whose background fills with square matrix pixels radiating from the cursor entry point on hover.
- [Pixel Reveal Image](/components/pixel-reveal-image): A WebGL image component with dynamic pixel matrix wave and customizable neon accent border on scroll.
- [Pixel Reveal Text](/components/pixel-reveal-text): A typography shader component that materializes text out of pixel matrix noise with neon contour highlights on scroll.
- [Rainbow Glow Border](/components/rainbow-glow-border): Smooth animated rainbow glow border wrap with drifting color orbs. Put any registry component inside.
- [Rainbow Glow Button](/components/rainbow-glow-button): An interactive dark pill button featuring 6 orbiting colorful blurred orbs and a blur reveal transition on hover.
- [Rating](/components/rating): Allows users to submit ratings or view average customer scores using interactive star icons with half-star precision.
- [Resizable](/components/resizable): Allows users to adjust side-by-side workspace panels by dragging divider handles to fit their screen needs.
- [Scatter Text](/components/scatter-text): A text input whose content scatters into drifting canvas grains on submit.
- [Scroll Manifesto](/components/scroll-manifesto): A pinned statement that comes into focus word by word as you scroll. Each word rises, sharpens from a blur and lights up in reading order.
- [Scroll Text Reveal](/components/scroll-text-reveal): Progressive character-by-character and word-by-word text reveal driven by scroll progress.
- [Scrollspy](/components/scrollspy): Tracks the user’s scroll position on the page and automatically highlights the corresponding link in the table of contents.
- [Section Scrollspy](/components/section-scrollspy): Floating section scrollbar that tracks the active heading as you scroll.
- [Silk Border](/components/silk-border): Fluid WebGPU silk mesh gradient wrapper. Wrap avatars, badges, buttons, and cards with theme presets and CSS fallback.
- [Silk Flare](/components/silk-flare): WebGPU single-pass composite shader fusing silky mesh warp gradients and rising thermodynamic heat flares.
- [Silk Gradient](/components/silk-gradient): WebGPU silk mesh. Three colors, warp, grain. Animation on by default.
- [Slide To Confirm](/components/slide-to-confirm): Tactile slide-to-confirm action slider with inertia spring physics.
- [Slosh Slider](/components/slosh-slider): Liquid fill slider. Corner, viscosity, momentum, tilt.
- [Smooth Slider](/components/smooth-slider): A continuous slider with a filled track, tick dots, and a draggable thumb.
- [Smooth Orb](/components/smooth): Audio-reactive fluid WebGL orb. Swap ambient, microphone, or file input, change the texture, and toggle grain.
- [Sortable](/components/sortable): Allows users to reorder items in a list or grid by dragging and dropping them with smooth layout animations.
- [Squircle](/components/squircle): Flawless math-driven squircle masking and geometry rendering for modern UIs using CSS Houdini.
- [Status Badge](/components/status-badge): Displays a real-time status indicator with a pulsing dot and color coding to show whether a service or user is online or busy.
- [Team Roster Selector](/components/team-roster-selector): Interactive team roster selection list with generative avatars, spring hover pill, and multi-select state.
- [Textmoji](/components/textmoji): Renders every Unicode emoji in a string as an image sized to the surrounding text.
- [Theme Toggle](/components/theme-toggle): View Transition API theme switch with circle, blur, rectangle, and polygon reveals.
- [Thinking Orb](/components/thinking): 9 procedural Canvas 3D particle loader orbs representing AI cognitive states — working, searching, solving, listening, connecting, weaving, composing, breathing, and shaping.
- [Tick Slider](/components/tick-slider): A scrubber drawn as a row of tick marks, backed by a real range input.
- [Timeline](/components/timeline): Displays a vertical sequence of events, milestone dates, and activity logs connected by a timeline line.
- [Tournament Bracket](/components/tournament-bracket): Animated knockout bracket with round navigation, live and finished matches, and elbow connectors.
- [User Presence Avatar](/components/user-presence-avatar): A compact avatar group for showing online and offline users, with smooth animated transitions when presence changes.
- [Voice Chat Widget](/components/voice-chat-widget): An expandable voice chat pill with participant avatars, animated speaking indicators, and a smooth pill-to-panel transition.
- [Words Preloader](/components/words-preloader): Greeting cycle preloader that exits with a curved SVG wipe. Replay from the demo.
- [cache](/hooks/cache): Memory memoization cache map.
- [Class](/hooks/class): Conditional class wrapper component.
- [cookie](/hooks/cookie): Imperative cookie helper with get, set, and delete.
- [event & bindEvent](/hooks/event): Safe cross-browser event listener binder with automatic unbind return.
- [For](/hooks/for): Declarative JSX list rendering component with automatic empty state fallback.
- [formatBytes & parseBytes](/hooks/format-bytes): Converts raw byte counts into localized human-readable file sizes and parses strings back into bytes.
- [formatContent & truncate](/hooks/format-content): Text truncate and content formatting helpers.
- [formatDate & timeAgo](/hooks/format-date): Localized date and relative time formatting.
- [formatText (slugify, capitalize)](/hooks/format-text): String transforms and slug generation.
- [If](/hooks/if): Declarative boolean conditional rendering with lazy function execution.
- [Image](/hooks/image): Progressive loading responsive image component.
- [InView](/hooks/in-view): Viewport intersection trigger component wrapper.
- [React Hooks & Utilities](/hooks): Complete collection of 80 production-ready React hooks, declarative control-flow components, and pure utilities by Space UI.
- [isNegative](/hooks/is-negative): Negative numeric verification.
- [logger](/hooks/logger): Scoped development and production logger.
- [rangeMap & mapRange](/hooks/range-map): Generates mapped numeric arrays for iterations and maps numbers across ranges with linear interpolation.
- [RenderAfter](/hooks/render-after): Delayed lazy component mounting.
- [Show](/hooks/show): Truthy conditional renderer that unwraps non-null data directly to children render function.
- [sleep](/hooks/sleep): Promise-based delay timer.
- [Switch](/hooks/switch): Pattern-matching conditional container supporting Case and Default branches.
- [useAutoHeight](/hooks/use-auto-height): Container height measurement via ResizeObserver and requestAnimationFrame for smooth CSS transitions.
- [useBatteryStatus](/hooks/use-battery-status): Battery percentage and charging status.
- [useCharacterLimit](/hooks/use-character-limit): Enforces maximum input length with live character counter and remaining quota.
- [useClickOutside](/hooks/use-click-outside): Outside click callback trigger.
- [useClipboard](/hooks/use-clipboard): Copies text to the system clipboard with automatic timeout reset and state feedback.
- [useConfirmExit](/hooks/use-confirm-exit): Unsaved changes tab exit guard.
- [useControlledState](/hooks/use-controlled-state): Seamless synchronizer for both controlled and uncontrolled component state patterns.
- [useCookieListener](/hooks/use-cookie-listener): Observer callback triggered when a specific cookie value changes.
- [useCookie](/hooks/use-cookie): Reactive cookie reader and setter.
- [useDataState](/hooks/use-data-state): Data attributes state mapper for CSS styling.
- [useDebounce](/hooks/use-debounce): Debounces fast-changing state values with configurable delay.
- [useDeviceOS](/hooks/use-device-os): Detects operating system platform.
- [useEventCallback](/hooks/use-event-callback): Stable guaranteed callback reference.
- [useEventListener](/hooks/use-event-listener): Declarative event listener binding.
- [useFileUpload](/hooks/use-file-upload): Advanced file upload and dropzone manager with preview generation, size validation, and file type presets.
- [useFirstRender](/hooks/use-first-render): First render cycle indicator.
- [useFirstVisit](/hooks/use-first-visit): First user session identifier.
- [useFullscreen](/hooks/use-fullscreen): Element fullscreen mode controller.
- [useHold](/hooks/use-hold): Long-press hold gesture detector.
- [useHover](/hooks/use-hover): Observes mouse hover state on target DOM elements using either automatic ref tuples or external refs.
- [useIdle](/hooks/use-idle): User inactivity timeout monitor.
- [useInView](/hooks/use-in-view): Tracks viewport intersection with IntersectionObserver.
- [useInputValue](/hooks/use-input-value): Unified form input and textarea value binder supporting tuple destructuring, object spreading, and reset/clear actions.
- [useIntersectionObserver](/hooks/use-intersection-observer): Advanced IntersectionObserver hook.
- [useInterval](/hooks/use-interval): Declarative timer with start, pause, and dynamic delay controls.
- [useIsMac](/hooks/use-is-mac): macOS platform detector for keyboard shortcut mappings.
- [useIsMounted](/hooks/use-is-mounted): Check component mount state.
- [useIsomorphicLayoutEffect](/hooks/use-isomorphic-layout-effect): SSR-safe layout effect using useEffect on server and useLayoutEffect on client.
- [useKeyPress](/hooks/use-key-press): Detect active pressed keyboard keys.
- [useLeaveDetection](/hooks/use-leave-detection): Comprehensive exit-intent, viewport boundary exit, split-screen window blur, and tab visibility switch detection.
- [useLoadMore](/hooks/use-load-more): Universal pagination and load-more trigger supporting async data fetchers and client-side array batching.
- [useLocalStorage](/hooks/use-local-storage): Synchronizes state with window.localStorage across tabs.
- [useLockBodyScroll](/hooks/use-lock-body-scroll): Locks page scrolling without layout shift.
- [useMap](/hooks/use-map): Reactive Map collection state manager.
- [useMediaQuery](/hooks/use-media-query): Evaluates CSS media queries with useSyncExternalStore for zero layout shift.
- [useMotionValueState](/hooks/use-motion-value-state): Framer Motion value reactive state subscriber.
- [useMousePosition](/hooks/use-mouse-position): Tracks real-time cursor coordinates.
- [useMutation](/hooks/use-mutation): Robust async mutation runner with loading, success, error tracking, and lifecycle callbacks.
- [useNetwork](/hooks/use-network): Real-time network connection monitor providing online/offline state and bandwidth.
- [useOrientation](/hooks/use-orientation): Screen orientation angles and type.
- [usePagination](/hooks/use-pagination): Smart pagination calculation with dynamic range arrays, boundary and sibling pages, and navigation controls.
- [useParseMarkdown](/hooks/use-parse-markdown): Fast client-side markdown compiler.
- [usePerformanceMode](/hooks/use-performance-mode): Battery/CPU low-power mode optimizer.
- [usePrefersTheme](/hooks/use-prefers-theme): System color scheme detector.
- [useReadingTime](/hooks/use-reading-time): Real-time article reading time calculator with CJK multilingual support, Markdown/HTML stripping, and code/image weighting.
- [useSanitizeContent](/hooks/use-sanitize-content): SSR-safe HTML sanitizer that strips XSS threats while preserving rich formatting.
- [useScript](/hooks/use-script): Dynamic script loader with load status.
- [useScrollDevice](/hooks/use-scroll-device): Real-time 8-directional scroll detection (cardinal & diagonal) with hardware gesture recognition (touchpad 2D swipe, mouse wheel, touch, keyboard).
- [useScrollPosition](/hooks/use-scroll-position): Real-time window or element scroll offset coordinates (X and Y).
- [useScrollTo](/hooks/use-scroll-to): Programmatic smooth scrolling helper supporting window or custom scrollable containers, element IDs, selectors, refs, and pixel coordinates.
- [useSessionStorage](/hooks/use-session-storage): Synchronizes reactive state with window.sessionStorage.
- [useShare](/hooks/use-share): Native Web Share API caller.
- [useSingleEffect](/hooks/use-single-effect): Guaranteed exactly-once execution effect (StrictMode safe).
- [useSize](/hooks/use-size): Measures real-time element pixel dimensions with ResizeObserver.
- [useTabNotification](/hooks/use-tab-notification): Document title badge notification counter.
- [useTitle](/hooks/use-title): Document head title modifier.
- [useToggle](/hooks/use-toggle): Boolean state toggle switch.
- [useUpdateEffect](/hooks/use-update-effect): Effect executed only on dependencies update, skipping mount.
- [useUrgentUpdate](/hooks/use-urgent-update): React 18 transition priority switcher.
- [useWindowSize](/hooks/use-window-size): Viewport dimensions tracker.
- [Agent Activity Feed](/interactions/agent-activity-feed): Real-time telemetry event stream monitoring tool executions, state diffs, tokens expended, and security policy checks.
- [Agent Clearance Deck](/interactions/agent-clearance-deck): Autonomous credential and permission elevation deck with interactive risk scopes, countdown timer, and audit logs.
- [Agent Genesis Forge](/interactions/agent-genesis-forge): Specialized agent synthesis and provisioning studio with skill matrix configuration, persona tuning, and live code preview.
- [Agent Pipeline](/interactions/agent-pipeline): A living multi-agent workflow that models task routing, research, drafting, and approvals with real-time physics, activity feeds, and playback controls.
- [Agent Usage Card](/interactions/agent-usage-card): An interactive agent status and usage card with segmented progress tracking, live telemetry hours advancement, morph icon controls, squircle buttons, squishmoji status avatar, and a collapsible cost breakdown.
- [Capability Matrix](/interactions/capability-matrix): Dynamic capability registry showcasing multi-modal agent skills, verification states, and runtime sandboxing telemetry.
- [Cognitive Pulse Monitor](/interactions/cognitive-pulse-monitor): Real-time neural load monitor visualizing agent attention distribution, context window pressure, and reasoning heatmaps.
- [Currency Converter](/interactions/currency-converter): An interactive currency converter and token swap card with real-time exchange rates, NumberFlow spring animations, Space UI Select with flags, and a liquid metal squircle button.
- [Deploy Pipeline](/interactions/deploy-pipeline): A deploy pipeline that plays itself — steps advance, badges update, and details unfold on their own, no click required.
- [Hallucination Radar](/interactions/hallucination-radar): Real-time hallucination defense radar tracking semantic grounding scores, citation provenance, and contradiction risk.
- [Interactions](/interactions): Living components that move, respond and never sit still.
- [Priority Sort Lane](/interactions/priority-sort-lane): Dynamic priority queue sorting high-urgency agent goals with interactive reordering and urgency-decay visualizations.
- [Realtime Voice](/interactions/realtime-voice): An interactive conversational AI voice interface with dynamic Bloop Orb visualizer, audio waveform ripples, live transcription, and turn-taking orchestration.
- [Status Badge Glow](/interactions/status-badge-glow): An interactive status monitor with glowing radial reflections, spring-animated status transitions, and staggered character animations for pending, success, and failed states.
- [Accordion](/primitives/accordion): Allows you to display content in collapsible panels, making it easy for users to explore details on demand while conserving screen space.
- [Alert Dialog](/primitives/alert-dialog): Displays a modal window that asks users to confirm important actions before proceeding, helping prevent accidental deletions or irreversible mistakes.
- [Alert](/primitives/alert): Displays a prominent message box for important notices, warnings, or success messages to keep users informed without interrupting their work.
- [Aspect Ratio](/primitives/aspect-ratio): Maintains a consistent width-to-height ratio for images, videos, and embeds, preventing layout shifts when pages load or resize.
- [Autocomplete](/primitives/autocomplete): Displays matching suggestions as users type into an input field, helping them find items quickly and reducing typing errors.
- [Avatar](/primitives/avatar): Displays user profile pictures, avatars, or fallback initials, giving users an easy way to identify people throughout the app.
- [Badge](/primitives/badge): Displays small colored label tags for status flags, counts, or categories, helping users quickly scan and spot key information.
- [Breadcrumb](/primitives/breadcrumb): Displays a horizontal trail of links showing the user’s current location within the page hierarchy, making navigation back to parent pages simple.
- [Button](/primitives/button): Allows users to trigger actions, submit forms, or navigate with a single click, providing clear visual feedback and hover effects.
- [Calendar](/primitives/calendar): Displays an interactive month grid that lets users browse dates, select individual days, or choose date ranges for scheduling.
- [Card](/primitives/card): Groups related information, images, and action buttons into a bordered container, creating clear visual sections on the page.
- [Checkbox Group](/primitives/checkbox-group): Groups multiple related checkboxes together under a single control, making it easy for users to select one or several choices.
- [Checkbox](/primitives/checkbox): Allows users to turn a single option on or off, or select multiple items from a list with clear checkmarks and partial states.
- [Collapsible](/primitives/collapsible): Hides extra content behind a simple toggle button, allowing users to expand and read details only when they need them.
- [Combobox](/primitives/combobox): Combines a text search input with a dropdown menu, allowing users to filter and select options from large lists easily.
- [Command](/primitives/command): Provides a searchable command menu that lets users navigate pages, find resources, and trigger shortcuts directly from their keyboard.
- [Context Menu](/primitives/context-menu): Opens a custom action menu right at the cursor position when users right-click or long-press an element on the screen.
- [Date Picker](/primitives/date-picker): Combines a date input box with a popup calendar, letting users pick dates or ranges without navigating away from the form.
- [Dialog](/primitives/dialog): Opens a focused popup window over the main page, allowing users to complete a dedicated task or view details without losing page context.
- [Drawer](/primitives/drawer): Slides an interactive panel in from the edge of the screen, giving users quick access to secondary tools, forms, or menus with swipe gestures.
- [Empty](/primitives/empty): Displays helpful placeholder messages, illustrations, and action buttons when there is no data to show, guiding users on what to do next.
- [Field](/primitives/field): Wraps input fields with clear text labels, helpful hints, and error messages to make filling out forms straightforward and accessible.
- [Fieldset](/primitives/fieldset): Groups related form controls together under a descriptive header, making long or complex forms easier to read and understand.
- [Form](/primitives/form): Manages form inputs, checks for validation errors, and handles form submission to ensure a smooth data entry experience.
- [Frame](/primitives/frame): Provides a mock browser or device container to showcase components and design previews in context.
- [Group](/primitives/group): Combines adjacent interactive elements into a seamless visual segment for a cleaner, unified toolbar layout.
- [Primitives](/primitives): Accessible, unstyled-ready primitives for building Space UI products.
- [Input Group](/primitives/input-group): Attaches icons, prefix text, buttons, or dropdowns directly to an input field, creating compact, all-in-one form controls.
- [Input](/primitives/input): Allows users to type single-line text, emails, passwords, or numbers, with clear focus outlines and validation feedback.
- [Kbd](/primitives/kbd): Displays keyboard shortcut keys in styled badges, showing users which keys to press to perform actions faster.
- [Label](/primitives/label): Provides an accessible text caption for form controls that focuses the corresponding input when clicked.
- [Link](/primitives/link): Allows users to navigate to other pages or external websites with clear hover underlines and accessible link styling.
- [Menu](/primitives/menu): Displays a floating dropdown menu of actions or options when users click a trigger button, keeping pages clean and organized.
- [Menubar](/primitives/menubar): Provides a horizontal desktop-style menu bar with nested dropdowns and submenus for organizing complex application commands.
- [Meter](/primitives/meter): Displays a visual gauge bar showing a quantity within a known range, such as battery level, disk capacity, or password strength.
- [Navigation Menu](/primitives/navigation-menu): Organizes primary website navigation into top-level links with rich dropdown preview cards for exploring main sections.
- [Number Field](/primitives/number-field): Allows users to enter numeric values or adjust them step-by-step using increment and decrement buttons or keyboard arrow keys.
- [OTP Field](/primitives/otp-field): Provides individual segmented character boxes for typing verification codes and one-time passwords, with automatic focus progression.
- [Pagination](/primitives/pagination): Splits long lists or tables across multiple pages, letting users browse content page by page using numbered buttons.
- [Popover](/primitives/popover): Opens a floating content box anchored to a button or icon, showing interactive settings, tools, or details right next to the trigger.
- [Preview Card](/primitives/preview-card): Displays an informative preview card when users hover over a link, giving them a summary of the linked page before clicking.
- [Preview Link Card](/primitives/preview-link-card): Displays an interactive card preview of a website with its thumbnail, title, and domain name when shared or hovered.
- [Progress](/primitives/progress): Displays an animated progress bar indicating how much of a task or file upload has completed so users know how long to wait.
- [Radio Group](/primitives/radio-group): Presents a list of options where users can select only one choice at a time, making mutually exclusive decisions clear.
- [Scroll Area](/primitives/scroll-area): Replaces standard browser scrollbars with custom, theme-styled scrollbars that appear smoothly when scrolling.
- [Segmented Control](/primitives/segmented-control): A visual pattern for presenting related choices, navigation destinations, filters, or content views.
- [Select](/primitives/select): Allows users to pick one or more options from a collapsible dropdown menu, keeping forms compact and easy to navigate.
- [Separator](/primitives/separator): Draws clean horizontal or vertical dividing lines between content blocks or tools to create clear visual separation.
- [Sheet](/primitives/sheet): Opens a slide-out panel from the edge of the screen, giving users space to edit settings or fill out forms without leaving the page.
- [Sidebar](/primitives/sidebar): Provides a collapsible side navigation bar that organizes app pages into sections, supporting both desktop and mobile layouts.
- [Skeleton](/primitives/skeleton): Displays animated placeholder shapes while content is loading, giving users immediate visual feedback and making apps feel faster.
- [Slider](/primitives/slider): Allows users to choose a numeric value or range smoothly by sliding a handle along a horizontal track with immediate visual feedback.
- [Spinner](/primitives/spinner): Displays an animated spinning ring while an action or page is loading, reassuring users that their request is being processed.
- [Switch](/primitives/switch): Allows users to toggle a single setting instantly between on and off, behaving just like a physical light switch.
- [Table](/primitives/table): Organizes structured records into clear rows and columns with column headers, hover highlights, and responsive layouts.
- [Tabs](/primitives/tabs): Splits content into switchable tabs on a single screen, allowing users to view different sections of related information without reloading the page.
- [Textarea](/primitives/textarea): Allows users to type multi-line text, comments, or long descriptions with support for auto-expanding height as they write.
- [Toast](/primitives/toast): Displays temporary popup notifications at the corner of the screen to confirm user actions, show progress, or report background updates.
- [Toggle Group](/primitives/toggle-group): Groups multiple toggleable buttons together so users can select single or multiple options, ideal for text styling toolbars.
- [Toggle](/primitives/toggle): Provides a two-state button that users can press to turn a specific feature, view, or styling option on and off.
- [Toolbar](/primitives/toolbar): Arranges formatting tools, action buttons, and dropdown controls into a compact, accessible toolbar for quick editing.
- [Tooltip](/primitives/tooltip): Displays a small floating text bubble when users hover over or focus on an element, explaining what that button or icon does.
- [AI Chat Workspace](/templates/ai-chat-workspace): Full-featured AI Studio chat workspace template featuring conversational threads, multi-model selection, real-time token tracking, reasoning trace, code execution viewer, and a sleek dark mode interface.
- [Ashura](/templates/ashura): Ashura is a conceptual branding and communication agency that uses AI as a strategic vector for sharper brand platforms and campaign systems.
- [Aura Robotics](/templates/aura): Aura Robotics is a conceptual humanoid AGI robot that bridges the gap between digital cognition and physical actuation.
- [CineMax](/templates/cinemax): Cinemax is a conceptual premium anime presentation platform that turns legendary titles into widescreen cinematic reels.
- [Cosmos AI](/templates/cosmos-ai): Cosmos AI is a conceptual cinematic AI image generation platform mockup.
- [Somey Amegnibo](/templates/folio): Folio Landing is a conceptual creative director portfolio that presents public campaigns, art direction, and visual identity work for memorable brands.
- [Forger](/templates/forger): Forger is a conceptual recruitment platform that sources candidates and secures the perfect match with precision.
- [Framey](/templates/framey): Framey is a conceptual AI website builder that turns prompts into production-ready landing pages.
- [Haumea](/templates/haumea): Haumea is a conceptual somatic renewal and circadian intelligence platform that aligns your body's biology with natural rhythms.
- [Immersive Lens Portfolio](/templates/immersive-lens): Full-page immersive photography template with Three.js WebGL distortion shaders, horizontal & vertical gallery views, and animated GSAP lightbox.
- [Templates](/templates): Full-page immersive starters you install and own.
- [Marveen](/templates/marveen): Marveen is a conceptual premium holistic wellness sanctuary that connects seekers with high-end, immersive, and transformative zen/mindfulness retreats around the globe.
- [Netra](/templates/netra): Netra is a conceptual bio data center intelligence platform that orchestrates low-carbon compute with living thermal systems and real-time facility autonomy.
- [Oleap](/templates/oleap): Oleap is a conceptual AI customer support platform that closes the support feedback loop.
- [One Piece Landing](/templates/one-piece): One Piece Landing is a conceptual anime pirate crew showcase that turns the Straw Hat crew, Luffy's gears, bounties, audio, and cinematic motion into an immersive fan landing page.
- [Rival](/templates/rival): Rival is a conceptual digital bank that simplifies global wealth management with high-yield savings and instant cross-border transfers.
- [Rocoon](/templates/rocoon): Rocoon is a conceptual AI architecture agency that designs modern smart homes with predictive planning, generative concepts, and connected build intelligence.
- [Staria](/templates/staria): Staria is a conceptual AI social media content generator that transforms ideas into viral posts.
- [Stats Dashboard](/templates/stats): Comprehensive portfolio statistics and analytics template featuring KPI cards, GitHub activity heatmap, publication analytics, Lighthouse benchmarks, and reader engagement.
- [Sunabase](/templates/sunabase): Sunabase is a conceptual high-performance database backend infrastructure mockup.
- [Tera](/templates/tera): Tera is a conceptual architecture studio that specializes in brutalist, climate-positive structures.
- [Twelve AI](/templates/twelve-ai): Twelve AI is a conceptual AI image generation workspace that turns campaign prompts into coherent brand-safe visual systems.
- [ZeusX](/templates/zeusx): ZeusX is a conceptual high-performance web platform that delivers exceptional speed and modern digital experiences.

## Full Corpus & LLM Endpoints

- [Full Plaintext Dump](/llms-full.txt): Complete unpaginated documentation text stream.
- [Per-page Markdown Endpoint](/llms.mdx/[path]): Append /llms.mdx/ to any page route to fetch raw Markdown.