Dev Design Library

SpaceUI components

Space UI — motion-powered React, TypeScript and Tailwind components. Docs, registry, and tools.

Components
142
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
19
Source
https://github.com/usespaceui/ui
Website
https://www.spaceui.one

All SpaceUI components

  • Accordion: Allows you to display content in collapsible panels, making it easy for users to explore details on demand while conserving screen space.
  • Adaptive Density Grid: A fluid polymorphic grid featuring velocity-driven spring pill tabs, staggered layout reflow animations, and built-in memory optimization.
  • Ai Chat Workspace: Full-featured AI Studio chat workspace template featuring conversational threads, multi-model selection, real-time token tracking…
  • Alert: Displays a prominent message box for important notices, warnings, or success messages to keep users informed without interrupting their…
  • Alert Dialog: Displays a modal window that asks users to confirm important actions before proceeding, helping prevent accidental deletions or…
  • Animoji: Renders every Unicode emoji in a string as an animated image sized to the surrounding text.
  • Aspect Ratio: Maintains a consistent width-to-height ratio for images, videos, and embeds, preventing layout shifts when pages load or resize.
  • Autocomplete: Displays matching suggestions as users type into an input field, helping them find items quickly and reducing typing errors.
  • Avatar: Displays user profile pictures, avatars, or fallback initials, giving users an easy way to identify people throughout the app.
  • Avatar Extended: Extended Avatar components with rings, status badges, indicators, icons, and a built-in procedural fallback powered by the SpaceUI Avatars…
  • Avatar Group: A component for rendering a group of avatars, supporting different stacking directions and action buttons.
  • Badge: Displays small colored label tags for status flags, counts, or categories, helping users quickly scan and spot key information.
  • Badge Squircle: Tactile squircle badge components featuring dynamic curvature morphing on hover with polymorphic Base UI render support.
  • Bloop: Compact assistant orb with listen, think, and speak states, voice palettes, and audio input.
  • Blur Reveal Text: A progressive word, character, or line-by-line blur reveal animation with customizable motion vectors and viewport triggers.
  • Bouncy Accordion: Spring accordion that splits rounded rows when a panel opens.
  • Breadcrumb: Displays a horizontal trail of links showing the user’s current location within the page hierarchy, making navigation back to parent pages…
  • Bubble: Renders floating animated bubbles across the background that smoothly move and drift away when users move their mouse.
  • Button: Allows users to trigger actions, submit forms, or navigate with a single click, providing clear visual feedback and hover effects.
  • Button Squircle: Tactile squircle button components featuring dynamic curvature morphing on hover with polymorphic Base UI render support.
  • Calendar: Displays an interactive month grid that lets users browse dates, select individual days, or choose date ranges for scheduling.
  • Card: Groups related information, images, and action buttons into a bordered container, creating clear visual sections on the page.
  • Card Info: Responsive feature and philosophy cards with gradient icons, clean typography, and layered container aesthetics.
  • Checkbox: Allows users to turn a single option on or off, or select multiple items from a list with clear checkmarks and partial states.
  • Checkbox Group: Groups multiple related checkboxes together under a single control, making it easy for users to select one or several choices.
  • Cloud: Volumetric cloud material. Color the sky, sun, and shadows, then fly the camera with mouse or touch.
  • Code
  • Collapsible: Hides extra content behind a simple toggle button, allowing users to expand and read details only when they need them.
  • Combobox: Combines a text search input with a dropdown menu, allowing users to filter and select options from large lists easily.
  • Command: Provides a searchable command menu that lets users navigate pages, find resources, and trigger shortcuts directly from their keyboard.
  • Context Menu: Opens a custom action menu right at the cursor position when users right-click or long-press an element on the screen.
  • Copy
  • Data Grid: Displays large datasets in an interactive table where users can sort, filter, paginate, and resize columns to analyze data efficiently.
  • Date Selector: Allows users to quickly choose single dates or time ranges using interactive timeline scrubbers and preset shortcut buttons.
  • Detachable Accordion: An interactive accordion with spring motion where the expanded item physically detaches with animated gaps and rounded corners.
  • Dialog: Opens a focused popup window over the main page, allowing users to complete a dedicated task or view details without losing page context.
  • Direction: Accessible Direction primitive component for Space UI.
  • Dirt Carousel: 3D ring of video worlds. Drag, wheel, or snap. Open the gear panel to change radius, tilt, and auto-rotate.
  • Dither Carousel: A 3D cylindrical spiral column of cards in WebGL2 with curved perspective, directional blur, and matrix dither grain.
  • Doodle Callout: A hand-drawn arrow that draws itself next to a handwritten label, replaying on a loop.
  • Drawer: Slides an interactive panel in from the edge of the screen, giving users quick access to secondary tools, forms, or menus with swipe…
  • Empty: Displays helpful placeholder messages, illustrations, and action buttons when there is no data to show, guiding users on what to do next.
  • Event Calendar: Displays scheduled events across day, week, and month views, making it easy for users to create and manage appointments.
  • Field: Wraps input fields with clear text labels, helpful hints, and error messages to make filling out forms straightforward and accessible.
  • Fieldset: Groups related form controls together under a descriptive header, making long or complex forms easier to read and understand.
  • Filters: Provides a filter bar with badges and active tags, allowing users to narrow down search results by multiple criteria simultaneously.
  • Flip Text: Per-character 3D flip animation with a sine-eased stagger wave across the text.
  • Fluid Countdown: A countdown timer with fluid rolling digits, play/pause and reset controls, and auto-loop built with NumberFlow and Motion.
  • Form: Manages form inputs, checks for validation errors, and handles form submission to ensure a smooth data entry experience.
  • Frame: Provides a mock browser or device container to showcase components and design previews in context.
  • Frost Blurred: Stacked, masked backdrop-filter layers that frost content along an edge.
  • Github Activity: An interactive GitHub ecosystem showcase featuring pure 52-week contribution heatmap matrix content with live fetch for users and…
  • Github Link
  • Github Link Client
  • Glass Button: A glassmorphic extension of Button Squircle — backdrop blur, layered highlights and a hover shine sweep.
  • Gooey Blobs: Two draggable blobs that merge into one liquid shape via an SVG gooey filter.
  • 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…
  • Gooey Tooltip: A tooltip bubble that mouse-follows and gooey-connects to its trigger button on hover.
  • Gradient: Creates a smoothly animating multi-color gradient background that shifts colors gently behind your page content.
  • Gradient File Upload: A refined upload surface with an animated glowing beam border, dynamic radial feedback, file extension badges, and multi-state progress…
  • Group: Combines adjacent interactive elements into a seamless visual segment for a cleaner, unified toolbar layout.
  • Handle Reel: Kinetic tumbler reel that spins a vertical reel of names past a prefix, highlighting the centered handle as it decelerates and settles…
  • Icon Stack: Displays an overlapping cluster of icons or avatars that expands smoothly when hovered to reveal every individual item.
  • Image Dark: An adaptive image component that dynamically switches between light and dark mode sources using standard HTML img elements with zero…
  • Input: Allows users to type single-line text, emails, passwords, or numbers, with clear focus outlines and validation feedback.
  • Input Group: Attaches icons, prefix text, buttons, or dropdowns directly to an input field, creating compact, all-in-one form controls.
  • Interactive Checklist
  • 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: Interactive proximity-reactive square cell grid canvas that softly rounds and insets cells within a focused radius around the cursor.
  • Interest Picker: A draggable row-packed interest picker with an emoji burst on select and a shake-to-explode clear action.
  • Item: Composable Item primitive with media, content, title, and description slots for lists and rows.
  • Kanban: Displays tasks across draggable columns, allowing users to organize projects, track progress stages, and reorder cards intuitively.
  • Kbd: Displays keyboard shortcut keys in styled badges, showing users which keys to press to perform actions faster.
  • Label: Provides an accessible text caption for form controls that focuses the corresponding input when clicked.
  • Like Button: A like button with burst particles, a ripple ring, a spring-animated heart, and a smooth NumberFlow count transition.
  • Link: Allows users to navigate to other pages or external websites with clear hover underlines and accessible link styling.
  • Liquid Metal Border: Liquid metal shader as a border wrap. Put any registry component inside.
  • Liquid Sortable List: Smooth drag-and-drop sortable team list with generative avatars and spring reordering.
  • Liquid Switch: Toggle switch whose knob stretches like a liquid drop as it slides.
  • Loading: Matrix pixel grid loader with Tailwind color support, spring motion presets, and assistant status cards.
  • Member Selector: An interactive participant and member avatar selector with dynamic row layout, animated selection badges, quick-add button, and searchable…
  • Menu: Displays a floating dropdown menu of actions or options when users click a trigger button, keeping pages clean and organized.
  • Menubar: Provides a horizontal desktop-style menu bar with nested dropdowns and submenus for organizing complex application commands.
  • Mesh Gradient: Dynamic WebGL mesh gradient shader background featuring fluid swirls, configurable color stops, distortion turbulence, and film grain…
  • Meter: Displays a visual gauge bar showing a quantity within a known range, such as battery level, disk capacity, or password strength.
  • Mode Switcher
  • Morph Icon: Transforms one vector icon smoothly into another with fluid shape morphing animations when state changes.
  • Morphing Area: Adaptive aspect ratio surface with constant-area morphing for any child element, card, or media.
  • Morphing Text: Seamless character-level FLIP morphing animation between words or phrases with pause-on-hover capability.
  • Motion Effect
  • Navigation Menu: Organizes primary website navigation into top-level links with rich dropdown preview cards for exploring main sections.
  • Notification List: Displays an interactive feed of incoming notifications with unread indicators, timestamps, and swipe-to-dismiss actions.
  • 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: Provides individual segmented character boxes for typing verification codes and one-time passwords, with automatic focus progression.
  • Pagination: Splits long lists or tables across multiple pages, letting users browse content page by page using numbered buttons.
  • Paper Shader: Paper Shaders WebGL2 canvas. Pass a fragment shader and uniforms; the mount compiles, resizes, and ticks time.
  • Phone Input: Allows users to enter international phone numbers with automatic country flag detection, dial codes, and formatted digits.
  • Pin List: Provides a quick-access bar where users can pin, organize, and reorder favorite items, documents, or shortcuts.
  • 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: Displays an informative preview card when users hover over a link, giving them a summary of the linked page before clicking.
  • Preview Link Card: Displays an interactive card preview of a website with its thumbnail, title, and domain name when shared or hovered.
  • 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: Presents a list of options where users can select only one choice at a time, making mutually exclusive decisions clear.
  • Rating: Allows users to submit ratings or view average customer scores using interactive star icons with half-star precision.
  • Resizable: Allows users to adjust side-by-side workspace panels by dragging divider handles to fit their screen needs.
  • Scroll Area: Replaces standard browser scrollbars with custom, theme-styled scrollbars that appear smoothly when scrolling.
  • Scroll Text Reveal: Progressive character-by-character and word-by-word text reveal driven by scroll progress.
  • Scrollspy: Tracks the user’s scroll position on the page and automatically highlights the corresponding link in the table of contents.
  • Section Scrollspy: Floating section scrollbar that tracks the active heading as you scroll.
  • Select: Allows users to pick one or more options from a collapsible dropdown menu, keeping forms compact and easy to navigate.
  • Separator: Draws clean horizontal or vertical dividing lines between content blocks or tools to create clear visual separation.
  • 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: Provides a collapsible side navigation bar that organizes app pages into sections, supporting both desktop and mobile layouts.
  • Sign In: A complete sign in page block using our space components and primitives.
  • Skeleton: Displays animated placeholder shapes while content is loading, giving users immediate visual feedback and making apps feel faster.
  • Slide To Confirm: Tactile slide-to-confirm action slider with inertia spring physics.
  • Slider: Allows users to choose a numeric value or range smoothly by sliding a handle along a horizontal track with immediate visual feedback.
  • Smooth: Audio-reactive fluid WebGL orb. Swap ambient, microphone, or file input, change the texture, and toggle grain.
  • Sortable: Allows users to reorder items in a list or grid by dragging and dropping them with smooth layout animations.
  • Spinner: Displays an animated spinning ring while an action or page is loading, reassuring users that their request is being processed.
  • Splitting
  • 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.
  • Switch: Pattern-matching conditional container supporting Case and Default branches.
  • Table: Organizes structured records into clear rows and columns with column headers, hover highlights, and responsive layouts.
  • Tabs: Splits content into switchable tabs on a single screen, allowing users to view different sections of related information without reloading…
  • Team Roster Selector
  • Textarea: Allows users to type multi-line text, comments, or long descriptions with support for auto-expanding height as they write.
  • Textmoji: Renders every Unicode emoji in a string as an image sized to the surrounding text.
  • Theme Switcher
  • Theme Toggle: View Transition API theme switch with circle, blur, rectangle, and polygon reveals.
  • Thinking: 9 procedural Canvas 3D particle loader orbs representing AI cognitive states — working, searching, solving, listening, connecting…
  • Tick Slider: A scrubber drawn as a row of tick marks, backed by a real range input.
  • Timeline: Displays a vertical sequence of events, milestone dates, and activity logs connected by a timeline line.
  • Toast: Displays temporary popup notifications at the corner of the screen to confirm user actions, show progress, or report background updates.
  • Toggle: Provides a two-state button that users can press to turn a specific feature, view, or styling option on and off.
  • Toggle Group: Groups multiple toggleable buttons together so users can select single or multiple options, ideal for text styling toolbars.
  • Toolbar: Arranges formatting tools, action buttons, and dropdown controls into a compact, accessible toolbar for quick editing.
  • Tooltip: Displays a small floating text bubble when users hover over or focus on an element, explaining what that button or icon does.
  • Tournament Bracket: Animated knockout bracket with round navigation, live and finished matches, and elbow connectors.
  • User Presence Avatar: A compact avatar group for showing online and offline users, with smooth animated transitions when presence changes.
  • Voice Chat Widget: An expandable voice chat pill with participant avatars, animated speaking indicators, and a smooth pill-to-panel transition.
  • Words Preloader: Greeting cycle preloader that exits with a curved SVG wipe. Replay from the demo.

Browse by category