Installation

Space UI is an open distribution of React components built on top of React 19, Base UI, Tailwind CSS v4, and Motion. It works seamlessly with the official shadcn CLI through custom registries.

Choose Your Integration

Select your framework or development workflow to get started:

Prerequisites & Compatibility

Ensure your project environment meets the minimum version requirements:

Quick Start (CLI)

If you already have a React project with Tailwind CSS configured, integrate Space UI in three simple steps:

pnpm dlx shadcn@latest init https://www.spaceui.one/r/lib-style.json

pnpm dlx shadcn@latest add @spaceui/primitives-dialog @spaceui/primitives-button

import { Dialog, DialogTrigger, DialogPopup, DialogTitle, DialogDescription, DialogClose } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'

export default function Page() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="primary">Open Dialog</Button>} />
      <DialogPopup>
        <DialogTitle>Welcome to Space UI</DialogTitle>
        <DialogDescription>
          State of the art animations, accessible Base UI primitives, and sensory micro-interactions.
        </DialogDescription>
        <div className="flex justify-end gap-2 mt-4">
          <DialogClose render={<Button variant="secondary">Dismiss</Button>} />
          <Button variant="primary">Confirm</Button>
        </div>
      </DialogPopup>
    </Dialog>
  )
}

Next Steps

Explore the core foundations and available component categories:

• Explore Primitives — Base UI animated primitives (Dialog, Menu, Tooltip, Tabs, Popover).
• Explore Components — High-level UI components, charts, and interactive tables.
• Sensory Hooks & Sounds — Haptic audio feedback and interaction utilities.
• Fundamentals & Theming — Color palettes, typography scales, and token systems.