---
title: "SpaceClaim — Framer component · Best of Framer"
description: "$5.00 · Framer component · by gr8pixel · Buttons. What it is SpaceClaim is a polished, accessible call-to-action that invites visitors to claim a personal URL on your product…"
canonical: "https://framer.elliotli.dev/component/spaceclaim"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/SpaceClaim

# SpaceClaim

[View on Framer](https://framer.com/marketplace/components/spaceclaim/?via=elliot-li)

![SpaceClaim preview image 1](https://framer.elliotli.dev/og/component/spaceclaim/cb98ebf58bc1b370/1600x1200.jpg)

## Summary

What it is SpaceClaim is a polished, accessible call-to-action that invites visitors to claim a personal URL on your product (e.g., yourdomain.com/alex).

## Description

## What it is

**SpaceClaim** is a polished, accessible call-to-action that invites visitors to claim a personal URL on your product (e.g., yourdomain.com/alex). It rotates demo usernames until a user types, builds the final URL, and navigates on click or Enter. Every visual—from colors to radii to padding - is adjustable from the properties panel.

## Use-cases

-   **Early-access signup:** Let visitors reserve a unique handle (e.g., /alex) to join a beta or waitlist—clean CTA with instant feedback.
    
-   **Community/workspace onboarding:** Prompt new members to create a profile or team space URL before entering your app.
    
-   **Creator or brand pages:** Give creators a simple way to claim a public page (e.g., /studio-42) for portfolios, shops, or hubs.
    
-   **Event registration microsites:** Allow attendees to pick a memorable event URL (e.g., /mia-2025) for schedules, tickets, or recaps.
    
-   **Referral/campaign landing pages:** Pair with UTM capture so users pick a handle and you track source + conversion in one step.
    

## Key features

-   Rotating demo usernames (with smooth y-slide + fade) until the user types
    
-   URL composition: https://{domain}/{username} (adds protocol if omitted)
    
-   Submit by **button click** or **Enter**; optional “Open in new tab”
    
-   Fully styleable input & button (fill, border, text, radius, padding, font sizes/colors)
    
-   **Auto / Row / Column** layout with a “stack at width” breakpoint
    
-   One global font-family string (default: Sora, system-ui, sans-serif)
    
-   Lightweight, no external dependencies beyond Framer motion
    

## How to use (quick start)

1.  **Drop** the component onto your canvas.
    
2.  In the **properties panel**, set your **Domain** (e.g., app.example.com).
    
3.  Add a few **Demo usernames** (e.g., alex, john, team-acme).
    
4.  Choose **Layout**: Auto (with **Stack ≤ width**), Row, or Column.
    
5.  Customize **Input** and **Button** visuals to match your brand.
    
6.  Preview: type a handle or press **Enter / click** the button to navigate to https:// \[domain\] / \[username\].
    

## Tips & notes

-   If you pass yourdomain.com without a protocol, the component automatically uses https://.
    
-   Use hyphen-friendly demos (e.g., john-smith) so users mimic the right format.
    
-   To align with your site fonts, set **Font family** to your project’s stack, e.g. Inter, system-ui, sans-serif.
    
-   For compact UIs, pick **Layout → Column** and tighten **pad X/Y** and **radius**.
    

## Support

-   Add an email step after the handle to capture leads (single or double confirmation).
    
-   **Save sign-ups to a spreadsheet or database** via your preferred automation tool.
    
-   **Live handle checks**: format validation plus optional availability check against your API.
    
-   **Webhook/automation events** on submit to send data to your CRM or analytics.
    
-   **Personalized success flow** with confirmation screen or redirect.
    
-   **Analytics tracking** for view, focus, validation, and submit events.
    
-   **Prefill from URL parameters** (e.g., ?name=olivia) and capture campaign tags.
    
-   **Submission guards**: hidden-field check, basic rate limiting, debounce.
    
-   **Reserved-name filter** and content screening with custom error messages.
    
-   **Localization support** (including RTL) with externalized strings.
    
-   **Design polish**: micro-interactions, focus states, and accessible color contrast.
    
-   **Accessibility review**: ARIA labels, keyboard nav, visible focus rings.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #10819

## Details

- **Author**: gr8pixel
- **Price**: $5.00
- **Published**: 2025-11-26
- **Updated**: 2025-11-26
- **Added**: 2025-10-02
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything